diff --git a/.changeset/first-release.md b/.changeset/first-release.md
new file mode 100644
index 00000000..434c1343
--- /dev/null
+++ b/.changeset/first-release.md
@@ -0,0 +1,7 @@
+---
+"@plane/propel": minor
+---
+
+First release of Plane's design system: styled `elements`, batteries-included `components` covering
+the full Base UI anatomy, and the design-token stylesheet. Built on Base UI and Tailwind CSS v4;
+every component ships with product-focused Storybook stories and behavior tests.
diff --git a/docs/integration.md b/docs/integration.md
index 4d45adbb..e00973a6 100644
--- a/docs/integration.md
+++ b/docs/integration.md
@@ -33,8 +33,8 @@ for us.
    `propel-no-default-variants` convention.)
 2. **Design for what we know now.** Model only the props and parts we can justify
    today. Don't speculate.
-3. **Expose required changes through the `ui` layer as we learn.** When the refactor
-   proves a component needs an axis it doesn't have, add it to the `ui` primitive
+3. **Expose required changes through the `elements` layer as we learn.** When the refactor
+   proves a component needs an axis it doesn't have, add it to the `elements` primitive
    first, then let the `components` compositions follow.
 4. **Use _required_ props to find every call site.** When a component grows a new
    axis, make it **required** rather than defaulted, so TypeScript lights up every
@@ -140,7 +140,7 @@ component takes a `className` prop (see `propel-no-className-prop-internal`).
 The remaining work is to formalize component anatomy from what the stories already
 show, in three steps:
 
-1. **Define the `ui` component anatomy from the styles used in Storybook.** Where a
+1. **Define the `elements` component anatomy from the styles used in Storybook.** Where a
    story lays out a component with raw `<div className="flex …">`, that markup names
    a missing part. We've already redrawn these layout boundaries in the overlay
    stories (grouping `Title`+`Description` as an intro and the buttons as actions,
@@ -151,7 +151,7 @@ show, in three steps:
    group). Decide these names (and the open ownership questions — where padding
    lives, the corner-close treatment) with design. See
    [`design.md` → Component anatomy](./design.md#component-anatomy).
-3. **Define the new compositions for each `ui` primitive's API.** With the parts
+3. **Define the new compositions for each `elements` primitive's API.** With the parts
    named, give each primitive the parts as real surfaces, and update the
    `components`-tier ready-mades to compose them — so consumers stop writing raw
    layout and compose the anatomy instead.
diff --git a/packages/propel/AGENTS.md b/packages/propel/AGENTS.md
index e4c26934..8122d400 100644
--- a/packages/propel/AGENTS.md
+++ b/packages/propel/AGENTS.md
@@ -6,26 +6,30 @@ conflicts with an older habit, this wins.
 
 ## Tiers — what goes where
 
-Code flows in one direction only: **`base` → `ui` → `components` → `patterns`**. A tier may import
+Code flows in one direction only: **`base` → `elements` → `components` → `patterns`**. A tier may import
 from tiers below it, never above. `internal/` is shared implementation usable by any tier.
 
-| Tier           | Path                     | What it is                                                                                                                                                                                                                                           | May contain                                                                                                             |
-| -------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| **base**       | `src/base/<name>/`       | Extensions of Base UI — primitives we add where Base UI has a gap (e.g. `BaseTextArea` = `Field.Control` rendering `<textarea>`). Follow Base UI's conventions **exactly**: expose `className`, `style`, `render`, `forwardRef`. Named `Base<Name>`. | unstyled (no cva/Tailwind), but **passes `className`/`style` through** like any Base UI primitive                       |
-| **ui**         | `src/ui/<name>/`         | A `base`/Base UI primitive with cva style **baked in**, reduced to a **single** element. Same shape as `base` _minus_ `className`/`style` (the cva owns the styling). All styling lives here.                                                        | one element per part; cva in `variants.ts`; **does not expose `className`/`style`**; `useRender` for intrinsic elements |
-| **components** | `src/components/<name>/` | The composition layer: ready-made components that assemble `ui` parts so consumers don't hand-wire them.                                                                                                                                             | composition only — **no cva, no `cx`, no class strings**; **does not expose `className`/`style`**                       |
-| **patterns**   | `src/patterns/`          | App-level example compositions (demonstrations), not shipped primitives.                                                                                                                                                                             | composition of `components` only                                                                                        |
-| **internal**   | `src/internal/`          | Private shared implementation: class-string helpers (`node-slot`, `scrollbar`, `surface`), type utils (`variant-props`), internal compositions (`overlay-panel`). Not public API.                                                                    | extracted ONLY on cross-primitive duplication                                                                           |
-| **hooks**      | `src/hooks/<name>/`      | Hooks.                                                                                                                                                                                                                                               | —                                                                                                                       |
+| Tier           | Path                     | What it is                                                                                                                                                                                                                                                                                                                                         | May contain                                                                                                                    |
+| -------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| **base**       | `src/base/<name>/`       | Extensions of Base UI — primitives we add where Base UI has a gap (e.g. `BaseTextArea` = `Field.Control` rendering `<textarea>`). Follow Base UI's conventions **exactly**: expose `className`, `style`, `render`, `forwardRef`. Named `Base<Name>`.                                                                                               | unstyled (no cva/Tailwind), but **passes `className`/`style` through** like any Base UI primitive                              |
+| **elements**   | `src/elements/<name>/`   | A **styled intrinsic element**: one element via `useRender` with a cva baked in. **Base-UI-agnostic** — imports nothing from Base UI but `useRender`/`mergeProps`, and never wraps a Base UI or `base` primitive; the behavior grafts onto it in `components` via `render`. All styling lives here.                                                | one element per part via `useRender`; cva in `variants.ts`; **no `className`/`style`**; **no Base UI/`base` primitive import** |
+| **components** | `src/components/<name>/` | The composition **and behavior** layer: grafts Base UI (and `base`) behavior onto `elements` styled elements via `render`, and owns every Root, provider, portal, context, and default — assembling `elements` parts so consumers don't hand-wire them.                                                                                            | composition + grafts only — **no cva, no `cx`, no class strings**; **no `className`/`style`**                                  |
+| **patterns**   | `src/patterns/`          | App-level example compositions (demonstrations), not shipped primitives.                                                                                                                                                                                                                                                                           | composition of `components` only                                                                                               |
+| **internal**   | `src/internal/`          | Private shared implementation: shared **styled `useRender` primitives** (deduped elements — e.g. `positioner`, `backdrop`, `arrow`), class-string helpers (`node-slot`, `scrollbar`, `surface`, `field-control-surface`, `control-group`, `control-input`), type utils (`variant-props`), internal compositions (`overlay-panel`). Not public API. | extracted on cross-family duplication (rule of 3)                                                                              |
+| **hooks**      | `src/hooks/<name>/`      | Hooks.                                                                                                                                                                                                                                                                                                                                             | —                                                                                                                              |
 
 ## `index.tsx` re-exports
 
 - A component-dir `index.tsx` does **`export * from "./<file>"`** for each local public file — never
   a hand-enumerated `export { A, type B } from "./file"`. Every file in a component dir is public;
   if something must NOT be public, it lives in `src/internal` (or stays unexported in `variants.ts`).
+  Two blessed private exceptions the index deliberately does not export: a family's React context
+  module (`<name>-context.ts`, rule 7) and an intra-family shared composition marked by a `.shared`
+  suffix (`menu-content.shared.tsx`). Anything else unexported is a bug — either export it or move
+  it.
 - **A file exports only its own symbol(s)** — don't have one file re-export a sibling part (e.g.
   `button.tsx` must not `export { ButtonIcon } from "./button-icon"`); the index stars each file.
-- **Never `export *` from `ui` inside a `components` index** — it would re-export the `ui` element
+- **Never `export *` from `elements` inside a `components` index** — it would re-export the `elements` element
   the components ready-made replaces (name collision). Cross-tier re-exports stay **explicit**.
 - **Don't `export *` from `./variants`** — it holds cvas and the `<Name>VariantProps` cva-props
   bundle, which stay **private**: a part imports `<Name>VariantProps` for its own `Props` (rule 10)
@@ -36,72 +40,113 @@ from tiers below it, never above. `internal/` is shared implementation usable by
 
 ## Hard rules
 
-1. **One element per `ui` part.** A `ui` part renders a single element — a Base UI primitive, a
-   `base` primitive, or an intrinsic element via Base UI's `useRender`
-   (`useRender({ defaultTagName, render, props: mergeProps(defaults, props) })`, defaults first).
-   No `Context.Provider` wrap, no second element/frame, no baked default child (a slot renders
+1. **One element per `elements` part, via `useRender`.** An `elements` part renders exactly one **intrinsic**
+   element through Base UI's `useRender`
+   (`useRender({ defaultTagName, render, props: mergeProps(defaults, props) })`, defaults first),
+   with its cva baked into `className`. It imports **nothing** from `@base-ui/react` except
+   `useRender`/`mergeProps` — never a Base UI primitive, never a `base` primitive (rule 1a). No
+   `Context.Provider` wrap, no second element/frame, no baked default child (a slot renders
    `{children}`, never `children ?? <Default/>`), and no authored `render={<X/>}` that injects
    another component/behavior — forwarding the consumer's own `render` (the `useRender` mechanism)
    IS the render-capability and is fine; baking a specific render target is composition. If you
-   need more structure, add a NEW named `ui` part and compose the parts in `components`.
-
-1a. **The single element is the part's OWN primitive — never a foreign behavior it controls.** A
-`ui` part may wrap the Base UI primitive it _is_ (a specialization: `IconButton` wraps Base UI
-`Button`, a scroll frame wraps `ScrollArea`, a toggle pill wraps `Toggle`). It must NOT wrap a
-_different_ primitive's interactive behavior that it merely **controls or composes** — a section
-header is not a `Collapsible`, a menubar item is not a `Menu`, a table is not a `ScrollArea`. That
-graft lives in `components` (or a story) via `render`, with the styled `ui` part as the OUTER
-element so its `className` wins (`<ListSectionTrigger render={<Collapsible.Trigger />}>`) — so
-`ui/list` never imports `@base-ui/react/collapsible`; the section composition does. Litmus: does
-the part **IS-A** the primitive (specialization → wrap it) or **USE/CONTROL** it (foreign → graft
-it in `components`/a story)? `useRender` makes the `ui` part render-capable so the graft works.
-
-2. **All composition lives in `components`** (and `patterns`). Providers, multi-element frames,
-   defaults, and wiring belong here — never in `ui`.
-
-2a. **Icons (`lucide-react`) are a `components` concern.** A `ui` part is icon-agnostic: it never
+   need more structure, add a NEW named `elements` part and compose the parts in `components`.
+
+1a. **`elements` holds no behavior — the Base UI primitive grafts onto it in `components`.** An `elements` part
+is a _styled element_, not a Base UI part; it never imports `@base-ui/react/<primitive>`. Every
+Base UI behavior is wired in `components` (or a story, rule 2b) by grafting the Base UI part onto
+the styled `elements` element via `render`, **behavior part outer, styled part as the render target** —
+whether the primitive the part visually _is_ (`Autocomplete.Input`, `Dialog.Popup`), a foreign
+primitive it merely _controls_ (`Collapsible.Trigger` under a list section, a menubar item that
+opens a `Menu`), or a consumer-supplied control (`Clear`/`Trigger` as node props):
+
+```tsx
+<BaseAutocomplete.Input render={<AutocompleteInput magnitude="md" />} placeholder={…} />
+<BaseDialog.Popup render={<DialogPopup />}>…</BaseDialog.Popup>
+<BaseCollapsible.Trigger render={<ListSectionTrigger />}>…</BaseCollapsible.Trigger>
+<BaseAutocomplete.Clear render={iconButton} />
+```
+
+The styled part is the element that actually renders, so its cva `className` applies; the Base UI
+part contributes only behavior, props, and `data-*` state. Behavior-part-outer (styled part as the
+render target) is also what keeps managed-visibility affordances a11y-correct: when Base UI
+hides+unfocuses a `Clear`/`Trigger`, that state lands on the real rendered control, so a focusable
+node is never left `aria-hidden`. **An `elements` part exists for every styled DOM element in the anatomy
+— and only those:** a role that renders no element (`Root` context, `Portal`, `Provider`) has no
+`elements` part and lives in `components`, using Base UI directly. (A `Root` that _does_ render a styled
+container — `Accordion.Root`'s `<div>` — keeps its `elements` styled element, named per rule 5, with the
+behavior grafted in `components`.)
+
+2. **All composition AND behavior lives in `components`** (and `patterns`). The Base UI behavior
+   grafts (rule 1a), Roots, portals, providers, multi-element frames, context, defaults, and wiring
+   belong here — never in `elements`. An `elements` dir holds only styled elements and its `variants.ts`.
+
+2a. **Icons (`lucide-react`) are a `components` concern.** An `elements` part is icon-agnostic: it never
 imports `lucide-react`, rendering an icon as `{children}` (a slot) and sizing it through its cva
 (`[&>svg]:size-4`). The ready-made `components` part supplies the default icon —
 `{props.children ?? <Icon aria-hidden />}` (defaults belong in `components`, rule 2; the icon
-carries no `className`, so its size comes from the `ui` cva). `lucide-react` may be imported
-**only** in `components` source and in stories — never in `ui`, `base`, or `internal` source.
-
-2b. **`ui`/`base` stories stay in-tier.** A `ui` (or `base`) story imports only from `ui`/`base`
-(+ Base UI and external libs like `lucide-react`) — NEVER from `components`. To show what a
-`components` ready-made composes (e.g. a toolbar toggle = `ToolbarButton` + Base UI `Toggle`), build
-it from the `ui` atoms inline in the story.
-
-3. **`cva`/`cx` live only in `ui`; `className`/`style` exposure stops at `base`.** `base` follows
-   Base UI exactly and **exposes `className`/`style`** (it is unstyled — `ui` is what styles it).
-   `ui` and `components` do **not** expose `className`/`style`: `ui` bakes its styling into a cva
+carries no `className`, so its size comes from the `elements` cva). `lucide-react` may be imported
+**only** in `components` source and in stories — never in `elements`, `base`, or `internal` source.
+
+2b. **`elements` stories are pure UI-configuration showcases; behavior stories live in
+`components`.** An `elements` story renders the styled parts DIRECTLY — every visual axis
+(`magnitude`/`tone`/…) and every visual state, the states pinned statically via the `data-*`/aria
+attributes Base UI would set (`data-pressed=""`, `data-highlighted=""`, `data-panel-open=""`,
+`data-invalid=""`, `aria-current="page"`, …). It imports **nothing** from `@base-ui/react` and
+never from `components`, and it carries **no behavior `play` tests** (a hidden CSS canary asserting
+compiled styling is fine) — grafting, keyboard, and aria behavior are demonstrated AND tested in
+the family's `components` story. A `base` story is the exception: `base` parts ARE behavior, so
+their stories exercise it in-tier.
+
+2c. **A story that needs hooks uses the named-function render pattern.** Hooks belong in a render
+that is itself a component — write
+`render: function Render(args) { const [x, setX] = React.useState(…); return …; }` directly on the
+story. Never hoist a local example component above the meta and render `<SomeExample />` (it hides
+the composition from the Docs "Show code" panel), and never call hooks from an arrow render.
+
+3. **`cva`/`cx` live only in `elements`; `className`/`style` exposure stops at `base`.** `base` follows
+   Base UI exactly and **exposes `className`/`style`** (it is unstyled — `elements` is what styles it).
+   `elements` and `components` do **not** expose `className`/`style`: `elements` bakes its styling into a cva
    (the cva owns the class), `components` only composes. The `components` tier holds no class
-   strings, no `cx`, no cva — a styling need there means a missing `ui` part, so add the `ui` part.
+   strings, no `cx`, no cva — a styling need there means a missing `elements` part, so add the `elements` part.
 
 4. **No cross-component coupling.** A component derives its props and styling from its **own** cva
    — never from another component's `Props`, variant types, or cva. (Wrong: `IconButtonProps =
 Omit<ButtonProps, …>`, or `iconButtonVariants` calling `buttonVariants()`.) If two primitives
    share chrome, extract the shared cva/helper to `internal/` and have both depend on _that_.
 
+4a. **Dedupe identical styled elements into a shared `internal/` primitive.** An `elements` part is now a
+Base-UI-agnostic styled element, so families that render the _same_ styled element (byte-identical
+cva) must not each keep their own copy. When ≥3 families would repeat an element — the overlay
+`Positioner`, `Backdrop`, `Arrow`, a menu-style `Separator` — extract ONE shared styled `useRender`
+primitive to `internal/<element>` and graft it per-family in `components`
+(`<BaseMenu.Positioner render={<Positioner />}>`); the family does not keep or re-export its own.
+Keep `elements` lean — a family gets its OWN `elements` part only for an element it styles _distinctly_. (Rule
+of 3: two occurrences can wait, the third extracts. Divergent styling stays per-family.)
+
 5. **No `Root` suffix.** `Root` is a Base UI idiom propel does not use. The styled root element of
-   an anatomy is named after the part itself (`ui` `IconButton`, not `IconButtonRoot`); sibling
+   an anatomy is named after the part itself (`elements` `IconButton`, not `IconButtonRoot`); sibling
    anatomy parts are `IconButtonIcon`, `IconButtonSpinner`, etc. When a `components` ready-made
-   composes the same-named `ui` part, alias the import descriptively (e.g.
+   composes the same-named `elements` part, alias the import descriptively (e.g.
    `import { IconButton as IconButtonElement }`) — never `as IconButtonRoot`.
 
 6. **Name after the Base UI primitive; no synonyms.** `Menu` not `Dropdown`; `ScrollArea` not
    `Scroller`. One Base-UI-named API per concept.
 
-6a. **`ui` mirrors Base UI's anatomy.** Expose the same parts and roles Base UI defines, flattened
+6a. **`elements` mirrors Base UI's _styled_ anatomy.** Expose the same styled parts and roles Base UI defines, flattened
 from its dot-namespace to standalone exports: `Accordion.Root` → `Accordion`, `Accordion.Item`
 → `AccordionItem`, `Accordion.Trigger` → `AccordionTrigger`, `Accordion.Panel` →
 `AccordionPanel`. Don't invent a decomposition Base UI doesn't have, and don't collapse parts
 it separates. You MAY add extra named parts for a region Base UI bundles into one element but
 that needs its own styled element (e.g. `AccordionTriggerIndicator`), named for the region;
 those extra parts are composed in `components`. (Base UI ships no primitive? Add the missing
-anatomy in `base` first, following Base UI conventions, then style it in `ui`.)
+anatomy in `base` first, following Base UI conventions, then style it in `elements`.) Behavior-only roles
+that render no element (`Root` context, `Portal`, `Provider`) are not `elements` parts (rule 1a) — they
+live in `components`, keeping their flattened Base-UI name (`Autocomplete`, not `AutocompleteRoot`).
+An identical styled element shared across families is a single `internal/` primitive, so the family
+does not re-export it (rule 4a).
 
 6b. **Custom prop names never reuse a native HTML/CSS attribute name.** `width`, `height`, `size`,
-`type`, `color` are off-limits as style/layout props — a `ui` part is render-capable, so the name
+`type`, `color` are off-limits as style/layout props — an `elements` part is render-capable, so the name
 would collide with the element's own attribute (and confuse readers). Use the controlled axis
 vocabulary instead: `variant`, `tone`, `magnitude`, `emphasis`, `surface`, `density`, `elevation`,
 `orientation`, `sizing`. (Full-width-vs-hug is `sizing: "hug" | "fill"` — mirroring Figma's resize —
@@ -125,34 +170,62 @@ the SUFFIX).** This one is error-prone — apply it literally:
 - A part _of_ a component takes the component as a **prefix**: `ButtonIcon`, `ButtonLabel`,
   `AccordionTrigger`, `MenuItem` (mirrors Base UI anatomy, 6a).
 - A standalone component is named **`<qualifier><family>`** where the **suffix = the visual family it
-  presents as** (what it _looks like_) and the **prefix = what distinguishes it** — a content trait
-  (`IconButton` = icon-only Button) or, when the element differs from the look, **the real element**.
-
-Two-step decision (do them in this order):
-
-1. **What does it look like?** → that is the **suffix** (the family). _Never_ put the element in the suffix.
-2. **What distinguishes it** (a content trait, or its real element when that differs)? → the **prefix**.
-
-For element×look families it reduces to **`<element><look>`** — prefix = the element it IS, suffix =
-the look it wears; when they coincide it collapses to one word:
-
-| it IS a…                | looks like a **Button** | looks like a **link** |
-| ----------------------- | ----------------------- | --------------------- |
-| **`<button>`** (action) | `Button`                | `ButtonAnchor`        |
-| **`<a>`** (navigation)  | `AnchorButton`          | `Anchor`              |
-
-**The trap I kept falling into:** a navigation `<a>` dressed as a button is **`AnchorButton`** —
-`Anchor` (its real `<a>` element) + `Button` (the look) — **not** `ButtonAnchor`. Conversely a
-`<button>` dressed as an inline link is **`ButtonAnchor`** — `Button` (real `<button>`) + `Anchor`
-(the look). Picking the suffix from the _look_, not the element, is what makes it consistent with
-`IconButton`. A specialization has its own parts, prefixed with its full name: `AnchorButton` →
-`AnchorButtonIcon`, `AnchorButtonSpinner`.
-
-7. **React context is a `components` concern — definition, provider, AND consumption.** A `ui`
+  presents as** (what it _looks like_) and the **prefix = a distinguishing content trait**
+  (`IconButton` = icon-only Button, `AnchorButton` = link-styled Button).
+
+**The element is NOT part of the name — it is a `render` concern.** Everything interactive here is
+a Base UI `Button` graft; ONE component exists per LOOK, defaulting to `<button>`, and real
+navigation renders an `<a>` through the same API (`nativeButton={false}` +
+`render={<a href=… />}`):
+
+| Look                    | Component                             | As a nav link                         |
+| ----------------------- | ------------------------------------- | ------------------------------------- |
+| button chrome           | `Button`                              | `nativeButton={false} render={<a />}` |
+| icon-only button chrome | `IconButton`                          | same                                  |
+| inline text-link look   | `AnchorButton` (a link-styled Button) | same                                  |
+
+There is no `Anchor`, no `ButtonAnchor`, and no per-element twin family — those were collapsed
+(2026-07): the old `<a>`-element variants are the `render` form of the look-named component. A
+specialization still has its own parts, prefixed with its full name (`AnchorButtonLabel` if one
+existed).
+
+6e. **Slot parts use Base UI's suffix vocabulary — `Icon`, `Indicator`, `Group`, `Spinner`; never
+`Slot` or `Node`.** Name the part for its slot _usage_, the way Base UI does:
+
+- **`<Part>Icon`** — a decorative single-glyph slot. Bakes `aria-hidden` and sizes its child via
+  the shared `nodeSlotClass` + inherited `--node-size` (`internal/node-slot`) — never an ad-hoc
+  `[&>svg]:size-*`. A family gets its OWN icon part only for genuinely distinct styling (toast/
+  banner/alert-dialog tones, avatar's scale, autocomplete/combobox focus-brightening); an icon slot
+  that is only a tint/size of the shared chrome is the internal `Icon` (`tint`/`magnitude` axes,
+  defaulting to `inherit`), composed by the `components` ready-made — icon-shaped controls
+  (`IconButton`, `Toggle`, `ToolbarButton`, `ToolbarToggle`) wrap their bare svg children in it
+  themselves, so consumers pass a bare glyph.
+- **`<Part>Indicator`** — a state-reflecting part. Keep Base UI's own names where they exist
+  (`ItemIndicator` for a selected marker, `Tabs`/`Progress`/`Meter`/`Slider` `Indicator` for
+  geometry). Disclosure carets are ONE internal `DisclosureIndicator` (pass a **chevron-down**;
+  `motion: disclose | pointEnd | flip`, `tint`, `magnitude`) composed at the trigger — the trigger
+  part carries `group` and the caret reads `data-panel-open`/`data-popup-open`. Only carets with
+  family-specific state selectors keep their own part (`TableCellTriggerIndicator`).
+- **`<Part>Spinner`** — pending-state glyphs are the internal `Spinner` unless a family styles its
+  own (`PaginationSpinner`).
+- **`<Part>Group`** — a wrapper element holding consumer-provided node(s) or controls
+  (`ToastActionGroup`, `ToastCloseGroup`, `ComboboxInputGroup`). Never `aria-hidden` (its content
+  may be interactive or meaningful).
+
+A wrapper whose styling is _exactly_ `nodeSlotClass` (no positioning, tint, or size of its own) is
+not a part at all — compose the internal `NodeSlot` in `components` instead (`Tab`, `TableCell`).
+Consumer-provided node **props** follow the same convention: name the prop for the slot it fills,
+Base UI style (`placeholder`, `title`, `description`), never a `Node` suffix — `icon` fills the
+family's single `Icon` slot; `startIcon`/`endIcon` fill dual `Icon` slots (bare `start`/`end` is
+the logical-direction vocabulary, like Drawer's `side`); `trailing` fills `MenuItemTrailing`;
+`meta` fills `MenuLabelMeta`; a consumer-provided control is named for its role (`decrement`,
+`increment`).
+
+7. **React context is a `components` concern — definition, provider, AND consumption.** An `elements`
    part never calls `useContext`; it takes the shared value (`variant`/`magnitude`/`density`/…) as
    a **prop**. The context's `createContext` + `Provider` + the `useContext` read all live in
    `components`; the consuming `components` part reads the context and passes the value down,
-   omitting it from its own public API. (The value _type_ may stay in `ui`, derived from the cva.)
+   omitting it from its own public API. (The value _type_ may stay in `elements`, derived from the cva.)
 
 7a. **Don't destructure props you don't use.** Spread `{...props}` straight through to the
 element; pull a prop out of the signature only to transform, redirect, or omit it. Never peel
@@ -207,7 +280,7 @@ govern this: `variant` is too vague (6c), and native HTML/CSS attribute names ar
 
 ## Variants & variant-prop types
 
-8. **One cva per `ui` part, in `ui/<name>/variants.ts`, named `<camelCasePartName>Variants`.**
+8. **One cva per `elements` part, in `elements/<name>/variants.ts`, named `<camelCasePartName>Variants`.**
    `Menu` → `menuVariants`, `IconButton` → `iconButtonVariants`, `AccordionTriggerTitle` →
    `accordionTriggerTitleVariants`. No generic names (`rootVariants`, `groupVariants`, …).
 
@@ -233,7 +306,7 @@ govern this: `variant` is too vague (6c), and native HTML/CSS attribute names ar
 10. **The component's `Props` use `<Name>VariantProps` directly — no hand-built "own props".**
 
     ```ts
-    export type IconButtonProps = Omit<BaseButton.Props, "className" | "style"> &
+    export type IconButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
       IconButtonVariantProps;
     ```
 
@@ -256,18 +329,19 @@ govern this: `variant` is too vague (6c), and native HTML/CSS attribute names ar
     >;
     ```
 
-13. **Any real default, when introduced, is a `components` concern**, not `ui` — the ready-made
-    resolves the effective value (from context or its own fallback) and passes it to the `ui`
+13. **Any real default, when introduced, is a `components` concern**, not `elements` — the ready-made
+    resolves the effective value (from context or its own fallback) and passes it to the `elements`
     primitive, which itself has no default.
 
 ## Before you commit
 
-- [ ] Every touched `ui` part renders one element; no `className` prop anywhere.
-- [ ] No `ui` part wraps a foreign Base UI behavior it merely controls (another primitive's `Trigger`/`Toggle`/…) — graft it in `components`/a story via `render` (rule 1a).
-- [ ] cva only in `ui/.../variants.ts`, named after the part, no `Root`, no generic names.
+- [ ] Every `elements` part renders one intrinsic element via `useRender`; imports nothing from `@base-ui/react` but `useRender`/`mergeProps`; no `className` prop anywhere.
+- [ ] No `elements` part imports a Base UI or `base` primitive — all behavior is grafted in `components` via `render` (behavior part outer, styled part as render target); behavior-only roles (`Root`/`Portal`/`Provider`) live in `components` (rules 1a, 2).
+- [ ] Identical styled elements across ≥3 families are one shared `internal/` primitive, not per-family copies (rule 4a).
+- [ ] cva only in `elements/.../variants.ts`, named after the part, no `Root`, no generic names.
 - [ ] Props use the axis vocabulary — no `variant`, no native attribute names (`size`/`width`/`type`/`color`); per-axis types named for the axis, cva-props type stays `<Name>VariantProps`.
-- [ ] Variant types via `StrictVariantProps` in `variants.ts`; `Props = Omit<Base.Props, "className" | "style"> & <Name>VariantProps`.
+- [ ] Variant types via `StrictVariantProps` in `variants.ts`; `Props = Omit<useRender.ComponentProps<"tag">, "className" | "style"> & <Name>VariantProps`.
 - [ ] No borrowing of another component's `Props`/cva/variant types; shared styling lives in `internal/`.
 - [ ] No `defaultVariants` (every axis required) unless a real default is intentionally introduced.
-- [ ] Context (if any) defined + provided + consumed in `components`; `ui` is prop-driven.
+- [ ] Context (if any) defined + provided + consumed in `components`; `elements` is prop-driven.
 - [ ] Run a **full** `vp check --fix` (not scoped, not `--no-fmt`) and `vp test` — both green — before pushing.
diff --git a/packages/propel/docs/icon-button-dedup-review.md b/packages/propel/docs/icon-button-dedup-review.md
deleted file mode 100644
index 45dbaddd..00000000
--- a/packages/propel/docs/icon-button-dedup-review.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Dismiss / close / clear → IconButton dedup — review list
-
-`IconButton` (ui + the ready-made `components/icon-button`) is propel's canonical icon-only button:
-`prominence` (primary/secondary/tertiary/ghost) · `tone` (neutral/danger) · `magnitude`
-(**sm = 20px box / 14px glyph**, md = 24px / 16px, lg = 28px / 16px, xl = 32px / 20px); `aria-label`
-required; glyph passed as `children`. Several dismiss/close/clear parts re-implement it instead of
-composing it.
-
-## Two render directions (important)
-
-Whether `IconButton` is the **outer** element or the `render` **target** depends on whether the Base
-UI behavior **manages its own focusability/visibility**:
-
-- **Always-present behavior** (Dialog/Drawer/Popover/AlertDialog `Close`) → **IconButton outer**:
-  `<IconButton render={<DialogClose />}>`. The styled primitive's className wins; nothing to preserve.
-- **Managed-visibility behavior** (Autocomplete/Combobox `Clear` — sets `aria-hidden` and drops out
-  of the tab order when the input is empty) → **behavior outer**:
-  `<AutocompleteClear render={<IconButton …/>} />`. The behavior stays the element so Base UI's
-  managed `aria-hidden`/`tabindex` survive; `IconButton` only customizes the look. The other way makes
-  the empty-state Clear a focusable `aria-hidden` button → axe `aria-hidden-focus` failure.
-
-## Done
-
-- **`BannerDismiss`** — removed. The `Banner` has no dismiss API (no `onDismiss`/`dismissLabel`); a
-  dismiss is just a ghost `IconButton` the consumer renders in the `actions` slot.
-- **`SearchClear`** — removed; `Search` / `ExpandableSearch` now render `IconButton` (ghost/neutral,
-  sm → md by search size) for the clear action.
-- **`AutocompleteClear` / `AutocompleteTrigger`** — destyled to pure behavior wrappers; the field +
-  stories render them behavior-outer (`<AutocompleteClear render={<IconButton …/>} />`,
-  ghost/neutral/md). `autocompleteButtonVariants` and the obsolete components-tier wrappers deleted.
-- **`ComboboxClear` / `ComboboxTrigger`** — same as autocomplete (behavior-outer, ghost/neutral/md).
-  `comboboxButtonVariants` and the obsolete components-tier wrappers deleted.
-- **`NumberFieldIncrement` / `NumberFieldDecrement`** — destyled to behavior wrappers; the stepper
-  renders `IconButton` behavior-outer (magnitude passed through, `−`/`+` glyphs). `numberFieldButtonVariants`
-  and the `NumberFieldButtonIcon` slot deleted.
-- **`ToastClose`** — destyled to a behavior wrapper; the close is now an `IconButton` (ghost/neutral/sm,
-  IconButton-outer). Its `absolute inset-e-1 top-1` **4px corner offset** moved to a new `ToastCloseSlot`
-  ui part (position is toast layout; chrome is the IconButton). `toastCloseVariants` deleted.
-
-## Deleted
-
-- **`BadgeDismiss`** (`ui/badge`) — removed as non-canonical. The badge spec is two symmetric node
-  slots (`inlineStartNode` / `inlineEndNode`), not a dismiss button — so the part, its
-  `badgeDismissVariants` cva, the exports, and the UI/Badge `WithDismiss` story are all gone.
-
-## Keep as-is (already correct)
-
-`DialogClose` / `DrawerClose` / `PopoverClose` / `AlertDialogClose` — pure Base UI behavior wrappers
-with **no styling**; the intended IconButton-outer `render` target
-(`<IconButton render={<DialogClose />}>`). Not redundant.
diff --git a/packages/propel/docs/proposals/nav-item-redesign.md b/packages/propel/docs/proposals/nav-item-redesign.md
deleted file mode 100644
index 0d021fc5..00000000
--- a/packages/propel/docs/proposals/nav-item-redesign.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# Proposal: introduce `List` / `ListItem`; absorb `nav-item`
-
-Status: draft for design + engineering review
-Affects: `@plane/propel` — new `ui/list` + `ui/list-item` (+ section label); removes/absorbs `ui/nav-item`
-Author: (pending)
-
-## Summary
-
-`nav-item` models a sidebar row as a single polymorphic `useRender` **button** (`NavItem`) that bakes
-in its icon, label, trailing content, an `open` chevron, and a custom `data-active`. Every real
-design we have — workspace settings, the app sidebar in three states — shows a sidebar is an
-**interactive list**: a `<ul>` of `<li>` rows, where a row _hosts_ a link (or a collapsible trigger)
-plus optional sibling actions, and groups are `Collapsible`.
-
-Base UI's _public_ primitives don't fit semantically (below), but its **`Composite`** engine — the
-roving-focus base that `Toolbar` (`Toolbar.Button`/`Toolbar.Link`) and `Menu` (`Menu.Item`/
-`Menu.LinkItem`) are built on — _is_ exactly the interactive-list pattern. So propel defines a generic
-**`List` + `ListItem`** on top of `Composite`, and composes the sidebar from it. `nav-item`'s bespoke
-pieces collapse onto that pattern + existing primitives; the genuinely-new part is the row chrome.
-
-## Why it isn't `NavItem`/`navbar`/`NavigationMenu`
-
-Base UI's nomenclature decides this:
-
-- **`NavigationMenu`** (propel already wraps it) is the **floating flyout** menu-bar pattern —
-  `Positioner`/`Popup`/`Portal`/`Viewport`/`Arrow`. Not a persistent sidebar.
-- **`Menu`/`Menubar`** are dismissible **command popups** (`role="menu"`). A sidebar is persistent
-  navigation, not a command surface.
-- **`Toolbar`** is a button row.
-- There is **no `List`, `Tree`, or `Sidebar`** in Base UI. `role="tree"` is explorer-style
-  single-select keyboard nav — wrong for sidebar navigation.
-
-What it is, semantically, is a `<ul role="list">` of `<li>` rows. "navbar" implies a horizontal bar;
-this is a vertical list whose **primary** use is sidebars but which is reusable for any row list
-(settings panels, command lists). So: **`List` + `ListItem`**, with navigation supplied by what you
-compose inside (a link, the `<nav>` landmark).
-
-## Built on Base UI `Composite` (the interactive-list engine)
-
-Base UI _does_ ship this pattern — as the internal **`Composite`** primitive
-(`@base-ui/react/internals/composite`: `CompositeRoot` + `CompositeItem`), the roving-tabindex engine
-that **`Toolbar`** and **`Menu`** are built on. The element-per-item split we want is literally Base
-UI's own convention:
-
-|                     | `CompositeRoot` (one tab stop, arrow-key roving) | `CompositeItem` → `<button>` | `CompositeItem` → `<a>` |
-| ------------------- | ------------------------------------------------ | ---------------------------- | ----------------------- |
-| Toolbar             | `Toolbar.Root` (`role="toolbar"`)                | `Toolbar.Button`             | `Toolbar.Link`          |
-| Menu                | `Menu`                                           | `Menu.Item`                  | `Menu.LinkItem`         |
-| **List (proposed)** | **`List`**                                       | **`ListItemButton`**         | **`ListItemLink`**      |
-
-So `List` builds on the same engine, and the link/button split (rule 6c) is Base UI's, not ours:
-
-- **`List`** = a `CompositeRoot` (vertical, `loopFocus`) → roving-tabindex keyboard nav for free.
-- **`ListItemLink`** = `CompositeItem` rendering `<a aria-current="page">` (render-capable for a
-  router `<Link>`) — exactly `Toolbar.Link`/`Menu.LinkItem`.
-- **`ListItemButton`** = `CompositeItem` rendering `<button>` — exactly `Toolbar.Button`/`Menu.Item`;
-  this is what "More" uses.
-
-**Tier placement.** `CompositeRoot`/`CompositeItem` live under `@base-ui/react/internals` (an exported
-but lower-level path — it's what Base UI's own `Toolbar`/`Menu` import). So the `Composite` wrapper
-belongs in propel's **`base`** tier (the slot for Base-UI-gap primitives, exposing `className`/
-`render`), mirroring how `Toolbar.Root` wraps `CompositeRoot`; `ui/list` then styles it. Tradeoff to
-flag: depending on `internals` is a less-stable surface than a top-level subpath.
-
-**Open a11y decision.** `Composite` is role-agnostic (`Toolbar` layers `role="toolbar"` on top). A
-collapsible, nested sidebar with roving focus is closest to an ARIA **tree** (`tree`/`treeitem`/
-`group`); a flat settings list is closer to a `navigation` region of links. Which role(s) `List`
-carries — and whether trailing actions are their own composite stops — needs an a11y pass.
-
-## What the designs show
-
-Four contexts, one anatomy:
-
-| Context                 | Sections                                       | Row contents                       | States                              |
-| ----------------------- | ---------------------------------------------- | ---------------------------------- | ----------------------------------- |
-| Workspace settings      | **static** label groups + dividers             | icon + label                       | selected                            |
-| App sidebar (default)   | **collapsible** (`Workspace`/`Projects`/`Try`) | icon/avatar + label, "… More" rows | —                                   |
-| App sidebar (collapsed) | a section collapsed (chevron rotated)          | —                                  | **selected** row (filled)           |
-| App sidebar (hover)     | —                                              | —                                  | row reveals a trailing **× action** |
-
-Two facts decide the design:
-
-1. **A row hosts more than one interactive thing.** The hover `×` sits _beside_ the label — invalid
-   inside a single `<a>`/`<button>`. The row is a **container** with siblings. (`NavItemHeader`
-   already proves this — it "holds a `NavItemHeaderToggle` … and an action **as siblings**".)
-2. **Sections are `Collapsible`-or-static, same rows inside.**
-
-## Principle
-
-Translate the design's states to standard attributes (`aria-current`, `data-panel-open`,
-`data-disabled`) and its pieces to existing primitives (`Collapsible`, `Anchor`, `Badge`, `Avatar`,
-`IconButton`, `Separator`). Build only what's missing — here, the list container + the row chrome.
-
-## Proposed anatomy
-
-```
-<nav aria-label="…">                       ← landmark supplied by the consumer/app
-  header / "New work item"                 ← title + IconButton / Button — NOT list parts
-
-  List  = CompositeRoot (roving vertical focus, loopFocus) — base wrapper over @base-ui/react/internals/composite
-    │
-    ├─ ListItem  (row wrapper, position:relative — chrome: hover + selected fill via :has, indent; not focusable)
-    │     ├─ primary CompositeItem, ::after covers its own box → the row content clicks through:
-    │     │     ListItemLink   → <a aria-current="page"> (router <Link>)   like Toolbar.Link / Menu.LinkItem
-    │     │     …or ListItemButton → <button>                              like Toolbar.Button / Menu.Item ("More")
-    │     │     holds: ListItemIcon (icon OR Avatar) + ListItemLabel + Badge (count — inside, so it's
-    │     │            part of the row's click + name, e.g. "Inbox 6")
-    │     └─ sibling actions (sit outside the link's box, keep their own clicks): IconButton (× / add)
-    │
-    ├─ Collapsible                          ← every section; non-collapsible = degenerate (no trigger)
-    │     CollapsibleTrigger → ListItem(section label + chevron ↻ data-panel-open  [+ IconButton action])
-    │     CollapsiblePanel   → List → ListItem…   (nested)
-    │
-    └─ Separator                            ← divider
-```
-
-A non-collapsible section (settings today) is the same `Collapsible` shape without a trigger — so
-settings can adopt collapse as it scales without a structural change.
-
-### State → attribute (no custom props)
-
-| State        | Today                                               | Proposed                                                                                 |
-| ------------ | --------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| current page | `active` → custom `data-active` (+ `aria-current`)  | `aria-current="page"` on the `Anchor`; `ListItem` fill via `:has([aria-current="page"])` |
-| section open | `NavItemChevron` `open` prop + hand-set `data-open` | `Collapsible`'s `data-panel-open`; chevron rotates off it                                |
-| hover        | the row button                                      | the `ListItem` container; sibling actions revealed via `group-hover`                     |
-| disabled     | —                                                   | `data-disabled` when needed                                                              |
-
-## `nav-item` → `List`/`ListItem` mapping
-
-| Today (13 `nav-item` parts)                             | Disposition                                                                         |
-| ------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `NavItem` (`useRender` `<button>`)                      | **→ `ListItem`** (row-wrapper) + a `ListItemLink` child for the link                |
-| `NavItemIcon`, `NavItemLabel`                           | **→** `ListItemIcon` / `ListItemLabel`                                              |
-| `NavItemTrailing`                                       | **dropped** — a count is a `Badge` sibling, hover actions are `IconButton` siblings |
-| `NavItemCount`                                          | **drop → `Badge`** (confirmed in review)                                            |
-| `NavItemChevron` (manual `open`)                        | **drop →** one chevron part riding `data-panel-open`                                |
-| `NavItemGroup` / `NavItemPanel` / `NavItemHeaderToggle` | **drop →** Base UI `Collapsible` / `CollapsiblePanel` / `CollapsibleTrigger`        |
-| `NavItemHeader`                                         | **→** the `CollapsibleTrigger`/static section header row (a `ListItem` shape)       |
-| `NavItemHeaderLabel`                                    | **→ section-label** part (serves both collapsible + static)                         |
-| `NavItemHeaderIndicator`                                | **keep as the chevron** — already rides `data-panel-open` (the model)               |
-| `NavItemHeaderAction`                                   | **→** an `IconButton` sibling (same role for row hover actions)                     |
-
-### New vs reused
-
-- **New:** `List` (a role-flexible `Composite`), `ListItem` (the row-wrapper chrome,
-  `position:relative`), a section-label part, and the **primary** — a row link/action carrying the
-  icon slot + label, with an `::after` over its own box for the click target. Per rule 6c the link and
-  the action are two elements (`<a>` vs `<button>`); when both exist the shared stretch/content chrome
-  lives in `internal/` and both depend on it. The link is built like `Anchor`/`AnchorButton` (default
-  `<a>`, render-capable for the router `<Link>`) but carries the row's text, not the inline-link palette.
-- **Reused as-is:** `Collapsible`, `Badge`, `Avatar`, `IconButton`, `Separator`, `Button`.
-
-## Scope boundary
-
-propel ships the **`List` primitives**. The full "Sidebar" region (header/footer, collapse-to-rail)
-is app-level composition (propel's no-app-components stance) — propel may demo it in `patterns` and
-stories, but does not ship a `Sidebar` component.
-
-## Impact
-
-- Breaking: `NavItem`\* parts are replaced by `List`/`ListItem` + Base UI `Collapsible` + existing
-  primitives. Only in-repo consumers are stories, so migration is contained.
-- a11y improves: real `aria-current` link; `aria-expanded` from `Collapsible`; hover actions are
-  focusable siblings, not trapped in a button.
-
-## Design decisions (from review)
-
-1. **Whole-row click; buttons restrict their own area.** The entire row is the navigation target;
-   where a row carries icon buttons (add, ×) that sub-area belongs to the button. → **stretched-link
-   pattern**: the primary (`ListItemLink`) carries an `::after` over its own flex box, so the row's
-   content area follows the link; sibling action buttons sit outside that box and keep their own
-   clicks (no z-raise needed).
-2. **Count = `Badge`.** Drop `NavItemCount`, reuse `Badge` as-is.
-3. **Sections may collapse — including settings — as it scales.** So **don't** build a separate
-   "static section": model every section as a `Collapsible` (header `Trigger` + `Panel`); a
-   non-collapsible section is the degenerate case (no trigger), built the same way, so settings can
-   adopt collapse with no rebuild.
-4. **"More" is a list row, "New work item" is a `Button`.** "More" opens the extended sidebar and is
-   styled as a row, so it's a **`ListItem` whose primary element is a `<button>`** (an action, not a
-   link) — same row chrome as nav rows (rule 6c: different element/semantics, same look). It is _not_
-   a standalone Ghost `Button`: a Ghost button has button geometry (hug + its own padding) and
-   wouldn't sit flush with the full-width, indented nav rows. "New work item" is a separate `Button`
-   above the list.
-5. **One icon slot, two ways.** A single `ListItemIcon` slot holds either a monochrome icon or an
-   `Avatar`; the cva sizes it. No second slot.
-
-Net new wrinkle from #1 + #4: `ListItem`'s primary clickable element is **either an `Anchor`
-(`<a>`, navigation, `aria-current`) or a `Button` (`<button>`, action like "More")** — two elements
-per rule 6c, sharing the stretched-row chrome, so that chrome goes to `internal/`.
-
-## Next step
-
-On sign-off: build `ui/list`, `ui/list-item` (+ the link/section-label parts), then a
-`components` layer that composes the collapsible/static section shapes, and port the `nav-item`
-stories onto it. Chevron, count, groups, panels, and active/open all resolve to existing primitives
-
-- standard attributes.
diff --git a/packages/propel/package.json b/packages/propel/package.json
index 5acc6aad..8c60ccdb 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -34,9 +34,9 @@
       "types": "./dist/base/*/index.d.ts",
       "import": "./dist/base/*/index.js"
     },
-    "./ui/*": {
-      "types": "./dist/ui/*/index.d.ts",
-      "import": "./dist/ui/*/index.js"
+    "./elements/*": {
+      "types": "./dist/elements/*/index.d.ts",
+      "import": "./dist/elements/*/index.js"
     },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
@@ -55,7 +55,7 @@
     "provenance": true
   },
   "scripts": {
-    "build": "vp pack",
+    "build": "node ./scripts/pack-retry.mjs",
     "check": "vp check",
     "dev": "vp pack --watch",
     "prepublishOnly": "vp run build",
@@ -64,9 +64,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@base-ui/react": "^1.5.0",
+    "@base-ui/react": "catalog:",
     "class-variance-authority": "^0.7.1",
-    "lucide-react": "^1.18.0",
+    "lucide-react": "catalog:",
     "react-day-picker": "^10.0.1"
   },
   "devDependencies": {
@@ -77,23 +77,23 @@
     "@storybook/addon-themes": "^10.4.6",
     "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
-    "@tailwindcss/vite": "^4.3.1",
+    "@tailwindcss/vite": "catalog:",
     "@types/node": "^25.6.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260509.2",
+    "@typescript/native-preview": "catalog:",
     "@vitest/browser-playwright": "4.1.9",
     "@vitest/coverage-v8": "4.1.9",
-    "playwright": "^1.61.0",
+    "playwright": "catalog:",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "storybook": "^10.4.6",
     "storybook-addon-pseudo-states": "^10.4.6",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "catalog:",
     "typescript": "^6.0.3",
     "vite-plus": "catalog:",
     "vitest": "4.1.9",
-    "wrangler": "4.100.0"
+    "wrangler": "4.106.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/propel/scripts/pack-retry.mjs b/packages/propel/scripts/pack-retry.mjs
new file mode 100644
index 00000000..f12a0184
--- /dev/null
+++ b/packages/propel/scripts/pack-retry.mjs
@@ -0,0 +1,41 @@
+// CI runs the browser test suite immediately before the build in the same job, and the build's
+// spawn burst (tsdown's dts workers, then attw/publint) lands while chromium's process tree is
+// still being reaped — fork intermittently fails with EAGAIN (os error 11). Two defenses:
+//
+// 1. On CI, settle BEFORE the first attempt so the reap finishes.
+// 2. Retry with delays. The sleep must not itself spawn a process (under EAGAIN a child-process
+//    sleep fails instantly, retrying straight into the same pressure window — the exact failure
+//    mode this script previously had), so it blocks in-process via Atomics.wait.
+import { spawnSync } from "node:child_process";
+import process from "node:process";
+
+const sleep = (ms) => {
+  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+};
+
+const pack = () => {
+  const result = spawnSync("vp", ["pack"], { stdio: "inherit" });
+  if (result.error) console.log(`vp pack failed to spawn: ${result.error.message}`);
+  return result.status ?? 1;
+};
+
+const ATTEMPTS = 3;
+const SETTLE_MS = 10_000;
+
+if (process.env.CI) {
+  console.log(`CI: settling ${SETTLE_MS / 1000}s before the build (browser-suite process reap)…`);
+  sleep(SETTLE_MS);
+}
+
+let status = 1;
+for (let attempt = 1; attempt <= ATTEMPTS; attempt++) {
+  status = pack();
+  if (status === 0) break;
+  if (attempt < ATTEMPTS) {
+    console.log(
+      `vp pack attempt ${attempt} failed (status ${status}) — retrying in ${SETTLE_MS / 1000}s…`,
+    );
+    sleep(SETTLE_MS);
+  }
+}
+process.exit(status);
diff --git a/packages/propel/src/base/composite/composite-item.tsx b/packages/propel/src/base/composite/composite-item.tsx
index c6113588..05bbff9a 100644
--- a/packages/propel/src/base/composite/composite-item.tsx
+++ b/packages/propel/src/base/composite/composite-item.tsx
@@ -7,8 +7,8 @@ type BaseCompositeItemProps = BaseCompositeItem.Props<unknown, Record<string, ne
  * The item half of Base UI's roving-tabindex `Composite`. Renders a `<div>` by default; pass
  * `render` (or `tag`) to make it the element the row needs — an `<a>` (like
  * `Toolbar.Link`/`Menu.LinkItem`) or a `<button>` (like `Toolbar.Button`/`Menu.Item`). It reads its
- * parent `Composite`'s context automatically, so it only works inside one. Unstyled — `ui` layers
- * the look on top.
+ * parent `Composite`'s context automatically, so it only works inside one. Unstyled — `elements`
+ * layers the look on top.
  *
  * See the `@internal` isolation note on `Composite`.
  */
diff --git a/packages/propel/src/base/composite/composite.stories.tsx b/packages/propel/src/base/composite/composite.stories.tsx
index 3ed098ed..e91fed23 100644
--- a/packages/propel/src/base/composite/composite.stories.tsx
+++ b/packages/propel/src/base/composite/composite.stories.tsx
@@ -4,7 +4,7 @@ import { expect } from "storybook/test";
 import { Composite, CompositeItem } from "./index";
 
 // The roving-tabindex engine the List primitive is built on. Unstyled here on purpose — this story
-// only proves the keyboard behavior; the look arrives in `ui/list`.
+// only proves the keyboard behavior; the look arrives in `elements/list`.
 const meta = {
   title: "Base/Composite",
   component: Composite,
@@ -17,8 +17,8 @@ type Story = StoryObj<typeof meta>;
 /**
  * One tab stop for the whole group; arrow keys roam between items (vertical by default).
  * `Composite` emits `aria-orientation`, which needs a supporting role — here `toolbar`, the
- * canonical roving button group. (`ui/list` will pick its own role; that's the open a11y decision
- * in the RFC.)
+ * canonical roving button group. (`elements/list` will pick its own role; that's the open a11y
+ * decision in the RFC.)
  */
 export const RovingFocus: Story = {
   render: () => (
diff --git a/packages/propel/src/base/composite/composite.tsx b/packages/propel/src/base/composite/composite.tsx
index 29e664f6..30175db3 100644
--- a/packages/propel/src/base/composite/composite.tsx
+++ b/packages/propel/src/base/composite/composite.tsx
@@ -7,7 +7,7 @@ type BaseCompositeProps = BaseComposite.Props<unknown, Record<string, never>>;
  * The container half of Base UI's roving-tabindex `Composite` — the same engine `Toolbar` and
  * `Menu` are built on. Renders a `<div>` by default; one `CompositeItem` child is the tab stop and
  * the arrow keys move focus between them. Defaults to `vertical` (the common list case); pass
- * `orientation` to change it. Unstyled — `ui` layers the look on top.
+ * `orientation` to change it. Unstyled — `elements` layers the look on top.
  *
  * NOTE: Base UI's `CompositeRoot`/`CompositeItem` live under `@base-ui/react/internals` (marked
  * `@internal`). That dependency is isolated to `base/composite` on purpose: the Base UI version is
diff --git a/packages/propel/src/base/text-area/index.ts b/packages/propel/src/base/text-area/index.ts
deleted file mode 100644
index 695e7b9b..00000000
--- a/packages/propel/src/base/text-area/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index fcbb0596..00000000
--- a/packages/propel/src/base/text-area/text-area.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-import * as React from "react";
-
-type BaseFieldControlProps = BaseField.Control.Props;
-
-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-header.tsx b/packages/propel/src/components/accordion/accordion-header.tsx
new file mode 100644
index 00000000..68b5ff49
--- /dev/null
+++ b/packages/propel/src/components/accordion/accordion-header.tsx
@@ -0,0 +1,13 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+
+import { AccordionHeader as AccordionHeaderElement } from "../../elements/accordion";
+
+export type AccordionHeaderProps = Omit<BaseAccordion.Header.Props, "className" | "style">;
+
+/**
+ * The heading wrapper for an accordion trigger. Grafts Base UI's header behavior onto the styled
+ * `AccordionHeader`.
+ */
+export function AccordionHeader(props: AccordionHeaderProps) {
+  return <BaseAccordion.Header {...props} render={<AccordionHeaderElement />} />;
+}
diff --git a/packages/propel/src/components/accordion/accordion-item.tsx b/packages/propel/src/components/accordion/accordion-item.tsx
new file mode 100644
index 00000000..62f691c9
--- /dev/null
+++ b/packages/propel/src/components/accordion/accordion-item.tsx
@@ -0,0 +1,14 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type { AccordionItem as BaseAccordionItem } from "@base-ui/react/accordion";
+
+import { AccordionItem as AccordionItemElement } from "../../elements/accordion";
+
+export type AccordionItemProps = Omit<BaseAccordionItem.Props, "className" | "style">;
+
+/**
+ * A single collapsible section: pairs an `AccordionHeader` and `AccordionPanel`. Grafts Base UI's
+ * item behavior onto the styled `AccordionItem`.
+ */
+export function AccordionItem(props: AccordionItemProps) {
+  return <BaseAccordion.Item {...props} render={<AccordionItemElement />} />;
+}
diff --git a/packages/propel/src/components/accordion/accordion-panel.tsx b/packages/propel/src/components/accordion/accordion-panel.tsx
index 2aa85b70..98164ac8 100644
--- a/packages/propel/src/components/accordion/accordion-panel.tsx
+++ b/packages/propel/src/components/accordion/accordion-panel.tsx
@@ -1,19 +1,21 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+
 import {
   AccordionPanel as AccordionPanelElement,
   AccordionPanelContent,
-  type AccordionPanelProps as AccordionPanelElementProps,
-} from "../../ui/accordion";
+} from "../../elements/accordion";
 
-export type AccordionPanelProps = AccordionPanelElementProps;
+export type AccordionPanelProps = Omit<BaseAccordion.Panel.Props, "className" | "style">;
 
 /**
- * The ready-made accordion panel: composes the atomic `AccordionPanel` with the
- * `AccordionPanelContent` padding wrapper so content is inset from the trigger's edges.
+ * The ready-made accordion panel: grafts Base UI's panel behavior onto the styled `AccordionPanel`,
+ * composing the `AccordionPanelContent` padding wrapper so content is inset from the trigger's
+ * edges.
  */
 export function AccordionPanel({ children, ...props }: AccordionPanelProps) {
   return (
-    <AccordionPanelElement {...props}>
+    <BaseAccordion.Panel {...props} render={<AccordionPanelElement />}>
       <AccordionPanelContent>{children}</AccordionPanelContent>
-    </AccordionPanelElement>
+    </BaseAccordion.Panel>
   );
 }
diff --git a/packages/propel/src/components/accordion/accordion-trigger.tsx b/packages/propel/src/components/accordion/accordion-trigger.tsx
index 7f02a982..b4964ddb 100644
--- a/packages/propel/src/components/accordion/accordion-trigger.tsx
+++ b/packages/propel/src/components/accordion/accordion-trigger.tsx
@@ -1,35 +1,35 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
 import {
   AccordionTrigger as AccordionTriggerElement,
-  type AccordionTriggerProps as AccordionTriggerElementProps,
-  AccordionTriggerIcon,
-  AccordionTriggerIndicator,
   AccordionTriggerTitle,
-} from "../../ui/accordion";
+} from "../../elements/accordion";
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
 
-export type AccordionTriggerProps = AccordionTriggerElementProps & {
+export type AccordionTriggerProps = Omit<BaseAccordion.Trigger.Props, "className" | "style"> & {
   /**
    * 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;
+  icon?: React.ReactNode;
 };
 
 /**
- * The ready-made accordion trigger: composes the atomic `AccordionTrigger` with an optional
- * `inlineStartNode`, the `AccordionTriggerTitle`, and the `AccordionTriggerIndicator` chevron that
- * rotates when the panel opens.
+ * The ready-made accordion trigger: grafts Base UI's trigger behavior onto the styled
+ * `AccordionTrigger`, composing an optional `icon`, the `AccordionTriggerTitle`, and the
+ * `AccordionTriggerIndicator` chevron that rotates when the panel opens.
  */
-export function AccordionTrigger({ inlineStartNode, children, ...props }: AccordionTriggerProps) {
+export function AccordionTrigger({ icon, children, ...props }: AccordionTriggerProps) {
   return (
-    <AccordionTriggerElement {...props}>
-      {inlineStartNode ? <AccordionTriggerIcon>{inlineStartNode}</AccordionTriggerIcon> : null}
+    <BaseAccordion.Trigger {...props} render={<AccordionTriggerElement />}>
+      {icon ? <Icon tint="secondary">{icon}</Icon> : null}
       <AccordionTriggerTitle>{children}</AccordionTriggerTitle>
-      <AccordionTriggerIndicator>
+      <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
         <ChevronDown />
-      </AccordionTriggerIndicator>
-    </AccordionTriggerElement>
+      </DisclosureIndicator>
+    </BaseAccordion.Trigger>
   );
 }
diff --git a/packages/propel/src/components/accordion/accordion.stories.tsx b/packages/propel/src/components/accordion/accordion.stories.tsx
index c46b9dd5..cf002fb8 100644
--- a/packages/propel/src/components/accordion/accordion.stories.tsx
+++ b/packages/propel/src/components/accordion/accordion.stories.tsx
@@ -84,14 +84,14 @@ export const Default: Story = {
   ),
 };
 
-/** Each trigger can carry a `inlineStartNode`, matching the Figma header icon. */
+/** Each trigger can carry a `icon`, 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}>
           <AccordionHeader>
-            <AccordionTrigger inlineStartNode={<CircleHelp />}>{item.label}</AccordionTrigger>
+            <AccordionTrigger icon={<CircleHelp />}>{item.label}</AccordionTrigger>
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -196,6 +196,38 @@ export const Interaction: Story = {
   },
 };
 
+/**
+ * Behavior twin of `MultipleItems`: with `multiple`, both `defaultValue` items start expanded at
+ * once, opening a third keeps the first two open (single-open mode would collapse them), and each
+ * item still collapses independently.
+ */
+export const MultipleItemsInteraction: Story = {
+  ...MultipleItems,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const what = canvas.getByRole("button", { name: "What is Plane?" });
+    const pricing = canvas.getByRole("button", { name: "How does pricing work?" });
+    const importData = canvas.getByRole("button", { name: "Can I import my existing data?" });
+
+    // Both defaultValue items start expanded simultaneously.
+    await expect(what).toHaveAttribute("aria-expanded", "true");
+    await expect(pricing).toHaveAttribute("aria-expanded", "true");
+    await expect(importData).toHaveAttribute("aria-expanded", "false");
+
+    // Opening the third item leaves the other two open.
+    await userEvent.click(importData);
+    await expect(importData).toHaveAttribute("aria-expanded", "true");
+    await expect(what).toHaveAttribute("aria-expanded", "true");
+    await expect(pricing).toHaveAttribute("aria-expanded", "true");
+
+    // Each item collapses independently without affecting its siblings.
+    await userEvent.click(what);
+    await expect(what).toHaveAttribute("aria-expanded", "false");
+    await expect(pricing).toHaveAttribute("aria-expanded", "true");
+    await expect(importData).toHaveAttribute("aria-expanded", "true");
+  },
+};
+
 /**
  * Keyboard ARIA pattern (WAI-ARIA accordion): Tab moves focus to the trigger and both **Enter** and
  * **Space** toggle `aria-expanded`, showing/hiding the panel region. Tagged out of the
diff --git a/packages/propel/src/components/accordion/accordion.tsx b/packages/propel/src/components/accordion/accordion.tsx
new file mode 100644
index 00000000..fca222b9
--- /dev/null
+++ b/packages/propel/src/components/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 { Accordion as AccordionElement } from "../../elements/accordion";
+
+// Mirror `BaseAccordion.Root`'s own `Value` generic (default `any`), so propel narrows nothing Base
+// UI doesn't; callers can still parameterize it.
+export type AccordionProps<Value = any> = 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. Grafts Base UI's accordion behavior onto the styled `Accordion`
+ * frame.
+ */
+export function Accordion<Value = any>(props: AccordionProps<Value>) {
+  return <BaseAccordion.Root {...props} render={<AccordionElement />} />;
+}
diff --git a/packages/propel/src/components/accordion/index.tsx b/packages/propel/src/components/accordion/index.tsx
index 825b825c..9f16f96b 100644
--- a/packages/propel/src/components/accordion/index.tsx
+++ b/packages/propel/src/components/accordion/index.tsx
@@ -1,19 +1,13 @@
+export * from "./accordion";
+export * from "./accordion-header";
+export * from "./accordion-item";
 export * from "./accordion-panel";
 export * from "./accordion-trigger";
-// Re-export the atomic structural parts so a full accordion is importable from this convenience.
+// Re-export the pure styling slots (no Base UI behavior) so a full accordion is composable from
+// this convenience entry; they compose inside the ready-made trigger/panel above.
 export {
-  Accordion,
-  AccordionHeader,
-  type AccordionHeaderProps,
-  AccordionItem,
-  type AccordionItemProps,
   AccordionPanelContent,
   type AccordionPanelContentProps,
-  type AccordionProps,
-  AccordionTriggerIcon,
-  type AccordionTriggerIconProps,
-  AccordionTriggerIndicator,
-  type AccordionTriggerIndicatorProps,
   AccordionTriggerTitle,
   type AccordionTriggerTitleProps,
-} from "../../ui/accordion";
+} from "../../elements/accordion";
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx
new file mode 100644
index 00000000..712b9e0e
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx
@@ -0,0 +1,19 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+export type AlertDialogCloseProps = Omit<BaseAlertDialog.Close.Props, "className" | "style">;
+
+/**
+ * The behavior that closes the alert dialog when activated. Use as the `render` target of a
+ * `Button` so the styled primitive's look wins via render-composition:
+ *
+ * ```tsx
+ * <Button prominence="secondary" tone="neutral" magnitude="xl" render={<AlertDialogClose />}>
+ *   Cancel
+ * </Button>;
+ * ```
+ *
+ * Maps 1:1 to `AlertDialog.Close`.
+ */
+export function AlertDialogClose(props: AlertDialogCloseProps) {
+  return <BaseAlertDialog.Close {...props} />;
+}
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx
index 1e93d9c9..374655f9 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx
@@ -1,24 +1,26 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
 import {
-  AlertDialogBackdrop,
   AlertDialogPopup,
   type AlertDialogPopupProps,
-  AlertDialogPortal,
-  AlertDialogViewport,
-} from "../../ui/alert-dialog";
+} from "../../elements/alert-dialog/alert-dialog-popup";
+import { AlertDialogViewport } from "../../elements/alert-dialog/alert-dialog-viewport";
+import { Backdrop } from "../../internal/backdrop";
 
 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.
+ * Convenience that composes the alert dialog overlay boilerplate — Base UI portal, the shared
+ * `internal` backdrop, the centering viewport, and the centered popup — so a consumer only writes
+ * the trigger and the popup body.
  */
 export function AlertDialogContent(props: AlertDialogContentProps) {
   return (
-    <AlertDialogPortal>
-      <AlertDialogBackdrop />
-      <AlertDialogViewport>
-        <AlertDialogPopup {...props} />
-      </AlertDialogViewport>
-    </AlertDialogPortal>
+    <BaseAlertDialog.Portal>
+      <BaseAlertDialog.Backdrop render={<Backdrop />} />
+      <BaseAlertDialog.Viewport render={<AlertDialogViewport />}>
+        <BaseAlertDialog.Popup {...props} render={<AlertDialogPopup />} />
+      </BaseAlertDialog.Viewport>
+    </BaseAlertDialog.Portal>
   );
 }
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-description.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-description.tsx
new file mode 100644
index 00000000..5ebdfb49
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-description.tsx
@@ -0,0 +1,16 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+import { OverlayDescription } from "../../internal/overlay-description";
+
+export type AlertDialogDescriptionProps = Omit<
+  BaseAlertDialog.Description.Props,
+  "className" | "style"
+>;
+
+/**
+ * The supporting description for the alert dialog. Base UI links it to the popup via
+ * `aria-describedby`; the shared `internal` overlay copy (`magnitude="lg"`) supplies the styling.
+ */
+export function AlertDialogDescription(props: AlertDialogDescriptionProps) {
+  return <BaseAlertDialog.Description {...props} render={<OverlayDescription magnitude="lg" />} />;
+}
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-title.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-title.tsx
new file mode 100644
index 00000000..c7ffef63
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-title.tsx
@@ -0,0 +1,13 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+import { OverlayTitle } from "../../internal/overlay-title";
+
+export type AlertDialogTitleProps = Omit<BaseAlertDialog.Title.Props, "className" | "style">;
+
+/**
+ * The accessible title for the alert dialog. Base UI links it to the popup via `aria-labelledby`;
+ * the shared `internal` overlay heading (`magnitude="lg"`) supplies the styling.
+ */
+export function AlertDialogTitle(props: AlertDialogTitleProps) {
+  return <BaseAlertDialog.Title {...props} render={<OverlayTitle magnitude="lg" />} />;
+}
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx
new file mode 100644
index 00000000..e5a1a3ae
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx
@@ -0,0 +1,20 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+export type AlertDialogTriggerProps = Omit<BaseAlertDialog.Trigger.Props, "className" | "style">;
+
+/**
+ * The behavior that opens the alert dialog. Use as the `render` target of a `Button` so the styled
+ * primitive's look wins via render-composition:
+ *
+ * ```tsx
+ * <Button prominence="primary" tone="danger" magnitude="xl" render={<AlertDialogTrigger />}>
+ *   Delete project
+ * </Button>;
+ * ```
+ *
+ * Base UI manages `aria-haspopup`/`aria-expanded` and focus restoration when the alert dialog
+ * closes. Maps 1:1 to `AlertDialog.Trigger`.
+ */
+export function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return <BaseAlertDialog.Trigger {...props} />;
+}
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
index 36e5e4d9..f8a773d0 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
@@ -1,8 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { TriangleAlert } from "lucide-react";
+import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../ui/button";
+import { Button } from "../../elements/button";
+import {
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogHeading,
+  DialogTitle,
+  DialogTrigger,
+} from "../dialog";
+import { Menu, MenuContent, MenuItem, MenuTrigger } from "../menu";
+import { TextArea, TextAreaGroup } from "../text-area";
 import {
   AlertDialog,
   AlertDialogActions,
@@ -14,13 +28,14 @@ import {
   AlertDialogIntro,
   AlertDialogTitle,
   AlertDialogTrigger,
+  createAlertDialogHandle,
 } 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. Trigger and Close compose the `Button` primitive via
-// Base UI's `render` prop — Button is the outer element so its styling wins, while
-// the dialog part it renders supplies the open/close behavior.
+// 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. Trigger/Close compose the `Button` primitive via Base UI's `render` prop — the styled
+// primitive is the outer element so its styling wins, while the dialog part it renders supplies
+// the open/close behavior.
 
 const meta = {
   title: "Components/AlertDialog",
@@ -119,3 +134,361 @@ export const ModalDismissal: Story = {
     });
   },
 };
+
+/**
+ * A destructive action inside an actions menu: choosing “Delete project…” opens the confirmation.
+ * The alert dialog is controlled (`open`/`onOpenChange`) because a menu item — not an
+ * `AlertDialogTrigger` — opens it.
+ */
+export const OpenFromMenu: Story = {
+  render: function Render() {
+    const [confirmOpen, setConfirmOpen] = React.useState(false);
+    return (
+      <>
+        <Menu>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<MenuTrigger />}
+          >
+            Project options
+          </Button>
+          <MenuContent sizing="sm">
+            <MenuItem>Rename</MenuItem>
+            <MenuItem>Duplicate</MenuItem>
+            <MenuItem onClick={() => setConfirmOpen(true)}>Delete project…</MenuItem>
+          </MenuContent>
+        </Menu>
+        <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon tone="danger">
+                <TriangleAlert />
+              </AlertDialogIcon>
+              <AlertDialogIntro>
+                <AlertDialogTitle>Delete project?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This permanently removes the project and all of its work items. This action
+                  can&apos;t be undone.
+                </AlertDialogDescription>
+              </AlertDialogIntro>
+            </AlertDialogHeader>
+            <AlertDialogActions>
+              <Button
+                sizing="hug"
+                prominence="secondary"
+                tone="neutral"
+                magnitude="xl"
+                render={<AlertDialogClose />}
+              >
+                Cancel
+              </Button>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="danger"
+                magnitude="xl"
+                render={<AlertDialogClose />}
+              >
+                Delete
+              </Button>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
+      </>
+    );
+  },
+};
+
+/**
+ * Interaction test: the menu item opens the controlled alert dialog (closing the menu), and Delete
+ * closes it. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const OpenFromMenuInteraction: Story = {
+  ...OpenFromMenu,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("the destructive menu item opens the confirmation", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Project options" }));
+      const menu = await within(document.body).findByRole("menu");
+      await userEvent.click(within(menu).getByRole("menuitem", { name: /Delete project/ }));
+      const dialog = await within(document.body).findByRole("alertdialog");
+      await expect(within(dialog).getByText(/permanently removes/)).toBeInTheDocument();
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("menu")).not.toBeInTheDocument(),
+      );
+    });
+    await step("Delete closes the controlled dialog", async () => {
+      const dialog = within(document.body).getByRole("alertdialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+/**
+ * A close confirmation: the alert dialog is nested inside a `Dialog` composer and guards its close.
+ * While the draft has text, any attempt to close routes through the confirmation instead of
+ * discarding silently — “Keep writing” returns to the intact draft, “Discard” closes both.
+ */
+export const CloseConfirmation: Story = {
+  render: function Render() {
+    const [composerOpen, setComposerOpen] = React.useState(false);
+    const [confirmOpen, setConfirmOpen] = React.useState(false);
+    const [draft, setDraft] = React.useState("");
+    return (
+      <Dialog
+        open={composerOpen}
+        onOpenChange={(open) => {
+          // Closing with unsaved text asks for confirmation instead.
+          if (!open && draft.trim() !== "") {
+            setConfirmOpen(true);
+            return;
+          }
+          setComposerOpen(open);
+        }}
+      >
+        <Button
+          sizing="hug"
+          prominence="secondary"
+          tone="neutral"
+          magnitude="xl"
+          render={<DialogTrigger />}
+        >
+          Write a comment
+        </Button>
+        <DialogContent magnitude="md">
+          <DialogHeader>
+            <DialogHeading>
+              <DialogTitle>New comment</DialogTitle>
+            </DialogHeading>
+          </DialogHeader>
+          <DialogBody>
+            <TextAreaGroup>
+              <TextArea
+                magnitude="md"
+                surface="field"
+                resize="none"
+                rows={4}
+                aria-label="Comment"
+                placeholder="Leave a comment…"
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+              />
+            </TextAreaGroup>
+          </DialogBody>
+          <DialogActions>
+            <Button
+              sizing="hug"
+              prominence="secondary"
+              tone="neutral"
+              magnitude="xl"
+              render={<DialogClose />}
+            >
+              Close
+            </Button>
+          </DialogActions>
+          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogIcon tone="warning">
+                  <TriangleAlert />
+                </AlertDialogIcon>
+                <AlertDialogIntro>
+                  <AlertDialogTitle>Discard draft?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Your comment hasn&apos;t been posted. Closing now discards it.
+                  </AlertDialogDescription>
+                </AlertDialogIntro>
+              </AlertDialogHeader>
+              <AlertDialogActions>
+                <Button
+                  sizing="hug"
+                  prominence="secondary"
+                  tone="neutral"
+                  magnitude="xl"
+                  render={<AlertDialogClose />}
+                >
+                  Keep writing
+                </Button>
+                <Button
+                  sizing="hug"
+                  prominence="primary"
+                  tone="danger"
+                  magnitude="xl"
+                  onClick={() => {
+                    setConfirmOpen(false);
+                    setComposerOpen(false);
+                    setDraft("");
+                  }}
+                >
+                  Discard
+                </Button>
+              </AlertDialogActions>
+            </AlertDialogContent>
+          </AlertDialog>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};
+
+/**
+ * Interaction test: closing with a draft asks for confirmation, “Keep writing” preserves the draft,
+ * “Discard” closes both, and a clean composer closes without asking. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const CloseConfirmationInteraction: Story = {
+  ...CloseConfirmation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("open the composer and write a draft", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Write a comment" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await userEvent.type(within(dialog).getByRole("textbox"), "Ship it next sprint");
+    });
+    await step("closing with unsaved text asks for confirmation", async () => {
+      const dialog = within(document.body).getByRole("dialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+      await within(document.body).findByRole("alertdialog");
+      // The composer stays open behind the confirmation. Queried via the DOM (not the a11y tree)
+      // because the parent dialog sits behind the modal confirmation.
+      await expect(document.body.querySelector('[role="dialog"]')).toBeInTheDocument();
+    });
+    await step("Keep writing returns to the intact draft", async () => {
+      const alert = within(document.body).getByRole("alertdialog");
+      await userEvent.click(within(alert).getByRole("button", { name: "Keep writing" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument(),
+      );
+      await expect(within(document.body).getByRole("textbox")).toHaveValue("Ship it next sprint");
+    });
+    await step("Discard closes both and drops the draft", async () => {
+      const dialog = within(document.body).getByRole("dialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+      const alert = await within(document.body).findByRole("alertdialog");
+      await userEvent.click(within(alert).getByRole("button", { name: "Discard" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+    await step("a clean composer closes without asking", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Write a comment" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await expect(within(dialog).getByRole("textbox")).toHaveValue("");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+// One shared confirmation driven by detached triggers: `createAlertDialogHandle` connects
+// triggers to a root defined elsewhere in the tree, and each trigger passes the project it acts
+// on as its `payload` (Base UI's documented module-scope handle pattern).
+const deleteProjectHandle = createAlertDialogHandle();
+
+/**
+ * Multiple detached triggers sharing one alert dialog through `createAlertDialogHandle`: each
+ * trigger passes the project it acts on as its `payload`, and the root’s render-function children
+ * read that payload to personalize the confirmation copy.
+ */
+export const MultipleTriggers: Story = {
+  render: () => (
+    <>
+      <div className="flex gap-2">
+        {["Mobile app", "Design system"].map((project) => (
+          <Button
+            key={project}
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<AlertDialogTrigger handle={deleteProjectHandle} payload={project} />}
+          >
+            Delete {project}
+          </Button>
+        ))}
+      </div>
+      <AlertDialog handle={deleteProjectHandle}>
+        {({ payload }: { payload: unknown }) => (
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon tone="danger">
+                <TriangleAlert />
+              </AlertDialogIcon>
+              <AlertDialogIntro>
+                <AlertDialogTitle>
+                  Delete {typeof payload === "string" ? payload : "this project"}?
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  This permanently removes the project and all of its work items. This action
+                  can&apos;t be undone.
+                </AlertDialogDescription>
+              </AlertDialogIntro>
+            </AlertDialogHeader>
+            <AlertDialogActions>
+              <Button
+                sizing="hug"
+                prominence="secondary"
+                tone="neutral"
+                magnitude="xl"
+                render={<AlertDialogClose />}
+              >
+                Cancel
+              </Button>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="danger"
+                magnitude="xl"
+                render={<AlertDialogClose />}
+              >
+                Delete
+              </Button>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        )}
+      </AlertDialog>
+    </>
+  ),
+};
+
+/**
+ * Interaction test: each detached trigger opens the shared dialog with its own payload in the
+ * title. Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const MultipleTriggersInteraction: Story = {
+  ...MultipleTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("the first trigger opens the dialog with its payload", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Delete Mobile app" }));
+      const dialog = await within(document.body).findByRole("alertdialog");
+      await expect(
+        within(dialog).getByRole("heading", { name: "Delete Mobile app?" }),
+      ).toBeInTheDocument();
+      await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument(),
+      );
+    });
+    await step("the second trigger reuses the same dialog with a different payload", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Delete Design system" }));
+      const dialog = await within(document.body).findByRole("alertdialog");
+      await expect(
+        within(dialog).getByRole("heading", { name: "Delete Design system?" }),
+      ).toBeInTheDocument();
+      await userEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog.tsx b/packages/propel/src/components/alert-dialog/alert-dialog.tsx
new file mode 100644
index 00000000..71ac3b73
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog.tsx
@@ -0,0 +1,13 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+export type AlertDialogProps = Omit<BaseAlertDialog.Root.Props, "className" | "style">;
+
+/**
+ * The alert dialog Root — Base UI's context/state provider (renders no element of its own). Always
+ * modal and non-dismissible, so it requires an explicit user response. A behavior-only role, so it
+ * lives in `components` (rules 1a, 2); the styled parts live in `elements/alert-dialog` and are
+ * grafted onto Base UI behavior here.
+ */
+export function AlertDialog(props: AlertDialogProps) {
+  return <BaseAlertDialog.Root {...props} />;
+}
diff --git a/packages/propel/src/components/alert-dialog/create-handle.ts b/packages/propel/src/components/alert-dialog/create-handle.ts
new file mode 100644
index 00000000..3daccdb4
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/create-handle.ts
@@ -0,0 +1,10 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one alertdialog shared by many launch points.
+ */
+export const createAlertDialogHandle = BaseAlertDialog.createHandle;
+
+export type AlertDialogHandle = ReturnType<typeof createAlertDialogHandle>;
diff --git a/packages/propel/src/components/alert-dialog/index.tsx b/packages/propel/src/components/alert-dialog/index.tsx
index 8a192feb..3d565c22 100644
--- a/packages/propel/src/components/alert-dialog/index.tsx
+++ b/packages/propel/src/components/alert-dialog/index.tsx
@@ -1,14 +1,17 @@
+export * from "./alert-dialog";
+export * from "./alert-dialog-close";
 export * from "./alert-dialog-content";
-// Re-export the atomic parts so a full alert dialog can be assembled from one entry.
+export * from "./alert-dialog-description";
+export * from "./alert-dialog-title";
+export * from "./alert-dialog-trigger";
+export * from "./create-handle";
+// Re-export propel's STYLED alert-dialog parts so a full alert dialog can be assembled from one
+// entry. The Popup/Viewport boilerplate is composed by `AlertDialogContent`, and the styled
+// `elements` Close is shadowed by this family's behavior `AlertDialogClose`, so those parts are
+// not re-exported here.
 export {
-  AlertDialog,
-  type AlertDialogProps,
   AlertDialogActions,
   type AlertDialogActionsProps,
-  AlertDialogClose,
-  type AlertDialogCloseProps,
-  AlertDialogDescription,
-  type AlertDialogDescriptionProps,
   AlertDialogHeader,
   type AlertDialogHeaderProps,
   AlertDialogIcon,
@@ -16,8 +19,4 @@ export {
   type AlertDialogIconTone,
   AlertDialogIntro,
   type AlertDialogIntroProps,
-  AlertDialogTitle,
-  type AlertDialogTitleProps,
-  AlertDialogTrigger,
-  type AlertDialogTriggerProps,
-} from "../../ui/alert-dialog";
+} from "../../elements/alert-dialog";
diff --git a/packages/propel/src/components/anchor-button/anchor-button.stories.tsx b/packages/propel/src/components/anchor-button/anchor-button.stories.tsx
index 6f9d0564..0008282d 100644
--- a/packages/propel/src/components/anchor-button/anchor-button.stories.tsx
+++ b/packages/propel/src/components/anchor-button/anchor-button.stories.tsx
@@ -1,26 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ArrowRight, Plus } from "lucide-react";
-import { expect } from "storybook/test";
+import { ArrowUpRight, Plus } from "lucide-react";
+import { expect, fn } from "storybook/test";
 
-import { iconControl } from "../../storybook/icon-control";
-import { AnchorButton, AnchorButtonIcon, AnchorButtonLabel, AnchorButtonSpinner } from "./index";
+import { AnchorButton, type AnchorButtonMagnitude, type AnchorButtonProminence } from "./index";
 
-// The ready-made button-looking link: a navigation `<a>` with the control chrome plus optional
-// inline-start/inline-end nodes beside the label. Same surface as the ready-made `Button`, but it
-// navigates (`href`) instead of acting.
+const PROMINENCES: AnchorButtonProminence[] = ["primary", "secondary"];
+const MAGNITUDES: AnchorButtonMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// A <button> (action) that reads as an inline link — the "action that looks like a link" (e.g.
+// "Show more"); render it as an <a> (nativeButton={false} + render) for a real navigation link.
 const meta = {
   title: "Components/AnchorButton",
   component: AnchorButton,
-  subcomponents: { AnchorButtonIcon, AnchorButtonLabel, AnchorButtonSpinner },
-  argTypes: { inlineStartNode: iconControl, inlineEndNode: iconControl },
-  args: {
-    children: "Link",
-    href: "#",
-    prominence: "primary",
-    tone: "neutral",
-    magnitude: "md",
-    sizing: "hug",
-  },
+  args: { children: "Show more", prominence: "primary", magnitude: "md" },
 } satisfies Meta<typeof AnchorButton>;
 
 export default meta;
@@ -28,33 +20,92 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-/** Inline-start and inline-end nodes sit beside the label and are decorative. */
-export const WithIcons: Story = {
-  parameters: { controls: { disable: true } },
+/** `prominence`: `primary` is the blue link; `secondary` the muted gray inline link. */
+export const Prominences: Story = {
+  argTypes: { prominence: { control: false }, children: { control: false } },
   render: (args) => (
-    <div className="flex items-center gap-3">
-      <AnchorButton {...args} inlineStartNode={<Plus />}>
-        New page
-      </AnchorButton>
-      <AnchorButton {...args} prominence="secondary" inlineEndNode={<ArrowRight />}>
-        Learn more
-      </AnchorButton>
+    <div className="flex items-center gap-4">
+      {PROMINENCES.map((prominence) => (
+        <AnchorButton key={prominence} {...args} prominence={prominence}>
+          {prominence} action
+        </AnchorButton>
+      ))}
     </div>
   ),
 };
 
+/** Text 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-4">
+      {MAGNITUDES.map((magnitude) => (
+        <AnchorButton key={magnitude} {...args} magnitude={magnitude}>
+          {magnitude}
+        </AnchorButton>
+      ))}
+    </div>
+  ),
+};
+
+/** It is a `<button>` (an action) — clicking fires `onClick`, not navigation. */
+export const ActsNotNavigates: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn() },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Show more" });
+    await userEvent.click(button);
+    await expect(args.onClick).toHaveBeenCalledOnce();
+  },
+};
+
 /**
- * `loading` shows a spinner + sets `aria-busy` while a navigation is pending (e.g. a router's
- * pending state).
+ * A navigation link: `render={<a href=… />}` swaps the element and `nativeButton={false}` applies
+ * Base UI's non-native button semantics — announced as a button, while the `<a>` keeps native
+ * navigation (Enter follows the href, open-in-new-tab works).
  */
-export const Loading: Story = { args: { loading: true } };
+export const AsLink: Story = {
+  args: { prominence: "primary", magnitude: "md" },
+  render: (args) => (
+    <AnchorButton {...args} nativeButton={false} render={<a href="#work-items" />}>
+      View all work items
+    </AnchorButton>
+  ),
+};
 
-/** It renders a real `<a>` carrying the given `href`, so it navigates rather than acts. */
-export const RendersAnchor: Story = {
+/**
+ * Interaction test: the rendered element is an `<a>` exposing the link role with its href. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const AsLinkInteraction: Story = {
+  ...AsLink,
   tags: ["!dev", "!autodocs", "!manifest"],
-  args: { href: "https://example.com" },
   play: async ({ canvas }) => {
-    const link = canvas.getByRole("link", { name: "Link" });
-    await expect(link).toHaveAttribute("href", "https://example.com");
+    // Base UI's contract for nativeButton={false}: the control is ANNOUNCED as a button
+    // (role="button") while the <a> keeps native navigation (Enter follows the href).
+    const link = canvas.getByRole("button", { name: "View all work items" });
+    await expect(link.tagName).toBe("A");
+    await expect(link).toHaveAttribute("href", "#work-items");
   },
 };
+
+/** Leading and trailing icons beside the label, sized to the link's `--node-size`. */
+export const WithIcons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-6">
+      <AnchorButton prominence="primary" magnitude="md" startIcon={<Plus />}>
+        Add condition
+      </AnchorButton>
+      <AnchorButton prominence="secondary" magnitude="md" endIcon={<ArrowUpRight />}>
+        View docs
+      </AnchorButton>
+    </div>
+  ),
+};
+
+/** The `loading` spinner replaces the leading icon and dims the label. */
+export const Loading: Story = {
+  args: { prominence: "primary", magnitude: "md", loading: true },
+  render: (args) => <AnchorButton {...args}>Saving…</AnchorButton>,
+};
diff --git a/packages/propel/src/components/anchor-button/anchor-button.tsx b/packages/propel/src/components/anchor-button/anchor-button.tsx
index 7d704fc5..28f5bfb2 100644
--- a/packages/propel/src/components/anchor-button/anchor-button.tsx
+++ b/packages/propel/src/components/anchor-button/anchor-button.tsx
@@ -1,50 +1,87 @@
+import { Button as BaseButton } from "@base-ui/react/button";
 import { LoaderCircle } from "lucide-react";
 import type * as React from "react";
 
 import {
   AnchorButton as AnchorButtonElement,
-  AnchorButtonIcon,
   AnchorButtonLabel,
   type AnchorButtonProps as AnchorButtonElementProps,
-  AnchorButtonSpinner,
-} from "../../ui/anchor-button";
+} from "../../elements/anchor-button";
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
+
+export type { AnchorButtonMagnitude, AnchorButtonProminence } from "../../elements/anchor-button";
 
 export type AnchorButtonProps = AnchorButtonElementProps & {
-  /** Node before the label (inline-start), sized to `--node-size`. Decorative. */
-  inlineStartNode?: React.ReactNode;
-  /** Node after the label (inline-end), sized to `--node-size`. Decorative. */
-  inlineEndNode?: React.ReactNode;
   /**
-   * Shows a spinner in place of the inline-start node and sets `aria-busy` while a navigation is
-   * pending — drive it from your router's pending state (e.g. React Router's `useNavigation`),
-   * since a link's destination can load before the page changes.
+   * Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. `render={<a
+   * href=… />}` for a real navigation link): Base UI then keeps role, tab focus, and activation
+   * semantics right on the rendered tag.
+   */
+  nativeButton?: boolean;
+  /**
+   * Node rendered before the label (inline-start). An icon or any node; it is sized to the link's
+   * `--node-size`. Decorative, kept out of the name.
+   */
+  startIcon?: React.ReactNode;
+  /**
+   * Node rendered after the label (inline-end). An icon or any node; it is sized to the link's
+   * `--node-size`. Decorative, kept out of the name.
    */
+  endIcon?: React.ReactNode;
+  /** Shows a spinner, sets `aria-busy`, and makes the control non-interactive. */
   loading?: boolean;
 };
 
 /**
- * The ready-made `AnchorButton`: a button-looking navigation link that composes the atomic
- * `AnchorButton` with an optional `inlineStartNode`/`inlineEndNode` and a `loading` spinner for
- * pending navigations. Content — `children`, the inline nodes, `loading` — is not a variant.
+ * The ready-made interactive element that _looks like_ an inline text link — same conventions as
+ * `Button`: it grafts Base UI's `Button` behavior onto the styled `AnchorButton` element and lays
+ * out an optional `startIcon`/`endIcon` beside the label plus a `loading` spinner. By default it is
+ * a `<button>` (an action that reads as a link — a "Show more" toggle, an inline "Edit"); for real
+ * navigation pass `render={<a href=… />}` + `nativeButton={false}`. For a link wearing the BUTTON
+ * chrome, use `Button` with the same `render` mechanics.
  */
 export function AnchorButton({
-  inlineStartNode,
-  inlineEndNode,
+  prominence,
+  magnitude,
+  startIcon,
+  endIcon,
   loading = false,
+  disabled,
   children,
+  render,
+  nativeButton,
   ...props
 }: AnchorButtonProps) {
+  // `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 (
-    <AnchorButtonElement aria-busy={loading ? true : undefined} {...props}>
+    <BaseButton
+      {...props}
+      nativeButton={nativeButton}
+      render={
+        <AnchorButtonElement
+          prominence={prominence}
+          magnitude={magnitude}
+          // The consumer's render swaps the underlying element; the styled part stays the
+          // className owner (behavior part outer, styled part as the render target, rule 1a).
+          render={render}
+        />
+      }
+      disabled={disabled || loading}
+      focusableWhenDisabled={loading ? true : undefined}
+      aria-busy={loading ? true : undefined}
+    >
       {loading ? (
-        <AnchorButtonSpinner>
+        <Spinner>
           <LoaderCircle />
-        </AnchorButtonSpinner>
-      ) : inlineStartNode ? (
-        <AnchorButtonIcon>{inlineStartNode}</AnchorButtonIcon>
+        </Spinner>
+      ) : startIcon ? (
+        <Icon>{startIcon}</Icon>
       ) : null}
       <AnchorButtonLabel>{children}</AnchorButtonLabel>
-      {!loading && inlineEndNode ? <AnchorButtonIcon>{inlineEndNode}</AnchorButtonIcon> : null}
-    </AnchorButtonElement>
+      {!loading && endIcon ? <Icon>{endIcon}</Icon> : null}
+    </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/anchor-button/index.tsx b/packages/propel/src/components/anchor-button/index.tsx
index fa338f9c..ae11ec50 100644
--- a/packages/propel/src/components/anchor-button/index.tsx
+++ b/packages/propel/src/components/anchor-button/index.tsx
@@ -1,13 +1 @@
 export * from "./anchor-button";
-export {
-  AnchorButtonIcon,
-  type AnchorButtonIconProps,
-  AnchorButtonLabel,
-  type AnchorButtonLabelProps,
-  AnchorButtonSpinner,
-  type AnchorButtonSpinnerProps,
-  type AnchorButtonMagnitude,
-  type AnchorButtonProminence,
-  type AnchorButtonSizing,
-  type AnchorButtonTone,
-} from "../../ui/anchor-button";
diff --git a/packages/propel/src/components/anchor/anchor.stories.tsx b/packages/propel/src/components/anchor/anchor.stories.tsx
deleted file mode 100644
index eb35fe55..00000000
--- a/packages/propel/src/components/anchor/anchor.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { Anchor, type AnchorMagnitude, type AnchorProminence } from "./index";
-
-const PROMINENCES: AnchorProminence[] = ["primary", "secondary"];
-const MAGNITUDES: AnchorMagnitude[] = ["sm", "md", "lg", "xl"];
-
-// The inline text link. For a button-styled nav link use `AnchorButton`; for a link-styled action
-// use `ButtonAnchor`.
-const meta = {
-  title: "Components/Anchor",
-  component: Anchor,
-  args: { children: "Anchor", href: "#", prominence: "primary", magnitude: "md" },
-} satisfies Meta<typeof Anchor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** `prominence`: `primary` is the blue link; `secondary` the muted gray inline link. */
-export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-4">
-      {PROMINENCES.map((prominence) => (
-        <Anchor key={prominence} {...args} prominence={prominence}>
-          {prominence} link
-        </Anchor>
-      ))}
-    </div>
-  ),
-};
-
-/** Text 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-4">
-      {MAGNITUDES.map((magnitude) => (
-        <Anchor key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </Anchor>
-      ))}
-    </div>
-  ),
-};
-
-/** It renders a real `<a>` carrying the given `href`. */
-export const RendersAnchor: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { href: "https://example.com" },
-  play: async ({ canvas }) => {
-    const link = canvas.getByRole("link", { name: "Anchor" });
-    await expect(link).toHaveAttribute("href", "https://example.com");
-  },
-};
diff --git a/packages/propel/src/components/anchor/index.tsx b/packages/propel/src/components/anchor/index.tsx
deleted file mode 100644
index 0416e5b3..00000000
--- a/packages/propel/src/components/anchor/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-// Ready-made 1:1 re-export of the ui primitive. Drop to `@plane/propel/ui/anchor` only for the
-// lower-level parts. (`Anchor` is a single styled `<a>`, so there is nothing extra to compose.)
-export * from "../../ui/anchor";
diff --git a/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx b/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx
index 94662ad2..c449b69a 100644
--- a/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx
+++ b/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx
@@ -3,7 +3,9 @@ import { ChevronsUpDown, X } from "lucide-react";
 import { expect } from "storybook/test";
 
 import { IconButton } from "../icon-button";
-import { AutocompleteField } from "./index";
+import { AutocompleteField, type FieldMagnitude } from "./index";
+
+const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
 
 const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
 
@@ -56,6 +58,23 @@ export const RendersInput: Story = {
   },
 };
 
+/**
+ * Every magnitude (`md` / `lg` / `xl`) stacked. Magnitude steps the label, description, and
+ * helper-text size; the input group keeps its own fixed scale.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each field with the magnitude name, so disable
+  // just those two controls; the rest stay live and update every field at once.
+  argTypes: { magnitude: { control: false }, label: { control: false } },
+  render: (args) => (
+    <div className="flex w-72 flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <AutocompleteField key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
 /** Setting `error` marks the field invalid, which recolors the input group border to danger. */
 export const Invalid: Story = {
   args: { error: "Enter a container image." },
diff --git a/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx b/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx
index 8c50ba57..c7764b5c 100644
--- a/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx
+++ b/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx
@@ -1,37 +1,30 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
 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 { FieldLabel } from "../../ui/field/field-label";
-import type { FieldMagnitude } from "../../ui/field/variants";
+} from "../../elements/autocomplete/index";
+import type { FieldMagnitude } from "../../elements/field/variants";
+import { ListboxItem } from "../../internal/listbox-item";
+import { ListboxPopup } from "../../internal/listbox-popup";
+import { Positioner } from "../../internal/positioner";
+import { Autocomplete, type AutocompleteProps } from "../autocomplete";
+import { Field, FieldDescription, FieldLabel } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 
-export type AutocompleteFieldProps = Omit<AutocompleteProps<string>, "children" | "items"> & {
+export type { FieldMagnitude };
+
+export type AutocompleteFieldProps<Value = string> = Omit<
+  AutocompleteProps<Value>,
+  "children" | "items"
+> & {
   /** Supporting text shown below the input. */
   description?: React.ReactNode;
-  /**
-   * The clear control (e.g. an `IconButton`), rendered as the autocomplete's clear button. It
-   * carries its own — localizable — `aria-label`; the field bakes no label text.
-   */
+  /** The clear control (e.g. an `IconButton`) carrying its own localizable `aria-label`. */
   clear: React.ReactElement;
-  /**
-   * The popup-trigger control (e.g. an `IconButton`), rendered as the autocomplete's trigger. It
-   * carries its own — localizable — `aria-label`; the field bakes no label text.
-   */
+  /** The popup-trigger control (e.g. an `IconButton`) carrying its own localizable `aria-label`. */
   trigger: React.ReactElement;
   /** Message rendered when no item matches. */
   empty: React.ReactNode;
@@ -40,7 +33,7 @@ export type AutocompleteFieldProps = Omit<AutocompleteProps<string>, "children"
   /** 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[];
+  items: readonly Value[];
   /** Visible field label. */
   label: React.ReactNode;
   /** Label and helper text size. */
@@ -50,7 +43,7 @@ export type AutocompleteFieldProps = Omit<AutocompleteProps<string>, "children"
 };
 
 /** Ready-to-use autocomplete field with label, input, popup items, and helper/error text. */
-export function AutocompleteField({
+export function AutocompleteField<Value = string>({
   description,
   clear,
   trigger,
@@ -64,37 +57,48 @@ export function AutocompleteField({
   name,
   placeholder,
   ...autocompleteProps
-}: AutocompleteFieldProps) {
+}: AutocompleteFieldProps<Value>) {
+  // Base UI's itemToStringValue turns an object item into the input's string; the suggestion rows
+  // display the same string.
+  const display = (item: Value) =>
+    autocompleteProps.itemToStringValue ? autocompleteProps.itemToStringValue(item) : String(item);
   return (
     <Field name={name} disabled={disabled} invalid={error != null || undefined}>
       <Autocomplete disabled={disabled} items={items} {...autocompleteProps}>
         <FieldLabel magnitude={magnitude} inset={false}>
           {label}
         </FieldLabel>
-        {/* The field's magnitude sizes its label/text; the control keeps the standard lg (36px)
-            box height (search magnitude scale sm/md/lg ≠ the field's md/lg/xl). */}
-        <AutocompleteInputGroup magnitude="lg">
-          <AutocompleteInput magnitude="lg" placeholder={placeholder} />
-          <AutocompleteClear render={clear} />
-          <AutocompleteTrigger render={trigger} />
-        </AutocompleteInputGroup>
+        <BaseAutocomplete.InputGroup render={<AutocompleteInputGroup magnitude={magnitude} />}>
+          <BaseAutocomplete.Input
+            render={<AutocompleteInput magnitude={magnitude} />}
+            placeholder={placeholder}
+          />
+          <BaseAutocomplete.Clear render={clear} />
+          <BaseAutocomplete.Trigger render={trigger} />
+        </BaseAutocomplete.InputGroup>
         {description != null ? (
           <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
         ) : null}
-        <AutocompletePortal>
-          <AutocompletePositioner>
-            <AutocompletePopup>
-              <AutocompleteEmpty>{empty}</AutocompleteEmpty>
-              <AutocompleteList>
-                {items.map((item) => (
-                  <AutocompleteItem key={item} value={item}>
-                    {item}
-                  </AutocompleteItem>
-                ))}
-              </AutocompleteList>
-            </AutocompletePopup>
-          </AutocompletePositioner>
-        </AutocompletePortal>
+        <BaseAutocomplete.Portal>
+          <BaseAutocomplete.Positioner render={<Positioner />}>
+            <BaseAutocomplete.Popup render={<ListboxPopup />}>
+              <BaseAutocomplete.Empty render={<AutocompleteEmpty />}>
+                {empty}
+              </BaseAutocomplete.Empty>
+              <BaseAutocomplete.List>
+                {(item: Value) => (
+                  <BaseAutocomplete.Item
+                    key={display(item)}
+                    value={item}
+                    render={<ListboxItem layout="plain" magnitude="md" />}
+                  >
+                    {display(item)}
+                  </BaseAutocomplete.Item>
+                )}
+              </BaseAutocomplete.List>
+            </BaseAutocomplete.Popup>
+          </BaseAutocomplete.Positioner>
+        </BaseAutocomplete.Portal>
         <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
       </Autocomplete>
     </Field>
diff --git a/packages/propel/src/components/autocomplete/autocomplete-collection.tsx b/packages/propel/src/components/autocomplete/autocomplete-collection.tsx
new file mode 100644
index 00000000..943edcbc
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-collection.tsx
@@ -0,0 +1,11 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export type AutocompleteCollectionProps = BaseAutocomplete.Collection.Props;
+
+/**
+ * Renders the filtered items of the nearest `AutocompleteGroup` (or the root) through a function
+ * child — the grouped counterpart of `AutocompleteList`'s function child.
+ */
+export function AutocompleteCollection(props: AutocompleteCollectionProps) {
+  return <BaseAutocomplete.Collection {...props} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-content.tsx b/packages/propel/src/components/autocomplete/autocomplete-content.tsx
index d7cee033..562de0ee 100644
--- a/packages/propel/src/components/autocomplete/autocomplete-content.tsx
+++ b/packages/propel/src/components/autocomplete/autocomplete-content.tsx
@@ -1,23 +1,18 @@
-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";
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
 
-export type AutocompleteContentProps = AutocompletePopupProps & {
+import { ListboxPopup, type ListboxPopupProps } from "../../internal/listbox-popup";
+import { Positioner } from "../../internal/positioner";
+
+export type AutocompleteContentProps = ListboxPopupProps & {
   /** Which side of the input the list opens toward. @default "bottom" */
-  side?: AutocompletePositionerProps["side"];
+  side?: BaseAutocomplete.Positioner.Props["side"];
   /** Distance in px between the input and the list. @default 4 */
-  sideOffset?: AutocompletePositionerProps["sideOffset"];
+  sideOffset?: BaseAutocomplete.Positioner.Props["sideOffset"];
   /** Alignment of the list relative to the input along `side`. @default "start" */
-  align?: AutocompletePositionerProps["align"];
+  align?: BaseAutocomplete.Positioner.Props["align"];
 };
 
-/** The autocomplete list surface: portal + positioner + popup with Propel overlay styling. */
+/** The autocomplete list surface: Base UI portal + positioner + popup grafted onto Propel styling. */
 export function AutocompleteContent({
   side = "bottom",
   sideOffset = 4,
@@ -25,10 +20,15 @@ export function AutocompleteContent({
   ...props
 }: AutocompleteContentProps) {
   return (
-    <AutocompletePortal>
-      <AutocompletePositioner side={side} sideOffset={sideOffset} align={align}>
-        <AutocompletePopup {...props} />
-      </AutocompletePositioner>
-    </AutocompletePortal>
+    <BaseAutocomplete.Portal>
+      <BaseAutocomplete.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <BaseAutocomplete.Popup {...props} render={<ListboxPopup />} />
+      </BaseAutocomplete.Positioner>
+    </BaseAutocomplete.Portal>
   );
 }
diff --git a/packages/propel/src/components/autocomplete/autocomplete-empty.tsx b/packages/propel/src/components/autocomplete/autocomplete-empty.tsx
new file mode 100644
index 00000000..2d01bf9a
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-empty.tsx
@@ -0,0 +1,16 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+import { AutocompleteEmpty as AutocompleteEmptyElement } from "../../elements/autocomplete";
+
+export type AutocompleteEmptyProps = Omit<
+  BaseAutocomplete.Empty.Props,
+  "className" | "style" | "render"
+>;
+
+/**
+ * The ready-made empty state: grafts Base UI's `Autocomplete.Empty` visibility behavior onto the
+ * styled empty-state row. Pass the — localizable — no-matches message as children.
+ */
+export function AutocompleteEmpty(props: AutocompleteEmptyProps) {
+  return <BaseAutocomplete.Empty {...props} render={<AutocompleteEmptyElement />} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-group-label.tsx b/packages/propel/src/components/autocomplete/autocomplete-group-label.tsx
new file mode 100644
index 00000000..de14b563
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-group-label.tsx
@@ -0,0 +1,16 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+import { ListboxGroupLabel } from "../../internal/listbox-group-label";
+
+export type AutocompleteGroupLabelProps = Omit<
+  BaseAutocomplete.GroupLabel.Props,
+  "className" | "style" | "render"
+>;
+
+/**
+ * The muted heading naming an `AutocompleteGroup` — Base UI's `GroupLabel` behavior grafted onto
+ * the shared styled listbox heading.
+ */
+export function AutocompleteGroupLabel(props: AutocompleteGroupLabelProps) {
+  return <BaseAutocomplete.GroupLabel {...props} render={<ListboxGroupLabel />} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-group.tsx b/packages/propel/src/components/autocomplete/autocomplete-group.tsx
new file mode 100644
index 00000000..ab54f975
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-group.tsx
@@ -0,0 +1,11 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export type AutocompleteGroupProps = Omit<BaseAutocomplete.Group.Props, "className" | "style">;
+
+/**
+ * Groups related suggestions under an `AutocompleteGroupLabel`. Pass the group's `items` so the
+ * nested `AutocompleteCollection` renders (and filters) just this group's options.
+ */
+export function AutocompleteGroup(props: AutocompleteGroupProps) {
+  return <BaseAutocomplete.Group {...props} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx b/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx
new file mode 100644
index 00000000..7bfccd4b
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx
@@ -0,0 +1,57 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import {
+  AutocompleteInput,
+  AutocompleteInputGroup as AutocompleteInputGroupElement,
+  type AutocompleteMagnitude,
+} from "../../elements/autocomplete";
+import { ControlIcon } from "../../internal/control-icon";
+
+export type AutocompleteInputGroupProps = Omit<
+  BaseAutocomplete.Input.Props,
+  "className" | "style" | "render"
+> & {
+  /** Visual size of the input row: height, padding, and icon/text sizing. Required. */
+  magnitude: AutocompleteMagnitude;
+  /** Input placeholder. */
+  placeholder?: string;
+  /**
+   * Decorative leading glyph (e.g. a search magnifier), rendered in the group's `AutocompleteIcon`
+   * slot at the inline-start.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The clear control (e.g. an `IconButton`), grafted onto Base UI's `Clear` behavior. It carries
+   * its own — localizable — `aria-label`; the group bakes no label or glyph.
+   */
+  clear?: React.ReactElement;
+  /**
+   * The popup-trigger control (e.g. an `IconButton`), grafted onto Base UI's `Trigger` behavior. It
+   * carries its own — localizable — `aria-label`; the group bakes no label or glyph.
+   */
+  trigger?: React.ReactElement;
+};
+
+/**
+ * The ready-made autocomplete input row: grafts Base UI's `InputGroup` onto the styled bordered
+ * frame and Base UI's `Input` onto the styled text field, laying out an optional leading `icon`
+ * slot and the consumer-provided `clear`/`trigger` controls. All remaining props pass through to
+ * the input (the element that carries the combobox behavior and accessible name).
+ */
+export function AutocompleteInputGroup({
+  magnitude,
+  icon,
+  clear,
+  trigger,
+  ...props
+}: AutocompleteInputGroupProps) {
+  return (
+    <BaseAutocomplete.InputGroup render={<AutocompleteInputGroupElement magnitude={magnitude} />}>
+      {icon != null ? <ControlIcon>{icon}</ControlIcon> : null}
+      <BaseAutocomplete.Input {...props} render={<AutocompleteInput magnitude={magnitude} />} />
+      {clear != null ? <BaseAutocomplete.Clear render={clear} /> : null}
+      {trigger != null ? <BaseAutocomplete.Trigger render={trigger} /> : null}
+    </BaseAutocomplete.InputGroup>
+  );
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-item.tsx b/packages/propel/src/components/autocomplete/autocomplete-item.tsx
new file mode 100644
index 00000000..04f39ccc
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-item.tsx
@@ -0,0 +1,25 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
+
+export type AutocompleteItemProps = Omit<
+  BaseAutocomplete.Item.Props,
+  "className" | "style" | "render"
+> & {
+  /** Visual size of the row: height and text size. Required. */
+  magnitude: ListboxItemMagnitude;
+};
+
+/**
+ * The ready-made autocomplete option row: grafts Base UI's `Autocomplete.Item` behavior onto the
+ * shared listbox row (`layout="plain"` — autocomplete rows carry no selection marker). Children
+ * flow through as the row's content.
+ */
+export function AutocompleteItem({ magnitude, ...props }: AutocompleteItemProps) {
+  return (
+    <BaseAutocomplete.Item
+      {...props}
+      render={<ListboxItem layout="plain" magnitude={magnitude} />}
+    />
+  );
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-list.tsx b/packages/propel/src/components/autocomplete/autocomplete-list.tsx
new file mode 100644
index 00000000..3543a5f2
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-list.tsx
@@ -0,0 +1,11 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export type AutocompleteListProps = Omit<BaseAutocomplete.List.Props, "className" | "style">;
+
+/**
+ * The container for autocomplete items — a passthrough of Base UI's `Autocomplete.List` (it carries
+ * no propel styling of its own), so the whole anatomy composes from one entry.
+ */
+export function AutocompleteList(props: AutocompleteListProps) {
+  return <BaseAutocomplete.List {...props} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-row.tsx b/packages/propel/src/components/autocomplete/autocomplete-row.tsx
new file mode 100644
index 00000000..4eda14ac
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-row.tsx
@@ -0,0 +1,8 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export type AutocompleteRowProps = Omit<BaseAutocomplete.Row.Props, "className" | "style">;
+
+/** A grid row wrapper for multi-column listbox layouts (pass `cols` on the root's `grid`). */
+export function AutocompleteRow(props: AutocompleteRowProps) {
+  return <BaseAutocomplete.Row {...props} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete-status.tsx b/packages/propel/src/components/autocomplete/autocomplete-status.tsx
new file mode 100644
index 00000000..8f6dc9b8
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-status.tsx
@@ -0,0 +1,16 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+import { ListboxStatus } from "../../internal/listbox-status";
+
+export type AutocompleteStatusProps = Omit<
+  BaseAutocomplete.Status.Props,
+  "className" | "style" | "render"
+>;
+
+/**
+ * A polite live region inside the popup for async hints ("Searching…", "12 results") — Base UI's
+ * `Status` behavior grafted onto the shared muted listbox hint styling.
+ */
+export function AutocompleteStatus(props: AutocompleteStatusProps) {
+  return <BaseAutocomplete.Status {...props} render={<ListboxStatus />} />;
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete.stories.tsx b/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
index ed531dae..5b09dd24 100644
--- a/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
+++ b/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
@@ -1,47 +1,50 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronsUpDown, Search as SearchGlyph, X } from "lucide-react";
-import { expect, within } from "storybook/test";
+import * as React from "react";
+import { expect, waitFor, within } from "storybook/test";
 
+import { Button } from "../../elements/button";
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTrigger } from "../dialog/index";
 import { Field, FieldDescription, FieldError, FieldLabel } from "../field/index";
 import { IconButton } from "../icon-button";
 import {
   Autocomplete,
-  AutocompleteClear,
+  AutocompleteCollection,
   AutocompleteContent,
   AutocompleteEmpty,
-  AutocompleteInput,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
   AutocompleteInputGroup,
-  AutocompleteIcon,
   AutocompleteItem,
   AutocompleteList,
-  AutocompleteTrigger,
+  AutocompleteStatus,
+  useFilter,
 } 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.
+// Components-tier story: the ready-mades already carry the Base UI behavior, so the whole
+// autocomplete composes without any Base UI import.
 const meta = {
   title: "Components/Autocomplete",
   component: Autocomplete,
   subcomponents: {
     AutocompleteInputGroup,
-    AutocompleteIcon,
-    AutocompleteInput,
-    AutocompleteClear,
-    AutocompleteTrigger,
     AutocompleteContent,
     AutocompleteList,
     AutocompleteItem,
     AutocompleteEmpty,
+    AutocompleteStatus,
+    AutocompleteGroup,
+    AutocompleteGroupLabel,
+    AutocompleteCollection,
   },
 } satisfies Meta<typeof Autocomplete>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Autocomplete using the ready-made `AutocompleteContent` surface for free-form searchable input. */
+/** A free-form searchable input laid out as a form field, with clear and open controls. */
 export const Default: Story = {
   args: { items: IMAGES, mode: "both", required: true },
   render: (args) => (
@@ -50,42 +53,39 @@ export const Default: Story = {
         <FieldLabel magnitude="md" inset={false}>
           Container image
         </FieldLabel>
-        <AutocompleteInputGroup magnitude="md">
-          <AutocompleteInput magnitude="md" placeholder="e.g. docker.io/library/node:latest" />
-          <AutocompleteClear
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Clear container image"
-              >
-                <X />
-              </IconButton>
-            }
-          />
-          <AutocompleteTrigger
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Open container image"
-              >
-                <ChevronsUpDown />
-              </IconButton>
-            }
-          />
-        </AutocompleteInputGroup>
+        <AutocompleteInputGroup
+          magnitude="md"
+          placeholder="e.g. docker.io/library/node:latest"
+          clear={
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label="Clear container image"
+            >
+              <X />
+            </IconButton>
+          }
+          trigger={
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label="Open container image"
+            >
+              <ChevronsUpDown />
+            </IconButton>
+          }
+        />
         <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: string) => (
+              <AutocompleteItem key={image} value={image} magnitude="md">
                 {image}
               </AutocompleteItem>
-            ))}
+            )}
           </AutocompleteList>
         </AutocompleteContent>
         <FieldError magnitude="md" />
@@ -99,42 +99,516 @@ export const DefaultInteraction: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByRole("combobox", { name: "Container image" }), "node");
+    // Base UI filters the list to the query: matches stay, everything else drops out.
     await expect(within(document.body).getByText("node:22-slim")).toBeInTheDocument();
+    await expect(within(document.body).queryByText("postgres:18")).not.toBeInTheDocument();
+    // The Empty live region stays mounted for screen readers but holds no content (and takes no
+    // space) while there are matches.
+    await expect(within(document.body).getByRole("status")).toBeEmptyDOMElement();
+  },
+};
+
+/**
+ * Interaction test: a query with no matches empties the list and shows the polite "No matches"
+ * status. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const EmptyInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Container image" }), "zzz");
+    const popup = within(document.body);
+    await expect(popup.queryAllByRole("option")).toHaveLength(0);
+    await expect(popup.getByRole("status")).toHaveTextContent("No matches");
   },
 };
 
 /**
- * The autocomplete dressed as a search box: a leading `AutocompleteIcon` magnifier + input + clear,
- * and no chevron trigger. Same parts as `Default` — this is the styling target for folding `Search`
- * into `Autocomplete`.
+ * Interaction test: an invalid `Field` propagates Base UI's validity to the autocomplete input as
+ * `aria-invalid`/`data-invalid` (the input group's frame recolors to danger off
+ * `:has([data-invalid])` — pinned and asserted in the Elements/Autocomplete `States` canary), and
+ * the matching `FieldError` renders. Tagged out of the sidebar/docs/manifest while still running
+ * under the default `test` tag.
  */
+export const InvalidInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { items: IMAGES, mode: "both", required: true },
+  render: (args) => (
+    <Field name="containerImage" invalid>
+      <Autocomplete {...args}>
+        <FieldLabel magnitude="md" inset={false}>
+          Container image
+        </FieldLabel>
+        <AutocompleteInputGroup magnitude="md" placeholder="e.g. docker.io/library/node:latest" />
+        <FieldError match={true} magnitude="md">
+          Enter a container image.
+        </FieldError>
+      </Autocomplete>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("combobox", { name: "Container image" });
+    await expect(input).toHaveAttribute("aria-invalid", "true");
+    await expect(input).toHaveAttribute("data-invalid");
+    await expect(canvas.getByText("Enter a container image.")).toBeInTheDocument();
+  },
+};
+
+/** The autocomplete dressed as a search box: a leading magnifier `icon` + input + clear. */
 export const Search: Story = {
   args: { items: IMAGES, mode: "both" },
   render: (args) => (
     <Autocomplete {...args}>
-      <AutocompleteInputGroup magnitude="md">
-        <AutocompleteIcon>
-          <SearchGlyph />
-        </AutocompleteIcon>
-        <AutocompleteInput magnitude="md" placeholder="Search images" aria-label="Search images" />
-        <AutocompleteClear
-          render={
-            <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear search">
-              <X />
+      <AutocompleteInputGroup
+        magnitude="md"
+        icon={<SearchGlyph />}
+        placeholder="Search images"
+        aria-label="Search images"
+        clear={
+          <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear search">
+            <X />
+          </IconButton>
+        }
+      />
+      <AutocompleteContent>
+        <AutocompleteEmpty>No matches</AutocompleteEmpty>
+        <AutocompleteList>
+          {(image: string) => (
+            <AutocompleteItem key={image} value={image} magnitude="md">
+              {image}
+            </AutocompleteItem>
+          )}
+        </AutocompleteList>
+      </AutocompleteContent>
+    </Autocomplete>
+  ),
+};
+
+export const SearchInteraction: Story = {
+  ...Search,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Search images" }), "redis");
+    await expect(within(document.body).getByText("redis:8.2.2-alpine")).toBeInTheDocument();
+  },
+};
+
+const PROJECTS = ["Design system", "Marketing site", "Mobile app", "Platform API"];
+
+/**
+ * Items loaded asynchronously while typing: the root's `filter={null}` hands filtering to the
+ * consumer, `value`/`onValueChange` drive the (deterministic, 300 ms) lookup, and
+ * `AutocompleteStatus` announces the transient "Searching…" hint and the settled result count in a
+ * polite live region.
+ */
+export const AsyncSearch: Story = {
+  render: function Render() {
+    const [value, setValue] = React.useState("");
+    const [results, setResults] = React.useState<readonly string[]>([]);
+    const [searching, setSearching] = React.useState(false);
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const { contains } = useFilter();
+
+    React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+    return (
+      <Autocomplete
+        items={results}
+        value={value}
+        filter={null}
+        onValueChange={(nextValue) => {
+          setValue(nextValue);
+          clearTimeout(timeoutRef.current);
+          if (nextValue === "") {
+            setSearching(false);
+            setResults([]);
+            return;
+          }
+          setSearching(true);
+          timeoutRef.current = setTimeout(() => {
+            setResults(PROJECTS.filter((project) => contains(project, nextValue)));
+            setSearching(false);
+          }, 300);
+        }}
+      >
+        <AutocompleteInputGroup
+          magnitude="md"
+          icon={<SearchGlyph />}
+          placeholder="Search projects"
+          aria-label="Search projects"
+        />
+        <AutocompleteContent>
+          <AutocompleteStatus>
+            {searching
+              ? "Searching…"
+              : value !== "" && `${results.length} result${results.length === 1 ? "" : "s"}`}
+          </AutocompleteStatus>
+          <AutocompleteList>
+            {(project: string) => (
+              <AutocompleteItem key={project} value={project} magnitude="md">
+                {project}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+        </AutocompleteContent>
+      </Autocomplete>
+    );
+  },
+};
+
+/**
+ * Interaction test: typing kicks off the 300 ms lookup, which settles into the matching item and
+ * the result count in the status region. Tagged out of the sidebar/docs/manifest while still
+ * running under the default `test` tag.
+ */
+export const AsyncSearchInteraction: Story = {
+  ...AsyncSearch,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Search projects" }), "des");
+    const popup = within(document.body);
+    // The in-story delay resolves: the matching item appears and the status settles on the count.
+    await expect(await popup.findByRole("option", { name: "Design system" })).toBeInTheDocument();
+    await expect(popup.getByRole("status")).toHaveTextContent("1 result");
+  },
+};
+
+const GROUPED_LABELS = [
+  { label: "Type", items: ["feature", "fix", "bug", "docs"] },
+  { label: "Component", items: ["component: editor", "component: sidebar", "component: issues"] },
+];
+
+/**
+ * Grouped suggestions: the root receives the grouped `items`, the list function-child receives each
+ * group, and `AutocompleteGroup` + `AutocompleteCollection` render the group's own filtered options
+ * under an `AutocompleteGroupLabel`. Filtering drops empty groups (and their headings)
+ * automatically.
+ */
+export const Grouped: Story = {
+  render: () => (
+    <Autocomplete items={GROUPED_LABELS}>
+      <AutocompleteInputGroup magnitude="md" placeholder="e.g. feature" aria-label="Add label" />
+      <AutocompleteContent>
+        <AutocompleteEmpty>No matches</AutocompleteEmpty>
+        <AutocompleteList>
+          {(group: (typeof GROUPED_LABELS)[number]) => (
+            <AutocompleteGroup key={group.label} items={group.items}>
+              <AutocompleteGroupLabel>{group.label}</AutocompleteGroupLabel>
+              <AutocompleteCollection>
+                {(label: string) => (
+                  <AutocompleteItem key={label} value={label} magnitude="md">
+                    {label}
+                  </AutocompleteItem>
+                )}
+              </AutocompleteCollection>
+            </AutocompleteGroup>
+          )}
+        </AutocompleteList>
+      </AutocompleteContent>
+    </Autocomplete>
+  ),
+};
+
+/**
+ * Interaction test: filtering inside groups keeps only matching options and drops group headings
+ * with no matches. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const GroupedInteraction: Story = {
+  ...Grouped,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Add label" }), "fea");
+    const popup = within(document.body);
+    await expect(popup.getByText("Type")).toBeInTheDocument();
+    await expect(popup.getByText("feature")).toBeInTheDocument();
+    await expect(popup.queryByText("Component")).not.toBeInTheDocument();
+    await expect(popup.queryByText("component: editor")).not.toBeInTheDocument();
+  },
+};
+
+// A subsequence matcher: every query character must appear in the item, in order — so partial or
+// skipped-letter queries ("ngx", "pstgrs") still find their item.
+function fuzzyMatch(item: string, query: string): boolean {
+  const needle = query.trim().toLowerCase();
+  if (needle === "") {
+    return true;
+  }
+  let matched = 0;
+  for (const char of item.toLowerCase()) {
+    if (char === needle[matched]) {
+      matched += 1;
+    }
+    if (matched === needle.length) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Fuzzy matching: a custom `filter` on the root replaces the built-in contains matching, so
+ * relevant results surface even when the query skips characters (e.g. "ngx" still finds
+ * "nginx:1.29-alpine").
+ */
+export const FuzzyMatching: Story = {
+  render: () => (
+    <Autocomplete items={IMAGES} filter={fuzzyMatch}>
+      <AutocompleteInputGroup
+        magnitude="md"
+        icon={<SearchGlyph />}
+        placeholder="Search images"
+        aria-label="Search images"
+      />
+      <AutocompleteContent>
+        <AutocompleteEmpty>No matches</AutocompleteEmpty>
+        <AutocompleteList>
+          {(image: string) => (
+            <AutocompleteItem key={image} value={image} magnitude="md">
+              {image}
+            </AutocompleteItem>
+          )}
+        </AutocompleteList>
+      </AutocompleteContent>
+    </Autocomplete>
+  ),
+};
+
+/**
+ * Interaction test: a skipped-letter query keeps its fuzzy match and drops everything else — the
+ * built-in contains filter would have matched nothing. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const FuzzyMatchingInteraction: Story = {
+  ...FuzzyMatching,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Search images" }), "pstgrs");
+    const popup = within(document.body);
+    await expect(popup.getByRole("option", { name: "postgres:18" })).toBeInTheDocument();
+    await expect(popup.queryByText("node:22-slim")).not.toBeInTheDocument();
+  },
+};
+
+const LABELS = [
+  "accessibility",
+  "backend",
+  "bug",
+  "design",
+  "docs",
+  "feature",
+  "fix",
+  "frontend",
+  "infrastructure",
+  "internal",
+  "mobile",
+  "performance",
+  "research",
+  "testing",
+  "tooling",
+];
+
+const LABEL_LIMIT = 8;
+
+/**
+ * Capped results: the root's `limit` keeps only the first matches visible, and `AutocompleteStatus`
+ * tells users how many more exist so they refine the query instead of scrolling. The controlled
+ * `value` plus the `useFilter` hook compute the hidden count.
+ */
+export const LimitResults: Story = {
+  render: function Render() {
+    const [value, setValue] = React.useState("");
+    const { contains } = useFilter();
+    const total =
+      value.trim() === ""
+        ? LABELS.length
+        : LABELS.filter((label) => contains(label, value.trim())).length;
+    const hidden = Math.max(0, total - LABEL_LIMIT);
+
+    return (
+      <Autocomplete items={LABELS} limit={LABEL_LIMIT} value={value} onValueChange={setValue}>
+        <AutocompleteInputGroup
+          magnitude="md"
+          placeholder="e.g. frontend"
+          aria-label="Filter labels"
+          trigger={
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label="Show all labels"
+            >
+              <ChevronsUpDown />
             </IconButton>
           }
         />
-      </AutocompleteInputGroup>
+        <AutocompleteContent>
+          <AutocompleteEmpty>No matches</AutocompleteEmpty>
+          <AutocompleteList>
+            {(label: string) => (
+              <AutocompleteItem key={label} value={label} magnitude="md">
+                {label}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+          <AutocompleteStatus>
+            {hidden > 0 && `${hidden} more — keep typing to narrow`}
+          </AutocompleteStatus>
+        </AutocompleteContent>
+      </Autocomplete>
+    );
+  },
+};
+
+/**
+ * Interaction test: opening the full list caps the options at the limit and announces the hidden
+ * count; narrowing the query under the cap clears the hint. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const LimitResultsInteraction: Story = {
+  ...LimitResults,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Show all labels" }));
+    const popup = within(document.body);
+    await expect(await popup.findAllByRole("option")).toHaveLength(LABEL_LIMIT);
+    await expect(await popup.findByText(/7 more — keep typing to narrow/)).toBeInTheDocument();
+
+    await userEvent.type(canvas.getByRole("combobox", { name: "Filter labels" }), "front");
+    await expect(popup.getAllByRole("option")).toHaveLength(1);
+    await expect(popup.queryByText(/keep typing to narrow/)).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * `autoHighlight` moves the highlight to the first matching item as the user types, so Enter
+ * accepts the top suggestion without an arrow-key press first.
+ */
+export const AutoHighlight: Story = {
+  args: { items: IMAGES, autoHighlight: true },
+  render: (args) => (
+    <Autocomplete {...args}>
+      <AutocompleteInputGroup
+        magnitude="md"
+        icon={<SearchGlyph />}
+        placeholder="Search images"
+        aria-label="Search images"
+      />
       <AutocompleteContent>
         <AutocompleteEmpty>No matches</AutocompleteEmpty>
         <AutocompleteList>
-          {IMAGES.map((image) => (
-            <AutocompleteItem key={image} value={image}>
+          {(image: string) => (
+            <AutocompleteItem key={image} value={image} magnitude="md">
               {image}
             </AutocompleteItem>
-          ))}
+          )}
         </AutocompleteList>
       </AutocompleteContent>
     </Autocomplete>
   ),
 };
+
+/**
+ * Interaction test: typing highlights the first matching option automatically — no ArrowDown
+ * needed. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const AutoHighlightInteraction: Story = {
+  ...AutoHighlight,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Search images" }), "node");
+    const options = await within(document.body).findAllByRole("option");
+    await expect(options[0]).toHaveTextContent("node:22-slim");
+    await expect(options[0]).toHaveAttribute("data-highlighted");
+  },
+};
+
+const COMMAND_GROUPS = [
+  { label: "Navigation", items: ["Go to inbox", "Go to cycles", "Go to modules"] },
+  { label: "Actions", items: ["Create work item", "Create page", "Invite teammates"] },
+];
+
+/**
+ * A command palette: the autocomplete renders `open` and `inline` inside a `Dialog`, filtering a
+ * grouped command list. `autoHighlight="always"` + `keepHighlight` keep the top command primed for
+ * Enter, and picking a command closes the palette.
+ */
+export const CommandPalette: Story = {
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Button
+          sizing="hug"
+          prominence="secondary"
+          tone="neutral"
+          magnitude="xl"
+          render={<DialogTrigger />}
+        >
+          Open command palette
+        </Button>
+        <DialogContent magnitude="md" aria-label="Command palette">
+          <Autocomplete open inline items={COMMAND_GROUPS} autoHighlight="always" keepHighlight>
+            <DialogHeader>
+              <AutocompleteInputGroup
+                magnitude="md"
+                icon={<SearchGlyph />}
+                placeholder="Search commands"
+                aria-label="Search commands"
+              />
+            </DialogHeader>
+            <DialogBody>
+              <AutocompleteEmpty>No commands found</AutocompleteEmpty>
+              <AutocompleteList>
+                {(group: (typeof COMMAND_GROUPS)[number]) => (
+                  <AutocompleteGroup key={group.label} items={group.items}>
+                    <AutocompleteGroupLabel>{group.label}</AutocompleteGroupLabel>
+                    <AutocompleteCollection>
+                      {(command: string) => (
+                        <AutocompleteItem
+                          key={command}
+                          value={command}
+                          magnitude="md"
+                          onClick={() => setOpen(false)}
+                        >
+                          {command}
+                        </AutocompleteItem>
+                      )}
+                    </AutocompleteCollection>
+                  </AutocompleteGroup>
+                )}
+              </AutocompleteList>
+            </DialogBody>
+          </Autocomplete>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};
+
+/**
+ * Interaction test: the trigger opens the palette, typing filters and auto-highlights the matching
+ * command, and picking it closes the dialog. Tagged out of the sidebar/docs/manifest while still
+ * running under the default `test` tag.
+ */
+export const CommandPaletteInteraction: Story = {
+  ...CommandPalette,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Open command palette" }));
+    const body = within(document.body);
+    const input = await body.findByRole("combobox", { name: "Search commands" });
+
+    await userEvent.type(input, "page");
+    const option = await body.findByRole("option", { name: "Create page" });
+    // `autoHighlight="always"` keeps the top match primed for Enter.
+    await expect(option).toHaveAttribute("data-highlighted");
+    await expect(body.queryByRole("option", { name: "Go to inbox" })).not.toBeInTheDocument();
+
+    await userEvent.click(option);
+    await waitFor(() => expect(body.queryByRole("dialog")).not.toBeInTheDocument());
+  },
+};
diff --git a/packages/propel/src/components/autocomplete/autocomplete.tsx b/packages/propel/src/components/autocomplete/autocomplete.tsx
new file mode 100644
index 00000000..4a7968de
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete.tsx
@@ -0,0 +1,21 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+export type AutocompleteProps<Value> = Omit<
+  BaseAutocomplete.Root.Props<Value>,
+  "className" | "style"
+> & {
+  /** Items to display in the autocomplete list. */
+  items?: readonly Value[];
+  /** The autocomplete's anatomy — an `AutocompleteInput` and the `AutocompletePopup` of items. */
+  children?: React.ReactNode;
+};
+
+/**
+ * The autocomplete Root — Base UI's context/state provider (renders no element of its own). A
+ * behavior-only role, so it lives in `components` (rules 1a, 2); the styled parts live in
+ * `elements/autocomplete` and are grafted onto Base UI behavior here.
+ */
+export function Autocomplete<Value>(props: AutocompleteProps<Value>) {
+  return <BaseAutocomplete.Root {...props} />;
+}
diff --git a/packages/propel/src/components/autocomplete/index.tsx b/packages/propel/src/components/autocomplete/index.tsx
index f64fe52c..fc47b649 100644
--- a/packages/propel/src/components/autocomplete/index.tsx
+++ b/packages/propel/src/components/autocomplete/index.tsx
@@ -1,23 +1,23 @@
+export * from "./autocomplete";
 export * from "./autocomplete-content";
-// Re-export the atomic autocomplete parts so a full autocomplete can be assembled from one entry.
-// `AutocompleteClear`/`AutocompleteTrigger` are behavior-only ui parts now — composed under an
-// `IconButton` via `render` at the call site (see `autocomplete-field`).
+export * from "./autocomplete-empty";
+export * from "./autocomplete-input-group";
+export * from "./autocomplete-item";
+export * from "./autocomplete-list";
+export * from "./autocomplete-collection";
+export * from "./autocomplete-group";
+export * from "./autocomplete-group-label";
+export * from "./autocomplete-row";
+export * from "./autocomplete-status";
+// Re-export the STYLED `elements` parts the ready-mades above do NOT replace, so a custom input
+// row can still be assembled from one entry. Cross-tier re-exports stay explicit — never
+// `export *` — because the ready-made `AutocompleteInputGroup` and `AutocompleteEmpty` replace
+// their same-named `elements` parts (name collision). `Clear`/`Trigger` are the `clear`/`trigger`
+// node props on `AutocompleteInputGroup`; `Portal`/`Positioner`/`Popup` are `AutocompleteContent`;
+// `List`/`Item` are `AutocompleteList`/`AutocompleteItem` — no Base UI import needed at call sites.
 export {
-  Autocomplete,
-  type AutocompleteProps,
-  AutocompleteClear,
-  type AutocompleteClearProps,
-  AutocompleteEmpty,
-  type AutocompleteEmptyProps,
   AutocompleteInput,
   type AutocompleteInputProps,
-  AutocompleteInputGroup,
-  type AutocompleteInputGroupProps,
-  AutocompleteIcon,
-  type AutocompleteIconProps,
-  AutocompleteItem,
-  type AutocompleteItemProps,
-  AutocompleteList,
-  AutocompleteTrigger,
-  type AutocompleteTriggerProps,
-} from "../../ui/autocomplete";
+  type AutocompleteMagnitude,
+} from "../../elements/autocomplete";
+export * from "./use-filter";
diff --git a/packages/propel/src/components/autocomplete/use-filter.ts b/packages/propel/src/components/autocomplete/use-filter.ts
new file mode 100644
index 00000000..ab1a52c8
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/use-filter.ts
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+/**
+ * Base UI's locale-aware filtering hook, re-exported for custom `filter` implementations on the
+ * root (e.g. fuzzy or diacritic-insensitive matching).
+ */
+export const useFilter = BaseAutocomplete.useFilter;
+
+/**
+ * Base UI's hook pairing `useFilter` with the root's `items`, returning the filtered collection —
+ * for rendering fully custom list structures.
+ */
+export const useFilteredItems = BaseAutocomplete.useFilteredItems;
diff --git a/packages/propel/src/components/avatar-group/avatar-group.stories.tsx b/packages/propel/src/components/avatar-group/avatar-group.stories.tsx
index 28687593..309247a4 100644
--- a/packages/propel/src/components/avatar-group/avatar-group.stories.tsx
+++ b/packages/propel/src/components/avatar-group/avatar-group.stories.tsx
@@ -2,7 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
 import { Avatar } from "../avatar/index";
-import { AvatarGroup } from "./index";
+import { AvatarGroup, type AvatarGroupMagnitude } from "./index";
+
+const MAGNITUDES: AvatarGroupMagnitude[] = ["2xs", "xs", "sm"];
 
 const meta = {
   title: "Components/AvatarGroup",
@@ -59,6 +61,26 @@ export const ThreeMembersInteraction: Story = {
   },
 };
 
+/**
+ * All group sizes side by side (Figma Small/Base/Large map to 2xs/xs/sm — 16/20/24px). The group's
+ * `magnitude` sizes every member at once.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude`, the group's only arg, so disable its control.
+  argTypes: { magnitude: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <AvatarGroup key={magnitude} {...args} magnitude={magnitude}>
+          <Avatar alt="Ada" fallback="AL" src="https://i.pravatar.cc/64?img=47" />
+          <Avatar alt="Grace" fallback="GH" src="https://i.pravatar.cc/64?img=32" />
+          <Avatar alt="Linus" fallback="LT" />
+        </AvatarGroup>
+      ))}
+    </div>
+  ),
+};
+
 /**
  * Overflow pattern: show a few members as images, then a final avatar with a "+N" count for the
  * rest. The counter is just an `Avatar` with a `fallback`.
diff --git a/packages/propel/src/components/avatar-group/avatar-group.tsx b/packages/propel/src/components/avatar-group/avatar-group.tsx
index dd644f94..6430ddea 100644
--- a/packages/propel/src/components/avatar-group/avatar-group.tsx
+++ b/packages/propel/src/components/avatar-group/avatar-group.tsx
@@ -1,10 +1,10 @@
 import type * as React from "react";
 
-import { type AvatarMagnitude } from "../../ui/avatar";
+import { type AvatarMagnitude } from "../../elements/avatar";
 import {
   AvatarGroup as AvatarGroupElement,
   type AvatarGroupProps as AvatarGroupElementProps,
-} from "../../ui/avatar-group";
+} from "../../elements/avatar-group";
 import { AvatarGroupContext } from "../avatar/avatar-group-context";
 
 // Figma's "Avatar Groups" component only defines three sizes (Small/Base/Large = 16/20/24px), so
@@ -19,13 +19,14 @@ export type AvatarGroupProps = AvatarGroupElementProps & {
 
 /**
  * The ready-made overlapping avatar stack: shares `magnitude` with every `Avatar` inside via
- * context (an avatar's own `magnitude` still wins), composed around the styled `ui/avatar-group`
- * container. Each `Avatar`'s own `border-subtle` is the single ring that separates them.
+ * context (an avatar's own `magnitude` still wins), composed around the styled
+ * `elements/avatar-group` container. Each `Avatar`'s own `border-subtle` is the single ring that
+ * separates them.
  */
-export function AvatarGroup({ magnitude, children, ...props }: AvatarGroupProps) {
+export function AvatarGroup({ magnitude, ...props }: AvatarGroupProps) {
   return (
     <AvatarGroupContext.Provider value={magnitude}>
-      <AvatarGroupElement {...props}>{children}</AvatarGroupElement>
+      <AvatarGroupElement {...props} />
     </AvatarGroupContext.Provider>
   );
 }
diff --git a/packages/propel/src/components/avatar/avatar-group-context.ts b/packages/propel/src/components/avatar/avatar-group-context.ts
index af2ea9d9..6765f592 100644
--- a/packages/propel/src/components/avatar/avatar-group-context.ts
+++ b/packages/propel/src/components/avatar/avatar-group-context.ts
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import type { AvatarMagnitude } from "../../ui/avatar";
+import type { AvatarMagnitude } from "../../elements/avatar";
 
 /**
  * Set by the components `AvatarGroup` so every `Avatar` inside it shares one `magnitude` (an
  * avatar's own `magnitude` still wins). Lives in the components tier: a context is cross-tree
- * coordination — composition — not a single-element `ui` concern.
+ * coordination — composition — not a single-element `elements` concern.
  */
 export const AvatarGroupContext = React.createContext<AvatarMagnitude | undefined>(undefined);
diff --git a/packages/propel/src/components/avatar/avatar.stories.tsx b/packages/propel/src/components/avatar/avatar.stories.tsx
index 56e7e34d..c0fb7c39 100644
--- a/packages/propel/src/components/avatar/avatar.stories.tsx
+++ b/packages/propel/src/components/avatar/avatar.stories.tsx
@@ -1,10 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
+import * as React from "react";
+import { expect, waitFor } from "storybook/test";
 
 import { AVATAR_TONES, type AvatarMagnitude, Avatar } from "./index";
 
 const MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
 
+// An inline-SVG "photo" so the delayed-fallback demo loads deterministically with no network.
+const PHOTO_SRC = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#7dd3fc"/><circle cx="44" cy="18" r="8" fill="#fde047"/><path d="M0 64 24 34l14 16 10-10 16 24Z" fill="#16a34a"/></svg>',
+)}`;
+
 const meta = {
   title: "Components/Avatar",
   component: Avatar,
@@ -69,6 +75,45 @@ export const States: Story = {
   ),
 };
 
+/**
+ * `delay` (here 300ms) keeps initials from flashing on fast connections: nothing renders during the
+ * delay, the initials appear only while the image is still missing past it, and the photo takes
+ * over once it loads (the slow connection is simulated at 900ms).
+ */
+export const DelayedFallback: Story = {
+  // The demo owns `src` (it arrives late) and `delay`; disable just those two controls so the
+  // rest stay live.
+  argTypes: { src: { control: false }, delay: { control: false } },
+  render: function Render(args) {
+    const [src, setSrc] = React.useState<string>();
+    React.useEffect(() => {
+      const timer = window.setTimeout(() => setSrc(PHOTO_SRC), 900);
+      return () => window.clearTimeout(timer);
+    }, []);
+    return <Avatar {...args} src={src} delay={300} />;
+  },
+};
+
+/**
+ * Interaction twin for `DelayedFallback`: no initials inside the delay window, initials once the
+ * delay elapses with the image still missing, and the loaded photo replaces them. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const DelayedFallbackInteraction: Story = {
+  ...DelayedFallback,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement }) => {
+    // Inside the 300ms delay window the fallback must not render — no initials flash.
+    await expect(canvas.queryByText("AL")).not.toBeInTheDocument();
+    // Past the delay, with the image still missing, the initials appear…
+    await waitFor(() => expect(canvas.getByText("AL")).toBeInTheDocument());
+    // …until the photo loads (simulated at 900ms) and replaces them. The `<img>` is decorative
+    // (`alt=""`, the root owns the accessible name), so query the element directly.
+    await waitFor(() => expect(canvasElement.querySelector("img")).toBeInTheDocument());
+    await expect(canvas.queryByText("AL")).not.toBeInTheDocument();
+  },
+};
+
 /**
  * The single project-wide CSS check: an `md` avatar is `size-7` (28px) and the tone utility
  * resolves to a real color. Concrete computed values prove the shared preview actually compiled
diff --git a/packages/propel/src/components/avatar/avatar.tsx b/packages/propel/src/components/avatar/avatar.tsx
index e1c5fc07..44197279 100644
--- a/packages/propel/src/components/avatar/avatar.tsx
+++ b/packages/propel/src/components/avatar/avatar.tsx
@@ -1,3 +1,4 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { User } from "lucide-react";
 import * as React from "react";
 
@@ -10,7 +11,7 @@ import {
   type AvatarProps as AvatarElementProps,
   type AvatarTone,
   getAvatarTone,
-} from "../../ui/avatar";
+} from "../../elements/avatar";
 import { AvatarGroupContext } from "./avatar-group-context";
 
 export type AvatarProps = Omit<AvatarElementProps, "magnitude"> & {
@@ -24,18 +25,21 @@ export type AvatarProps = Omit<AvatarElementProps, "magnitude"> & {
   fallback?: React.ReactNode;
   /** Initials background color. Defaults to a stable color derived from `alt`. */
   tone?: AvatarTone;
+  /** Milliseconds before the fallback shows, to avoid a flash while `src` loads quickly. */
+  delay?: number;
 };
 
 /**
  * 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
+ * composed from the `elements/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) {
+export function Avatar({ magnitude, src, alt, fallback, tone, delay, ...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.
+  // color; the anonymous person icon renders in the icon slot over the root's neutral backdrop
+  // (there is no "none" tone).
   const hasInitials = fallback != null;
   const groupMagnitude = React.useContext(AvatarGroupContext);
   const effectiveMagnitude = magnitude ?? groupMagnitude ?? "md";
@@ -44,16 +48,24 @@ export function Avatar({ magnitude, src, alt, fallback, tone, ...props }: Avatar
   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.
-    <AvatarElement role="img" aria-label={alt} magnitude={effectiveMagnitude} {...props}>
-      {src ? <AvatarImage src={src} alt="" /> : null}
-      <AvatarFallback tone={hasInitials ? resolvedTone : "none"}>
-        {fallback ?? (
-          <AvatarIcon magnitude={effectiveMagnitude}>
-            <User />
-          </AvatarIcon>
-        )}
-      </AvatarFallback>
-    </AvatarElement>
+    // (image / initials / icon); the inner image is decorative. Base UI `Avatar` behavior/context
+    // grafts onto the styled `elements/avatar` parts via `render` (behavior part outer).
+    <BaseAvatar.Root
+      role="img"
+      aria-label={alt}
+      {...props}
+      render={<AvatarElement magnitude={effectiveMagnitude} />}
+    >
+      {src ? <BaseAvatar.Image render={<AvatarImage />} src={src} alt="" /> : null}
+      {hasInitials ? (
+        <BaseAvatar.Fallback delay={delay} render={<AvatarFallback tone={resolvedTone} />}>
+          {fallback}
+        </BaseAvatar.Fallback>
+      ) : (
+        <BaseAvatar.Fallback delay={delay} render={<AvatarIcon magnitude={effectiveMagnitude} />}>
+          <User />
+        </BaseAvatar.Fallback>
+      )}
+    </BaseAvatar.Root>
   );
 }
diff --git a/packages/propel/src/components/avatar/index.tsx b/packages/propel/src/components/avatar/index.tsx
index c86a9294..aabba4fb 100644
--- a/packages/propel/src/components/avatar/index.tsx
+++ b/packages/propel/src/components/avatar/index.tsx
@@ -1,4 +1,4 @@
 export * 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";
+// consumers) can reach them without dropping to `elements/avatar`.
+export { AVATAR_TONES, type AvatarMagnitude, type AvatarTone } from "../../elements/avatar";
diff --git a/packages/propel/src/components/badge/badge.stories.tsx b/packages/propel/src/components/badge/badge.stories.tsx
index 2616f697..026015fa 100644
--- a/packages/propel/src/components/badge/badge.stories.tsx
+++ b/packages/propel/src/components/badge/badge.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, Sparkles } from "lucide-react";
 
 import { iconControl } from "../../storybook/icon-control";
-import { Badge, BadgeIcon, BadgeLabel, type BadgeMagnitude, type BadgeTone } from "./index";
+import { Badge, BadgeLabel, type BadgeMagnitude, type BadgeTone } from "./index";
 
 const TONES: BadgeTone[] = [
   "neutral",
@@ -24,12 +24,12 @@ const MAGNITUDES: BadgeMagnitude[] = ["sm", "md", "lg"];
 // Badge is static — no interaction-state styling — so it gets no pseudo-states story;
 // its variation is fully covered by Tones + Magnitudes. This is the ready-made
 // composition: the `Badge` pill plus optional leading/trailing icon nodes
-// (`inlineStartNode` / `inlineEndNode`), wired to the atomic `ui/badge` parts.
+// (`startIcon` / `endIcon`), wired to the atomic `elements/badge` parts.
 const meta = {
   title: "Components/Badge",
   component: Badge,
-  subcomponents: { BadgeIcon, BadgeLabel },
-  argTypes: { inlineStartNode: iconControl, inlineEndNode: iconControl },
+  subcomponents: { BadgeLabel },
+  argTypes: { startIcon: iconControl, endIcon: iconControl },
   args: {
     children: "Badge",
     tone: "neutral",
@@ -76,19 +76,13 @@ export const Magnitudes: Story = {
   ),
 };
 
-/** A leading icon node (`inlineStartNode`), sized to the magnitude and tinted to the tone. */
+/** A leading icon node (`startIcon`), sized to the magnitude and tinted to the tone. */
 export const WithLeadingIcon: 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 />}
-        >
+        <Badge key={magnitude} {...args} tone="success" magnitude={magnitude} startIcon={<Check />}>
           Done
         </Badge>
       ))}
@@ -96,19 +90,13 @@ export const WithLeadingIcon: Story = {
   ),
 };
 
-/** A trailing icon node (`inlineEndNode`), sized + tinted the same as the leading slot. */
+/** A trailing icon node (`endIcon`), sized + tinted the same as the leading slot. */
 export const WithTrailingIcon: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <Badge
-          key={magnitude}
-          {...args}
-          tone="brand"
-          magnitude={magnitude}
-          inlineEndNode={<Sparkles />}
-        >
+        <Badge key={magnitude} {...args} tone="brand" magnitude={magnitude} endIcon={<Sparkles />}>
           Pro
         </Badge>
       ))}
diff --git a/packages/propel/src/components/badge/badge.tsx b/packages/propel/src/components/badge/badge.tsx
index b2a0299d..319b052e 100644
--- a/packages/propel/src/components/badge/badge.tsx
+++ b/packages/propel/src/components/badge/badge.tsx
@@ -3,9 +3,9 @@ import type * as React from "react";
 import {
   Badge as BadgeElement,
   type BadgeProps as BadgeElementProps,
-  BadgeIcon,
   BadgeLabel,
-} from "../../ui/badge";
+} from "../../elements/badge";
+import { Icon } from "../../internal/icon";
 
 export type BadgeProps = BadgeElementProps & {
   /** The badge label — text, a count, or any inline content. */
@@ -14,24 +14,24 @@ export type BadgeProps = BadgeElementProps & {
    * Node rendered before the label (inline-start). A bare icon or any node; sized to the badge's
    * `--node-size` and tinted to the tone. Decorative, kept out of the name.
    */
-  inlineStartNode?: React.ReactNode;
+  startIcon?: React.ReactNode;
   /**
    * Node rendered after the label (inline-end). A bare icon or any node; sized to the badge's
    * `--node-size` and tinted to the tone. Decorative, kept out of the name.
    */
-  inlineEndNode?: React.ReactNode;
+  endIcon?: React.ReactNode;
 };
 
 /**
  * The ready-made badge: composes the atomic `Badge` pill with the `BadgeLabel` and optional leading
- * (`inlineStartNode`) and trailing (`inlineEndNode`) icon slots.
+ * (`startIcon`) and trailing (`endIcon`) icon slots.
  */
-export function Badge({ children, inlineStartNode, inlineEndNode, ...props }: BadgeProps) {
+export function Badge({ children, startIcon, endIcon, ...props }: BadgeProps) {
   return (
     <BadgeElement {...props}>
-      {inlineStartNode ? <BadgeIcon>{inlineStartNode}</BadgeIcon> : null}
+      {startIcon ? <Icon>{startIcon}</Icon> : null}
       <BadgeLabel>{children}</BadgeLabel>
-      {inlineEndNode ? <BadgeIcon>{inlineEndNode}</BadgeIcon> : null}
+      {endIcon ? <Icon>{endIcon}</Icon> : null}
     </BadgeElement>
   );
 }
diff --git a/packages/propel/src/components/badge/index.tsx b/packages/propel/src/components/badge/index.tsx
index dd9bf17d..697ef603 100644
--- a/packages/propel/src/components/badge/index.tsx
+++ b/packages/propel/src/components/badge/index.tsx
@@ -1,10 +1,8 @@
 export * from "./badge";
 // Re-export the atomic parts so a full badge is composable from this convenience.
 export {
-  BadgeIcon,
-  type BadgeIconProps,
   BadgeLabel,
   type BadgeLabelProps,
   type BadgeMagnitude,
   type BadgeTone,
-} from "../../ui/badge";
+} from "../../elements/badge";
diff --git a/packages/propel/src/components/banner/banner.stories.tsx b/packages/propel/src/components/banner/banner.stories.tsx
index 88f85fd6..d95324ba 100644
--- a/packages/propel/src/components/banner/banner.stories.tsx
+++ b/packages/propel/src/components/banner/banner.stories.tsx
@@ -9,10 +9,12 @@ import { Banner, type BannerTone } from "./index";
 
 const TONES: BannerTone[] = ["neutral", "info", "accent", "warning", "danger"];
 
+const dismissSpy = fn();
+
 const meta = {
   title: "Components/Banner",
   component: Banner,
-  argTypes: { inlineStartNode: iconControl },
+  argTypes: { icon: iconControl },
   args: {
     title: "There is something that needs your attention",
     placement: "page",
@@ -107,6 +109,35 @@ export const Dismissible: Story = {
   },
 };
 
+/**
+ * Hidden interaction twin of `Dismissible`: clicking the dismiss `IconButton` rendered in `actions`
+ * invokes its handler. Tagged out of the sidebar/docs/manifest but still run under the default
+ * `test` tag.
+ */
+export const DismissibleInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    placement: "inline",
+    tone: "info",
+    actions: (
+      <IconButton
+        prominence="ghost"
+        tone="neutral"
+        magnitude="md"
+        aria-label="Dismiss"
+        onClick={dismissSpy}
+      >
+        <X />
+      </IconButton>
+    ),
+  },
+  play: async ({ canvas, userEvent }) => {
+    dismissSpy.mockClear();
+    await userEvent.click(canvas.getByRole("button", { name: "Dismiss" }));
+    await expect(dismissSpy).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.
@@ -115,14 +146,14 @@ export const OptionalContentSemantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
     <div className="flex w-160 flex-col gap-3">
-      <Banner placement="inline" tone="warning" inlineStartNode={null}>
+      <Banner placement="inline" tone="warning" icon={null}>
         Maintenance starts at 6 PM.
       </Banner>
       <Banner
         placement="inline"
         tone="info"
         title="Custom icon"
-        inlineStartNode={<Info data-testid="custom-banner-icon" />}
+        icon={<Info data-testid="custom-banner-icon" />}
       />
     </div>
   ),
diff --git a/packages/propel/src/components/banner/banner.tsx b/packages/propel/src/components/banner/banner.tsx
index e4b2b9cb..680053f2 100644
--- a/packages/propel/src/components/banner/banner.tsx
+++ b/packages/propel/src/components/banner/banner.tsx
@@ -10,12 +10,12 @@ import {
   type BannerProps as BannerElementProps,
   type BannerTone,
   BannerTitle,
-} from "../../ui/banner";
+} from "../../elements/banner";
 
-export type { BannerTone, BannerPlacement } from "../../ui/banner";
+export type { BannerTone, BannerPlacement } from "../../elements/banner";
 
 // The leading icon the system picks per tone when none is supplied. Treated as
-// content (overridable via `inlineStartNode`), not a style placement.
+// content (overridable via `icon`), not a style placement.
 const toneIcon: Record<BannerTone, LucideIcon> = {
   neutral: Info,
   info: Info,
@@ -29,7 +29,7 @@ export type BannerProps = BannerElementProps & {
    * 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;
+  icon?: React.ReactNode;
   /** The banner's headline. Rendered as its own block above any `children` body. */
   title?: React.ReactNode;
   /**
@@ -42,28 +42,20 @@ export type BannerProps = BannerElementProps & {
 /**
  * The ready-made banner: composes the atomic banner parts — the tone icon, the message body
  * (`title` + `children`), and trailing `actions` — so consumers pass content, not layout. A dismiss
- * is just an action: render an `IconButton` in `actions`. Drop down to `@plane/propel/ui/banner` to
- * assemble the parts directly.
+ * is just an action: render an `IconButton` in `actions`. Drop down to
+ * `@plane/propel/elements/banner` to assemble the parts directly.
  */
-export function Banner({
-  placement,
-  tone,
-  inlineStartNode,
-  title,
-  actions,
-  children,
-  ...props
-}: BannerProps) {
+export function Banner({ placement, tone, icon, title, actions, children, ...props }: BannerProps) {
   const DefaultIcon = toneIcon[tone];
   return (
     <BannerElement placement={placement} tone={tone} {...props}>
-      {inlineStartNode === undefined ? (
+      {icon === undefined ? (
         <BannerIcon placement={placement} tone={tone}>
           <DefaultIcon />
         </BannerIcon>
-      ) : inlineStartNode ? (
+      ) : icon ? (
         <BannerIcon placement={placement} tone={tone}>
-          {inlineStartNode}
+          {icon}
         </BannerIcon>
       ) : null}
       <BannerBody placement={placement} tone={tone}>
diff --git a/packages/propel/src/components/banner/index.tsx b/packages/propel/src/components/banner/index.tsx
index 7979d03d..22b4b3b9 100644
--- a/packages/propel/src/components/banner/index.tsx
+++ b/packages/propel/src/components/banner/index.tsx
@@ -1,5 +1,5 @@
 // Ready-made banner: composes the atomic parts behind convenience props (tone icon, title, actions,
-// dismiss). Drop down to `@plane/propel/ui/banner` for the lower-level parts.
+// dismiss). Drop down to `@plane/propel/elements/banner` for the lower-level parts.
 export * from "./banner";
 // Re-export the atomic parts so a fully custom banner is importable from this convenience.
 export {
@@ -13,4 +13,4 @@ export {
   type BannerIconProps,
   BannerTitle,
   type BannerTitleProps,
-} from "../../ui/banner";
+} from "../../elements/banner";
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx
new file mode 100644
index 00000000..f3a911b8
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx
@@ -0,0 +1,33 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Ellipsis } from "lucide-react";
+import type * as React from "react";
+
+import { BreadcrumbTrigger } from "../../elements/breadcrumb";
+import { Icon } from "../../internal/icon";
+
+export type BreadcrumbEllipsisTriggerProps = Omit<
+  BaseMenu.Trigger.Props,
+  "className" | "style" | "children"
+> & {
+  /** Accessible name for the trigger (e.g. "Show more breadcrumbs"). Required (icon-only). */
+  "aria-label": string;
+  /** The trigger glyph. @default an ellipsis */
+  icon?: React.ReactNode;
+};
+
+/**
+ * The icon-only crumb standing in for collapsed crumbs — grafts Base UI's `Menu.Trigger` onto the
+ * styled `BreadcrumbTrigger`, with an ellipsis glyph by default (defaults are a `components`
+ * concern). Unlike `BreadcrumbMenuTrigger` it carries no label and no chevron indicator: a
+ * `BreadcrumbSeparator` follows it in the trail. Place a `MenuContent` of the hidden crumbs as its
+ * sibling inside a `Menu`.
+ */
+export function BreadcrumbEllipsisTrigger({ icon, ...props }: BreadcrumbEllipsisTriggerProps) {
+  return (
+    <BaseMenu.Trigger render={<BreadcrumbTrigger />} {...props}>
+      <Icon tint="tertiary" magnitude="md">
+        {icon ?? <Ellipsis />}
+      </Icon>
+    </BaseMenu.Trigger>
+  );
+}
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
index cd76a716..fee22f6d 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
@@ -1,14 +1,12 @@
-import { Menu } from "@base-ui/react/menu";
-import { ChevronRight } from "lucide-react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
-import {
-  BreadcrumbTrigger,
-  BreadcrumbTriggerIcon,
-  BreadcrumbTriggerIndicator,
-} from "../../ui/breadcrumb";
+import { BreadcrumbTrigger } from "../../elements/breadcrumb";
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
 
-export type BreadcrumbMenuTriggerProps = Omit<Menu.Trigger.Props, "className" | "style"> & {
+export type BreadcrumbMenuTriggerProps = Omit<BaseMenu.Trigger.Props, "className" | "style"> & {
   /** Leading content, typically a work-item/page icon. */
   icon?: React.ReactNode;
   /** The crumb label. */
@@ -18,12 +16,16 @@ export type BreadcrumbMenuTriggerProps = Omit<Menu.Trigger.Props, "className" |
 /** The crumb that opens a `BreadcrumbMenu`. */
 export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMenuTriggerProps) {
   return (
-    <Menu.Trigger render={<BreadcrumbTrigger group />} {...props}>
-      {icon != null ? <BreadcrumbTriggerIcon>{icon}</BreadcrumbTriggerIcon> : null}
+    <BaseMenu.Trigger render={<BreadcrumbTrigger group />} {...props}>
+      {icon != null ? (
+        <Icon tint="tertiary" magnitude="md">
+          {icon}
+        </Icon>
+      ) : null}
       {children}
-      <BreadcrumbTriggerIndicator>
-        <ChevronRight />
-      </BreadcrumbTriggerIndicator>
-    </Menu.Trigger>
+      <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
+        <ChevronDown />
+      </DisclosureIndicator>
+    </BaseMenu.Trigger>
   );
 }
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-separator.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-separator.tsx
index e30f5b47..4b28cfc4 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb-separator.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-separator.tsx
@@ -3,13 +3,14 @@ import { ChevronRight } from "lucide-react";
 import {
   BreadcrumbSeparator as BreadcrumbSeparatorSlot,
   type BreadcrumbSeparatorProps as BreadcrumbSeparatorSlotProps,
-} from "../../ui/breadcrumb";
+} from "../../elements/breadcrumb";
 
 export type BreadcrumbSeparatorProps = BreadcrumbSeparatorSlotProps;
 
 /**
  * The divider between crumbs. Defaults to a chevron — the ready-made breadcrumb owns the default
- * glyph so the `ui` slot stays a pure single element. Pass `children` to use a different divider.
+ * glyph so the `elements` slot stays a pure single element. Pass `children` to use a different
+ * divider.
  */
 export function BreadcrumbSeparator({ children, ...props }: BreadcrumbSeparatorProps) {
   return (
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
index 9e49875b..bcced502 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -1,13 +1,11 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Ellipsis, Layers } from "lucide-react";
+import { Layers } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { BreadcrumbTrigger, BreadcrumbTriggerIcon } from "../../ui/breadcrumb";
-import { Menu } from "../../ui/menu";
-import { MenuContent, MenuItem } from "../menu";
+import { Menu, MenuContent, MenuItem } from "../menu";
 import {
   Breadcrumb,
+  BreadcrumbEllipsisTrigger,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
@@ -30,6 +28,7 @@ const meta = {
     BreadcrumbPage,
     Menu,
     BreadcrumbMenuTrigger,
+    BreadcrumbEllipsisTrigger,
     MenuContent,
     MenuItem,
   },
@@ -97,9 +96,9 @@ export const DefaultInteraction: Story = {
 };
 
 /**
- * When the trail is too long, collapse the middle crumbs behind a menu. The ellipsis crumb opens a
- * `Menu` of the hidden crumbs — there is no separate "dropdown": it is the same Menu composition,
- * with an ellipsis `BreadcrumbTriggerIcon` standing in for a label.
+ * When the trail is too long, collapse the middle crumbs behind a menu. The
+ * `BreadcrumbEllipsisTrigger` crumb opens a `Menu` of the hidden crumbs — there is no separate
+ * "dropdown": it is the same Menu composition, with an ellipsis glyph standing in for a label.
  */
 export const WithCollapsedCrumbs: Story = {
   render: () => (
@@ -113,12 +112,8 @@ export const WithCollapsedCrumbs: Story = {
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <Menu>
-            <BaseMenu.Trigger aria-label="Show more breadcrumbs" render={<BreadcrumbTrigger />}>
-              <BreadcrumbTriggerIcon>
-                <Ellipsis />
-              </BreadcrumbTriggerIcon>
-            </BaseMenu.Trigger>
-            <MenuContent width="auto">
+            <BreadcrumbEllipsisTrigger aria-label="Show more breadcrumbs" />
+            <MenuContent sizing="auto">
               <MenuItem render={inertAnchor()}>Projects</MenuItem>
               <MenuItem render={inertAnchor()}>Design</MenuItem>
             </MenuContent>
diff --git a/packages/propel/src/components/breadcrumb/index.tsx b/packages/propel/src/components/breadcrumb/index.tsx
index ea503562..6e016953 100644
--- a/packages/propel/src/components/breadcrumb/index.tsx
+++ b/packages/propel/src/components/breadcrumb/index.tsx
@@ -9,6 +9,7 @@ export {
   type BreadcrumbListProps,
   BreadcrumbPage,
   type BreadcrumbPageProps,
-} from "../../ui/breadcrumb";
-export * from "./breadcrumb-separator";
+} from "../../elements/breadcrumb";
+export * from "./breadcrumb-ellipsis-trigger";
 export * from "./breadcrumb-menu-trigger";
+export * from "./breadcrumb-separator";
diff --git a/packages/propel/src/components/button-anchor/button-anchor.stories.tsx b/packages/propel/src/components/button-anchor/button-anchor.stories.tsx
deleted file mode 100644
index 6d97ba5a..00000000
--- a/packages/propel/src/components/button-anchor/button-anchor.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, fn } from "storybook/test";
-
-import { ButtonAnchor, type ButtonAnchorMagnitude, type ButtonAnchorProminence } from "./index";
-
-const PROMINENCES: ButtonAnchorProminence[] = ["primary", "secondary"];
-const MAGNITUDES: ButtonAnchorMagnitude[] = ["sm", "md", "lg", "xl"];
-
-// A <button> (action) that reads as an inline link — the "action that looks like a link" (e.g.
-// "Show more"). For a nav <a> that looks like a button use `AnchorButton`; for a real link, `Anchor`.
-const meta = {
-  title: "Components/ButtonAnchor",
-  component: ButtonAnchor,
-  args: { children: "Show more", prominence: "primary", magnitude: "md" },
-} satisfies Meta<typeof ButtonAnchor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** `prominence`: `primary` is the blue link; `secondary` the muted gray inline link. */
-export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-4">
-      {PROMINENCES.map((prominence) => (
-        <ButtonAnchor key={prominence} {...args} prominence={prominence}>
-          {prominence} action
-        </ButtonAnchor>
-      ))}
-    </div>
-  ),
-};
-
-/** Text 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-4">
-      {MAGNITUDES.map((magnitude) => (
-        <ButtonAnchor key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </ButtonAnchor>
-      ))}
-    </div>
-  ),
-};
-
-/** It is a `<button>` (an action) — clicking fires `onClick`, not navigation. */
-export const ActsNotNavigates: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { onClick: fn() },
-  play: async ({ args, canvas, userEvent }) => {
-    const button = canvas.getByRole("button", { name: "Show more" });
-    await userEvent.click(button);
-    await expect(args.onClick).toHaveBeenCalledOnce();
-  },
-};
diff --git a/packages/propel/src/components/button-anchor/index.tsx b/packages/propel/src/components/button-anchor/index.tsx
deleted file mode 100644
index 1ca304af..00000000
--- a/packages/propel/src/components/button-anchor/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-// Ready-made 1:1 re-export of the ui primitive. Drop to `@plane/propel/ui/button-anchor` only for
-// the lower-level part. (`ButtonAnchor` is a single styled `<button>`, so nothing extra to compose.)
-export * from "../../ui/button-anchor";
diff --git a/packages/propel/src/components/button/button.stories.tsx b/packages/propel/src/components/button/button.stories.tsx
index 947f5616..dd9f6d1d 100644
--- a/packages/propel/src/components/button/button.stories.tsx
+++ b/packages/propel/src/components/button/button.stories.tsx
@@ -1,16 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Plus, Search, Settings } from "lucide-react";
-import { expect, fn, userEvent as baseUserEvent } from "storybook/test";
+import * as React from "react";
+import { expect, fn, userEvent as baseUserEvent, waitFor } from "storybook/test";
 
 import { iconControl } from "../../storybook/icon-control";
-import {
-  Button,
-  ButtonIcon,
-  ButtonLabel,
-  type ButtonMagnitude,
-  ButtonSpinner,
-  type ButtonProminence,
-} from "./index";
+import { Button, ButtonLabel, type ButtonMagnitude, type ButtonProminence } from "./index";
 
 const PROMINENCES: ButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
 const MAGNITUDES: ButtonMagnitude[] = ["sm", "md", "lg", "xl"];
@@ -19,9 +13,9 @@ const meta = {
   title: "Components/Button",
   component: Button,
   // Anatomy parts the ready-made Button composes (UI tier).
-  subcomponents: { ButtonIcon, ButtonLabel, ButtonSpinner },
+  subcomponents: { ButtonLabel },
   // Icon picker controls for the two icon slots.
-  argTypes: { inlineStartNode: iconControl, inlineEndNode: iconControl },
+  argTypes: { startIcon: iconControl, endIcon: iconControl },
   parameters: {
     design: {
       type: "figma",
@@ -100,13 +94,13 @@ export const WithIcons: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
     <div className="flex items-center gap-3">
-      <Button {...args} inlineStartNode={<Plus />}>
+      <Button {...args} startIcon={<Plus />}>
         New
       </Button>
-      <Button {...args} prominence="secondary" inlineEndNode={<Settings />}>
+      <Button {...args} prominence="secondary" endIcon={<Settings />}>
         Settings
       </Button>
-      <Button {...args} prominence="tertiary" inlineStartNode={<Search />} inlineEndNode={<Plus />}>
+      <Button {...args} prominence="tertiary" startIcon={<Search />} endIcon={<Plus />}>
         Search
       </Button>
     </div>
@@ -131,6 +125,31 @@ export const Loading: Story = {
   ),
 };
 
+/**
+ * A submit that enters `loading` after being clicked: the click starts the work (a deterministic
+ * 300 ms delay here), the button shows the spinner, announces `aria-busy`, and blocks re-submits —
+ * yet keeps keyboard focus while soft-disabled — then settles back once the work resolves.
+ */
+export const AsyncSubmit: Story = {
+  parameters: { controls: { disable: true } },
+  // Rule 2c: hooks live in a named-function render, not a local example component.
+  render: function Render(args) {
+    const [submitting, setSubmitting] = React.useState(false);
+    return (
+      <Button
+        {...args}
+        loading={submitting}
+        onClick={() => {
+          setSubmitting(true);
+          window.setTimeout(() => setSubmitting(false), 300);
+        }}
+      >
+        {submitting ? "Submitting" : "Submit"}
+      </Button>
+    );
+  },
+};
+
 /** `sizing="fill"` fills the container (e.g. a form row or mobile CTA). */
 export const Stretch: Story = {
   parameters: { controls: { disable: true } },
@@ -261,3 +280,117 @@ export const LoadingBlocksClick: Story = {
     await expect(args.onClick).not.toHaveBeenCalled();
   },
 };
+
+/**
+ * The async-submit cycle keeps focus on the button the whole time: activating it flips the button
+ * into `loading` (`aria-busy`, soft-disabled) WITHOUT dropping focus, and once the work settles the
+ * button is enabled again with focus still in place — a keyboard user never loses their spot.
+ */
+export const AsyncSubmitKeepsFocus: Story = {
+  ...AsyncSubmit,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Submit" });
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    // The work is in flight: busy + soft-disabled, but focus never left the button.
+    await expect(button).toHaveAttribute("aria-busy", "true");
+    await expect(button).toHaveAccessibleName("Submitting");
+    await expect(button).toHaveFocus();
+    // The work settles: interactive again, focus still on the button.
+    await waitFor(() => expect(button).not.toHaveAttribute("aria-busy"));
+    await expect(button).not.toBeDisabled();
+    await expect(button).toHaveAccessibleName("Submit");
+    await expect(button).toHaveFocus();
+  },
+};
+
+/**
+ * Rendering as another tag: `render` swaps the underlying element and `nativeButton={false}` has
+ * Base UI add `role="button"`, tab focus, and Enter/Space activation to the non-button tag.
+ */
+export const CustomTag: Story = {
+  args: {
+    prominence: "secondary",
+    tone: "neutral",
+    magnitude: "md",
+    sizing: "hug",
+  },
+  render: (args) => (
+    <Button {...args} nativeButton={false} render={<div />}>
+      Add to favorites
+    </Button>
+  ),
+};
+
+/**
+ * Interaction test: the custom tag is a DIV exposing `role="button"`, joins the tab order, and
+ * activates from keyboard and pointer alike. Tagged out of the sidebar/docs/manifest while still
+ * running under the default `test` tag.
+ */
+export const CustomTagInteraction: Story = {
+  ...CustomTag,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: function Render(args) {
+    const [count, setCount] = React.useState(0);
+    return (
+      <Button
+        {...args}
+        nativeButton={false}
+        render={<div data-testid="custom-tag-button" />}
+        onClick={() => setCount((current) => current + 1)}
+      >
+        Activated {count}
+      </Button>
+    );
+  },
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: /Activated/ });
+    await expect(button.tagName).toBe("DIV");
+    await expect(button).toHaveAttribute("tabindex", "0");
+    await userEvent.click(button);
+    await expect(canvas.getByRole("button", { name: "Activated 1" })).toBeInTheDocument();
+    button.focus();
+    await userEvent.keyboard("{Enter}");
+    await expect(canvas.getByRole("button", { name: "Activated 2" })).toBeInTheDocument();
+    await userEvent.keyboard(" ");
+    await expect(canvas.getByRole("button", { name: "Activated 3" })).toBeInTheDocument();
+  },
+};
+
+/**
+ * A navigation link: `render={<a href=… />}` swaps the element and `nativeButton={false}` applies
+ * Base UI's non-native button semantics — announced as a button, while the `<a>` keeps native
+ * navigation (Enter follows the href, open-in-new-tab works).
+ */
+export const AsLink: Story = {
+  args: {
+    prominence: "secondary",
+    tone: "neutral",
+    magnitude: "md",
+    sizing: "hug",
+  },
+  render: (args) => (
+    <Button {...args} nativeButton={false} render={<a href="#reports" />}>
+      Open reports
+    </Button>
+  ),
+};
+
+/**
+ * Interaction test: the rendered element is an `<a>` exposing the link role with its href, in the
+ * tab order without a button role. Tagged out of the sidebar/docs/manifest while still running
+ * under the default `test` tag.
+ */
+export const AsLinkInteraction: Story = {
+  ...AsLink,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    // Base UI's contract for nativeButton={false}: the control is ANNOUNCED as a button
+    // (role="button") while the <a> keeps native navigation (Enter follows the href).
+    const link = canvas.getByRole("button", { name: "Open reports" });
+    await expect(link.tagName).toBe("A");
+    await expect(link).toHaveAttribute("href", "#reports");
+  },
+};
diff --git a/packages/propel/src/components/button/button.tsx b/packages/propel/src/components/button/button.tsx
index e44d238a..5167523f 100644
--- a/packages/propel/src/components/button/button.tsx
+++ b/packages/propel/src/components/button/button.tsx
@@ -1,61 +1,85 @@
+import { Button as BaseButton } from "@base-ui/react/button";
 import { LoaderCircle } from "lucide-react";
 import type * as React from "react";
 
 import {
   Button as ButtonElement,
-  ButtonIcon,
   ButtonLabel,
   type ButtonProps as ButtonElementProps,
-  ButtonSpinner,
-} from "../../ui/button";
+} from "../../elements/button";
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
 
 export type ButtonProps = ButtonElementProps & {
+  /**
+   * Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. a `<div>` or an
+   * `<a>`): Base UI then adds `role="button"`, tab focus, and Enter/Space activation.
+   */
+  nativeButton?: boolean;
   /**
    * 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;
+  startIcon?: 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;
+  endIcon?: 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 —
+ * The ready-made `Button`: grafts Base UI's `Button` behavior onto the styled `Button` element and
+ * lays out an optional `startIcon`/`endIcon` beside the label plus a `loading` spinner. Content —
  * `children`, the inline nodes, `loading` — is not a variant.
  */
 export function Button({
-  inlineStartNode,
-  inlineEndNode,
+  prominence,
+  tone,
+  magnitude,
+  sizing,
+  startIcon,
+  endIcon,
   loading = false,
   disabled,
   children,
+  render,
+  nativeButton,
   ...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 (
-    <ButtonElement
+    <BaseButton
       {...props}
+      nativeButton={nativeButton}
+      render={
+        <ButtonElement
+          prominence={prominence}
+          tone={tone}
+          magnitude={magnitude}
+          sizing={sizing}
+          // The consumer's render swaps the underlying element; the styled part stays the
+          // className owner (behavior part outer, styled part as the render target, rule 1a).
+          render={render}
+        />
+      }
       disabled={disabled || loading}
       focusableWhenDisabled={loading ? true : undefined}
       aria-busy={loading ? true : undefined}
     >
       {loading ? (
-        <ButtonSpinner>
+        <Spinner>
           <LoaderCircle />
-        </ButtonSpinner>
-      ) : inlineStartNode ? (
-        <ButtonIcon>{inlineStartNode}</ButtonIcon>
+        </Spinner>
+      ) : startIcon ? (
+        <Icon>{startIcon}</Icon>
       ) : null}
       <ButtonLabel>{children}</ButtonLabel>
-      {!loading && inlineEndNode ? <ButtonIcon>{inlineEndNode}</ButtonIcon> : null}
-    </ButtonElement>
+      {!loading && endIcon ? <Icon>{endIcon}</Icon> : null}
+    </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/button/index.tsx b/packages/propel/src/components/button/index.tsx
index b9c8b7cd..1b9378c1 100644
--- a/packages/propel/src/components/button/index.tsx
+++ b/packages/propel/src/components/button/index.tsx
@@ -1,15 +1,11 @@
 export * from "./button";
 // Re-export the atomic button's parts and variant axis types so the full button surface is
-// importable from this convenience. (cvas + the cva-props bundle stay private to `ui`.)
+// importable from this convenience. (cvas + the cva-props bundle stay private to `elements`.)
 export {
-  ButtonIcon,
-  type ButtonIconProps,
   ButtonLabel,
   type ButtonLabelProps,
-  ButtonSpinner,
-  type ButtonSpinnerProps,
   type ButtonMagnitude,
   type ButtonSizing,
   type ButtonTone,
   type ButtonProminence,
-} from "../../ui/button";
+} from "../../elements/button";
diff --git a/packages/propel/src/components/calendar/calendar.stories.tsx b/packages/propel/src/components/calendar/calendar.stories.tsx
index 2fe8aef6..5434b148 100644
--- a/packages/propel/src/components/calendar/calendar.stories.tsx
+++ b/packages/propel/src/components/calendar/calendar.stories.tsx
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>;
  * selection.
  */
 export const Default: Story = {
-  render: () => {
+  render: function Render() {
     const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 24));
     return (
       <Calendar
@@ -45,7 +45,7 @@ export const Default: Story = {
  * between them get the soft in-range background.
  */
 export const RangeSelection: Story = {
-  render: () => {
+  render: function Render() {
     const [range, setRange] = React.useState<DateRange | undefined>({
       from: new Date(2025, 0, 13),
       to: new Date(2025, 0, 20),
@@ -61,7 +61,7 @@ export const RangeSelection: Story = {
  * text.
  */
 export const WithDisabledDays: Story = {
-  render: () => {
+  render: function Render() {
     const [selected, setSelected] = React.useState<Date | undefined>();
     return (
       <Calendar
@@ -82,7 +82,7 @@ export const WithDisabledDays: Story = {
  */
 export const Behavior: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  render: () => {
+  render: function Render() {
     const [selected, setSelected] = React.useState<Date | undefined>();
     return (
       <Calendar
@@ -121,7 +121,7 @@ export const Behavior: Story = {
  */
 export const KeyboardNavigation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  render: () => {
+  render: function Render() {
     const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 15));
     return (
       <Calendar
diff --git a/packages/propel/src/components/calendar/calendar.tsx b/packages/propel/src/components/calendar/calendar.tsx
index 90d264bb..d4bfe525 100644
--- a/packages/propel/src/components/calendar/calendar.tsx
+++ b/packages/propel/src/components/calendar/calendar.tsx
@@ -1,17 +1,33 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker, type DayPickerProps } from "react-day-picker";
 
-import { Calendar as CalendarElement, type CalendarProps } from "../../ui/calendar";
+import { calendarClassNames } from "../../elements/calendar";
 
-export type { CalendarProps };
+/**
+ * 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 (the `elements/calendar` `calendarClassNames` contract, grafted
+ * below).
+ */
+// `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">;
 
 /**
- * The ready-made date picker: the styled `ui` `Calendar` with propel's lucide nav chevrons. The
- * icons carry no className — react-day-picker passes `classNames.chevron` (16px, RTL-mirrored)
- * through to them. A caller's own `components.Chevron` still wins.
+ * The ready-made date picker: react-day-picker's `DayPicker` behavior grafted onto propel's
+ * `elements/calendar` `calendarClassNames` styled contract, finished with propel's lucide nav
+ * chevrons. 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. The chevron icons carry no className — react-day-picker passes
+ * `classNames.chevron` (16px, RTL-mirrored) through to them; a caller's own `components.Chevron`
+ * still wins.
  */
 export function Calendar(props: CalendarProps) {
   return (
-    <CalendarElement
+    <DayPicker
+      classNames={calendarClassNames}
       {...props}
       components={{
         Chevron: ({ orientation, className }) =>
diff --git a/packages/propel/src/components/calendar/index.tsx b/packages/propel/src/components/calendar/index.tsx
index 5be062eb..b25f326f 100644
--- a/packages/propel/src/components/calendar/index.tsx
+++ b/packages/propel/src/components/calendar/index.tsx
@@ -1,3 +1,3 @@
-// The ready-made `Calendar` (styled react-day-picker + propel's lucide nav chevrons). Drop down to
-// `@plane/propel/ui/calendar` for the bare primitive (react-day-picker's default chevron).
+// The ready-made `Calendar`: react-day-picker's `DayPicker` behavior grafted onto propel's
+// `elements/calendar` `calendarClassNames` styled contract, finished with propel's lucide nav chevrons.
 export * from "./calendar";
diff --git a/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx b/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx
index 19ba76c7..63b5da66 100644
--- a/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx
+++ b/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import { CheckboxField } from "./index";
+import { CheckboxField, type FieldMagnitude } from "./index";
+
+const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
 
 // A single checkbox laid out as a field row (Field + CheckboxFieldControl + label/helper).
 const meta = {
@@ -26,6 +28,40 @@ export const Default: Story = {
   },
 };
 
+/**
+ * Every `magnitude` (`md` / `lg` / `xl`) stacked. Magnitude scales the label, description, and
+ * helper text; the checkbox box itself keeps one size.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each field with the magnitude name, so disable those two
+  // controls (plus the per-instance `name`/`value`); the rest stay live and update every field
+  // at once.
+  argTypes: {
+    magnitude: { control: false },
+    label: { control: false },
+    name: { control: false },
+    value: { control: false },
+  },
+  args: {
+    description: "Send a message when the deployment status changes.",
+    hint: "You can change this later.",
+  },
+  render: (args) => (
+    <div className="flex w-80 flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <CheckboxField
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          label={magnitude}
+          name={magnitude}
+          value={magnitude}
+        />
+      ))}
+    </div>
+  ),
+};
+
 /**
  * Setting `error` marks the field invalid. Base UI's `Field.Root` propagates that validity to the
  * checkbox box as `data-invalid`, and the box recolors its border to `danger` — no `tone` prop. A
diff --git a/packages/propel/src/components/checkbox-field/checkbox-field.tsx b/packages/propel/src/components/checkbox-field/checkbox-field.tsx
index bb1c0f24..12cd1690 100644
--- a/packages/propel/src/components/checkbox-field/checkbox-field.tsx
+++ b/packages/propel/src/components/checkbox-field/checkbox-field.tsx
@@ -1,18 +1,18 @@
 import type * as React from "react";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
 import {
   CheckboxFieldControl,
   type CheckboxFieldControlProps,
 } from "../../internal/checkbox-field-control";
-import { Field } from "../../ui/field/field";
-import { FieldItem } from "../../ui/field/field-item";
-import type { FieldMagnitude } from "../../ui/field/variants";
-import { FieldItemContent } from "../field";
+import { Field, FieldItem, FieldItemContent } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 
+export type { FieldMagnitude } from "../../elements/field/variants";
+
 export type CheckboxFieldProps = Omit<
   CheckboxFieldControlProps,
-  "aria-label" | "label" | "inlineStartNode"
+  "aria-label" | "label" | "icon"
 > & {
   /** Helper text shown below the control. Replaced by `error` when an error is set. */
   hint?: React.ReactNode;
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
index 1509f459..209d6f75 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
@@ -1,17 +1,16 @@
 import type * as React from "react";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
 import {
   CheckboxFieldControl,
   type CheckboxFieldControlProps,
 } from "../../internal/checkbox-field-control";
 import { useFieldOptionMagnitude } from "../../internal/field-option-magnitude";
-import { FieldItem } from "../../ui/field/field-item";
-import type { FieldMagnitude } from "../../ui/field/variants";
-import { FieldItemContent } from "../field";
+import { FieldItem, FieldItemContent } from "../field";
 
 export type CheckboxGroupFieldOptionProps = Omit<
   CheckboxFieldControlProps,
-  "aria-label" | "label" | "inlineStartNode"
+  "aria-label" | "label" | "icon"
 > & {
   /** Visible option label. */
   label: React.ReactNode;
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx
index 4ffb0313..cdebf142 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx
@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
+import type { CheckboxGroupDensity } from "../checkbox-group/index";
 import { CheckboxGroupField, CheckboxGroupFieldOption } from "./index";
 
+const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
+const DENSITIES: CheckboxGroupDensity[] = ["comfortable", "compact"];
+
 // A fieldset of checkbox options (Field + Fieldset + CheckboxGroup + option rows).
 const meta = {
   title: "Components/CheckboxGroupField",
@@ -29,6 +34,54 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = { args: { hint: "At least one channel is recommended." } };
 
+/** Legend, description, and option text at every magnitude (`md` / `lg` / `xl`). */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each group with the magnitude name, so disable those
+  // controls (plus `name`, overridden per group); the rest stay live and update every group.
+  argTypes: {
+    magnitude: { control: false },
+    label: { control: false },
+    name: { control: false },
+  },
+  render: (args) => (
+    <div className="flex items-start gap-10">
+      {MAGNITUDES.map((magnitude) => (
+        <CheckboxGroupField
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          label={magnitude}
+          name={`notifications-${magnitude}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** Row spacing between options: `comfortable` keeps a gap, `compact` stacks them flush. */
+export const Densities: Story = {
+  // Iterates `density` and labels each group with the density name, so disable those
+  // controls (plus `name`, overridden per group); the rest stay live and update every group.
+  argTypes: {
+    density: { control: false },
+    label: { control: false },
+    name: { control: false },
+  },
+  render: (args) => (
+    <div className="flex items-start gap-10">
+      {DENSITIES.map((density) => (
+        <CheckboxGroupField
+          key={density}
+          {...args}
+          density={density}
+          label={density}
+          name={`notifications-${density}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
 /**
  * Setting `error` marks the whole group invalid. Base UI's `Field.Root` propagates that validity to
  * every checkbox box as `data-invalid`, so each option's border recolors to `danger` automatically
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx
index b01d2b2c..f56fca1b 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx
@@ -1,11 +1,10 @@
 import type * as React from "react";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
+import { Fieldset, FieldsetLegend } from "../../elements/fieldset/index";
 import { FieldOptionMagnitudeProvider } from "../../internal/field-option-magnitude";
-import { CheckboxGroup, type CheckboxGroupProps } from "../../ui/checkbox-group/index";
-import { Field } from "../../ui/field/field";
-import { FieldDescription } from "../../ui/field/field-description";
-import type { FieldMagnitude } from "../../ui/field/variants";
-import { Fieldset, FieldsetLegend } from "../../ui/fieldset/index";
+import { CheckboxGroup, type CheckboxGroupProps } from "../checkbox-group/index";
+import { Field, FieldDescription } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 
 export type CheckboxGroupFieldProps = Omit<CheckboxGroupProps, "children" | "density" | "name"> & {
diff --git a/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx
index 78b89082..0bd58b03 100644
--- a/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx
+++ b/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
 import { expect } from "storybook/test";
 
 import { Checkbox } from "../checkbox/index";
@@ -6,7 +7,7 @@ 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.
+// selected-values array. The elements-tier story composes the atomic boxes instead.
 const meta = {
   title: "Components/CheckboxGroup",
   component: CheckboxGroup,
@@ -17,6 +18,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Every child value in the parent-checkbox stories; the group's `allValues` prop
+// is what lets a `parent` checkbox derive its checked/indeterminate state.
+const PROTOCOLS = ["http", "https", "ssh"];
+
 /** Labeled checkbox rows; the first is selected by default. */
 export const Default: Story = {
   args: { density: "comfortable", defaultValue: ["https"] },
@@ -44,6 +49,182 @@ export const DefaultInteraction: Story = {
   },
 };
 
+/**
+ * A `parent` checkbox controls the whole group: pass the group `allValues` and mark one row
+ * `parent`. With only some values selected it shows the indeterminate dash; toggling it checks or
+ * clears every row. Explicit child ids + `aria-controls` keep the parent's controls references
+ * valid (propel rows always carry their own label id).
+ */
+export const ParentCheckbox: Story = {
+  args: { density: "comfortable", defaultValue: ["https"], allValues: PROTOCOLS },
+  render: (args) => (
+    <CheckboxGroup {...args} aria-label="Allowed protocols">
+      <Checkbox parent label="All protocols" aria-controls={PROTOCOLS.join(" ")} />
+      <Checkbox id="http" value="http" label="HTTP" />
+      <Checkbox id="https" value="https" label="HTTPS" />
+      <Checkbox id="ssh" value="ssh" label="SSH" />
+    </CheckboxGroup>
+  ),
+};
+
+/**
+ * Interaction test: the parent reads `mixed` for a partial selection, checks every row when
+ * clicked, clears them on the next click, and returns to `mixed` when a single row is checked.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const ParentCheckboxInteraction: Story = {
+  ...ParentCheckbox,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const parent = canvas.getByRole("checkbox", { name: "All protocols" });
+    const http = canvas.getByRole("checkbox", { name: "HTTP" });
+    const https = canvas.getByRole("checkbox", { name: "HTTPS" });
+    const ssh = canvas.getByRole("checkbox", { name: "SSH" });
+
+    // one of three values selected → the parent reports the indeterminate (mixed) state
+    await expect(parent).toHaveAttribute("aria-checked", "mixed");
+
+    // clicking a mixed parent selects every value
+    await userEvent.click(parent);
+    await expect(parent).toHaveAttribute("aria-checked", "true");
+    await expect(http).toHaveAttribute("aria-checked", "true");
+    await expect(https).toHaveAttribute("aria-checked", "true");
+    await expect(ssh).toHaveAttribute("aria-checked", "true");
+
+    // clicking a fully-checked parent clears the group
+    await userEvent.click(parent);
+    await expect(parent).toHaveAttribute("aria-checked", "false");
+    await expect(http).toHaveAttribute("aria-checked", "false");
+    await expect(https).toHaveAttribute("aria-checked", "false");
+    await expect(ssh).toHaveAttribute("aria-checked", "false");
+
+    // checking a single row returns the parent to mixed
+    await userEvent.click(http);
+    await expect(parent).toHaveAttribute("aria-checked", "mixed");
+  },
+};
+
+// Values for the nested-group stories: the outer group tracks the top-level permissions while
+// the nested group tracks the user-management subset behind the "manage-users" value.
+const MAIN_PERMISSIONS = ["view-dashboard", "manage-users", "access-reports"];
+const MANAGEMENT_PERMISSIONS = ["create-user", "edit-user", "delete-user", "assign-roles"];
+
+/**
+ * Groups nest: a nested `CheckboxGroup` (with its own `parent` row) manages a subset of values
+ * while the outer group tracks the top level. The two controlled selections stay in sync through
+ * `onValueChange` — completing the nested group checks its value into the outer one — and the outer
+ * parent's explicit `indeterminate` shows the dash while the nested selection is partial.
+ */
+export const NestedParentCheckbox: Story = {
+  args: { density: "comfortable", allValues: MAIN_PERMISSIONS },
+  render: function Render(args) {
+    const [mainValue, setMainValue] = React.useState<string[]>([]);
+    const [managementValue, setManagementValue] = React.useState<string[]>([]);
+    return (
+      <CheckboxGroup
+        {...args}
+        aria-label="User permissions"
+        value={mainValue}
+        onValueChange={(value) => {
+          if (value.includes("manage-users")) {
+            setManagementValue(MANAGEMENT_PERMISSIONS);
+          } else if (managementValue.length === MANAGEMENT_PERMISSIONS.length) {
+            setManagementValue([]);
+          }
+          setMainValue(value);
+        }}
+      >
+        <Checkbox
+          parent
+          label="User permissions"
+          aria-controls={MAIN_PERMISSIONS.join(" ")}
+          indeterminate={
+            managementValue.length > 0 && managementValue.length !== MANAGEMENT_PERMISSIONS.length
+          }
+        />
+        <Checkbox id="view-dashboard" value="view-dashboard" label="View dashboard" />
+        <Checkbox id="access-reports" value="access-reports" label="Access reports" />
+        <div className="ps-6">
+          <CheckboxGroup
+            density={args.density}
+            aria-label="Manage users"
+            allValues={MANAGEMENT_PERMISSIONS}
+            value={managementValue}
+            onValueChange={(value) => {
+              if (value.length === MANAGEMENT_PERMISSIONS.length) {
+                setMainValue((prev) =>
+                  prev.includes("manage-users") ? prev : [...prev, "manage-users"],
+                );
+              } else {
+                setMainValue((prev) => prev.filter((v) => v !== "manage-users"));
+              }
+              setManagementValue(value);
+            }}
+          >
+            <Checkbox
+              parent
+              id="manage-users"
+              label="Manage users"
+              aria-controls={MANAGEMENT_PERMISSIONS.join(" ")}
+            />
+            <Checkbox id="create-user" value="create-user" label="Create user" />
+            <Checkbox id="edit-user" value="edit-user" label="Edit user" />
+            <Checkbox id="delete-user" value="delete-user" label="Delete user" />
+            <Checkbox id="assign-roles" value="assign-roles" label="Assign roles" />
+          </CheckboxGroup>
+        </div>
+      </CheckboxGroup>
+    );
+  },
+};
+
+/**
+ * Interaction test: one nested row turns the nested parent `mixed` and puts the indeterminate dash
+ * on the outer parent (its explicit `indeterminate` surfaces as `data-indeterminate`;
+ * `aria-checked` stays group-derived). Completing the nested group checks "manage-users" into the
+ * outer group, and the outer parent then selects and clears every value across both groups. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const NestedParentCheckboxInteraction: Story = {
+  ...NestedParentCheckbox,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const userPermissions = canvas.getByRole("checkbox", { name: "User permissions" });
+    const manageUsers = canvas.getByRole("checkbox", { name: "Manage users" });
+    const createUser = canvas.getByRole("checkbox", { name: "Create user" });
+    const viewDashboard = canvas.getByRole("checkbox", { name: "View dashboard" });
+
+    // nothing selected anywhere → both parents read clear
+    await expect(userPermissions).toHaveAttribute("aria-checked", "false");
+    await expect(manageUsers).toHaveAttribute("aria-checked", "false");
+
+    // one nested row → the nested parent turns mixed and the outer parent shows the dash
+    // through its explicit `indeterminate` wiring
+    await userEvent.click(createUser);
+    await expect(manageUsers).toHaveAttribute("aria-checked", "mixed");
+    await expect(userPermissions).toHaveAttribute("data-indeterminate");
+
+    // completing the nested group syncs "manage-users" into the outer group → outer parent mixed
+    await userEvent.click(manageUsers);
+    await expect(manageUsers).toHaveAttribute("aria-checked", "true");
+    await expect(createUser).toHaveAttribute("aria-checked", "true");
+    await expect(userPermissions).toHaveAttribute("aria-checked", "mixed");
+
+    // checking the outer parent selects every value in both groups
+    await userEvent.click(userPermissions);
+    await expect(userPermissions).toHaveAttribute("aria-checked", "true");
+    await expect(viewDashboard).toHaveAttribute("aria-checked", "true");
+    await expect(manageUsers).toHaveAttribute("aria-checked", "true");
+
+    // clearing the outer parent empties both groups
+    await userEvent.click(userPermissions);
+    await expect(userPermissions).toHaveAttribute("aria-checked", "false");
+    await expect(viewDashboard).toHaveAttribute("aria-checked", "false");
+    await expect(manageUsers).toHaveAttribute("aria-checked", "false");
+    await expect(createUser).toHaveAttribute("aria-checked", "false");
+  },
+};
+
 /** `compact` density tightens the gap between rows. */
 export const Density: Story = {
   parameters: { controls: { disable: true } },
diff --git a/packages/propel/src/components/checkbox-group/checkbox-group.tsx b/packages/propel/src/components/checkbox-group/checkbox-group.tsx
new file mode 100644
index 00000000..18227db9
--- /dev/null
+++ b/packages/propel/src/components/checkbox-group/checkbox-group.tsx
@@ -0,0 +1,17 @@
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+
+import {
+  CheckboxGroup as CheckboxGroupElement,
+  type CheckboxGroupProps as CheckboxGroupElementProps,
+} from "../../elements/checkbox-group/index";
+
+export type CheckboxGroupProps = Omit<BaseCheckboxGroup.Props, "className" | "style"> &
+  Pick<CheckboxGroupElementProps, "density">;
+
+/**
+ * The ready-made checkbox group: grafts Base UI's `CheckboxGroup` behavior (the shared
+ * selected-values state) onto the styled `elements/checkbox-group` container.
+ */
+export function CheckboxGroup({ density, ...props }: CheckboxGroupProps) {
+  return <BaseCheckboxGroup {...props} render={<CheckboxGroupElement density={density} />} />;
+}
diff --git a/packages/propel/src/components/checkbox-group/index.tsx b/packages/propel/src/components/checkbox-group/index.tsx
index cdd4aa49..99fe2635 100644
--- a/packages/propel/src/components/checkbox-group/index.tsx
+++ b/packages/propel/src/components/checkbox-group/index.tsx
@@ -1,3 +1,4 @@
-// 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";
+// The per-axis `density` type stays public from this entry (an explicit cross-tier re-export — a
+// `components` index never `export *`s from `elements`, rule: index re-exports).
+export type { CheckboxGroupDensity } from "../../elements/checkbox-group/index";
+export * from "./checkbox-group";
diff --git a/packages/propel/src/components/checkbox/checkbox.stories.tsx b/packages/propel/src/components/checkbox/checkbox.stories.tsx
index 90c306a4..6f093011 100644
--- a/packages/propel/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.stories.tsx
@@ -3,12 +3,13 @@ import { Repeat } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent } from "storybook/test";
 
-import { Field } from "../../ui/field/field";
+import { Button } from "../button";
+import { Field } from "../field";
+import { Form, FormActions, FormBody } from "../form";
 import {
   Checkbox,
   CheckboxIndeterminateIndicator,
   CheckboxIndicator,
-  CheckboxInlineStartNode,
   CheckboxLabel,
 } from "./index";
 
@@ -17,7 +18,6 @@ const meta = {
   component: Checkbox,
   subcomponents: {
     CheckboxLabel,
-    CheckboxInlineStartNode,
     CheckboxIndicator,
     CheckboxIndeterminateIndicator,
   },
@@ -109,14 +109,14 @@ export const WithLabel: Story = {
 };
 
 /**
- * An optional `inlineStartNode` sits between the box and the label, matching the Figma "checkbox
- * with label" icon slot.
+ * An optional `icon` 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
-      inlineStartNode={<Repeat aria-hidden className="size-3.5" />}
+      icon={<Repeat aria-hidden className="size-3.5" />}
       label="Sync automatically"
       defaultChecked
     />
@@ -187,6 +187,63 @@ export const InvalidInteraction: Story = {
   },
 };
 
+/**
+ * Form integration: wrap the checkbox in a `Field` with a `name` and Base UI wires the rest — the
+ * field name flows onto the box, a hidden input serializes it with the form, and `Form`'s
+ * `onFormSubmit` receives the checked state as a boolean. The checkbox itself needs no extra
+ * wiring. Submit to see the captured value.
+ */
+export const FormIntegration: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const [submitted, setSubmitted] = React.useState<{ stayLoggedIn: boolean } | null>(null);
+    return (
+      <div className="flex w-80 flex-col gap-3">
+        <Form<{ stayLoggedIn: boolean }> onFormSubmit={(values) => setSubmitted(values)}>
+          <FormBody layout="single">
+            <Field name="stayLoggedIn">
+              <Checkbox label="Stay logged in for 7 days" />
+            </Field>
+          </FormBody>
+          <FormActions layout="inline">
+            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
+              Save
+            </Button>
+          </FormActions>
+        </Form>
+        <output className="text-13 text-secondary">
+          {submitted ? `Stay logged in: ${submitted.stayLoggedIn ? "yes" : "no"}` : null}
+        </output>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interaction test: the `Field` name serializes the checkbox into `Form`'s `onFormSubmit` values as
+ * a boolean — `false` while unchecked, `true` once checked. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const FormIntegrationInteraction: Story = {
+  ...FormIntegration,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const checkbox = canvas.getByRole("checkbox", { name: "Stay logged in for 7 days" });
+    const save = canvas.getByRole("button", { name: "Save" });
+
+    // Submitting while unchecked serializes the field as `false`.
+    await expect(checkbox).toHaveAttribute("aria-checked", "false");
+    await userEvent.click(save);
+    await expect(canvas.getByText("Stay logged in: no")).toBeInTheDocument();
+
+    // Checking the box and resubmitting serializes it as `true`.
+    await userEvent.click(checkbox);
+    await expect(checkbox).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(save);
+    await expect(canvas.getByText("Stay logged in: yes")).toBeInTheDocument();
+  },
+};
+
 /**
  * Keyboard ARIA pattern (WAI-ARIA checkbox): Tab moves focus to the box, **Space** toggles
  * `aria-checked`, and **Enter** must NOT toggle (Enter is reserved for form submission, not the
@@ -233,22 +290,19 @@ export const BoxDoesNotShiftOnToggle: Story = {
   ...Interaction,
   tags: ["!dev", "!autodocs", "!manifest"],
   parameters: { controls: { disable: true } },
-  // A controlled wrapper so a single, stable box element can be driven through
+  // A controlled render so a single, stable box element can be driven through
   // unchecked -> checked -> indeterminate without remounting (so we measure the
   // very same DOM node across all three states).
-  render: () => {
-    function Harness() {
-      const [indeterminate, setIndeterminate] = React.useState(false);
-      return (
-        <div>
-          <Checkbox aria-label="Shift target" indeterminate={indeterminate} />
-          <button type="button" onClick={() => setIndeterminate(true)}>
-            make indeterminate
-          </button>
-        </div>
-      );
-    }
-    return <Harness />;
+  render: function Render() {
+    const [indeterminate, setIndeterminate] = React.useState(false);
+    return (
+      <div>
+        <Checkbox aria-label="Shift target" indeterminate={indeterminate} />
+        <button type="button" onClick={() => setIndeterminate(true)}>
+          make indeterminate
+        </button>
+      </div>
+    );
   },
   play: async ({ canvas }) => {
     const box = canvas.getByRole("checkbox");
diff --git a/packages/propel/src/components/checkbox/checkbox.tsx b/packages/propel/src/components/checkbox/checkbox.tsx
index 5a8fcade..7c267eda 100644
--- a/packages/propel/src/components/checkbox/checkbox.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.tsx
@@ -1,3 +1,4 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { Check, Minus } from "lucide-react";
 import * as React from "react";
 
@@ -5,12 +6,11 @@ import {
   Checkbox as CheckboxElement,
   CheckboxIndeterminateIndicator,
   CheckboxIndicator,
-  CheckboxInlineStartNode,
   CheckboxLabel,
-  type CheckboxProps as CheckboxElementProps,
-} from "../../ui/checkbox";
+} from "../../elements/checkbox";
+import { Icon } from "../../internal/icon";
 
-export type CheckboxProps = CheckboxElementProps & {
+export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style" | "render"> & {
   /**
    * 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`
@@ -22,14 +22,15 @@ export type CheckboxProps = CheckboxElementProps & {
    * label" icon slot. Only rendered when `label` is present. Sized to `--node-size` (14px).
    * Decorative, kept out of the name.
    */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
 };
 
 /**
- * The ready-made checkbox: composes the atomic `Checkbox` box with its check and indeterminate
- * indicators, and optionally wraps the row in a clickable `CheckboxLabel` with an icon slot.
+ * The ready-made checkbox: grafts Base UI checkbox behavior onto the styled `Checkbox` box with its
+ * check and indeterminate indicators, and optionally wraps the row in a clickable `CheckboxLabel`
+ * with an icon slot.
  */
-export function Checkbox({ label, inlineStartNode, id, ...props }: CheckboxProps) {
+export function Checkbox({ label, icon, 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;
@@ -37,14 +38,14 @@ export function Checkbox({ label, inlineStartNode, id, ...props }: CheckboxProps
   // Only force the generated id when there's a `label` to associate; without one (e.g. inside a
   // `Field`, which manages labeling), pass the caller's `id` through untouched.
   const box = (
-    <CheckboxElement id={label != null ? checkboxId : id} {...props}>
-      <CheckboxIndicator>
+    <BaseCheckbox.Root id={label != null ? checkboxId : id} render={<CheckboxElement />} {...props}>
+      <BaseCheckbox.Indicator render={<CheckboxIndicator />}>
         <Check aria-hidden />
-      </CheckboxIndicator>
-      <CheckboxIndeterminateIndicator>
+      </BaseCheckbox.Indicator>
+      <BaseCheckbox.Indicator render={<CheckboxIndeterminateIndicator />}>
         <Minus aria-hidden />
-      </CheckboxIndeterminateIndicator>
-    </CheckboxElement>
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
   );
 
   if (label == null) return box;
@@ -52,8 +53,10 @@ export function Checkbox({ label, inlineStartNode, id, ...props }: CheckboxProps
   return (
     <CheckboxLabel htmlFor={checkboxId}>
       {box}
-      {inlineStartNode ? (
-        <CheckboxInlineStartNode>{inlineStartNode}</CheckboxInlineStartNode>
+      {icon ? (
+        <Icon tint="secondary" magnitude="sm">
+          {icon}
+        </Icon>
       ) : null}
       {label}
     </CheckboxLabel>
diff --git a/packages/propel/src/components/checkbox/index.tsx b/packages/propel/src/components/checkbox/index.tsx
index ee3dc9d0..d55dd47d 100644
--- a/packages/propel/src/components/checkbox/index.tsx
+++ b/packages/propel/src/components/checkbox/index.tsx
@@ -1,12 +1,12 @@
 export * from "./checkbox";
-// Re-export the atomic parts so the full checkbox surface is importable from this convenience.
+// Re-export propel's STYLED checkbox parts so a full checkbox can be assembled from one entry. The
+// behavior part is Base UI's (`Checkbox.Root` for the box, `Checkbox.Indicator` for the tick/dash) —
+// no propel styling — so graft it from `@base-ui/react/checkbox` directly at the call site.
 export {
   type CheckboxIndicatorProps,
   CheckboxIndicator,
   CheckboxIndeterminateIndicator,
   type CheckboxIndeterminateIndicatorProps,
-  CheckboxInlineStartNode,
-  type CheckboxInlineStartNodeProps,
   CheckboxLabel,
   type CheckboxLabelProps,
-} from "../../ui/checkbox";
+} from "../../elements/checkbox";
diff --git a/packages/propel/src/components/circular-progress/circular-progress.stories.tsx b/packages/propel/src/components/circular-progress/circular-progress.stories.tsx
index 3245e38d..21b87d2a 100644
--- a/packages/propel/src/components/circular-progress/circular-progress.stories.tsx
+++ b/packages/propel/src/components/circular-progress/circular-progress.stories.tsx
@@ -5,7 +5,7 @@ import {
   CircularProgressIndicator,
   CircularProgressSvg,
   CircularProgressTrack,
-} from "../../ui/circular-progress";
+} from "../../elements/circular-progress";
 import {
   CircularProgress,
   type CircularProgressMagnitude,
@@ -65,3 +65,26 @@ export const HasProgressbarRole: Story = {
     await expect(ring).toHaveAttribute("aria-valuenow", "42");
   },
 };
+
+/** `value={null}` is indeterminate: a fixed quarter arc spins with no `aria-valuenow`. */
+export const Indeterminate: Story = {
+  args: { value: null, magnitude: "md", tone: "brand", "aria-label": "Syncing" },
+};
+
+/**
+ * Interaction test: the indeterminate ring exposes the `progressbar` role with no `aria-valuenow`,
+ * and the spin animation runs. Tagged out of the sidebar/docs/manifest while still running under
+ * the default `test` tag.
+ */
+export const IndeterminateInteraction: Story = {
+  ...Indeterminate,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const ring = canvas.getByRole("progressbar", { name: "Syncing" });
+    await expect(ring).not.toHaveAttribute("aria-valuenow");
+    await expect(ring).toHaveAttribute("data-indeterminate");
+    const svg = ring.querySelector("svg");
+    if (svg == null) throw new Error("expected the ring svg");
+    await expect(getComputedStyle(svg).animationName).toBe("spin");
+  },
+};
diff --git a/packages/propel/src/components/circular-progress/circular-progress.tsx b/packages/propel/src/components/circular-progress/circular-progress.tsx
index 2a6842df..2525e8f1 100644
--- a/packages/propel/src/components/circular-progress/circular-progress.tsx
+++ b/packages/propel/src/components/circular-progress/circular-progress.tsx
@@ -7,7 +7,7 @@ import {
   type CircularProgressProps as CircularProgressElementProps,
   CircularProgressSvg,
   CircularProgressTrack,
-} from "../../ui/circular-progress";
+} from "../../elements/circular-progress";
 
 export type CircularProgressMagnitude = NonNullable<CircularProgressElementProps["magnitude"]>;
 export type CircularProgressTone = NonNullable<CircularProgressIndicatorProps["tone"]>;
@@ -24,8 +24,11 @@ export type CircularProgressProps = Omit<
   BaseProgress.Root.Props,
   "className" | "style" | "value"
 > & {
-  /** Completion from 0 to `max` (default 100). The ring has no indeterminate mode. */
-  value: number;
+  /**
+   * Completion from 0 to `max` (default 100). `null` = indeterminate: a fixed quarter arc spins
+   * (`aria-valuenow` unset).
+   */
+  value: number | null;
   /** Diameter: `sm` 16px / `md` 20px. */
   magnitude: CircularProgressMagnitude;
   /** Arc color: `brand` accent, `success`/`warning`/`danger` outcome. */
@@ -35,21 +38,27 @@ export type CircularProgressProps = Omit<
 };
 
 /**
- * A small determinate progress ring (no label — too small). Drive it with `value` (0–`max`); the
- * arc and `aria-valuenow` follow. For a bar with an optional label, use `LinearProgress`. Composes
- * the `ui/circular-progress` primitives on Base UI `Progress`.
+ * A small progress ring (no label — too small). Drive it with `value` (0–`max`); the arc and
+ * `aria-valuenow` follow, and `value={null}` is indeterminate — a fixed quarter arc spins. For a
+ * bar with an optional label, use `LinearProgress`. Composes the `elements/circular-progress`
+ * primitives on Base UI `Progress`.
  */
 export function CircularProgress({ value, magnitude, tone, ...props }: CircularProgressProps) {
   const { box, radius } = RING_GEOMETRY[magnitude];
   const circumference = 2 * Math.PI * radius;
   const max = props.max ?? 100;
-  // Clamp once 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;
+  // Clamp once so the arc and `aria-valuenow` never disagree for out-of-range input. While
+  // indeterminate a fixed quarter arc shows; the svg part spins it off `data-indeterminate`.
+  const clampedValue = value == null ? null : Math.min(Math.max(value, 0), max);
+  const fraction = clampedValue == null ? 0.25 : max > 0 ? clampedValue / max : 0;
   const dashOffset = circumference * (1 - fraction);
   const center = box / 2;
   return (
-    <CircularProgressElement value={clampedValue} magnitude={magnitude} {...props}>
+    <BaseProgress.Root
+      value={clampedValue}
+      render={<CircularProgressElement magnitude={magnitude} />}
+      {...props}
+    >
       <CircularProgressSvg viewBox={`0 0 ${box} ${box}`}>
         <CircularProgressTrack cx={center} cy={center} r={radius} strokeWidth={RING_STROKE} />
         <CircularProgressIndicator
@@ -63,6 +72,6 @@ export function CircularProgress({ value, magnitude, tone, ...props }: CircularP
           strokeDashoffset={dashOffset}
         />
       </CircularProgressSvg>
-    </CircularProgressElement>
+    </BaseProgress.Root>
   );
 }
diff --git a/packages/propel/src/components/collapsible/collapsible.stories.tsx b/packages/propel/src/components/collapsible/collapsible.stories.tsx
index 0e18e305..02892a9c 100644
--- a/packages/propel/src/components/collapsible/collapsible.stories.tsx
+++ b/packages/propel/src/components/collapsible/collapsible.stories.tsx
@@ -4,7 +4,7 @@ import { expect } from "storybook/test";
 import { Collapsible } from "./index";
 
 // Components-tier story: the ready-made `<Collapsible trigger=… indicator>body</Collapsible>`
-// wrapper that wires the trigger and panel for the 90% case. The UI-tier story assembles the
+// wrapper that wires the trigger and panel for the 90% case. The elements-tier story assembles the
 // atomic parts. `indicator` is a required prop — set to `true` for the chevron, `false` to omit.
 const meta = {
   title: "Components/Collapsible",
diff --git a/packages/propel/src/components/collapsible/collapsible.tsx b/packages/propel/src/components/collapsible/collapsible.tsx
index 1b2c08e4..e3bfcc67 100644
--- a/packages/propel/src/components/collapsible/collapsible.tsx
+++ b/packages/propel/src/components/collapsible/collapsible.tsx
@@ -1,23 +1,26 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
 import {
-  Collapsible as CollapsibleElement,
-  type CollapsibleProps as CollapsibleElementProps,
   CollapsiblePanel,
   CollapsiblePanelContent,
   CollapsibleTrigger,
-  CollapsibleTriggerIndicator,
   CollapsibleTriggerTitle,
-} from "../../ui/collapsible";
+} from "../../elements/collapsible";
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
 
-export type CollapsibleProps = CollapsibleElementProps & {
+export type CollapsibleProps = Omit<BaseCollapsible.Root.Props, "className" | "style"> & {
   /** The button content that opens and closes the panel. */
   trigger: React.ReactNode;
   /** The collapsible content region. */
   children: React.ReactNode;
   /** Whether to show the rotating chevron indicator at the trigger's inline-end. */
   indicator: boolean;
+  /** Keep the panel in the DOM while closed — Base UI's `Panel.keepMounted`. */
+  keepMounted?: boolean;
+  /** Reveal on the browser's find-in-page — Base UI's `Panel.hiddenUntilFound`. */
+  hiddenUntilFound?: boolean;
 };
 
 /**
@@ -26,20 +29,31 @@ export type CollapsibleProps = CollapsibleElementProps & {
  * `defaultOpen` (uncontrolled) or `open` + `onOpenChange` (controlled) to drive it. Set
  * `indicator={false}` to omit the rotating chevron from the trigger.
  */
-export function Collapsible({ trigger, children, indicator, ...props }: CollapsibleProps) {
+export function Collapsible({
+  trigger,
+  children,
+  indicator,
+  keepMounted,
+  hiddenUntilFound,
+  ...props
+}: CollapsibleProps) {
   return (
-    <CollapsibleElement {...props}>
-      <CollapsibleTrigger>
+    <BaseCollapsible.Root {...props}>
+      <BaseCollapsible.Trigger render={<CollapsibleTrigger />}>
         <CollapsibleTriggerTitle>{trigger}</CollapsibleTriggerTitle>
         {indicator ? (
-          <CollapsibleTriggerIndicator>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
             <ChevronDown />
-          </CollapsibleTriggerIndicator>
+          </DisclosureIndicator>
         ) : null}
-      </CollapsibleTrigger>
-      <CollapsiblePanel>
+      </BaseCollapsible.Trigger>
+      <BaseCollapsible.Panel
+        keepMounted={keepMounted}
+        hiddenUntilFound={hiddenUntilFound}
+        render={<CollapsiblePanel />}
+      >
         <CollapsiblePanelContent>{children}</CollapsiblePanelContent>
-      </CollapsiblePanel>
-    </CollapsibleElement>
+      </BaseCollapsible.Panel>
+    </BaseCollapsible.Root>
   );
 }
diff --git a/packages/propel/src/components/collapsible/index.tsx b/packages/propel/src/components/collapsible/index.tsx
index 6fddf4f7..d40a9de3 100644
--- a/packages/propel/src/components/collapsible/index.tsx
+++ b/packages/propel/src/components/collapsible/index.tsx
@@ -7,8 +7,6 @@ export {
   type CollapsiblePanelContentProps,
   CollapsibleTrigger,
   type CollapsibleTriggerProps,
-  CollapsibleTriggerIndicator,
-  type CollapsibleTriggerIndicatorProps,
   CollapsibleTriggerTitle,
   type CollapsibleTriggerTitleProps,
-} from "../../ui/collapsible";
+} from "../../elements/collapsible";
diff --git a/packages/propel/src/components/combobox-field/combobox-field.stories.tsx b/packages/propel/src/components/combobox-field/combobox-field.stories.tsx
index 2827e4e8..4520be03 100644
--- a/packages/propel/src/components/combobox-field/combobox-field.stories.tsx
+++ b/packages/propel/src/components/combobox-field/combobox-field.stories.tsx
@@ -3,9 +3,10 @@ import { ChevronsUpDown, X } from "lucide-react";
 import { expect } from "storybook/test";
 
 import { IconButton } from "../icon-button";
-import { ComboboxField } from "./index";
+import { ComboboxField, type ComboboxFieldProps } from "./index";
 
 const REGIONS = ["us-central-1", "us-east-1", "eu-central-1", "ap-west-1"];
+const MAGNITUDES: ComboboxFieldProps["magnitude"][] = ["md", "lg", "xl"];
 
 // A Combobox laid out as a field (Field + Combobox + label/helper). The clear/trigger controls are
 // consumer-provided nodes carrying their own (localizable) aria-labels.
@@ -46,6 +47,23 @@ export const RendersInput: Story = {
   },
 };
 
+/**
+ * Every magnitude (`md` / `lg` / `xl`) stacked. Magnitude steps the label, description, and
+ * helper-text sizes; the input group itself stays fixed.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each field with the magnitude name, so disable just those
+  // two controls; the rest stay live and update every field at once.
+  argTypes: { magnitude: { control: false }, label: { control: false } },
+  render: (args) => (
+    <div className="flex w-72 flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <ComboboxField key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
 /** Setting `error` marks the field invalid, which recolors the input group border to danger. */
 export const Invalid: Story = {
   args: { error: "Choose a deployment region." },
diff --git a/packages/propel/src/components/combobox-field/combobox-field.tsx b/packages/propel/src/components/combobox-field/combobox-field.tsx
index 172392de..1f4e5eaa 100644
--- a/packages/propel/src/components/combobox-field/combobox-field.tsx
+++ b/packages/propel/src/components/combobox-field/combobox-field.tsx
@@ -1,28 +1,21 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import type * as React from "react";
 
-import {
-  Combobox,
-  ComboboxClear,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxInputGroup,
-  ComboboxItem,
-  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 { FieldLabel } from "../../ui/field/field-label";
-import type { FieldMagnitude } from "../../ui/field/variants";
+import { ComboboxEmpty, ComboboxInput, ComboboxInputGroup } from "../../elements/combobox/index";
+import type { FieldMagnitude } from "../../elements/field/variants";
+import { ListboxItem } from "../../internal/listbox-item";
+import { ListboxPopup } from "../../internal/listbox-popup";
+import { Positioner } from "../../internal/positioner";
+import { Combobox, type ComboboxProps } from "../combobox";
 // Ready-made part that supplies a default icon when no children are given (defaults are a `components` concern).
 import { ComboboxItemIndicator } from "../combobox/combobox-item-indicator";
+import { Field, FieldDescription, FieldLabel } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 
-export type ComboboxFieldProps = Omit<ComboboxProps<string>, "children" | "items"> & {
+export type ComboboxFieldProps<Value = string> = Omit<
+  ComboboxProps<Value>,
+  "children" | "items"
+> & {
   /** Supporting text shown below the input. */
   description?: React.ReactNode;
   /**
@@ -42,7 +35,7 @@ export type ComboboxFieldProps = Omit<ComboboxProps<string>, "children" | "items
   /** 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[];
+  items: readonly Value[];
   /** Visible field label. */
   label: React.ReactNode;
   /** Label and helper text size. */
@@ -52,7 +45,7 @@ export type ComboboxFieldProps = Omit<ComboboxProps<string>, "children" | "items
 };
 
 /** Ready-to-use combobox field with label, filter input, popup items, and helper/error text. */
-export function ComboboxField({
+export function ComboboxField<Value = string>({
   description,
   clear,
   trigger,
@@ -66,36 +59,43 @@ export function ComboboxField({
   name,
   placeholder,
   ...comboboxProps
-}: ComboboxFieldProps) {
+}: ComboboxFieldProps<Value>) {
+  // Base UI's itemToStringLabel names an object item; the rows display the same string.
+  const display = (item: Value) =>
+    comboboxProps.itemToStringLabel ? comboboxProps.itemToStringLabel(item) : String(item);
   return (
     <Field name={name} disabled={disabled} invalid={error != null || undefined}>
       <Combobox disabled={disabled} items={items} {...comboboxProps}>
         <FieldLabel magnitude={magnitude} inset={false}>
           {label}
         </FieldLabel>
-        <ComboboxInputGroup>
-          <ComboboxInput placeholder={placeholder} />
-          <ComboboxClear render={clear} />
-          <ComboboxTrigger render={trigger} />
-        </ComboboxInputGroup>
+        <BaseCombobox.InputGroup render={<ComboboxInputGroup magnitude={magnitude} />}>
+          <BaseCombobox.Input render={<ComboboxInput />} placeholder={placeholder} />
+          <BaseCombobox.Clear render={clear} />
+          <BaseCombobox.Trigger render={trigger} />
+        </BaseCombobox.InputGroup>
         {description != null ? (
           <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
         ) : null}
-        <ComboboxPortal>
-          <ComboboxPositioner>
-            <ComboboxPopup>
-              <ComboboxEmpty>{empty}</ComboboxEmpty>
-              <ComboboxList>
-                {items.map((item) => (
-                  <ComboboxItem key={item} value={item}>
+        <BaseCombobox.Portal>
+          <BaseCombobox.Positioner render={<Positioner />}>
+            <BaseCombobox.Popup render={<ListboxPopup />}>
+              <BaseCombobox.Empty render={<ComboboxEmpty />}>{empty}</BaseCombobox.Empty>
+              <BaseCombobox.List>
+                {(item: Value) => (
+                  <BaseCombobox.Item
+                    key={display(item)}
+                    value={item}
+                    render={<ListboxItem layout="indicator" magnitude="md" />}
+                  >
                     <ComboboxItemIndicator />
-                    {item}
-                  </ComboboxItem>
-                ))}
-              </ComboboxList>
-            </ComboboxPopup>
-          </ComboboxPositioner>
-        </ComboboxPortal>
+                    {display(item)}
+                  </BaseCombobox.Item>
+                )}
+              </BaseCombobox.List>
+            </BaseCombobox.Popup>
+          </BaseCombobox.Positioner>
+        </BaseCombobox.Portal>
         <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
       </Combobox>
     </Field>
diff --git a/packages/propel/src/components/combobox/combobox-chips.tsx b/packages/propel/src/components/combobox/combobox-chips.tsx
new file mode 100644
index 00000000..982fc892
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-chips.tsx
@@ -0,0 +1,72 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { X } from "lucide-react";
+
+import {
+  type ComboboxMagnitude,
+  ComboboxChip as ComboboxChipElement,
+  ComboboxChipRemove as ComboboxChipRemoveElement,
+  ComboboxChips as ComboboxChipsElement,
+  ComboboxInput as ComboboxInputElement,
+} from "../../elements/combobox";
+
+export type ComboboxChipsProps<Value = string> = {
+  /** Visual size of the chips frame: height, text, and glyph sizing. Required. */
+  magnitude: ComboboxMagnitude;
+  /** Input placeholder shown while typing to add another value. */
+  placeholder?: string;
+  /**
+   * Accessible name for a value's chip-remove button (e.g. `` (item) => `Remove ${item.label}` ``).
+   * Localizable, so it is required — the frame bakes no label text.
+   */
+  removeLabel: (item: Value) => string;
+  /**
+   * A selected item's display text — Base UI's `itemToStringLabel`. For object values, pass the
+   * same function you give the `Combobox` root; defaults to `String(item)`.
+   */
+  itemToStringLabel?: (item: Value) => string;
+};
+
+/**
+ * The ready-made multiselect input frame — it replaces `ComboboxInputGroup` in the `multiple`
+ * anatomy. Grafts Base UI's `Chips` behavior onto the styled `elements/combobox` frame and maps
+ * each selected value to a removable chip (label + X remove button) ahead of the inline input,
+ * wrapping onto new rows as the selection grows. Arrow keys move focus across chips; Backspace
+ * removes.
+ */
+export function ComboboxChips<Value = string>({
+  magnitude,
+  placeholder,
+  removeLabel,
+  itemToStringLabel,
+}: ComboboxChipsProps<Value>) {
+  const label = (item: Value) => (itemToStringLabel ? itemToStringLabel(item) : String(item));
+  return (
+    <BaseCombobox.Chips render={<ComboboxChipsElement magnitude={magnitude} />}>
+      <BaseCombobox.Value>
+        {(values: Value[]) => (
+          <>
+            {values.map((value) => {
+              const chipLabel = label(value);
+              return (
+                <BaseCombobox.Chip
+                  key={chipLabel}
+                  render={<ComboboxChipElement />}
+                  aria-label={chipLabel}
+                >
+                  {chipLabel}
+                  <BaseCombobox.ChipRemove
+                    render={<ComboboxChipRemoveElement />}
+                    aria-label={removeLabel(value)}
+                  >
+                    <X aria-hidden />
+                  </BaseCombobox.ChipRemove>
+                </BaseCombobox.Chip>
+              );
+            })}
+            <BaseCombobox.Input render={<ComboboxInputElement />} placeholder={placeholder} />
+          </>
+        )}
+      </BaseCombobox.Value>
+    </BaseCombobox.Chips>
+  );
+}
diff --git a/packages/propel/src/components/combobox/combobox-collection.tsx b/packages/propel/src/components/combobox/combobox-collection.tsx
new file mode 100644
index 00000000..cf845dca
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-collection.tsx
@@ -0,0 +1,11 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export type ComboboxCollectionProps = BaseCombobox.Collection.Props;
+
+/**
+ * Renders the filtered items of the nearest `ComboboxGroup` (or the root) through a function child
+ * — the grouped counterpart of `ComboboxList`'s function child.
+ */
+export function ComboboxCollection(props: ComboboxCollectionProps) {
+  return <BaseCombobox.Collection {...props} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox-content.tsx b/packages/propel/src/components/combobox/combobox-content.tsx
index 7c8bab0b..907cbedf 100644
--- a/packages/propel/src/components/combobox/combobox-content.tsx
+++ b/packages/propel/src/components/combobox/combobox-content.tsx
@@ -1,20 +1,18 @@
-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";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 
-export type ComboboxContentProps = ComboboxPopupProps & {
+import { ListboxPopup, type ListboxPopupProps } from "../../internal/listbox-popup";
+import { Positioner } from "../../internal/positioner";
+
+export type ComboboxContentProps = ListboxPopupProps & {
   /** Which side of the input the list opens toward. @default "bottom" */
-  side?: ComboboxPositionerProps["side"];
+  side?: BaseCombobox.Positioner.Props["side"];
   /** Distance in px between the input and the list. @default 4 */
-  sideOffset?: ComboboxPositionerProps["sideOffset"];
+  sideOffset?: BaseCombobox.Positioner.Props["sideOffset"];
   /** Alignment of the list relative to the input along `side`. @default "start" */
-  align?: ComboboxPositionerProps["align"];
+  align?: BaseCombobox.Positioner.Props["align"];
 };
 
-/** The combobox list surface: portal + positioner + popup with Propel overlay styling. */
+/** The combobox list surface: Base UI portal + positioner + popup grafted onto Propel styling. */
 export function ComboboxContent({
   side = "bottom",
   sideOffset = 4,
@@ -22,10 +20,15 @@ export function ComboboxContent({
   ...props
 }: ComboboxContentProps) {
   return (
-    <ComboboxPortal>
-      <ComboboxPositioner side={side} sideOffset={sideOffset} align={align}>
-        <ComboboxPopup {...props} />
-      </ComboboxPositioner>
-    </ComboboxPortal>
+    <BaseCombobox.Portal>
+      <BaseCombobox.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <BaseCombobox.Popup {...props} render={<ListboxPopup />} />
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
   );
 }
diff --git a/packages/propel/src/components/combobox/combobox-empty.tsx b/packages/propel/src/components/combobox/combobox-empty.tsx
new file mode 100644
index 00000000..dcf39e34
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-empty.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+import { ComboboxEmpty as ComboboxEmptyElement } from "../../elements/combobox";
+
+export type ComboboxEmptyProps = Omit<BaseCombobox.Empty.Props, "className" | "style">;
+
+/**
+ * The ready-made empty-state row: Base UI's `Empty` behavior grafted onto the styled
+ * `elements/combobox` row. Pass the — localizable — no-matches message as children.
+ */
+export function ComboboxEmpty(props: ComboboxEmptyProps) {
+  return <BaseCombobox.Empty {...props} render={<ComboboxEmptyElement />} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox-group-label.tsx b/packages/propel/src/components/combobox/combobox-group-label.tsx
new file mode 100644
index 00000000..f6c35d76
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-group-label.tsx
@@ -0,0 +1,16 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+import { ListboxGroupLabel } from "../../internal/listbox-group-label";
+
+export type ComboboxGroupLabelProps = Omit<
+  BaseCombobox.GroupLabel.Props,
+  "className" | "style" | "render"
+>;
+
+/**
+ * The muted heading naming a `ComboboxGroup` — Base UI's `GroupLabel` behavior (labels the group
+ * for assistive tech) grafted onto the shared styled listbox heading.
+ */
+export function ComboboxGroupLabel(props: ComboboxGroupLabelProps) {
+  return <BaseCombobox.GroupLabel {...props} render={<ListboxGroupLabel />} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox-group.tsx b/packages/propel/src/components/combobox/combobox-group.tsx
new file mode 100644
index 00000000..42221118
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-group.tsx
@@ -0,0 +1,11 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export type ComboboxGroupProps = Omit<BaseCombobox.Group.Props, "className" | "style">;
+
+/**
+ * Groups related options under a `ComboboxGroupLabel`. Pass the group's `items` so the nested
+ * `ComboboxCollection` renders (and filters) just this group's options.
+ */
+export function ComboboxGroup(props: ComboboxGroupProps) {
+  return <BaseCombobox.Group {...props} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox-input-group.tsx b/packages/propel/src/components/combobox/combobox-input-group.tsx
new file mode 100644
index 00000000..2491d76c
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-input-group.tsx
@@ -0,0 +1,57 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import {
+  type ComboboxMagnitude,
+  ComboboxInput as ComboboxInputElement,
+  ComboboxInputGroup as ComboboxInputGroupElement,
+} from "../../elements/combobox";
+import { ControlIcon } from "../../internal/control-icon";
+
+export type ComboboxInputGroupProps = Omit<
+  BaseCombobox.Input.Props,
+  "className" | "style" | "render"
+> & {
+  /** Visual size of the input row: height, text, and glyph sizing. Required. */
+  magnitude: ComboboxMagnitude;
+  /** Input placeholder. */
+  placeholder?: string;
+  /**
+   * Decorative leading glyph (e.g. a search magnifier), rendered in the group's `ComboboxIcon` slot
+   * at the inline-start.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The clear control (e.g. an `IconButton`), grafted onto Base UI's `Clear` behavior. It carries
+   * its own — localizable — `aria-label`; the group bakes no label or glyph.
+   */
+  clear?: React.ReactElement;
+  /**
+   * The popup-trigger control (e.g. an `IconButton`), grafted onto Base UI's `Trigger` behavior. It
+   * carries its own — localizable — `aria-label`; the group bakes no label or glyph.
+   */
+  trigger?: React.ReactElement;
+};
+
+/**
+ * The ready-made single-select input frame: grafts Base UI's `InputGroup` onto the styled bordered
+ * frame and Base UI's `Input` onto the styled text field, laying out an optional leading `icon`
+ * slot and the consumer-provided `clear`/`trigger` controls. All remaining props pass through to
+ * the input (the element that carries the combobox behavior and accessible name).
+ */
+export function ComboboxInputGroup({
+  magnitude,
+  icon,
+  clear,
+  trigger,
+  ...props
+}: ComboboxInputGroupProps) {
+  return (
+    <BaseCombobox.InputGroup render={<ComboboxInputGroupElement magnitude={magnitude} />}>
+      {icon != null ? <ControlIcon>{icon}</ControlIcon> : null}
+      <BaseCombobox.Input {...props} render={<ComboboxInputElement />} />
+      {clear != null ? <BaseCombobox.Clear render={clear} /> : null}
+      {trigger != null ? <BaseCombobox.Trigger render={trigger} /> : null}
+    </BaseCombobox.InputGroup>
+  );
+}
diff --git a/packages/propel/src/components/combobox/combobox-item-indicator.tsx b/packages/propel/src/components/combobox/combobox-item-indicator.tsx
index 94bf4179..586524f4 100644
--- a/packages/propel/src/components/combobox/combobox-item-indicator.tsx
+++ b/packages/propel/src/components/combobox/combobox-item-indicator.tsx
@@ -1,20 +1,24 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { Check } from "lucide-react";
 
-import {
-  ComboboxItemIndicator as ComboboxItemIndicatorElement,
-  type ComboboxItemIndicatorProps,
-} from "../../ui/combobox";
+import { ComboboxItemIndicator as ComboboxItemIndicatorElement } from "../../elements/combobox";
 
-export type { ComboboxItemIndicatorProps };
+export type ComboboxItemIndicatorProps = Omit<
+  BaseCombobox.ItemIndicator.Props,
+  "className" | "style"
+>;
 
 /**
- * Ready-made combobox item indicator: the styled marker with a default check when no children are
- * given.
+ * Ready-made combobox item indicator: Base UI's selection behavior grafted onto the styled marker,
+ * with a default check when no children are given (defaults are a `components` concern). Mounted on
+ * every row by default — the `layout="indicator"` listbox row places children positionally, so the
+ * marker must occupy the leading column even while unselected (the styled marker hides its glyph
+ * off `data-selected`).
  */
-export function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {
+export function ComboboxItemIndicator({ children, ...props }: ComboboxItemIndicatorProps) {
   return (
-    <ComboboxItemIndicatorElement {...props}>
-      {props.children ?? <Check aria-hidden />}
-    </ComboboxItemIndicatorElement>
+    <BaseCombobox.ItemIndicator keepMounted {...props} render={<ComboboxItemIndicatorElement />}>
+      {children ?? <Check aria-hidden />}
+    </BaseCombobox.ItemIndicator>
   );
 }
diff --git a/packages/propel/src/components/combobox/combobox-item.tsx b/packages/propel/src/components/combobox/combobox-item.tsx
new file mode 100644
index 00000000..7bae6bf3
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-item.tsx
@@ -0,0 +1,25 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
+// Ready-made marker that supplies the default check glyph (defaults are a `components` concern).
+import { ComboboxItemIndicator } from "./combobox-item-indicator";
+
+export type ComboboxItemProps = Omit<BaseCombobox.Item.Props, "className" | "style"> & {
+  /** Row height and text size. Required. */
+  magnitude: ListboxItemMagnitude;
+};
+
+/**
+ * The ready-made option row: Base UI's `Item` behavior grafted onto the shared listbox row. The
+ * row's `indicator` layout reserves a leading 1rem column, which the baked-in
+ * `ComboboxItemIndicator` selection marker occupies (kept mounted while unselected so the label —
+ * wrapped in a `<span>` for the positional grid — stays in its own column).
+ */
+export function ComboboxItem({ magnitude, children, ...props }: ComboboxItemProps) {
+  return (
+    <BaseCombobox.Item {...props} render={<ListboxItem layout="indicator" magnitude={magnitude} />}>
+      <ComboboxItemIndicator />
+      <span>{children}</span>
+    </BaseCombobox.Item>
+  );
+}
diff --git a/packages/propel/src/components/combobox/combobox-list.tsx b/packages/propel/src/components/combobox/combobox-list.tsx
new file mode 100644
index 00000000..b66c9f45
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-list.tsx
@@ -0,0 +1,11 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export type ComboboxListProps = Omit<BaseCombobox.List.Props, "className" | "style">;
+
+/**
+ * The combobox items container — Base UI's `List` behavior part (it carries no propel styling of
+ * its own), passed through so a full combobox composes without importing `@base-ui/react`.
+ */
+export function ComboboxList(props: ComboboxListProps) {
+  return <BaseCombobox.List {...props} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox-row.tsx b/packages/propel/src/components/combobox/combobox-row.tsx
new file mode 100644
index 00000000..9ce6e1aa
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-row.tsx
@@ -0,0 +1,8 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export type ComboboxRowProps = Omit<BaseCombobox.Row.Props, "className" | "style">;
+
+/** A grid row wrapper for multi-column listbox layouts (pass `cols` on the root's `grid`). */
+export function ComboboxRow(props: ComboboxRowProps) {
+  return <BaseCombobox.Row {...props} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox-status.tsx b/packages/propel/src/components/combobox/combobox-status.tsx
new file mode 100644
index 00000000..5e9d6be9
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-status.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+import { ListboxStatus } from "../../internal/listbox-status";
+
+export type ComboboxStatusProps = Omit<BaseCombobox.Status.Props, "className" | "style" | "render">;
+
+/**
+ * A polite live region inside the popup for async hints ("Searching…", "12 results") — Base UI's
+ * `Status` behavior grafted onto the shared muted listbox hint styling.
+ */
+export function ComboboxStatus(props: ComboboxStatusProps) {
+  return <BaseCombobox.Status {...props} render={<ListboxStatus />} />;
+}
diff --git a/packages/propel/src/components/combobox/combobox.stories.tsx b/packages/propel/src/components/combobox/combobox.stories.tsx
index caaec22e..7f62713e 100644
--- a/packages/propel/src/components/combobox/combobox.stories.tsx
+++ b/packages/propel/src/components/combobox/combobox.stories.tsx
@@ -1,49 +1,71 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronsUpDown, X } from "lucide-react";
-import { expect, within } from "storybook/test";
+import * as React from "react";
+import { expect, waitFor, within } from "storybook/test";
 
+import { Button } from "../button/index";
+import {
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogHeading,
+  DialogTitle,
+} from "../dialog/index";
 import { Field, FieldError, FieldLabel } from "../field/index";
 import { IconButton } from "../icon-button";
+import { InputField } from "../input-field/index";
 import {
   Combobox,
-  ComboboxClear,
+  ComboboxChips,
+  ComboboxCollection,
   ComboboxContent,
   ComboboxEmpty,
-  ComboboxInput,
+  ComboboxGroup,
+  ComboboxGroupLabel,
   ComboboxInputGroup,
   ComboboxItem,
   ComboboxItemIndicator,
-  ComboboxLabel,
   ComboboxList,
-  ComboboxTrigger,
+  ComboboxStatus,
+  useFilter,
 } 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.
+// Components-tier story: the ready-mades collapse every Base UI behavior part — `ComboboxInputGroup`
+// bundles the input + clear/trigger controls, `ComboboxContent` the portal/positioner/popup, and
+// `ComboboxItem` the indicator row — so a full combobox composes without touching `@base-ui/react`.
+// The elements-tier `Combobox` story wires the raw styled parts by hand.
 const meta = {
   title: "Components/Combobox",
   component: Combobox,
   subcomponents: {
-    ComboboxLabel,
     ComboboxInputGroup,
-    ComboboxInput,
-    ComboboxClear,
-    ComboboxTrigger,
+    ComboboxChips,
     ComboboxContent,
     ComboboxList,
     ComboboxItem,
     ComboboxItemIndicator,
     ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxGroupLabel,
+    ComboboxCollection,
+    ComboboxStatus,
   },
 } satisfies Meta<typeof Combobox>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Combobox using the ready-made `ComboboxContent` surface for filterable selection. */
+/**
+ * A filterable single-select: `ComboboxInputGroup` is the input frame (pass the clear/trigger
+ * controls — each carries its own localizable `aria-label`), `ComboboxContent` the popup surface,
+ * and `ComboboxItem` the option rows with the selection check baked in.
+ */
 export const Default: Story = {
   args: { items: REGIONS, required: true },
   render: (args) => (
@@ -52,37 +74,28 @@ export const Default: Story = {
         <FieldLabel magnitude="md" inset={false}>
           Region
         </FieldLabel>
-        <ComboboxInputGroup>
-          <ComboboxInput placeholder="e.g. eu-central-1" />
-          <ComboboxClear
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Clear region"
-              >
-                <X />
-              </IconButton>
-            }
-          />
-          <ComboboxTrigger
-            render={
-              <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
-                <ChevronsUpDown />
-              </IconButton>
-            }
-          />
-        </ComboboxInputGroup>
+        <ComboboxInputGroup
+          magnitude="md"
+          placeholder="e.g. eu-central-1"
+          clear={
+            <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear region">
+              <X />
+            </IconButton>
+          }
+          trigger={
+            <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
+              <ChevronsUpDown />
+            </IconButton>
+          }
+        />
         <ComboboxContent>
           <ComboboxEmpty>No matches</ComboboxEmpty>
           <ComboboxList>
-            {REGIONS.map((region) => (
-              <ComboboxItem key={region} value={region}>
-                <ComboboxItemIndicator />
-                <span>{region}</span>
+            {(region: string) => (
+              <ComboboxItem key={region} value={region} magnitude="md">
+                {region}
               </ComboboxItem>
-            ))}
+            )}
           </ComboboxList>
         </ComboboxContent>
         <FieldError magnitude="md" />
@@ -91,11 +104,470 @@ export const Default: Story = {
   ),
 };
 
+/**
+ * Interaction test: typing filters the popup down to the matching option. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
 export const DefaultInteraction: Story = {
   ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByRole("combobox", { name: "Region" }), "eu");
+    // Base UI filters the list to the query: matches stay, everything else drops out.
     await expect(within(document.body).getByText("eu-central-1")).toBeInTheDocument();
+    await expect(within(document.body).queryByText("us-east-1")).not.toBeInTheDocument();
+    // The Empty live region stays mounted for screen readers but holds no content (and takes no
+    // space) while there are matches.
+    await expect(within(document.body).getByRole("status")).toBeEmptyDOMElement();
+  },
+};
+
+/**
+ * Interaction test: a query with no matches empties the list and shows the polite "No matches"
+ * status. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const EmptyInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Region" }), "zzz");
+    const popup = within(document.body);
+    await expect(popup.queryAllByRole("option")).toHaveLength(0);
+    await expect(popup.getByRole("status")).toHaveTextContent("No matches");
+  },
+};
+
+/**
+ * Interaction test: `Field invalid` propagates validity through the ready-mades — the input carries
+ * `aria-invalid`/`data-invalid` (which the input group's danger border keys off) and the matched
+ * `FieldError` message renders. Tagged out of the sidebar/docs/manifest while still running under
+ * the default `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Field name="region" invalid>
+      <Combobox items={REGIONS} required>
+        <FieldLabel magnitude="md" inset={false}>
+          Region
+        </FieldLabel>
+        <ComboboxInputGroup magnitude="md" placeholder="e.g. eu-central-1" />
+        <FieldError match={true} magnitude="md">
+          Choose a deployment region.
+        </FieldError>
+      </Combobox>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("combobox", { name: "Region" });
+    await expect(input).toHaveAttribute("aria-invalid", "true");
+    await expect(input).toHaveAttribute("data-invalid");
+    await expect(canvas.getByText("Choose a deployment region.")).toBeInTheDocument();
+  },
+};
+
+/**
+ * `multiple` swaps the input frame for `ComboboxChips`: each selected value renders as a removable
+ * chip ahead of the inline input, wrapping onto new rows as the selection grows. `removeLabel`
+ * names each chip's remove button (localizable, required). Arrow keys move focus across chips;
+ * Backspace removes.
+ */
+export const Multiple: Story = {
+  render: () => (
+    <Field name="regions">
+      <Combobox multiple items={REGIONS} defaultValue={["us-east-1", "eu-central-1"]}>
+        <FieldLabel magnitude="md" inset={false}>
+          Regions
+        </FieldLabel>
+        <ComboboxChips
+          magnitude="md"
+          placeholder="Add a region"
+          removeLabel={(region) => `Remove ${region}`}
+        />
+        <ComboboxContent>
+          <ComboboxEmpty>No matches</ComboboxEmpty>
+          <ComboboxList>
+            {(region: string) => (
+              <ComboboxItem key={region} value={region} magnitude="md">
+                {region}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: both preselected values render as chips, a chip's remove button drops just that
+ * value, and picking another item appends a chip. Tagged out of the sidebar/docs/manifest while
+ * still running under the default `test` tag.
+ */
+export const MultipleInteraction: Story = {
+  ...Multiple,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await expect(canvas.getByText("us-east-1")).toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("button", { name: "Remove us-east-1" }));
+    await expect(canvas.queryByText("us-east-1")).not.toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("combobox", { name: "Regions" }));
+    const popup = within(document.body);
+    await userEvent.click(await popup.findByRole("option", { name: "ap-west-1" }));
+    await expect(canvas.getByText("ap-west-1")).toBeInTheDocument();
+    await expect(canvas.getByText("eu-central-1")).toBeInTheDocument();
+  },
+};
+
+const GROUPED_REGIONS = [
+  { label: "Americas", items: ["us-central-1", "us-east-1", "sa-east-1"] },
+  { label: "Europe", items: ["eu-central-1", "eu-west-1"] },
+  { label: "Asia Pacific", items: ["ap-west-1", "ap-southeast-2"] },
+];
+
+/**
+ * Grouped options: the root receives the grouped `items`, the list function-child receives each
+ * group, and `ComboboxGroup` + `ComboboxCollection` render the group's own filtered options under a
+ * `ComboboxGroupLabel`. Filtering drops empty groups (and their headings) automatically.
+ */
+export const Grouped: Story = {
+  render: () => (
+    <Field name="region">
+      <Combobox items={GROUPED_REGIONS}>
+        <FieldLabel magnitude="md" inset={false}>
+          Region
+        </FieldLabel>
+        <ComboboxInputGroup magnitude="md" placeholder="e.g. eu-central-1" />
+        <ComboboxContent>
+          <ComboboxEmpty>No matches</ComboboxEmpty>
+          <ComboboxList>
+            {(group: (typeof GROUPED_REGIONS)[number]) => (
+              <ComboboxGroup key={group.label} items={group.items}>
+                <ComboboxGroupLabel>{group.label}</ComboboxGroupLabel>
+                <ComboboxCollection>
+                  {(region: string) => (
+                    <ComboboxItem key={region} value={region} magnitude="md">
+                      {region}
+                    </ComboboxItem>
+                  )}
+                </ComboboxCollection>
+              </ComboboxGroup>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: filtering inside groups keeps only matching options and drops group headings
+ * with no matches. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const GroupedInteraction: Story = {
+  ...Grouped,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Region" }), "eu");
+    const popup = within(document.body);
+    await expect(popup.getByText("Europe")).toBeInTheDocument();
+    await expect(popup.getByText("eu-central-1")).toBeInTheDocument();
+    await expect(popup.queryByText("Americas")).not.toBeInTheDocument();
+    await expect(popup.queryByText("us-east-1")).not.toBeInTheDocument();
+  },
+};
+
+const MEMBERS = ["Aaditya Kapoor", "Bianca Ferreira", "Marcus Chen", "Priya Nair", "Rohan Sharma"];
+
+/**
+ * Items loaded from a remote source: `filter={null}` turns the built-in filtering off, the root's
+ * `onInputValueChange` drives the (deterministic, 300 ms) search, and `ComboboxStatus` — a polite
+ * live region inside the popup — carries the "Searching…" / "Start typing" hints while
+ * `ComboboxEmpty` keeps the settled no-matches message.
+ */
+export const AsyncSearch: Story = {
+  render: function Render() {
+    const [query, setQuery] = React.useState("");
+    const [results, setResults] = React.useState<string[]>([]);
+    const [pending, setPending] = React.useState(false);
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const { contains } = useFilter();
+
+    React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+    const trimmed = query.trim();
+    const status = pending
+      ? "Searching…"
+      : trimmed === ""
+        ? "Start typing to search members"
+        : null;
+
+    return (
+      <Field name="reviewer">
+        <Combobox
+          items={results}
+          // Built-in filtering is off: the (fake) server already returns only the matches.
+          filter={null}
+          onInputValueChange={(nextQuery, { reason }) => {
+            setQuery(nextQuery);
+            if (reason === "item-press") {
+              return;
+            }
+            clearTimeout(timeoutRef.current);
+            const trimmedQuery = nextQuery.trim();
+            if (trimmedQuery === "") {
+              setResults([]);
+              setPending(false);
+              return;
+            }
+            setPending(true);
+            // Deterministic stand-in for a server search: resolves after a short in-story delay.
+            timeoutRef.current = setTimeout(() => {
+              setResults(MEMBERS.filter((member) => contains(member, trimmedQuery)));
+              setPending(false);
+            }, 300);
+          }}
+        >
+          <FieldLabel magnitude="md" inset={false}>
+            Reviewer
+          </FieldLabel>
+          <ComboboxInputGroup
+            magnitude="md"
+            placeholder="e.g. Priya"
+            clear={
+              <IconButton
+                prominence="ghost"
+                tone="neutral"
+                magnitude="md"
+                aria-label="Clear reviewer"
+              >
+                <X />
+              </IconButton>
+            }
+            trigger={
+              <IconButton
+                prominence="ghost"
+                tone="neutral"
+                magnitude="md"
+                aria-label="Open reviewer"
+              >
+                <ChevronsUpDown />
+              </IconButton>
+            }
+          />
+          <ComboboxContent>
+            <ComboboxStatus>{status}</ComboboxStatus>
+            <ComboboxEmpty>{!pending && trimmed !== "" ? "No members match" : null}</ComboboxEmpty>
+            <ComboboxList>
+              {(member: string) => (
+                <ComboboxItem key={member} value={member} magnitude="md">
+                  {member}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </Field>
+    );
+  },
+};
+
+/**
+ * Interaction test: typing shows the pending Status hint, then the settled results replace it —
+ * only the matching member is listed. Tagged out of the sidebar/docs/manifest while still running
+ * under the default `test` tag.
+ */
+export const AsyncSearchInteraction: Story = {
+  ...AsyncSearch,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Reviewer" }), "ro");
+    const popup = within(document.body);
+    // The polite Status live region announces the in-flight search…
+    await expect(await popup.findByText("Searching…")).toBeInTheDocument();
+    // …then the settled results replace it.
+    await expect(await popup.findByRole("option", { name: "Rohan Sharma" })).toBeInTheDocument();
+    await waitFor(() => expect(popup.queryByText("Searching…")).not.toBeInTheDocument());
+    await expect(popup.queryByRole("option", { name: "Marcus Chen" })).not.toBeInTheDocument();
+  },
+};
+
+type ProjectLabel = {
+  id: string;
+  value: string;
+  /** The raw query this row would create — present only on the synthetic "Create …" row. */
+  creatable?: string;
+};
+
+const INITIAL_LABELS: ProjectLabel[] = [
+  { id: "bug", value: "bug" },
+  { id: "documentation", value: "documentation" },
+  { id: "enhancement", value: "enhancement" },
+  { id: "help-wanted", value: "help wanted" },
+];
+
+/**
+ * Creating a new item when the query matches nothing: a synthetic `Create "…"` row is appended to
+ * `items`, and picking it opens a creation `Dialog` (intercepted in the root's `onValueChange`)
+ * instead of selecting. Confirming adds the new label to the list and selects it as a chip.
+ */
+export const Creatable: Story = {
+  render: function Render() {
+    const [labels, setLabels] = React.useState(INITIAL_LABELS);
+    const [selected, setSelected] = React.useState<ProjectLabel[]>([]);
+    const [query, setQuery] = React.useState("");
+    // The label name being drafted in the dialog; non-null while the dialog is open.
+    const [draft, setDraft] = React.useState<string | null>(null);
+
+    const trimmed = query.trim();
+    const exists = labels.some(
+      (label) => label.value.toLocaleLowerCase() === trimmed.toLocaleLowerCase(),
+    );
+    // When the query matches no existing label exactly, append a synthetic "Create …" row. Its
+    // display text contains the query, so it survives the built-in filter alongside partial
+    // matches.
+    const items =
+      trimmed === "" || exists
+        ? labels
+        : [
+            ...labels,
+            { id: `create:${trimmed}`, value: `Create "${trimmed}"`, creatable: trimmed },
+          ];
+
+    function createLabel() {
+      const value = draft?.trim();
+      if (!value) {
+        return;
+      }
+      const newLabel: ProjectLabel = {
+        id: value.toLocaleLowerCase().replace(/\s+/g, "-"),
+        value,
+      };
+      setLabels((prev) => [...prev, newLabel]);
+      setSelected((prev) => [...prev, newLabel]);
+      setDraft(null);
+      setQuery("");
+    }
+
+    return (
+      <>
+        <Field name="labels">
+          <Combobox
+            multiple
+            items={items}
+            value={selected}
+            inputValue={query}
+            onInputValueChange={setQuery}
+            itemToStringLabel={(label: ProjectLabel) => label.value}
+            onValueChange={(next) => {
+              // Picking the synthetic row opens the creation dialog instead of selecting it.
+              const created = next.find((label) => label.creatable != null);
+              if (created?.creatable != null) {
+                setDraft(created.creatable);
+                return;
+              }
+              setSelected(next);
+              setQuery("");
+            }}
+          >
+            <FieldLabel magnitude="md" inset={false}>
+              Labels
+            </FieldLabel>
+            <ComboboxChips
+              magnitude="md"
+              placeholder="Add a label"
+              removeLabel={(label: ProjectLabel) => `Remove ${label.value}`}
+              itemToStringLabel={(label: ProjectLabel) => label.value}
+            />
+            <ComboboxContent>
+              <ComboboxEmpty>No labels found</ComboboxEmpty>
+              <ComboboxList>
+                {(label: ProjectLabel) => (
+                  <ComboboxItem key={label.id} value={label} magnitude="md">
+                    {label.value}
+                  </ComboboxItem>
+                )}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </Field>
+
+        <Dialog
+          open={draft != null}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDraft(null);
+            }
+          }}
+        >
+          <DialogContent magnitude="sm">
+            <DialogHeader>
+              <DialogHeading>
+                <DialogTitle>Create new label</DialogTitle>
+              </DialogHeading>
+            </DialogHeader>
+            <DialogBody>
+              <DialogDescription>Add a new label to select.</DialogDescription>
+              <InputField
+                magnitude="md"
+                orientation="vertical"
+                label="Label name"
+                value={draft ?? ""}
+                onValueChange={(value) => setDraft(value)}
+              />
+            </DialogBody>
+            <DialogActions>
+              <Button
+                sizing="hug"
+                prominence="secondary"
+                tone="neutral"
+                magnitude="xl"
+                render={<DialogClose />}
+              >
+                Cancel
+              </Button>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="neutral"
+                magnitude="xl"
+                onClick={createLabel}
+              >
+                Create
+              </Button>
+            </DialogActions>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+/**
+ * Interaction test: an unknown query offers the `Create "…"` row, picking it opens the dialog
+ * seeded with the query, and confirming closes the dialog and selects the created label as a chip.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const CreatableInteraction: Story = {
+  ...Creatable,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Labels" }), "triage");
+    const popup = within(document.body);
+    await userEvent.click(await popup.findByRole("option", { name: 'Create "triage"' }));
+
+    const dialog = await within(document.body).findByRole("dialog");
+    await expect(within(dialog).getByRole("textbox", { name: "Label name" })).toHaveValue("triage");
+    await userEvent.click(within(dialog).getByRole("button", { name: "Create" }));
+
+    await waitFor(() =>
+      expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+    // The created label is now selected as a removable chip.
+    await expect(canvas.getByText("triage")).toBeInTheDocument();
   },
 };
diff --git a/packages/propel/src/components/combobox/combobox.tsx b/packages/propel/src/components/combobox/combobox.tsx
new file mode 100644
index 00000000..3e2a52d7
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox.tsx
@@ -0,0 +1,17 @@
+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"
+>;
+
+/**
+ * The combobox Root — Base UI's context/state provider (renders no element of its own). A
+ * behavior-only role, so it lives in `components` (rules 1a, 2); the styled parts live in
+ * `elements/combobox` and are grafted onto Base UI behavior here.
+ */
+export function Combobox<Value, Multiple extends boolean | undefined = false>(
+  props: ComboboxProps<Value, Multiple>,
+) {
+  return <BaseCombobox.Root {...props} />;
+}
diff --git a/packages/propel/src/components/combobox/index.tsx b/packages/propel/src/components/combobox/index.tsx
index b20fda76..59713fe4 100644
--- a/packages/propel/src/components/combobox/index.tsx
+++ b/packages/propel/src/components/combobox/index.tsx
@@ -1,25 +1,21 @@
+export * from "./combobox";
+export * from "./combobox-chips";
+export * from "./combobox-collection";
 export * from "./combobox-content";
-// Ready-made parts that supply a default icon — these replace the bare `ui` slots for consumers.
+export * from "./combobox-empty";
+export * from "./combobox-group";
+export * from "./combobox-group-label";
+export * from "./combobox-input-group";
+export * from "./combobox-item";
+// Ready-made part that supplies a default icon — replaces the bare `elements` slot for consumers.
 export * from "./combobox-item-indicator";
-// Re-export the atomic combobox parts so a full combobox can be assembled from one entry.
-// `ComboboxClear`/`ComboboxTrigger` are behavior-only ui parts now — composed under an
-// `IconButton` via `render` at the call site (see `combobox-field`).
-export {
-  Combobox,
-  type ComboboxProps,
-  ComboboxClear,
-  type ComboboxClearProps,
-  ComboboxEmpty,
-  type ComboboxEmptyProps,
-  ComboboxInput,
-  type ComboboxInputProps,
-  ComboboxInputGroup,
-  type ComboboxInputGroupProps,
-  ComboboxItem,
-  type ComboboxItemProps,
-  ComboboxLabel,
-  type ComboboxLabelProps,
-  ComboboxList,
-  ComboboxTrigger,
-  type ComboboxTriggerProps,
-} from "../../ui/combobox";
+export * from "./combobox-list";
+export * from "./combobox-row";
+export * from "./combobox-status";
+// The ready-mades above bundle every Base UI behavior part (`Clear`/`Trigger` as node props on
+// `ComboboxInputGroup`; `Portal`/`Positioner`/`Popup` inside `ComboboxContent`;
+// `Value`/`Chip`/`ChipRemove` inside `ComboboxChips`; `List` as a passthrough), so a full combobox
+// composes from this entry without importing `@base-ui/react`. `ComboboxLabel` stays a styled
+// `elements` part — graft it onto `BaseCombobox.Label` at the call site for the advanced anatomy.
+export { ComboboxLabel, type ComboboxLabelProps } from "../../elements/combobox";
+export * from "./use-filter";
diff --git a/packages/propel/src/components/combobox/use-filter.ts b/packages/propel/src/components/combobox/use-filter.ts
new file mode 100644
index 00000000..2f13b1e4
--- /dev/null
+++ b/packages/propel/src/components/combobox/use-filter.ts
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+/**
+ * Base UI's locale-aware filtering hook, re-exported for custom `filter` implementations on the
+ * root (e.g. fuzzy or diacritic-insensitive matching).
+ */
+export const useFilter = BaseCombobox.useFilter;
+
+/**
+ * Base UI's hook pairing `useFilter` with the root's `items`, returning the filtered collection —
+ * for rendering fully custom list structures.
+ */
+export const useFilteredItems = BaseCombobox.useFilteredItems;
diff --git a/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx b/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
new file mode 100644
index 00000000..2b00364a
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
@@ -0,0 +1,54 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import {
+  ContextMenuCheckboxItem as ContextMenuCheckboxItemElement,
+  ContextMenuCheckboxItemIndicator,
+  ContextMenuItemLabel,
+  ContextMenuItemShortcut,
+  type ContextMenuItemTone,
+} from "../../elements/context-menu";
+import { Icon } from "../../internal/icon";
+
+export type ContextMenuCheckboxItemProps = Omit<
+  BaseContextMenu.CheckboxItem.Props,
+  "className" | "style"
+> & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone: ContextMenuItemTone;
+  /** Leading icon after the tick. */
+  icon?: React.ReactNode;
+  /** Trailing keyboard-shortcut hint after the label. */
+  trailing?: React.ReactNode;
+};
+
+/**
+ * The ready-made toggleable context-menu row: grafts Base UI's `CheckboxItem` behavior onto the
+ * styled row and bakes a kept-mounted tick indicator, so `checked` / `defaultChecked` /
+ * `onCheckedChange` forward straight to Base UI and the tick reads state from context.
+ */
+export function ContextMenuCheckboxItem({
+  tone,
+  icon,
+  trailing,
+  children,
+  ...props
+}: ContextMenuCheckboxItemProps) {
+  return (
+    <BaseContextMenu.CheckboxItem
+      {...props}
+      render={<ContextMenuCheckboxItemElement tone={tone} />}
+    >
+      <BaseContextMenu.CheckboxItemIndicator
+        keepMounted
+        render={<ContextMenuCheckboxItemIndicator />}
+      >
+        <Check aria-hidden />
+      </BaseContextMenu.CheckboxItemIndicator>
+      {icon != null ? <Icon>{icon}</Icon> : null}
+      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
+      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+    </BaseContextMenu.CheckboxItem>
+  );
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-content.tsx b/packages/propel/src/components/context-menu/context-menu-content.tsx
new file mode 100644
index 00000000..9ba97daf
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-content.tsx
@@ -0,0 +1,32 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+import {
+  ContextMenuPopup,
+  type ContextMenuPopupProps,
+} from "../../elements/context-menu/context-menu-popup";
+import { Positioner } from "../../internal/positioner";
+
+export type ContextMenuContentProps = ContextMenuPopupProps & {
+  /** Which side of the anchor the popup opens toward. Defaults to Base UI's pointer anchoring. */
+  side?: BaseContextMenu.Positioner.Props["side"];
+  /** Distance in px between the anchor and the popup. */
+  sideOffset?: BaseContextMenu.Positioner.Props["sideOffset"];
+  /** Alignment of the popup relative to the anchor along `side`. */
+  align?: BaseContextMenu.Positioner.Props["align"];
+};
+
+/** The context-menu surface: Base UI portal + positioner + popup grafted onto Propel styling. */
+export function ContextMenuContent({ side, sideOffset, align, ...props }: ContextMenuContentProps) {
+  return (
+    <BaseContextMenu.Portal>
+      <BaseContextMenu.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <BaseContextMenu.Popup {...props} render={<ContextMenuPopup />} />
+      </BaseContextMenu.Positioner>
+    </BaseContextMenu.Portal>
+  );
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-group.tsx b/packages/propel/src/components/context-menu/context-menu-group.tsx
new file mode 100644
index 00000000..1639d13c
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-group.tsx
@@ -0,0 +1,8 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+export type ContextMenuGroupProps = Omit<BaseContextMenu.Group.Props, "className" | "style">;
+
+/** Groups related rows so a `ContextMenuGroupLabel` names them for assistive tech. */
+export function ContextMenuGroup(props: ContextMenuGroupProps) {
+  return <BaseContextMenu.Group {...props} />;
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-item.tsx b/packages/propel/src/components/context-menu/context-menu-item.tsx
index fe402719..9cc3fae9 100644
--- a/packages/propel/src/components/context-menu/context-menu-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-item.tsx
@@ -1,50 +1,53 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { Check } from "lucide-react";
 import type * as React from "react";
 
 import {
-  ContextMenuItemIcon,
   ContextMenuItemIndicator,
   ContextMenuItemLabel,
   ContextMenuItem as ContextMenuItemElement,
-  type ContextMenuItemProps as ContextMenuItemElementProps,
+  type ContextMenuItemTone,
   ContextMenuItemShortcut,
-} from "../../ui/context-menu";
+} from "../../elements/context-menu";
+import { Icon } from "../../internal/icon";
 
-export type ContextMenuItemProps = ContextMenuItemElementProps & {
+export type ContextMenuItemProps = Omit<
+  BaseContextMenu.Item.Props,
+  "className" | "style" | "render"
+> & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone: ContextMenuItemTone;
   /** Leading icon before the label. */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
   /** Trailing keyboard-shortcut hint after the label. */
-  inlineEndNode?: React.ReactNode;
+  trailing?: React.ReactNode;
   /** Single-select selected state. */
   selected?: boolean;
 };
 
 /**
- * The ready-made menu row: composes the atomic `ContextMenuItem` and its region parts — a leading
- * icon, the label, an optional trailing shortcut hint, and a trailing check for single-select
- * selected state. Pass `tone="danger"` for destructive actions.
+ * The ready-made menu row: grafts Base UI's `Item` behavior onto the styled `ContextMenuItem` and
+ * composes its region parts — a leading icon, the label, an optional trailing shortcut hint, and a
+ * trailing check for single-select selected state. Pass `tone="danger"` for destructive actions.
  */
 export function ContextMenuItem({
-  inlineStartNode,
-  inlineEndNode,
+  tone,
+  icon,
+  trailing,
   selected,
   children,
   ...props
 }: ContextMenuItemProps) {
   return (
-    <ContextMenuItemElement {...props}>
-      {inlineStartNode != null ? (
-        <ContextMenuItemIcon>{inlineStartNode}</ContextMenuItemIcon>
-      ) : null}
+    <BaseContextMenu.Item {...props} render={<ContextMenuItemElement tone={tone} />}>
+      {icon != null ? <Icon>{icon}</Icon> : null}
       <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {inlineEndNode != null ? (
-        <ContextMenuItemShortcut>{inlineEndNode}</ContextMenuItemShortcut>
-      ) : null}
+      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
       {selected ? (
-        <ContextMenuItemIndicator>
+        <ContextMenuItemIndicator data-selected="">
           <Check />
         </ContextMenuItemIndicator>
       ) : null}
-    </ContextMenuItemElement>
+    </BaseContextMenu.Item>
   );
 }
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
index ddaaa925..5cc6c56a 100644
--- a/packages/propel/src/components/context-menu/context-menu-link-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
@@ -1,39 +1,43 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import type * as React from "react";
 
 import {
-  ContextMenuItemIcon,
   ContextMenuItemLabel,
   ContextMenuLinkItem as ContextMenuLinkItemElement,
-  type ContextMenuLinkItemProps as ContextMenuLinkItemElementProps,
+  type ContextMenuItemTone,
   ContextMenuItemShortcut,
-} from "../../ui/context-menu";
+} from "../../elements/context-menu";
+import { Icon } from "../../internal/icon";
 
-export type ContextMenuLinkItemProps = ContextMenuLinkItemElementProps & {
+export type ContextMenuLinkItemProps = Omit<
+  BaseContextMenu.LinkItem.Props,
+  "className" | "style" | "render"
+> & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone: ContextMenuItemTone;
   /** Leading icon before the label. */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
   /** Trailing hint after the label. */
-  inlineEndNode?: React.ReactNode;
+  trailing?: React.ReactNode;
 };
 
 /**
- * The ready-made navigational menu row: composes the atomic `ContextMenuLinkItem` and its region
- * parts — a leading icon, the label, and an optional trailing hint.
+ * The ready-made navigational menu row: grafts Base UI's `LinkItem` behavior onto the styled
+ * `ContextMenuLinkItem` and composes its region parts — a leading icon, the label, and an optional
+ * trailing hint.
  */
 export function ContextMenuLinkItem({
-  inlineStartNode,
-  inlineEndNode,
+  tone,
+  icon,
+  trailing,
   children,
   ...props
 }: ContextMenuLinkItemProps) {
   return (
-    <ContextMenuLinkItemElement {...props}>
-      {inlineStartNode != null ? (
-        <ContextMenuItemIcon>{inlineStartNode}</ContextMenuItemIcon>
-      ) : null}
+    <BaseContextMenu.LinkItem {...props} render={<ContextMenuLinkItemElement tone={tone} />}>
+      {icon != null ? <Icon>{icon}</Icon> : null}
       <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {inlineEndNode != null ? (
-        <ContextMenuItemShortcut>{inlineEndNode}</ContextMenuItemShortcut>
-      ) : null}
-    </ContextMenuLinkItemElement>
+      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+    </BaseContextMenu.LinkItem>
   );
 }
diff --git a/packages/propel/src/ui/context-menu/context-menu-radio-group.tsx b/packages/propel/src/components/context-menu/context-menu-radio-group.tsx
similarity index 75%
rename from packages/propel/src/ui/context-menu/context-menu-radio-group.tsx
rename to packages/propel/src/components/context-menu/context-menu-radio-group.tsx
index c203b83f..b482b279 100644
--- a/packages/propel/src/ui/context-menu/context-menu-radio-group.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-radio-group.tsx
@@ -5,7 +5,7 @@ export type ContextMenuRadioGroupProps = Omit<
   "className" | "style"
 >;
 
-/** Groups related radio items around a shared value. Wraps `ContextMenu.RadioGroup` 1:1. */
+/** Wraps `ContextMenuRadioItem`s sharing one `value` — Base UI's radio-group state, no chrome. */
 export function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {
   return <BaseContextMenu.RadioGroup {...props} />;
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-radio-item.tsx b/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
new file mode 100644
index 00000000..91eda3bb
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
@@ -0,0 +1,48 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Circle } from "lucide-react";
+import type * as React from "react";
+
+import {
+  ContextMenuItemLabel,
+  ContextMenuItemShortcut,
+  type ContextMenuItemTone,
+  ContextMenuRadioItem as ContextMenuRadioItemElement,
+  ContextMenuRadioItemIndicator,
+} from "../../elements/context-menu";
+import { Icon } from "../../internal/icon";
+
+export type ContextMenuRadioItemProps = Omit<
+  BaseContextMenu.RadioItem.Props,
+  "className" | "style"
+> & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone: ContextMenuItemTone;
+  /** Leading icon after the radio dot. */
+  icon?: React.ReactNode;
+  /** Trailing keyboard-shortcut hint after the label. */
+  trailing?: React.ReactNode;
+};
+
+/**
+ * The ready-made single-select context-menu row: grafts Base UI's `RadioItem` behavior onto the
+ * styled row and bakes a kept-mounted radio dot. Wrap rows in a `ContextMenuRadioGroup` carrying
+ * `value`/`onValueChange`; the dot reads the selected state from context.
+ */
+export function ContextMenuRadioItem({
+  tone,
+  icon,
+  trailing,
+  children,
+  ...props
+}: ContextMenuRadioItemProps) {
+  return (
+    <BaseContextMenu.RadioItem {...props} render={<ContextMenuRadioItemElement tone={tone} />}>
+      <BaseContextMenu.RadioItemIndicator keepMounted render={<ContextMenuRadioItemIndicator />}>
+        <Circle aria-hidden />
+      </BaseContextMenu.RadioItemIndicator>
+      {icon != null ? <Icon>{icon}</Icon> : null}
+      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
+      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+    </BaseContextMenu.RadioItem>
+  );
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-separator.tsx b/packages/propel/src/components/context-menu/context-menu-separator.tsx
new file mode 100644
index 00000000..bb1dd01e
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-separator.tsx
@@ -0,0 +1,16 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+import { ContextMenuSeparator as ContextMenuSeparatorElement } from "../../elements/context-menu";
+
+export type ContextMenuSeparatorProps = Omit<
+  BaseContextMenu.Separator.Props,
+  "className" | "style"
+>;
+
+/**
+ * Ready-made divider between groups of items: Base UI's `ContextMenu.Separator` behavior (the
+ * `separator` role) grafted onto the styled thin rule.
+ */
+export function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
+  return <BaseContextMenu.Separator {...props} render={<ContextMenuSeparatorElement />} />;
+}
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
index 9d7c51fb..4b6a1bac 100644
--- a/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
@@ -1,48 +1,51 @@
-import { ChevronRight } from "lucide-react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
 import {
-  ContextMenuItemIcon,
   ContextMenuItemLabel,
   ContextMenuItemShortcut,
   ContextMenuSubmenuTrigger as ContextMenuSubmenuTriggerElement,
-  type ContextMenuSubmenuTriggerProps as ContextMenuSubmenuTriggerElementProps,
-  ContextMenuSubmenuTriggerIndicator,
-} from "../../ui/context-menu";
+  type ContextMenuSubmenuTriggerTone,
+} from "../../elements/context-menu";
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
 
 export type ContextMenuSubmenuTriggerProps = Omit<
-  ContextMenuSubmenuTriggerElementProps,
-  "label"
+  BaseContextMenu.SubmenuTrigger.Props,
+  "className" | "style" | "render"
 > & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone: ContextMenuSubmenuTriggerTone;
   /** Leading icon before the label. */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
   /** Trailing hint before the submenu caret. */
-  inlineEndNode?: React.ReactNode;
+  trailing?: React.ReactNode;
 };
 
 /**
- * The ready-made submenu trigger: composes the atomic `ContextMenuSubmenuTrigger` and its region
- * parts — a leading icon, the label, an optional trailing hint, and the caret that points toward
- * the submenu.
+ * The ready-made submenu trigger: grafts Base UI's `SubmenuTrigger` behavior onto the styled
+ * `ContextMenuSubmenuTrigger` and composes its region parts — a leading icon, the label, an
+ * optional trailing hint, and the caret that points toward the submenu.
  */
 export function ContextMenuSubmenuTrigger({
-  inlineStartNode,
-  inlineEndNode,
+  tone,
+  icon,
+  trailing,
   children,
   ...props
 }: ContextMenuSubmenuTriggerProps) {
   return (
-    <ContextMenuSubmenuTriggerElement {...props}>
-      {inlineStartNode != null ? (
-        <ContextMenuItemIcon>{inlineStartNode}</ContextMenuItemIcon>
-      ) : null}
+    <BaseContextMenu.SubmenuTrigger
+      {...props}
+      render={<ContextMenuSubmenuTriggerElement tone={tone} />}
+    >
+      {icon != null ? <Icon>{icon}</Icon> : null}
       <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {inlineEndNode != null ? (
-        <ContextMenuItemShortcut>{inlineEndNode}</ContextMenuItemShortcut>
-      ) : null}
-      <ContextMenuSubmenuTriggerIndicator>
-        <ChevronRight />
-      </ContextMenuSubmenuTriggerIndicator>
-    </ContextMenuSubmenuTriggerElement>
+      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+      <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+        <ChevronDown />
+      </DisclosureIndicator>
+    </BaseContextMenu.SubmenuTrigger>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-submenu.tsx b/packages/propel/src/components/context-menu/context-menu-submenu.tsx
new file mode 100644
index 00000000..4dd1e1da
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-submenu.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+export type ContextMenuSubmenuProps = Omit<
+  BaseContextMenu.SubmenuRoot.Props,
+  "className" | "style"
+>;
+
+/**
+ * Groups all parts of a nested submenu — Base UI's submenu context provider (renders no element of
+ * its own). A behavior-only role, so it lives in `components` (rules 1a, 2).
+ */
+export function ContextMenuSubmenu(props: ContextMenuSubmenuProps) {
+  return <BaseContextMenu.SubmenuRoot {...props} />;
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-trigger.tsx b/packages/propel/src/components/context-menu/context-menu-trigger.tsx
new file mode 100644
index 00000000..5c109b46
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-trigger.tsx
@@ -0,0 +1,17 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+export type ContextMenuTriggerProps = Omit<BaseContextMenu.Trigger.Props, "className" | "style">;
+
+/**
+ * The behavior surface that opens the menu on right click or long press — Base UI applies no
+ * styling of its own, so give it a look by grafting it onto your own element via `render`:
+ *
+ * ```tsx
+ * <ContextMenuTrigger render={<MyCanvasArea />}>Right-click here</ContextMenuTrigger>;
+ * ```
+ *
+ * Maps 1:1 to `ContextMenu.Trigger`.
+ */
+export function ContextMenuTrigger(props: ContextMenuTriggerProps) {
+  return <BaseContextMenu.Trigger {...props} />;
+}
diff --git a/packages/propel/src/components/context-menu/context-menu.stories.tsx b/packages/propel/src/components/context-menu/context-menu.stories.tsx
index fd3d68f6..31d4ebe8 100644
--- a/packages/propel/src/components/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/components/context-menu/context-menu.stories.tsx
@@ -1,38 +1,47 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ClipboardPaste, Copy, Scissors, Trash2 } from "lucide-react";
-import { expect, fireEvent, waitFor } from "storybook/test";
+import {
+  ClipboardPaste,
+  Copy,
+  ExternalLink,
+  FolderInput,
+  Link2,
+  PencilLine,
+  Scissors,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+import { expect, fireEvent, userEvent, waitFor, within } from "storybook/test";
 
 import {
   ContextMenu,
+  ContextMenuContent,
   ContextMenuItem,
-  ContextMenuItemIcon,
-  ContextMenuItemIndicator,
-  ContextMenuItemLabel,
-  ContextMenuItemShortcut,
-  ContextMenuPopup,
-  ContextMenuPortal,
-  ContextMenuPositioner,
+  ContextMenuLinkItem,
   ContextMenuSeparator,
+  ContextMenuSubmenu,
+  ContextMenuSubmenuTrigger,
   ContextMenuTrigger,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
 } 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.
+// Components-tier story: the ready-made `ContextMenu` root and `ContextMenuContent` surface graft
+// Base UI's portal/positioner/popup, and the rich `ContextMenuItem` lays out an icon + label + a
+// trailing shortcut. `ContextMenuTrigger` is the behavior surface that opens the menu, and
+// `ContextMenuSeparator` is the ready-made divider. The elements-tier story composes the raw
+// `ContextMenuItem` rows by hand.
 const meta = {
   title: "Components/ContextMenu",
   component: ContextMenu,
   subcomponents: {
     ContextMenuTrigger,
-    ContextMenuPortal,
-    ContextMenuPositioner,
-    ContextMenuPopup,
+    ContextMenuContent,
     ContextMenuItem,
-    ContextMenuItemIcon,
-    ContextMenuItemLabel,
-    ContextMenuItemShortcut,
-    ContextMenuItemIndicator,
+    ContextMenuLinkItem,
     ContextMenuSeparator,
+    ContextMenuSubmenu,
+    ContextMenuSubmenuTrigger,
   },
 } satisfies Meta<typeof ContextMenu>;
 
@@ -49,25 +58,21 @@ export const Default: Story = {
       <ContextMenuTrigger render={<div className={triggerClass} />}>
         Right-click here
       </ContextMenuTrigger>
-      <ContextMenuPortal>
-        <ContextMenuPositioner>
-          <ContextMenuPopup>
-            <ContextMenuItem tone="neutral" inlineStartNode={<Scissors />} inlineEndNode="⌘X">
-              Cut
-            </ContextMenuItem>
-            <ContextMenuItem tone="neutral" inlineStartNode={<Copy />} inlineEndNode="⌘C">
-              Copy
-            </ContextMenuItem>
-            <ContextMenuItem tone="neutral" inlineStartNode={<ClipboardPaste />} inlineEndNode="⌘V">
-              Paste
-            </ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem tone="danger" inlineStartNode={<Trash2 />}>
-              Delete
-            </ContextMenuItem>
-          </ContextMenuPopup>
-        </ContextMenuPositioner>
-      </ContextMenuPortal>
+      <ContextMenuContent>
+        <ContextMenuItem tone="neutral" icon={<Scissors />} trailing="⌘X">
+          Cut
+        </ContextMenuItem>
+        <ContextMenuItem tone="neutral" icon={<Copy />} trailing="⌘C">
+          Copy
+        </ContextMenuItem>
+        <ContextMenuItem tone="neutral" icon={<ClipboardPaste />} trailing="⌘V">
+          Paste
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem tone="danger" icon={<Trash2 />}>
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
     </ContextMenu>
   ),
 };
@@ -82,3 +87,305 @@ export const DefaultInteraction: Story = {
     await expect(document.body).toHaveTextContent("Delete");
   },
 };
+
+/**
+ * Tone selects the row palette: `neutral` rows use the standard text hierarchy and `danger` rows
+ * use the error palette — both inside one menu, with the destructive action set off by a separator
+ * the way a real product menu groups it. Right-click the area to open it.
+ */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger render={<div className={triggerClass} />}>
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem tone="neutral" icon={<PencilLine />}>
+          Rename
+        </ContextMenuItem>
+        <ContextMenuItem tone="neutral" icon={<Copy />}>
+          Duplicate
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem tone="danger" icon={<Trash2 />}>
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+// The menu surface is portaled and only mounts on open, so without this twin the Tones menu (and
+// its danger-tone row) would never render under the test/a11y gate.
+export const TonesInteraction: Story = {
+  ...Tones,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  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("Rename");
+    await expect(document.body).toHaveTextContent("Duplicate");
+    await expect(document.body).toHaveTextContent("Delete");
+  },
+};
+
+/**
+ * A nested menu: `ContextMenuSubmenu` groups a `ContextMenuSubmenuTrigger` row (label + caret) with
+ * its own `ContextMenuContent`, so hovering or clicking "Move to" reveals the destinations beside
+ * the parent menu. Right-click the area to open it.
+ */
+export const Submenu: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // When a submenu is open, Base UI's FloatingPortal emits a visually-hidden `aria-owns`
+      // owner `<span>` next to the trigger. It reparents the portaled submenu to the correct
+      // place in the accessibility tree (next to its trigger), but in the DOM that span lands
+      // as a child of the parent `role="menu"`. axe's aria-required-children reads the DOM tree
+      // rather than the a11y tree, so it flags the span as a disallowed menu child. This is a
+      // static-analysis false-positive on axe's side, not invalid markup (tracked at
+      // dequelabs/axe-core#4048; the floating-ui maintainer confirmed the span is doing correct
+      // a11y-tree placement in floating-ui/floating-ui#3424). Suppress just this rule here.
+      config: { rules: [{ id: "aria-required-children", enabled: false }] },
+    },
+  },
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger render={<div className={triggerClass} />}>
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem tone="neutral" icon={<PencilLine />}>
+          Rename
+        </ContextMenuItem>
+        <ContextMenuItem tone="neutral" icon={<Copy />}>
+          Duplicate
+        </ContextMenuItem>
+        <ContextMenuSubmenu>
+          <ContextMenuSubmenuTrigger tone="neutral" icon={<FolderInput />}>
+            Move to
+          </ContextMenuSubmenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem tone="neutral">Mobile app</ContextMenuItem>
+            <ContextMenuItem tone="neutral">Web app</ContextMenuItem>
+            <ContextMenuItem tone="neutral">Design system</ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuSubmenu>
+        <ContextMenuSeparator />
+        <ContextMenuItem tone="danger" icon={<Trash2 />}>
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const SubmenuInteraction: Story = {
+  ...Submenu,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    await fireEvent.contextMenu(canvas.getByText("Right-click here"));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    const moveTo = (await waitFor(() => {
+      const item = Array.from(document.body.querySelectorAll('[role="menuitem"]')).find((el) =>
+        el.textContent?.includes("Move to"),
+      );
+      void expect(item).toBeDefined();
+      return item;
+    })) as HTMLElement;
+    await expect(moveTo).toHaveAttribute("aria-haspopup", "menu");
+    await userEvent.click(moveTo);
+    await waitFor(() =>
+      expect(document.body.querySelectorAll('[role="menu"]').length).toBeGreaterThan(1),
+    );
+    await expect(document.body).toHaveTextContent("Design system");
+  },
+};
+
+/**
+ * Navigation rows: `ContextMenuLinkItem` renders a real `<a>` element with menu-item behavior, so a
+ * right-click menu can send you to another page — here alongside a plain action row, the way a
+ * work-item card mixes "open" destinations with clipboard actions. Right-click the area to open
+ * it.
+ */
+export const LinkItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger render={<div className={triggerClass} />}>
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuLinkItem
+          tone="neutral"
+          icon={<ExternalLink />}
+          href="#work-item"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open in new tab
+        </ContextMenuLinkItem>
+        <ContextMenuLinkItem tone="neutral" icon={<Link2 />} href="#activity">
+          Go to activity
+        </ContextMenuLinkItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem tone="neutral" icon={<Copy />} trailing="⌘C">
+          Copy link
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+// Asserts the link rows are real anchors (href/target survive) that still participate in the menu
+// as `menuitem`s — the surface is portaled and mount-on-open, so the twin also feeds the a11y gate.
+export const LinkItemsInteraction: Story = {
+  ...LinkItems,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    await fireEvent.contextMenu(canvas.getByText("Right-click here"));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    const link = (await waitFor(() => {
+      const item = Array.from(document.body.querySelectorAll('[role="menuitem"]')).find((el) =>
+        el.textContent?.includes("Open in new tab"),
+      );
+      void expect(item).toBeDefined();
+      return item;
+    })) as HTMLElement;
+    await expect(link.tagName).toBe("A");
+    await expect(link).toHaveAttribute("href", "#work-item");
+    await expect(link).toHaveAttribute("target", "_blank");
+  },
+};
+
+const SORT_OPTIONS = [
+  { key: "manual", label: "Manual" },
+  { key: "created", label: "Created date" },
+  { key: "due", label: "Due date" },
+  { key: "priority", label: "Priority" },
+];
+
+/**
+ * Single-select rows: the chosen row shows a trailing check via `selected`, and each row forwards
+ * Base UI's `closeOnClick={false}` so picking a sort key moves the check without dismissing the
+ * menu. Right-click the area, then click rows to move the selection.
+ */
+export const SingleSelect: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const [sortBy, setSortBy] = React.useState("manual");
+    return (
+      <ContextMenu>
+        <ContextMenuTrigger render={<div className={triggerClass} />}>
+          Right-click here
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          {SORT_OPTIONS.map((option) => (
+            <ContextMenuItem
+              key={option.key}
+              tone="neutral"
+              selected={sortBy === option.key}
+              closeOnClick={false}
+              onClick={() => setSortBy(option.key)}
+            >
+              {option.label}
+            </ContextMenuItem>
+          ))}
+        </ContextMenuContent>
+      </ContextMenu>
+    );
+  },
+};
+
+// Clicks a row and asserts the menu stays open (`closeOnClick={false}`) while the trailing check
+// (the row's only svg — these rows have no leading icon) moves to the newly selected row.
+export const SingleSelectInteraction: Story = {
+  ...SingleSelect,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const findItem = (label: string) =>
+      Array.from(document.body.querySelectorAll('[role="menuitem"]')).find((el) =>
+        el.textContent?.includes(label),
+      ) as HTMLElement | undefined;
+    await fireEvent.contextMenu(canvas.getByText("Right-click here"));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await waitFor(() => expect(findItem("Manual")).toBeDefined());
+    await expect(findItem("Manual")?.querySelector("svg")).not.toBeNull();
+    await expect(findItem("Due date")?.querySelector("svg")).toBeNull();
+    await userEvent.click(findItem("Due date") as HTMLElement);
+    await waitFor(() => expect(findItem("Due date")?.querySelector("svg")).not.toBeNull());
+    await expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument();
+    await expect(findItem("Manual")?.querySelector("svg")).toBeNull();
+  },
+};
+
+/**
+ * Selection rows: `ContextMenuCheckboxItem` toggles independently (a kept-mounted tick), and a
+ * `ContextMenuRadioGroup` of `ContextMenuRadioItem`s carries one selection (a kept-mounted dot).
+ */
+export const SelectionRows: Story = {
+  render: function Render() {
+    const [wrap, setWrap] = React.useState(true);
+    const [sort, setSort] = React.useState("manual");
+    return (
+      <ContextMenu>
+        <ContextMenuTrigger
+          render={
+            <div className="flex h-24 w-64 items-center justify-center rounded-lg border border-dashed border-subtle text-13 text-tertiary" />
+          }
+        >
+          Right-click for view options
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuCheckboxItem
+            tone="neutral"
+            checked={wrap}
+            onCheckedChange={setWrap}
+            closeOnClick={false}
+          >
+            Wrap titles
+          </ContextMenuCheckboxItem>
+          <ContextMenuSeparator />
+          <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+            <ContextMenuRadioItem tone="neutral" value="manual" closeOnClick={false}>
+              Manual order
+            </ContextMenuRadioItem>
+            <ContextMenuRadioItem tone="neutral" value="updated" closeOnClick={false}>
+              Last updated
+            </ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    );
+  },
+};
+
+/**
+ * Interaction test: the checkbox row exposes `menuitemcheckbox` and toggles; the radio rows expose
+ * `menuitemradio` and move a single selection. Tagged out of the sidebar/docs/manifest while still
+ * running under the default `test` tag.
+ */
+export const SelectionRowsInteraction: Story = {
+  ...SelectionRows,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const surface = canvas.getByText("Right-click for view options");
+    await fireEvent.contextMenu(surface);
+    const body = within(document.body);
+    const wrap = await body.findByRole("menuitemcheckbox", { name: "Wrap titles" });
+    await expect(wrap).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(wrap);
+    await expect(wrap).toHaveAttribute("aria-checked", "false");
+
+    await expect(body.getByRole("menuitemradio", { name: "Manual order" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    await userEvent.click(body.getByRole("menuitemradio", { name: "Last updated" }));
+    await expect(body.getByRole("menuitemradio", { name: "Last updated" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  },
+};
diff --git a/packages/propel/src/components/context-menu/context-menu.tsx b/packages/propel/src/components/context-menu/context-menu.tsx
new file mode 100644
index 00000000..1a0b15d7
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu.tsx
@@ -0,0 +1,13 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+export type ContextMenuProps = Omit<BaseContextMenu.Root.Props, "className" | "style">;
+
+/**
+ * Root of the context menu — Base UI's context/state provider (renders no element of its own);
+ * opens at the pointer on right click or long press. A behavior-only role, so it lives in
+ * `components` (rules 1a, 2); the styled parts live in `elements/context-menu` and are grafted onto
+ * Base UI behavior here.
+ */
+export function ContextMenu(props: ContextMenuProps) {
+  return <BaseContextMenu.Root {...props} />;
+}
diff --git a/packages/propel/src/components/context-menu/index.tsx b/packages/propel/src/components/context-menu/index.tsx
index f19c6c88..c34c5488 100644
--- a/packages/propel/src/components/context-menu/index.tsx
+++ b/packages/propel/src/components/context-menu/index.tsx
@@ -1,47 +1,33 @@
+export * from "./context-menu";
+export * from "./context-menu-content";
 export * from "./context-menu-item";
 export * from "./context-menu-link-item";
+export * from "./context-menu-separator";
+export * from "./context-menu-submenu";
 export * from "./context-menu-submenu-trigger";
-// Re-export the atomic structural parts so a full context menu is importable from this convenience.
+export * from "./context-menu-trigger";
+export * from "./context-menu-checkbox-item";
+export * from "./context-menu-group";
+export * from "./context-menu-radio-group";
+export * from "./context-menu-radio-item";
+// Re-export propel's STYLED context-menu leaf parts so a full context menu can be assembled from
+// one entry. The behavior/structural roles that render no styled element of their own (`Portal`,
+// `Backdrop`, `Group`, `RadioGroup`) are Base UI's — compose them from
+// `@base-ui/react/context-menu` directly at the call site; graft the styled leaves below onto
+// their Base UI part via `render`. `ContextMenuSeparator` is deliberately NOT re-exported from
+// `elements` — its ready-made above replaces it.
 export {
-  ContextMenu,
-  ContextMenuArrow,
-  type ContextMenuArrowProps,
-  ContextMenuBackdrop,
-  type ContextMenuBackdropProps,
-  ContextMenuCheckboxItem,
   ContextMenuCheckboxItemIndicator,
   type ContextMenuCheckboxItemIndicatorProps,
-  type ContextMenuCheckboxItemProps,
-  ContextMenuGroup,
   ContextMenuGroupLabel,
   type ContextMenuGroupLabelProps,
-  type ContextMenuGroupProps,
-  ContextMenuItemIcon,
-  type ContextMenuItemIconProps,
   ContextMenuItemIndicator,
   type ContextMenuItemIndicatorProps,
   ContextMenuItemLabel,
   type ContextMenuItemLabelProps,
   ContextMenuItemShortcut,
   type ContextMenuItemShortcutProps,
-  ContextMenuPopup,
-  type ContextMenuPopupProps,
-  ContextMenuPortal,
-  ContextMenuPositioner,
-  type ContextMenuPositionerProps,
-  type ContextMenuProps,
-  ContextMenuRadioGroup,
-  type ContextMenuRadioGroupProps,
-  ContextMenuRadioItem,
+  type ContextMenuItemTone,
   ContextMenuRadioItemIndicator,
   type ContextMenuRadioItemIndicatorProps,
-  type ContextMenuRadioItemProps,
-  ContextMenuSeparator,
-  type ContextMenuSeparatorProps,
-  ContextMenuSubmenu,
-  type ContextMenuSubmenuProps,
-  ContextMenuSubmenuTriggerIndicator,
-  type ContextMenuSubmenuTriggerIndicatorProps,
-  ContextMenuTrigger,
-  type ContextMenuTriggerProps,
-} from "../../ui/context-menu";
+} from "../../elements/context-menu";
diff --git a/packages/propel/src/components/csp-provider/csp-provider.tsx b/packages/propel/src/components/csp-provider/csp-provider.tsx
new file mode 100644
index 00000000..965bbf20
--- /dev/null
+++ b/packages/propel/src/components/csp-provider/csp-provider.tsx
@@ -0,0 +1,11 @@
+import { CSPProvider as BaseCSPProvider } from "@base-ui/react/csp-provider";
+
+export type CSPProviderProps = BaseCSPProvider.Props;
+
+/**
+ * Base UI's Content-Security-Policy context, re-exported so strict-CSP apps compose entirely from
+ * propel: pass your style `nonce` once at the app root and every portaled surface inherits it.
+ */
+export function CSPProvider(props: CSPProviderProps) {
+  return <BaseCSPProvider {...props} />;
+}
diff --git a/packages/propel/src/components/csp-provider/index.tsx b/packages/propel/src/components/csp-provider/index.tsx
new file mode 100644
index 00000000..33bb9e4d
--- /dev/null
+++ b/packages/propel/src/components/csp-provider/index.tsx
@@ -0,0 +1 @@
+export * from "./csp-provider";
diff --git a/packages/propel/src/components/dialog/create-handle.ts b/packages/propel/src/components/dialog/create-handle.ts
new file mode 100644
index 00000000..93be431e
--- /dev/null
+++ b/packages/propel/src/components/dialog/create-handle.ts
@@ -0,0 +1,10 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one dialog shared by many launch points.
+ */
+export const createDialogHandle = BaseDialog.createHandle;
+
+export type DialogHandle = ReturnType<typeof createDialogHandle>;
diff --git a/packages/propel/src/components/dialog/dialog-close.tsx b/packages/propel/src/components/dialog/dialog-close.tsx
new file mode 100644
index 00000000..8b916ea7
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog-close.tsx
@@ -0,0 +1,21 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+export type DialogCloseProps = Omit<BaseDialog.Close.Props, "className" | "style">;
+
+/**
+ * The behavior that closes the dialog when activated. Use as the `render` target of a `Button` or
+ * `IconButton` so the styled primitive's look wins via render-composition:
+ *
+ * ```tsx
+ * <IconButton prominence="ghost" tone="neutral" magnitude="lg" render={<DialogClose />}>
+ *   <IconButtonIcon>
+ *     <X />
+ *   </IconButtonIcon>
+ * </IconButton>;
+ * ```
+ *
+ * Maps 1:1 to `Dialog.Close`.
+ */
+export function DialogClose(props: DialogCloseProps) {
+  return <BaseDialog.Close {...props} />;
+}
diff --git a/packages/propel/src/components/dialog/dialog-content.tsx b/packages/propel/src/components/dialog/dialog-content.tsx
index 2c507c86..98000ad6 100644
--- a/packages/propel/src/components/dialog/dialog-content.tsx
+++ b/packages/propel/src/components/dialog/dialog-content.tsx
@@ -1,27 +1,26 @@
-import {
-  DialogBackdrop,
-  DialogPopup,
-  type DialogPopupProps,
-  DialogPortal,
-  DialogViewport,
-} from "../../ui/dialog";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+import { DialogPopup, type DialogPopupProps } from "../../elements/dialog/dialog-popup";
+import { DialogViewport } from "../../elements/dialog/dialog-viewport";
+import { Backdrop } from "../../internal/backdrop";
 
 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.
+ * Convenience that composes the dialog overlay boilerplate — portal, shared `Backdrop`, centering
+ * `DialogViewport`, and the centered `DialogPopup` — so a consumer only writes the trigger and the
+ * popup body. Each Base UI behavior part grafts onto its styled element via `render`.
  *
  * `magnitude` is required and forwarded to `DialogPopup` to set the dialog width (`sm` = 320 px,
  * `md` = 384 px, `lg` = 512 px).
  */
-export function DialogContent(props: DialogContentProps) {
+export function DialogContent({ magnitude, ...props }: DialogContentProps) {
   return (
-    <DialogPortal>
-      <DialogBackdrop />
-      <DialogViewport>
-        <DialogPopup {...props} />
-      </DialogViewport>
-    </DialogPortal>
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop render={<Backdrop />} />
+      <BaseDialog.Viewport render={<DialogViewport />}>
+        <BaseDialog.Popup {...props} render={<DialogPopup magnitude={magnitude} />} />
+      </BaseDialog.Viewport>
+    </BaseDialog.Portal>
   );
 }
diff --git a/packages/propel/src/components/dialog/dialog-description.tsx b/packages/propel/src/components/dialog/dialog-description.tsx
new file mode 100644
index 00000000..518cb8d6
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog-description.tsx
@@ -0,0 +1,14 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+import { OverlayDescription } from "../../internal/overlay-description";
+
+export type DialogDescriptionProps = Omit<BaseDialog.Description.Props, "className" | "style">;
+
+/**
+ * The supporting description for the dialog: Base UI's `Dialog.Description` behavior (links to the
+ * popup via `aria-describedby`) grafted onto the shared `OverlayDescription` chrome at
+ * `magnitude="lg"` (rule 4a).
+ */
+export function DialogDescription(props: DialogDescriptionProps) {
+  return <BaseDialog.Description {...props} render={<OverlayDescription magnitude="lg" />} />;
+}
diff --git a/packages/propel/src/components/dialog/dialog-title.tsx b/packages/propel/src/components/dialog/dialog-title.tsx
new file mode 100644
index 00000000..677914a1
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog-title.tsx
@@ -0,0 +1,13 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+import { OverlayTitle } from "../../internal/overlay-title";
+
+export type DialogTitleProps = Omit<BaseDialog.Title.Props, "className" | "style">;
+
+/**
+ * The accessible title for the dialog: Base UI's `Dialog.Title` behavior (links to the popup via
+ * `aria-labelledby`) grafted onto the shared `OverlayTitle` chrome at `magnitude="lg"` (rule 4a).
+ */
+export function DialogTitle(props: DialogTitleProps) {
+  return <BaseDialog.Title {...props} render={<OverlayTitle magnitude="lg" />} />;
+}
diff --git a/packages/propel/src/components/dialog/dialog-trigger.tsx b/packages/propel/src/components/dialog/dialog-trigger.tsx
new file mode 100644
index 00000000..356d0b62
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog-trigger.tsx
@@ -0,0 +1,20 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+export type DialogTriggerProps = Omit<BaseDialog.Trigger.Props, "className" | "style">;
+
+/**
+ * The behavior that opens the dialog. Use as the `render` target of a `Button` so the styled
+ * primitive's look wins via render-composition:
+ *
+ * ```tsx
+ * <Button prominence="secondary" tone="neutral" magnitude="xl" render={<DialogTrigger />}>
+ *   Open dialog
+ * </Button>;
+ * ```
+ *
+ * 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/components/dialog/dialog.stories.tsx b/packages/propel/src/components/dialog/dialog.stories.tsx
index f5d13ea5..70cdbd9f 100644
--- a/packages/propel/src/components/dialog/dialog.stories.tsx
+++ b/packages/propel/src/components/dialog/dialog.stories.tsx
@@ -1,10 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { X } from "lucide-react";
+import { Link2, Pencil, Trash2, TriangleAlert, X } from "lucide-react";
+import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../ui/button";
+import { Button } from "../../elements/button";
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogIntro,
+  AlertDialogTitle,
+} from "../alert-dialog";
 import { IconButton } from "../icon-button";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../menu";
+import { TextAreaField } from "../text-area-field";
 import {
+  createDialogHandle,
   Dialog,
   DialogActions,
   DialogBody,
@@ -165,3 +180,664 @@ export const EscapeCloses: Story = {
     await expect(trigger).toHaveFocus();
   },
 };
+
+/**
+ * `disablePointerDismissal` on the root keeps the dialog open when the backdrop is clicked, so it
+ * only closes via an explicit `DialogClose` (or Escape).
+ */
+export const NonDismissable: Story = {
+  render: () => (
+    <Dialog disablePointerDismissal>
+      <Button
+        sizing="hug"
+        prominence="secondary"
+        tone="neutral"
+        magnitude="xl"
+        render={<DialogTrigger />}
+      >
+        Open locked dialog
+      </Button>
+      <DialogContent magnitude="sm">
+        <DialogHeader>
+          <DialogHeading>
+            <DialogTitle>Unsaved changes</DialogTitle>
+          </DialogHeading>
+        </DialogHeader>
+        <DialogBody>
+          <DialogDescription>
+            Choose an action — clicking outside won&apos;t dismiss.
+          </DialogDescription>
+        </DialogBody>
+        <DialogActions>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<DialogClose />}
+          >
+            Discard
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+/**
+ * Interaction test: with `disablePointerDismissal`, a backdrop click leaves the dialog open and
+ * only the explicit close dismisses it. Tagged out of the sidebar/docs/manifest while still running
+ * under the default `test` tag.
+ */
+export const NonDismissableInteraction: Story = {
+  ...NonDismissable,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("a backdrop click does not dismiss", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Open locked dialog" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      // The shared internal Backdrop renders no role; its cva class is the stable hook.
+      const backdrop = document.body.querySelector(".bg-backdrop");
+      if (!(backdrop instanceof HTMLElement)) throw new Error("missing dialog backdrop");
+      await userEvent.click(backdrop);
+      await expect(dialog).toHaveAttribute("data-open");
+    });
+    await step("the explicit close still dismisses", async () => {
+      const dialog = within(document.body).getByRole("dialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Discard" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+// Deterministic long-form content for the scrolling-body demo — enough entries to overflow the
+// popup's max height at any reasonable viewport.
+const RELEASE_NOTES = Array.from({ length: 12 }, (_, index) => ({
+  version: `2.${12 - index}.0`,
+  notes:
+    "Improved cycle burndown accuracy, faster work-item search indexing, and new keyboard shortcuts for triaging intake items.",
+}));
+
+/**
+ * Tall content scrolls INSIDE the popup: `DialogBody` is the scrollable region, so the header and
+ * footer actions stay pinned while the release notes scroll between them. The popup itself never
+ * grows past the viewport — it is capped at the viewport height minus a gutter.
+ */
+export const ScrollableBody: Story = {
+  render: () => (
+    <Dialog>
+      <Button
+        sizing="hug"
+        prominence="secondary"
+        tone="neutral"
+        magnitude="xl"
+        render={<DialogTrigger />}
+      >
+        What&apos;s new
+      </Button>
+      <DialogContent magnitude="md">
+        <DialogHeader>
+          <DialogHeading>
+            <DialogTitle>What&apos;s new</DialogTitle>
+          </DialogHeading>
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="lg"
+            aria-label="Close"
+            render={<DialogClose />}
+          >
+            <X />
+          </IconButton>
+        </DialogHeader>
+        {/* A scrollable region must be keyboard-reachable (axe scrollable-region-focusable). */}
+        <DialogBody tabIndex={0}>
+          <DialogDescription>
+            Everything that shipped in the last twelve releases.
+          </DialogDescription>
+          <div className="flex flex-col gap-4 pt-4">
+            {RELEASE_NOTES.map((release) => (
+              <div key={release.version} className="flex flex-col gap-1">
+                <h3 className="text-13 font-medium text-primary">Version {release.version}</h3>
+                <p className="text-13 text-secondary">{release.notes}</p>
+              </div>
+            ))}
+          </div>
+        </DialogBody>
+        <DialogActions>
+          <Button
+            sizing="hug"
+            prominence="primary"
+            tone="neutral"
+            magnitude="xl"
+            render={<DialogClose />}
+          >
+            Got it
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+/**
+ * Interaction test: the popup stays capped to the viewport with the footer action visible, and the
+ * overflowing release notes scroll inside the body region. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const ScrollableBodyInteraction: Story = {
+  ...ScrollableBody,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "What's new" }));
+    const dialog = await within(document.body).findByRole("dialog");
+    await step("the popup is capped to the viewport with pinned actions", async () => {
+      await expect(dialog.getBoundingClientRect().height).toBeLessThanOrEqual(window.innerHeight);
+      // The popup fades in from data-starting-style (opacity 0) — settle before visibility checks.
+      await waitFor(() =>
+        expect(within(dialog).getByRole("button", { name: "Got it" })).toBeVisible(),
+      );
+    });
+    await step("the body region scrolls the overflowing content", async () => {
+      const body = Array.from(dialog.querySelectorAll("div")).find(
+        (el) => el.scrollHeight > el.clientHeight,
+      );
+      if (body == null) throw new Error("no scrollable region found inside the dialog");
+      body.scrollTop = body.scrollHeight;
+      await waitFor(() => expect(body.scrollTop).toBeGreaterThan(0));
+    });
+  },
+};
+
+/**
+ * A dialog opened from a menu item. Choosing an item closes the menu, so the dialog cannot live
+ * inside it — instead the dialog is controlled (`open` + `onOpenChange`) and the item's `onClick`
+ * opens it imperatively from elsewhere in the tree.
+ */
+export const OpenFromMenu: Story = {
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <Menu>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<MenuTrigger />}
+          >
+            Project options
+          </Button>
+          <MenuContent sizing="sm">
+            <MenuItem icon={<Pencil />}>Edit</MenuItem>
+            <MenuItem icon={<Link2 />}>Copy link</MenuItem>
+            <MenuSeparator />
+            <MenuItem icon={<Trash2 />} onClick={() => setOpen(true)}>
+              Delete project…
+            </MenuItem>
+          </MenuContent>
+        </Menu>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent magnitude="sm">
+            <DialogHeader>
+              <DialogHeading>
+                <DialogTitle>Delete project</DialogTitle>
+              </DialogHeading>
+              <IconButton
+                prominence="ghost"
+                tone="neutral"
+                magnitude="lg"
+                aria-label="Close"
+                render={<DialogClose />}
+              >
+                <X />
+              </IconButton>
+            </DialogHeader>
+            <DialogBody>
+              <DialogDescription>
+                This permanently removes the project and all of its work items. This action
+                can&apos;t be undone.
+              </DialogDescription>
+            </DialogBody>
+            <DialogActions>
+              <Button
+                sizing="hug"
+                prominence="secondary"
+                tone="neutral"
+                magnitude="xl"
+                render={<DialogClose />}
+              >
+                Cancel
+              </Button>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="danger"
+                magnitude="xl"
+                render={<DialogClose />}
+              >
+                Delete
+              </Button>
+            </DialogActions>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+/**
+ * Interaction test: choosing the destructive menu item closes the menu and opens the dialog, and
+ * Cancel closes it. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const OpenFromMenuInteraction: Story = {
+  ...OpenFromMenu,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("choosing the menu item closes the menu and opens the dialog", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Project options" }));
+      const item = await within(document.body).findByRole("menuitem", {
+        name: /delete project/i,
+      });
+      await userEvent.click(item);
+      await within(document.body).findByRole("dialog");
+      await waitFor(() =>
+        expect(document.body.querySelector('[role="menu"]')).not.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(),
+      );
+    });
+  },
+};
+
+/**
+ * Dialogs nest: a `DialogTrigger` inside one dialog opens a second dialog above it. `Escape` (or
+ * the child's own close) dismisses only the topmost dialog, returning to the parent.
+ */
+export const NestedDialogs: Story = {
+  render: () => (
+    <Dialog>
+      <Button
+        sizing="hug"
+        prominence="secondary"
+        tone="neutral"
+        magnitude="xl"
+        render={<DialogTrigger />}
+      >
+        Invite teammates
+      </Button>
+      <DialogContent magnitude="md">
+        <DialogHeader>
+          <DialogHeading>
+            <DialogTitle>Invite teammates</DialogTitle>
+          </DialogHeading>
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="lg"
+            aria-label="Close"
+            render={<DialogClose />}
+          >
+            <X />
+          </IconButton>
+        </DialogHeader>
+        <DialogBody>
+          <DialogDescription>
+            Invited members join with the Member role. Need something more specific? Create a custom
+            role first.
+          </DialogDescription>
+        </DialogBody>
+        <DialogActions>
+          <Dialog>
+            <Button
+              sizing="hug"
+              prominence="secondary"
+              tone="neutral"
+              magnitude="xl"
+              render={<DialogTrigger />}
+            >
+              Create custom role
+            </Button>
+            <DialogContent magnitude="sm">
+              <DialogHeader>
+                <DialogHeading>
+                  <DialogTitle>Create custom role</DialogTitle>
+                </DialogHeading>
+              </DialogHeader>
+              <DialogBody>
+                <DialogDescription>
+                  Custom roles scope what invited members can see and edit.
+                </DialogDescription>
+              </DialogBody>
+              <DialogActions>
+                <Button
+                  sizing="hug"
+                  prominence="secondary"
+                  tone="neutral"
+                  magnitude="xl"
+                  render={<DialogClose />}
+                >
+                  Back
+                </Button>
+              </DialogActions>
+            </DialogContent>
+          </Dialog>
+          <Button
+            sizing="hug"
+            prominence="primary"
+            tone="neutral"
+            magnitude="xl"
+            render={<DialogClose />}
+          >
+            Send invites
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+/**
+ * Interaction test: the nested trigger stacks a second dialog, and `Escape` unwinds one level at a
+ * time. Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const NestedDialogsInteraction: Story = {
+  ...NestedDialogs,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("open the parent, then the nested dialog", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Invite teammates" }));
+      const parent = await within(document.body).findByRole("dialog");
+      await userEvent.click(within(parent).getByRole("button", { name: "Create custom role" }));
+      // While a nested dialog is open Base UI makes the parent popup inert, so exactly ONE
+      // dialog stays in the accessibility tree — the child.
+      const child = await within(document.body).findByRole("dialog", {
+        name: "Create custom role",
+      });
+      await expect(child).toBeInTheDocument();
+      await expect(parent).toHaveAttribute("data-nested-dialog-open");
+    });
+    await step("Escape closes only the topmost dialog", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() => expect(within(document.body).getAllByRole("dialog")).toHaveLength(1));
+      const parent = within(document.body).getByRole("dialog");
+      await expect(within(parent).getByText("Invite teammates")).toBeInTheDocument();
+    });
+    await step("Escape again closes the parent", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+/**
+ * Close confirmation: the dialog is controlled, and `onOpenChange` intercepts every close attempt
+ * (Escape, an outside click, the corner close) while a draft exists — raising an `AlertDialog`
+ * instead of closing. Discarding closes both; going back returns to the draft.
+ */
+export const CloseConfirmation: Story = {
+  render: function Render() {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [confirmOpen, setConfirmOpen] = React.useState(false);
+    const [comment, setComment] = React.useState("");
+    return (
+      <>
+        <Dialog
+          open={dialogOpen}
+          onOpenChange={(open) => {
+            if (!open && comment.trim() !== "") {
+              // Block the close and ask for confirmation while a draft exists.
+              setConfirmOpen(true);
+              return;
+            }
+            setDialogOpen(open);
+          }}
+        >
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<DialogTrigger />}
+          >
+            Add comment
+          </Button>
+          <DialogContent magnitude="md">
+            <DialogHeader>
+              <DialogHeading>
+                <DialogTitle>Add comment</DialogTitle>
+              </DialogHeading>
+              <IconButton
+                prominence="ghost"
+                tone="neutral"
+                magnitude="lg"
+                aria-label="Close"
+                render={<DialogClose />}
+              >
+                <X />
+              </IconButton>
+            </DialogHeader>
+            <DialogBody>
+              <TextAreaField
+                magnitude="md"
+                resize="none"
+                label="Comment"
+                placeholder="Leave a comment…"
+                value={comment}
+                onChange={(event) => setComment(event.target.value)}
+              />
+            </DialogBody>
+            <DialogActions>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="neutral"
+                magnitude="xl"
+                onClick={() => {
+                  setDialogOpen(false);
+                  setComment("");
+                }}
+              >
+                Post comment
+              </Button>
+            </DialogActions>
+          </DialogContent>
+        </Dialog>
+        <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon tone="danger">
+                <TriangleAlert />
+              </AlertDialogIcon>
+              <AlertDialogIntro>
+                <AlertDialogTitle>Discard comment?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Your comment hasn&apos;t been posted yet. Discarding it can&apos;t be undone.
+                </AlertDialogDescription>
+              </AlertDialogIntro>
+            </AlertDialogHeader>
+            <AlertDialogActions>
+              <Button
+                sizing="hug"
+                prominence="secondary"
+                tone="neutral"
+                magnitude="xl"
+                render={<AlertDialogClose />}
+              >
+                Go back
+              </Button>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="danger"
+                magnitude="xl"
+                onClick={() => {
+                  setConfirmOpen(false);
+                  setDialogOpen(false);
+                  setComment("");
+                }}
+              >
+                Discard
+              </Button>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
+      </>
+    );
+  },
+};
+
+/**
+ * Interaction test: an empty draft closes freely, a dirty draft raises the confirmation instead of
+ * closing, and Discard dismisses both surfaces. Tagged out of the sidebar/docs/manifest while still
+ * running under the default `test` tag.
+ */
+export const CloseConfirmationInteraction: Story = {
+  ...CloseConfirmation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("a dirty draft raises the confirmation instead of closing", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Add comment" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await userEvent.type(
+        within(dialog).getByRole("textbox", { name: "Comment" }),
+        "Draft feedback",
+      );
+      await userEvent.keyboard("{Escape}");
+      await within(document.body).findByRole("alertdialog");
+      // The composer stays mounted beneath, but Base UI makes it inert (out of the a11y
+      // tree) while the nested confirmation is open — assert DOM presence, not a role.
+      await expect(document.querySelector('[role="dialog"]')).toBeInTheDocument();
+    });
+    await step("Discard closes the confirmation and the dialog", async () => {
+      const confirm = within(document.body).getByRole("alertdialog");
+      await userEvent.click(within(confirm).getByRole("button", { name: "Discard" }));
+      await waitFor(() => {
+        void expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument();
+        void expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument();
+      });
+    });
+  },
+};
+
+/**
+ * Interaction test: with no draft, Escape closes the composer without asking. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const CloseConfirmationCleanClose: Story = {
+  ...CloseConfirmation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Add comment" }));
+    await within(document.body).findByRole("dialog");
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => {
+      void expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument();
+      void expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  },
+};
+
+// A handle shared by triggers that live far from the dialog they open — the same shortcuts dialog
+// launched from unrelated corners of the UI, with no lifted state.
+const shortcutsDialog = createDialogHandle();
+
+/**
+ * Detached triggers: `createDialogHandle()` links `DialogTrigger`s to a `Dialog` defined elsewhere
+ * in the tree, so several launch points can share one dialog without hoisting controlled state.
+ */
+export const DetachedTriggers: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Button
+        sizing="hug"
+        prominence="secondary"
+        tone="neutral"
+        magnitude="xl"
+        render={<DialogTrigger handle={shortcutsDialog} />}
+      >
+        Keyboard shortcuts
+      </Button>
+      <Button
+        sizing="hug"
+        prominence="ghost"
+        tone="neutral"
+        magnitude="xl"
+        render={<DialogTrigger handle={shortcutsDialog} />}
+      >
+        Help
+      </Button>
+      <Dialog handle={shortcutsDialog}>
+        <DialogContent magnitude="sm">
+          <DialogHeader>
+            <DialogHeading>
+              <DialogTitle>Keyboard shortcuts</DialogTitle>
+            </DialogHeading>
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="lg"
+              aria-label="Close"
+              render={<DialogClose />}
+            >
+              <X />
+            </IconButton>
+          </DialogHeader>
+          <DialogBody>
+            <DialogDescription>
+              Press <kbd>C</kbd> to create a work item, <kbd>/</kbd> to search, and <kbd>?</kbd> to
+              reopen this list from anywhere.
+            </DialogDescription>
+          </DialogBody>
+          <DialogActions>
+            <Button
+              sizing="hug"
+              prominence="primary"
+              tone="neutral"
+              magnitude="xl"
+              render={<DialogClose />}
+            >
+              Done
+            </Button>
+          </DialogActions>
+        </DialogContent>
+      </Dialog>
+    </div>
+  ),
+};
+
+/**
+ * Interaction test: both detached triggers open the same handle-linked dialog. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const DetachedTriggersInteraction: Story = {
+  ...DetachedTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("the first trigger opens the shared dialog", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Keyboard shortcuts" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await expect(within(dialog).getByText("Keyboard shortcuts")).toBeInTheDocument();
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+    await step("the second trigger opens the same dialog", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Help" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await expect(within(dialog).getByText("Keyboard shortcuts")).toBeInTheDocument();
+    });
+  },
+};
diff --git a/packages/propel/src/components/dialog/dialog.tsx b/packages/propel/src/components/dialog/dialog.tsx
new file mode 100644
index 00000000..c1b2071d
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog.tsx
@@ -0,0 +1,13 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+export type DialogProps = Omit<BaseDialog.Root.Props, "className" | "style">;
+
+/**
+ * The dialog Root — Base UI's context/state provider (renders no element of its own). Modal by
+ * default; pass `disablePointerDismissal` to keep it open on outside clicks. A behavior-only role,
+ * so it lives in `components` (rules 1a, 2); the styled parts live in `elements/dialog` and are
+ * grafted onto Base UI behavior here.
+ */
+export function Dialog(props: DialogProps) {
+  return <BaseDialog.Root {...props} />;
+}
diff --git a/packages/propel/src/components/dialog/index.tsx b/packages/propel/src/components/dialog/index.tsx
index 6870a554..99ff3fec 100644
--- a/packages/propel/src/components/dialog/index.tsx
+++ b/packages/propel/src/components/dialog/index.tsx
@@ -1,22 +1,20 @@
+export * from "./dialog";
+export * from "./dialog-close";
 export * from "./dialog-content";
-// Re-export the atomic parts so a full dialog can be assembled from one entry.
+export * from "./dialog-description";
+export * from "./dialog-title";
+export * from "./dialog-trigger";
+export * from "./create-handle";
+// Re-export propel's STYLED structural dialog parts so a full dialog can be assembled from one
+// entry. The Popup/Viewport/Backdrop boilerplate is composed by `DialogContent`, so those parts are
+// not re-exported here.
 export {
-  Dialog,
-  type DialogProps,
   DialogActions,
   type DialogActionsProps,
   DialogBody,
   type DialogBodyProps,
-  DialogClose,
-  type DialogCloseProps,
-  DialogDescription,
-  type DialogDescriptionProps,
   DialogHeader,
   type DialogHeaderProps,
   DialogHeading,
   type DialogHeadingProps,
-  DialogTitle,
-  type DialogTitleProps,
-  DialogTrigger,
-  type DialogTriggerProps,
-} from "../../ui/dialog";
+} from "../../elements/dialog";
diff --git a/packages/propel/src/components/direction-provider/direction-provider.tsx b/packages/propel/src/components/direction-provider/direction-provider.tsx
new file mode 100644
index 00000000..44264aec
--- /dev/null
+++ b/packages/propel/src/components/direction-provider/direction-provider.tsx
@@ -0,0 +1,13 @@
+import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
+
+export type DirectionProviderProps = BaseDirectionProvider.Props;
+
+/**
+ * Base UI's reading-direction context, re-exported so RTL apps compose entirely from propel. Wrap
+ * the app (or a subtree) with `direction="rtl"` so portaled surfaces — popups, tooltips, menus —
+ * position and mirror correctly; pair it with `dir="rtl"` on `<html>` for the CSS logical
+ * properties.
+ */
+export function DirectionProvider(props: DirectionProviderProps) {
+  return <BaseDirectionProvider {...props} />;
+}
diff --git a/packages/propel/src/components/direction-provider/index.tsx b/packages/propel/src/components/direction-provider/index.tsx
new file mode 100644
index 00000000..432a58e5
--- /dev/null
+++ b/packages/propel/src/components/direction-provider/index.tsx
@@ -0,0 +1 @@
+export * from "./direction-provider";
diff --git a/packages/propel/src/components/drawer/create-handle.ts b/packages/propel/src/components/drawer/create-handle.ts
new file mode 100644
index 00000000..fc4a9f3c
--- /dev/null
+++ b/packages/propel/src/components/drawer/create-handle.ts
@@ -0,0 +1,10 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one drawer shared by many launch points.
+ */
+export const createDrawerHandle = BaseDrawer.createHandle;
+
+export type DrawerHandle = ReturnType<typeof createDrawerHandle>;
diff --git a/packages/propel/src/components/drawer/drawer-backdrop.tsx b/packages/propel/src/components/drawer/drawer-backdrop.tsx
new file mode 100644
index 00000000..6803bfe2
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-backdrop.tsx
@@ -0,0 +1,14 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+import { Backdrop } from "../../internal/backdrop";
+
+export type DrawerBackdropProps = Omit<BaseDrawer.Backdrop.Props, "className" | "style">;
+
+/**
+ * The dimmed overlay behind the drawer: Base UI's `Drawer.Backdrop` behavior grafted onto the
+ * shared `internal/Backdrop` surface (rule 4a). Fades in/out via Base UI's
+ * `data-starting-style`/`data-ending-style` transition hooks.
+ */
+export function DrawerBackdrop(props: DrawerBackdropProps) {
+  return <BaseDrawer.Backdrop {...props} render={<Backdrop />} />;
+}
diff --git a/packages/propel/src/components/drawer/drawer-close.tsx b/packages/propel/src/components/drawer/drawer-close.tsx
new file mode 100644
index 00000000..f463417e
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-close.tsx
@@ -0,0 +1,25 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+export type DrawerCloseProps = Omit<BaseDrawer.Close.Props, "className" | "style">;
+
+/**
+ * The behavior that closes the drawer when activated. A behavior-only role that carries no propel
+ * styling, so graft it onto a styled control via `render` — behavior part outer, styled part as the
+ * render target, so the control's look wins:
+ *
+ * ```tsx
+ * <DrawerClose
+ *   render={
+ *     <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label={closeLabel}>
+ *       <X />
+ *     </IconButton>
+ *   }
+ * />;
+ * ```
+ *
+ * Maps 1:1 to `Drawer.Close`. (The styled bare close control it replaces in this entry still lives
+ * at `elements/drawer` for assembling a drawer from the atoms.)
+ */
+export function DrawerClose(props: DrawerCloseProps) {
+  return <BaseDrawer.Close {...props} />;
+}
diff --git a/packages/propel/src/components/drawer/drawer-description.tsx b/packages/propel/src/components/drawer/drawer-description.tsx
new file mode 100644
index 00000000..09c72083
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-description.tsx
@@ -0,0 +1,14 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+import { OverlayDescription } from "../../internal/overlay-description";
+
+export type DrawerDescriptionProps = Omit<BaseDrawer.Description.Props, "className" | "style">;
+
+/**
+ * Supporting text for the drawer: Base UI's `Drawer.Description` behavior (wired as the popup's
+ * `aria-describedby` target) grafted onto the shared `internal/OverlayDescription` at
+ * `magnitude="lg"` (rule 4a).
+ */
+export function DrawerDescription(props: DrawerDescriptionProps) {
+  return <BaseDrawer.Description {...props} render={<OverlayDescription magnitude="lg" />} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-indent-background.tsx b/packages/propel/src/components/drawer/drawer-indent-background.tsx
similarity index 80%
rename from packages/propel/src/ui/drawer/drawer-indent-background.tsx
rename to packages/propel/src/components/drawer/drawer-indent-background.tsx
index 065f03bc..8de10b2e 100644
--- a/packages/propel/src/ui/drawer/drawer-indent-background.tsx
+++ b/packages/propel/src/components/drawer/drawer-indent-background.tsx
@@ -7,8 +7,8 @@ export type DrawerIndentBackgroundProps = Omit<
 
 /**
  * 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`.
+ * color. Used alongside `DrawerIndent` inside a `DrawerProvider`. A behavior-only role (rules 1a,
+ * 2), so it lives in `components`. 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/components/drawer/drawer-indent.tsx
similarity index 78%
rename from packages/propel/src/ui/drawer/drawer-indent.tsx
rename to packages/propel/src/components/drawer/drawer-indent.tsx
index 1cf97933..71d42b24 100644
--- a/packages/propel/src/ui/drawer/drawer-indent.tsx
+++ b/packages/propel/src/components/drawer/drawer-indent.tsx
@@ -4,8 +4,8 @@ export type DrawerIndentProps = Omit<BaseDrawer.Indent.Props, "className" | "sty
 
 /**
  * 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`.
+ * inside a `DrawerProvider`, around the `Drawer` root and your page. A behavior-only role (rules
+ * 1a, 2), so it lives in `components`. Maps 1:1 to Base UI's `Drawer.Indent`.
  */
 export function DrawerIndent(props: DrawerIndentProps) {
   return <BaseDrawer.Indent {...props} />;
diff --git a/packages/propel/src/components/drawer/drawer-panel.tsx b/packages/propel/src/components/drawer/drawer-panel.tsx
index 29266378..d50fe43e 100644
--- a/packages/propel/src/components/drawer/drawer-panel.tsx
+++ b/packages/propel/src/components/drawer/drawer-panel.tsx
@@ -1,31 +1,46 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
 import {
-  DrawerBackdrop,
   DrawerContent,
   DrawerPopup,
-  type DrawerPopupProps,
-  DrawerPortal,
+  type DrawerPopupSide,
   DrawerViewport,
-} from "../../ui/drawer";
+} from "../../elements/drawer";
+import { DrawerBackdrop } from "./drawer-backdrop";
 
-export type DrawerPanelProps = DrawerPopupProps;
+export type DrawerPanelProps = Omit<
+  BaseDrawer.Popup.Props,
+  "className" | "style" | "render" | "children"
+> & {
+  /**
+   * The viewport edge the drawer is anchored to. "end" pins to the inline-end (right in LTR);
+   * "start" pins to the inline-start (left in LTR). The slide animation direction and the
+   * leading-edge shadow border both follow this value.
+   */
+  side: DrawerPopupSide;
+  /** The panel body — typically a `DrawerHeader`, `DrawerBody`, and `DrawerFooter`. */
+  children?: React.ReactNode;
+};
 
 /**
  * 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. Pass `side` to choose which viewport edge the drawer anchors to.
+ * the panel body. Pass `side` to choose which viewport edge the drawer anchors to. Each Base UI
+ * behavior part is grafted onto its styled `elements` element via `render`.
  *
  * 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) {
+export function DrawerPanel({ side, children, ...props }: DrawerPanelProps) {
   return (
-    <DrawerPortal>
+    <BaseDrawer.Portal>
       <DrawerBackdrop />
-      <DrawerViewport>
-        <DrawerPopup {...props}>
-          <DrawerContent>{children}</DrawerContent>
-        </DrawerPopup>
-      </DrawerViewport>
-    </DrawerPortal>
+      <BaseDrawer.Viewport render={<DrawerViewport />}>
+        <BaseDrawer.Popup {...props} render={<DrawerPopup side={side} />}>
+          <BaseDrawer.Content render={<DrawerContent />}>{children}</BaseDrawer.Content>
+        </BaseDrawer.Popup>
+      </BaseDrawer.Viewport>
+    </BaseDrawer.Portal>
   );
 }
diff --git a/packages/propel/src/ui/drawer/drawer-provider.tsx b/packages/propel/src/components/drawer/drawer-provider.tsx
similarity index 82%
rename from packages/propel/src/ui/drawer/drawer-provider.tsx
rename to packages/propel/src/components/drawer/drawer-provider.tsx
index 95e0557c..adecf0b2 100644
--- a/packages/propel/src/ui/drawer/drawer-provider.tsx
+++ b/packages/propel/src/components/drawer/drawer-provider.tsx
@@ -9,7 +9,8 @@ export type DrawerProviderProps = Omit<BaseDrawer.Provider.Props, "className" |
 /**
  * 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`.
+ * drawer opens. A behavior-only provider role (rules 1a, 2), so it lives in `components`. Maps 1:1
+ * to Base UI's `Drawer.Provider`.
  */
 export function DrawerProvider(props: DrawerProviderProps) {
   return <BaseDrawer.Provider {...props} />;
diff --git a/packages/propel/src/components/drawer/drawer-swipe-area.tsx b/packages/propel/src/components/drawer/drawer-swipe-area.tsx
new file mode 100644
index 00000000..2dd635b4
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-swipe-area.tsx
@@ -0,0 +1,12 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+export type DrawerSwipeAreaProps = Omit<BaseDrawer.SwipeArea.Props, "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. A behavior-only role (rules 1a, 2), so it lives
+ * in `components`. Maps 1:1 to Base UI's `Drawer.SwipeArea`.
+ */
+export function DrawerSwipeArea(props: DrawerSwipeAreaProps) {
+  return <BaseDrawer.SwipeArea {...props} />;
+}
diff --git a/packages/propel/src/components/drawer/drawer-title.tsx b/packages/propel/src/components/drawer/drawer-title.tsx
new file mode 100644
index 00000000..435253ff
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-title.tsx
@@ -0,0 +1,14 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+import { OverlayTitle } from "../../internal/overlay-title";
+
+export type DrawerTitleProps = Omit<BaseDrawer.Title.Props, "className" | "style">;
+
+/**
+ * The accessible heading for the drawer: Base UI's `Drawer.Title` behavior (wired as the popup's
+ * `aria-labelledby` target) grafted onto the shared `internal/OverlayTitle` at `magnitude="lg"`
+ * (rule 4a).
+ */
+export function DrawerTitle(props: DrawerTitleProps) {
+  return <BaseDrawer.Title {...props} render={<OverlayTitle magnitude="lg" />} />;
+}
diff --git a/packages/propel/src/components/drawer/drawer-trigger.tsx b/packages/propel/src/components/drawer/drawer-trigger.tsx
new file mode 100644
index 00000000..66ee3748
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-trigger.tsx
@@ -0,0 +1,25 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+export type DrawerTriggerProps = Omit<BaseDrawer.Trigger.Props, "className" | "style">;
+
+/**
+ * The behavior that opens the drawer. A behavior-only role that carries no propel styling, so graft
+ * it onto a styled control via `render` — behavior part outer, styled part as the render target, so
+ * the control's look wins:
+ *
+ * ```tsx
+ * <DrawerTrigger
+ *   render={
+ *     <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+ *       Open details
+ *     </Button>
+ *   }
+ * />;
+ * ```
+ *
+ * Base UI manages `aria-haspopup`/`aria-expanded` and focus restoration when the drawer closes.
+ * Maps 1:1 to `Drawer.Trigger`.
+ */
+export function DrawerTrigger(props: DrawerTriggerProps) {
+  return <BaseDrawer.Trigger {...props} />;
+}
diff --git a/packages/propel/src/components/drawer/drawer.stories.tsx b/packages/propel/src/components/drawer/drawer.stories.tsx
index 532ef6cf..5db57a51 100644
--- a/packages/propel/src/components/drawer/drawer.stories.tsx
+++ b/packages/propel/src/components/drawer/drawer.stories.tsx
@@ -1,10 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { X } from "lucide-react";
+import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../ui/button";
+import { Button } from "../../elements/button";
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogIntro,
+  AlertDialogTitle,
+} from "../alert-dialog";
 import { IconButton } from "../icon-button";
+import { TextArea } from "../text-area";
 import {
+  createDrawerHandle,
   Drawer,
   DrawerBody,
   DrawerClose,
@@ -20,10 +32,12 @@ import {
 // 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. The header/body/footer layout is supplied
-// by the `DrawerHeader`/`DrawerBody`/`DrawerFooter` anatomy parts — no layout
-// `className` lives here. Trigger/Close compose the `Button` (or `IconButton` for
-// the corner close) primitive via Base UI's `render` prop — the styled primitive is
-// the outer element so its look wins, the drawer part supplies the behavior.
+// by the `DrawerHeader`/`DrawerBody`/`DrawerFooter` anatomy parts, and the
+// `DrawerTitle`/`DrawerDescription` grafts wrap the shared overlay heading pair — no
+// layout `className` lives here. `DrawerTrigger`/`DrawerClose` are the behavior
+// passthroughs grafted onto the `Button` (or `IconButton` for the corner close) via
+// `render` — the styled primitive is the render target so its look wins, the drawer
+// part supplies behavior.
 
 const meta = {
   title: "Components/Drawer",
@@ -48,42 +62,36 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => (
     <Drawer>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<DrawerTrigger />}
-      >
-        Open details
-      </Button>
+      <DrawerTrigger
+        render={
+          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+            Open details
+          </Button>
+        }
+      />
       <DrawerPanel side="end">
         <DrawerHeader>
           <DrawerHeaderContent>
             <DrawerTitle>Work item details</DrawerTitle>
             <DrawerDescription>Edit the fields for this work item.</DrawerDescription>
           </DrawerHeaderContent>
-          <IconButton
-            prominence="ghost"
-            tone="neutral"
-            magnitude="lg"
-            aria-label="Close"
-            render={<DrawerClose />}
-          >
-            <X />
-          </IconButton>
+          <DrawerClose
+            render={
+              <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
+                <X />
+              </IconButton>
+            }
+          />
         </DrawerHeader>
         <DrawerBody>Panel body content goes here.</DrawerBody>
         <DrawerFooter>
-          <Button
-            sizing="hug"
-            prominence="ghost"
-            tone="neutral"
-            magnitude="lg"
-            render={<DrawerClose />}
-          >
-            Cancel
-          </Button>
+          <DrawerClose
+            render={
+              <Button sizing="hug" prominence="ghost" tone="neutral" magnitude="lg">
+                Cancel
+              </Button>
+            }
+          />
           <Button sizing="hug" prominence="primary" tone="neutral" magnitude="lg">
             Save
           </Button>
@@ -121,29 +129,25 @@ export const CloseButtonDismisses: Story = {
 export const StartSide: Story = {
   render: () => (
     <Drawer>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<DrawerTrigger />}
-      >
-        Open navigation
-      </Button>
+      <DrawerTrigger
+        render={
+          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+            Open navigation
+          </Button>
+        }
+      />
       <DrawerPanel side="start">
         <DrawerHeader>
           <DrawerHeaderContent>
             <DrawerTitle>Navigation</DrawerTitle>
           </DrawerHeaderContent>
-          <IconButton
-            prominence="ghost"
-            tone="neutral"
-            magnitude="lg"
-            aria-label="Close"
-            render={<DrawerClose />}
-          >
-            <X />
-          </IconButton>
+          <DrawerClose
+            render={
+              <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
+                <X />
+              </IconButton>
+            }
+          />
         </DrawerHeader>
         <DrawerBody>Navigation links go here.</DrawerBody>
       </DrawerPanel>
@@ -183,15 +187,13 @@ export const EscapeCloses: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
     <Drawer>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<DrawerTrigger />}
-      >
-        Open filters
-      </Button>
+      <DrawerTrigger
+        render={
+          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+            Open filters
+          </Button>
+        }
+      />
       <DrawerPanel side="end">
         <DrawerHeader>
           <DrawerHeaderContent>
@@ -213,3 +215,288 @@ export const EscapeCloses: Story = {
     await expect(trigger).toHaveFocus();
   },
 };
+
+/** A drawer drilling into a second, nested drawer stacked over it. */
+export const Nested: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger
+        render={
+          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+            Open settings
+          </Button>
+        }
+      />
+      <DrawerPanel side="end">
+        <DrawerHeader>
+          <DrawerHeaderContent>
+            <DrawerTitle>Settings</DrawerTitle>
+            <DrawerDescription>Workspace-wide preferences.</DrawerDescription>
+          </DrawerHeaderContent>
+        </DrawerHeader>
+        <DrawerBody>
+          <Drawer>
+            <DrawerTrigger
+              render={
+                <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="lg">
+                  Advanced options
+                </Button>
+              }
+            />
+            <DrawerPanel side="end">
+              <DrawerHeader>
+                <DrawerHeaderContent>
+                  <DrawerTitle>Advanced options</DrawerTitle>
+                </DrawerHeaderContent>
+              </DrawerHeader>
+              <DrawerBody>Nested drawer content.</DrawerBody>
+            </DrawerPanel>
+          </Drawer>
+        </DrawerBody>
+      </DrawerPanel>
+    </Drawer>
+  ),
+};
+
+/**
+ * Interaction test: Escape closes only the topmost drawer; a second Escape closes the outer one.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const NestedEscapeClosesTopmost: Story = {
+  ...Nested,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const body = within(document.body);
+    await step("open both drawers", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Open settings" }));
+      const outer = await body.findByRole("dialog");
+      await userEvent.click(within(outer).getByRole("button", { name: "Advanced options" }));
+      await body.findByRole("dialog", { name: "Advanced options" });
+    });
+    await step("Escape closes only the topmost drawer", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(body.queryByRole("dialog", { name: "Advanced options" })).not.toBeInTheDocument(),
+      );
+      await expect(body.getByRole("dialog", { name: "Settings" })).toBeInTheDocument();
+    });
+    await step("Escape again closes the outer drawer", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() => expect(body.queryByRole("dialog")).not.toBeInTheDocument());
+    });
+  },
+};
+
+// A handle shared by triggers that live far from the drawer they open — the same details panel
+// launched from unrelated corners of the UI, with no lifted state.
+const detailsDrawer = createDrawerHandle();
+
+/**
+ * Detached triggers: `createDrawerHandle()` links `DrawerTrigger`s to a `Drawer` defined elsewhere
+ * in the tree; each trigger passes a `payload` the drawer renders through function-as-children.
+ */
+export const DetachedTriggers: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <DrawerTrigger
+        handle={detailsDrawer}
+        payload="WEB-101"
+        render={
+          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+            WEB-101
+          </Button>
+        }
+      />
+      <DrawerTrigger
+        handle={detailsDrawer}
+        payload="WEB-202"
+        render={
+          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+            WEB-202
+          </Button>
+        }
+      />
+      <Drawer handle={detailsDrawer}>
+        {({ payload }) => (
+          <DrawerPanel side="end">
+            <DrawerHeader>
+              <DrawerHeaderContent>
+                <DrawerTitle>{typeof payload === "string" ? payload : "Details"}</DrawerTitle>
+                <DrawerDescription>Work item details.</DrawerDescription>
+              </DrawerHeaderContent>
+            </DrawerHeader>
+          </DrawerPanel>
+        )}
+      </Drawer>
+    </div>
+  ),
+};
+
+/**
+ * Interaction test: each detached trigger opens the shared drawer titled by its own payload. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const DetachedTriggersOpenWithPayload: Story = {
+  ...DetachedTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const body = within(document.body);
+    await step("the first trigger opens with its payload", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "WEB-101" }));
+      await body.findByRole("dialog", { name: "WEB-101" });
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() => expect(body.queryByRole("dialog")).not.toBeInTheDocument());
+      await waitFor(() => expect(document.querySelector("[data-ending-style]")).toBeNull());
+    });
+    await step("the second trigger reuses the same drawer with its payload", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "WEB-202" }));
+      await body.findByRole("dialog", { name: "WEB-202" });
+    });
+  },
+};
+
+/**
+ * Close confirmation: dismissing while a draft exists is cancelled through `eventDetails.cancel()`,
+ * and an `AlertDialog` asks before discarding.
+ */
+export const CloseConfirmation: Story = {
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+    const [confirmOpen, setConfirmOpen] = React.useState(false);
+    const [draft, setDraft] = React.useState("");
+    return (
+      <>
+        <Drawer
+          open={open}
+          onOpenChange={(nextOpen, eventDetails) => {
+            if (!nextOpen && draft.trim() !== "") {
+              // Block the dismissal and ask for confirmation while a draft exists.
+              eventDetails.cancel();
+              setConfirmOpen(true);
+              return;
+            }
+            setOpen(nextOpen);
+          }}
+        >
+          <DrawerTrigger
+            render={
+              <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+                Add comment
+              </Button>
+            }
+          />
+          <DrawerPanel side="end">
+            <DrawerHeader>
+              <DrawerHeaderContent>
+                <DrawerTitle>New comment</DrawerTitle>
+                <DrawerDescription>Share feedback on this work item.</DrawerDescription>
+              </DrawerHeaderContent>
+              <DrawerClose
+                render={
+                  <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
+                    <X />
+                  </IconButton>
+                }
+              />
+            </DrawerHeader>
+            <DrawerBody>
+              <TextArea
+                magnitude="lg"
+                surface="field"
+                resize="none"
+                rows={4}
+                aria-label="Comment"
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+              />
+            </DrawerBody>
+          </DrawerPanel>
+        </Drawer>
+        <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIntro>
+                <AlertDialogTitle>Discard comment?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Your draft will be lost if you close the panel now.
+                </AlertDialogDescription>
+              </AlertDialogIntro>
+            </AlertDialogHeader>
+            <AlertDialogActions>
+              <Button
+                sizing="hug"
+                prominence="ghost"
+                tone="neutral"
+                magnitude="lg"
+                onClick={() => setConfirmOpen(false)}
+              >
+                Keep editing
+              </Button>
+              <Button
+                sizing="hug"
+                prominence="primary"
+                tone="danger"
+                magnitude="lg"
+                onClick={() => {
+                  setConfirmOpen(false);
+                  setOpen(false);
+                  setDraft("");
+                }}
+              >
+                Discard
+              </Button>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
+      </>
+    );
+  },
+};
+
+/**
+ * Interaction test: dismissing with a draft raises the confirmation; Keep editing returns to the
+ * draft; Discard closes both. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
+ */
+export const CloseConfirmationInterceptsDismiss: Story = {
+  ...CloseConfirmation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const body = within(document.body);
+    await step("open the drawer and type a draft", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Add comment" }));
+      const drawer = await body.findByRole("dialog", { name: "New comment" });
+      await userEvent.type(
+        within(drawer).getByRole("textbox", { name: "Comment" }),
+        "Ship the release notes",
+      );
+    });
+    await step("dismissing asks for confirmation instead of closing", async () => {
+      const drawer = body.getByRole("dialog", { name: "New comment" });
+      await userEvent.click(within(drawer).getByRole("button", { name: "Close" }));
+      await body.findByRole("alertdialog", { name: "Discard comment?" });
+      // The drawer stays mounted beneath, but Base UI makes it inert (out of the a11y tree)
+      // while the nested confirmation is open — assert DOM presence, not a role.
+      await expect(document.querySelector('[role="dialog"]')).toBeInTheDocument();
+    });
+    await step("Keep editing returns to the draft", async () => {
+      const confirmation = body.getByRole("alertdialog", { name: "Discard comment?" });
+      await userEvent.click(within(confirmation).getByRole("button", { name: "Keep editing" }));
+      await waitFor(() => expect(body.queryByRole("alertdialog")).not.toBeInTheDocument());
+      const drawer = body.getByRole("dialog", { name: "New comment" });
+      await expect(within(drawer).getByRole("textbox", { name: "Comment" })).toHaveValue(
+        "Ship the release notes",
+      );
+    });
+    await step("Discard closes the confirmation and the drawer", async () => {
+      const drawer = body.getByRole("dialog", { name: "New comment" });
+      await userEvent.click(within(drawer).getByRole("button", { name: "Close" }));
+      const confirmation = await body.findByRole("alertdialog", { name: "Discard comment?" });
+      await userEvent.click(within(confirmation).getByRole("button", { name: "Discard" }));
+      await waitFor(() => {
+        void expect(body.queryByRole("alertdialog")).not.toBeInTheDocument();
+        void expect(body.queryByRole("dialog")).not.toBeInTheDocument();
+      });
+    });
+  },
+};
diff --git a/packages/propel/src/components/drawer/drawer.tsx b/packages/propel/src/components/drawer/drawer.tsx
new file mode 100644
index 00000000..e7420f8e
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer.tsx
@@ -0,0 +1,14 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+export type DrawerProps = Omit<BaseDrawer.Root.Props, "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. A behavior-only role that renders no
+ * element of its own (rules 1a, 2), so it lives in `components`; the styled parts live in
+ * `elements/drawer` and are grafted onto Base UI behavior here.
+ */
+export function Drawer(props: DrawerProps) {
+  return <BaseDrawer.Root {...props} />;
+}
diff --git a/packages/propel/src/components/drawer/index.tsx b/packages/propel/src/components/drawer/index.tsx
index 31780d03..e6ef9213 100644
--- a/packages/propel/src/components/drawer/index.tsx
+++ b/packages/propel/src/components/drawer/index.tsx
@@ -1,28 +1,33 @@
+export * from "./drawer";
+export * from "./drawer-trigger";
+export * from "./drawer-close";
+export * from "./drawer-provider";
+export * from "./drawer-indent";
+export * from "./drawer-indent-background";
+export * from "./drawer-swipe-area";
+export * from "./drawer-backdrop";
+export * from "./drawer-title";
+export * from "./drawer-description";
 export * from "./drawer-panel";
-// Re-export the atomic parts so a full drawer can be assembled from one entry.
+export * from "./create-handle";
+// Re-export the styled `elements` parts so a full drawer can be assembled from one entry. The
+// behavior-only roles need no Base UI at the call site: `DrawerTrigger`/`DrawerClose` above are
+// the passthroughs, and `DrawerPanel` composes the `Portal`. The styled bare close control stays
+// in `elements/drawer` — the `DrawerClose` behavior part replaces its re-export here.
 export {
-  Drawer,
-  type DrawerProps,
   DrawerBody,
   type DrawerBodyProps,
-  DrawerClose,
-  type DrawerCloseProps,
   DrawerContent,
   type DrawerContentProps,
-  DrawerDescription,
-  type DrawerDescriptionProps,
   DrawerFooter,
   type DrawerFooterProps,
   DrawerHeader,
+  type DrawerHeaderProps,
   DrawerHeaderContent,
   type DrawerHeaderContentProps,
-  type DrawerHeaderProps,
-  DrawerProvider,
-  type DrawerProviderProps,
-  DrawerSwipeArea,
-  type DrawerSwipeAreaProps,
-  DrawerTitle,
-  type DrawerTitleProps,
-  DrawerTrigger,
-  type DrawerTriggerProps,
-} from "../../ui/drawer";
+  DrawerPopup,
+  type DrawerPopupProps,
+  type DrawerPopupSide,
+  DrawerViewport,
+  type DrawerViewportProps,
+} from "../../elements/drawer";
diff --git a/packages/propel/src/components/field/field-control.tsx b/packages/propel/src/components/field/field-control.tsx
new file mode 100644
index 00000000..ece1683d
--- /dev/null
+++ b/packages/propel/src/components/field/field-control.tsx
@@ -0,0 +1,12 @@
+import { Field as BaseField } from "@base-ui/react/field";
+
+export type FieldControlProps = Omit<BaseField.Control.Props, "className" | "style">;
+
+/**
+ * Base UI's `Field.Control` — registers the form control with the surrounding `Field` (name,
+ * validation, `data-invalid` propagation). Graft a styled control via `render`: `<FieldControl
+ * render={<Input magnitude="md" />} />`.
+ */
+export function FieldControl(props: FieldControlProps) {
+  return <BaseField.Control {...props} />;
+}
diff --git a/packages/propel/src/components/field/field-description.tsx b/packages/propel/src/components/field/field-description.tsx
new file mode 100644
index 00000000..246c0799
--- /dev/null
+++ b/packages/propel/src/components/field/field-description.tsx
@@ -0,0 +1,17 @@
+import { Field as BaseField } from "@base-ui/react/field";
+
+import { FieldDescription as FieldDescriptionElement } from "../../elements/field/field-description";
+import { type FieldDescriptionVariantProps } from "../../elements/field/variants";
+
+export type FieldDescriptionProps = Omit<BaseField.Description.Props, "className" | "style"> &
+  FieldDescriptionVariantProps;
+
+/**
+ * Supporting / helper text for a field: Base UI's `Field.Description` (auto-associated as the
+ * control's accessible description) grafted onto the styled `FieldDescription` element (rule 1a).
+ */
+export function FieldDescription({ magnitude, ...props }: FieldDescriptionProps) {
+  return (
+    <BaseField.Description {...props} render={<FieldDescriptionElement magnitude={magnitude} />} />
+  );
+}
diff --git a/packages/propel/src/components/field/field-error.tsx b/packages/propel/src/components/field/field-error.tsx
new file mode 100644
index 00000000..c708558e
--- /dev/null
+++ b/packages/propel/src/components/field/field-error.tsx
@@ -0,0 +1,15 @@
+import { Field as BaseField } from "@base-ui/react/field";
+
+import { FieldError as FieldErrorElement } from "../../elements/field/field-error";
+import { type FieldErrorVariantProps } from "../../elements/field/variants";
+
+export type FieldErrorProps = Omit<BaseField.Error.Props, "className" | "style"> &
+  FieldErrorVariantProps;
+
+/**
+ * Error text for a field: Base UI's `Field.Error` (shown per the control's validity / `match`)
+ * grafted onto the styled `FieldError` element (rule 1a).
+ */
+export function FieldError({ magnitude, ...props }: FieldErrorProps) {
+  return <BaseField.Error {...props} render={<FieldErrorElement magnitude={magnitude} />} />;
+}
diff --git a/packages/propel/src/components/field/field-helper-text.tsx b/packages/propel/src/components/field/field-helper-text.tsx
index e61721d5..59f20fdb 100644
--- a/packages/propel/src/components/field/field-helper-text.tsx
+++ b/packages/propel/src/components/field/field-helper-text.tsx
@@ -1,13 +1,15 @@
 import type * as React from "react";
 
-import { FieldDescription } from "../../ui/field/field-description";
-import { FieldError } from "../../ui/field/field-error";
-import type { InputMagnitude } from "../../ui/field/variants";
+import type { InputMagnitude } from "../../elements/field/variants";
+import { FieldDescription } from "./field-description";
+import { FieldError } from "./field-error";
 
 /**
  * The error-or-hint line beneath a field: shows the `FieldError` when there is an error, otherwise
- * the `FieldDescription` hint. A components-tier composition of the two ui parts (each a single
- * element); shared by the ready-made field types so the error-XOR-hint rule lives in one place.
+ * the `FieldDescription` hint. With no explicit `error`, the `FieldError` renders unmatched so Base
+ * UI's own error channel stays open — validity messages and external `Form` `errors` for this field
+ * display (and clear) automatically. A components-tier composition of the two elements parts;
+ * shared by the ready-made field types so the error-XOR-hint rule lives in one place.
  */
 export function FieldHelperText({
   magnitude,
@@ -20,9 +22,13 @@ export function FieldHelperText({
 }) {
   return (
     <>
-      <FieldError magnitude={magnitude} match={error != null}>
-        {error}
-      </FieldError>
+      {error != null ? (
+        <FieldError magnitude={magnitude} match>
+          {error}
+        </FieldError>
+      ) : (
+        <FieldError magnitude={magnitude} />
+      )}
       {error == null && hint != null ? (
         <FieldDescription magnitude={magnitude}>{hint}</FieldDescription>
       ) : null}
diff --git a/packages/propel/src/components/field/field-item-content.tsx b/packages/propel/src/components/field/field-item-content.tsx
index 5038b87f..9474fcff 100644
--- a/packages/propel/src/components/field/field-item-content.tsx
+++ b/packages/propel/src/components/field/field-item-content.tsx
@@ -1,9 +1,9 @@
 import type * as React from "react";
 
-import { FieldDescription } from "../../ui/field/field-description";
-import { FieldItemContent as FieldItemContentElement } from "../../ui/field/field-item-content";
-import { FieldLabel } from "../../ui/field/field-label";
-import { type InputMagnitude } from "../../ui/field/variants";
+import { FieldItemContent as FieldItemContentElement } from "../../elements/field/field-item-content";
+import { type InputMagnitude } from "../../elements/field/variants";
+import { FieldDescription } from "./field-description";
+import { FieldLabel } from "./field-label";
 
 /** The label + description column for a single choice option (checkbox/radio/switch row). */
 export function FieldItemContent({
diff --git a/packages/propel/src/components/field/field-item.tsx b/packages/propel/src/components/field/field-item.tsx
new file mode 100644
index 00000000..358e2f55
--- /dev/null
+++ b/packages/propel/src/components/field/field-item.tsx
@@ -0,0 +1,13 @@
+import { Field as BaseField } from "@base-ui/react/field";
+
+import { FieldItem as FieldItemElement } from "../../elements/field/field-item";
+
+export type FieldItemProps = Omit<BaseField.Item.Props, "className" | "style">;
+
+/**
+ * Groups one checkbox or radio option with its label and optional description: Base UI's
+ * `Field.Item` behavior grafted onto the styled `FieldItem` element (rule 1a).
+ */
+export function FieldItem(props: FieldItemProps) {
+  return <BaseField.Item {...props} render={<FieldItemElement />} />;
+}
diff --git a/packages/propel/src/components/field/field-label-group.tsx b/packages/propel/src/components/field/field-label-group.tsx
index c31f270b..daa10eb2 100644
--- a/packages/propel/src/components/field/field-label-group.tsx
+++ b/packages/propel/src/components/field/field-label-group.tsx
@@ -1,8 +1,11 @@
 import type * as React from "react";
 
-import { FieldDescription } from "../../ui/field";
-import { FieldLabelGroup as FieldLabelGroupContainer } from "../../ui/field/field-label-group";
-import { type FieldLabelGroupVariantProps, type InputMagnitude } from "../../ui/field/variants";
+import { FieldLabelGroup as FieldLabelGroupContainer } from "../../elements/field/field-label-group";
+import {
+  type FieldLabelGroupVariantProps,
+  type InputMagnitude,
+} from "../../elements/field/variants";
+import { FieldDescription } from "./field-description";
 import { FieldLabel } from "./field-label";
 
 export type FieldLabelGroupProps = FieldLabelGroupVariantProps & {
diff --git a/packages/propel/src/components/field/field-label.tsx b/packages/propel/src/components/field/field-label.tsx
index ea84254a..7eaa9651 100644
--- a/packages/propel/src/components/field/field-label.tsx
+++ b/packages/propel/src/components/field/field-label.tsx
@@ -1,20 +1,24 @@
-import {
-  FieldLabel as FieldLabelElement,
-  type FieldLabelProps as FieldLabelElementProps,
-} from "../../ui/field/field-label";
-import { FieldLabelRequiredMarker } from "../../ui/field/field-label-required-marker";
+import { Field as BaseField } from "@base-ui/react/field";
 
-export type FieldLabelProps = FieldLabelElementProps & { required?: boolean };
+import { FieldLabel as FieldLabelElement } from "../../elements/field/field-label";
+import { FieldLabelRequiredMarker } from "../../elements/field/field-label-required-marker";
+import { type FieldLabelVariantProps } from "../../elements/field/variants";
+
+export type { FieldMagnitude } from "../../elements/field/variants";
+
+export type FieldLabelProps = Omit<BaseField.Label.Props, "className" | "style"> &
+  FieldLabelVariantProps & { required?: boolean };
 
 /**
- * The ready-made field label: the `FieldLabel` slot, plus a `FieldLabelRequiredMarker` when
+ * The ready-made field label: Base UI's `Field.Label` (auto-associated with the control) grafted
+ * onto the styled `FieldLabel` element (rule 1a), plus a `FieldLabelRequiredMarker` when
  * `required`.
  */
-export function FieldLabel({ required, children, ...props }: FieldLabelProps) {
+export function FieldLabel({ magnitude, inset, required, children, ...props }: FieldLabelProps) {
   return (
-    <FieldLabelElement {...props}>
+    <BaseField.Label {...props} render={<FieldLabelElement magnitude={magnitude} inset={inset} />}>
       {children}
       {required ? <FieldLabelRequiredMarker>*</FieldLabelRequiredMarker> : null}
-    </FieldLabelElement>
+    </BaseField.Label>
   );
 }
diff --git a/packages/propel/src/components/field/field-validity.tsx b/packages/propel/src/components/field/field-validity.tsx
new file mode 100644
index 00000000..0534c80e
--- /dev/null
+++ b/packages/propel/src/components/field/field-validity.tsx
@@ -0,0 +1,12 @@
+import { Field as BaseField } from "@base-ui/react/field";
+
+export type FieldValidityProps = BaseField.Validity.Props;
+
+/**
+ * Render-prop access to the field's `ValidityState` — Base UI's `Field.Validity` (renders no
+ * element): `<FieldValidity>{(state) => …}</FieldValidity>` for fully custom validation UI beyond
+ * `FieldError`.
+ */
+export function FieldValidity(props: FieldValidityProps) {
+  return <BaseField.Validity {...props} />;
+}
diff --git a/packages/propel/src/components/field/field.stories.tsx b/packages/propel/src/components/field/field.stories.tsx
index 8b4800b6..307d21a7 100644
--- a/packages/propel/src/components/field/field.stories.tsx
+++ b/packages/propel/src/components/field/field.stories.tsx
@@ -1,8 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent } from "storybook/test";
+import { expect, userEvent, waitFor } from "storybook/test";
 
 import { Input } from "../input/index";
-import { Field, FieldDescription, FieldError, FieldItem, FieldLabel } from "./index";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldItem,
+  FieldLabel,
+  type FieldMagnitude,
+} from "./index";
+
+const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
 
 // Components-tier story: the GENERIC field shell — `Field` (Base UI labeling/validation) wrapping a
 // control. The ready-made per-control fields each live in their own folder (Components/InputField,
@@ -29,6 +38,29 @@ export const Default: Story = {
   ),
 };
 
+/**
+ * Every field text magnitude side by side: the label, control, and description scale together
+ * (md/lg/xl). Pass the same `magnitude` to each part of a field.
+ */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-start gap-8">
+      {MAGNITUDES.map((magnitude) => (
+        <Field key={magnitude} name={`displayName-${magnitude}`}>
+          <FieldLabel magnitude={magnitude} required inset={false}>
+            Display name ({magnitude})
+          </FieldLabel>
+          <Input magnitude={magnitude} required placeholder="Ada Lovelace" />
+          <FieldDescription magnitude={magnitude}>
+            Shown anywhere your profile is visible.
+          </FieldDescription>
+        </Field>
+      ))}
+    </div>
+  ),
+};
+
 /** Invalid fields expose `aria-invalid` and announce the matching error as a description. */
 export const Invalid: Story = {
   render: () => (
@@ -44,6 +76,60 @@ export const Invalid: Story = {
   ),
 };
 
+/**
+ * Constraint validation: the control's native `required` validity drives `FieldError` through
+ * `match="valueMissing"` — with `validationMode="onBlur"` the message appears when the user leaves
+ * the field empty and clears once a value is committed. The description stays as the resting hint.
+ */
+export const RequiredValidation: Story = {
+  render: () => (
+    <Field name="fullName" validationMode="onBlur">
+      <FieldLabel magnitude="md" required inset={false}>
+        Full name
+      </FieldLabel>
+      <Input magnitude="md" required placeholder="Ada Lovelace" />
+      <FieldError magnitude="md" match="valueMissing">
+        Enter your full name.
+      </FieldError>
+      <FieldDescription magnitude="md">Visible on your profile.</FieldDescription>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: blurring the empty required field surfaces the `valueMissing` error and marks
+ * the control invalid; committing a value clears both. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const RequiredValidationInteraction: Story = {
+  ...RequiredValidation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Full name" });
+    await step("tabbing through untouched does not flag the field", async () => {
+      await userEvent.click(input);
+      await userEvent.tab();
+      await expect(input).not.toHaveAttribute("aria-invalid");
+    });
+    await step("emptying a dirty required field shows the valueMissing error on blur", async () => {
+      await userEvent.type(input, "A");
+      await userEvent.clear(input);
+      await userEvent.tab();
+      const error = await canvas.findByText("Enter your full name.");
+      await expect(error).toBeVisible();
+      await expect(input).toHaveAttribute("aria-invalid", "true");
+    });
+    await step("committing a value clears the error", async () => {
+      await userEvent.type(input, "Ada Lovelace");
+      await userEvent.tab();
+      await waitFor(() =>
+        expect(canvas.queryByText("Enter your full name.")).not.toBeInTheDocument(),
+      );
+      await expect(input).not.toHaveAttribute("aria-invalid", "true");
+    });
+  },
+};
+
 export const LabelAndDescription: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
diff --git a/packages/propel/src/components/field/field.tsx b/packages/propel/src/components/field/field.tsx
new file mode 100644
index 00000000..0bfca72b
--- /dev/null
+++ b/packages/propel/src/components/field/field.tsx
@@ -0,0 +1,14 @@
+import { Field as BaseField } from "@base-ui/react/field";
+
+import { Field as FieldElement } from "../../elements/field/field";
+
+export type FieldProps = Omit<BaseField.Root.Props, "className" | "style">;
+
+/**
+ * The shared field chrome for custom controls: Base UI's labeling/validation `Field.Root` behavior
+ * grafted onto the styled `Field` element (rule 1a). Compose it with `FieldLabel`, a control,
+ * `FieldDescription`, and `FieldError`.
+ */
+export function Field(props: FieldProps) {
+  return <BaseField.Root {...props} render={<FieldElement />} />;
+}
diff --git a/packages/propel/src/components/field/index.tsx b/packages/propel/src/components/field/index.tsx
index c7321688..0db5b0b5 100644
--- a/packages/propel/src/components/field/index.tsx
+++ b/packages/propel/src/components/field/index.tsx
@@ -1,14 +1,10 @@
-export {
-  Field,
-  type FieldProps,
-  FieldDescription,
-  type FieldDescriptionProps,
-  FieldError,
-  type FieldErrorProps,
-  FieldItem,
-  type FieldItemProps,
-} from "../../ui/field/index";
+export * from "./field";
+export * from "./field-description";
+export * from "./field-error";
+export * from "./field-item";
 export * from "./field-item-content";
 export * from "./field-label";
 export * from "./field-helper-text";
 export * from "./field-label-group";
+export * from "./field-validity";
+export * from "./field-control";
diff --git a/packages/propel/src/components/fieldset/fieldset.tsx b/packages/propel/src/components/fieldset/fieldset.tsx
index cc094936..81a36d23 100644
--- a/packages/propel/src/components/fieldset/fieldset.tsx
+++ b/packages/propel/src/components/fieldset/fieldset.tsx
@@ -1,3 +1,4 @@
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
 import type * as React from "react";
 
 import {
@@ -7,7 +8,7 @@ import {
   FieldsetDescription,
   FieldsetLegend,
   type FieldsetLegendProps,
-} from "../../ui/fieldset";
+} from "../../elements/fieldset";
 
 export type FieldsetProps = FieldsetElementProps & {
   /** Supporting text shown below the legend. */
@@ -21,11 +22,13 @@ export type FieldsetProps = FieldsetElementProps & {
 };
 
 /**
- * The ready-made fieldset: groups a `legend` with its related controls for the 90% case. Pass the
- * legend text, `legendMagnitude`, and whether the group is `bordered`; everything else flows
- * through to the underlying fieldset root.
+ * The ready-made fieldset: groups a `legend` with its related controls for the 90% case. Grafts
+ * Base UI's `Fieldset` behavior onto propel's styled parts — pass the legend text,
+ * `legendMagnitude`, and whether the group is `bordered`; everything else flows through to the
+ * underlying fieldset root.
  */
 export function Fieldset({
+  bordered,
   description,
   legend,
   legendMagnitude,
@@ -33,10 +36,12 @@ export function Fieldset({
   ...props
 }: FieldsetProps) {
   return (
-    <FieldsetElement {...props}>
-      <FieldsetLegend magnitude={legendMagnitude}>{legend}</FieldsetLegend>
+    <BaseFieldset.Root {...props} render={<FieldsetElement bordered={bordered} />}>
+      <BaseFieldset.Legend render={<FieldsetLegend magnitude={legendMagnitude} />}>
+        {legend}
+      </BaseFieldset.Legend>
       {description != null ? <FieldsetDescription>{description}</FieldsetDescription> : null}
       <FieldsetBody>{children}</FieldsetBody>
-    </FieldsetElement>
+    </BaseFieldset.Root>
   );
 }
diff --git a/packages/propel/src/components/fieldset/index.tsx b/packages/propel/src/components/fieldset/index.tsx
index ee031dfe..72a561d2 100644
--- a/packages/propel/src/components/fieldset/index.tsx
+++ b/packages/propel/src/components/fieldset/index.tsx
@@ -7,4 +7,4 @@ export {
   type FieldsetDescriptionProps,
   FieldsetLegend,
   type FieldsetLegendProps,
-} from "../../ui/fieldset";
+} from "../../elements/fieldset";
diff --git a/packages/propel/src/components/form/form.stories.tsx b/packages/propel/src/components/form/form.stories.tsx
index 5ec0edae..e930d49a 100644
--- a/packages/propel/src/components/form/form.stories.tsx
+++ b/packages/propel/src/components/form/form.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
-import { expect, fn, userEvent, waitFor } from "storybook/test";
+import { expect, userEvent, waitFor } from "storybook/test";
 
 import { Button } from "../button/index";
 import { CheckboxGroupField, CheckboxGroupFieldOption } from "../checkbox-group-field/index";
@@ -35,102 +35,152 @@ type LaunchServerValues = {
   storageType: string;
 };
 
-type ExampleFormProps = {
-  onFormSubmit?: (values: LaunchServerValues) => void;
+type CreateAccountValues = {
+  username: string;
 };
 
-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);
-      }}
-    >
-      <FormBody layout="single">
-        <InputField
-          magnitude="md"
-          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 value="http" label="HTTP" />
-          <CheckboxGroupFieldOption value="https" label="HTTPS" />
-          <CheckboxGroupFieldOption value="ssh" label="SSH" />
-        </CheckboxGroupField>
-        <SwitchField
-          name="restartOnFailure"
-          label="Restart on failure"
-          magnitude="md"
-          defaultChecked
-        />
-      </FormBody>
-      <FormActions layout="inline">
-        <Button sizing="hug" type="submit" prominence="secondary" tone="neutral" magnitude="md">
-          Submit
-        </Button>
-      </FormActions>
-    </Form>
-  );
+// Deterministic stand-in for a server check: resolves after a short in-story delay.
+function checkUsernameAvailability(username: string): Promise<{ error?: string }> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(username === "admin" ? { error: "This username is already taken." } : {});
+    }, 300);
+  });
+}
+
+type ReserveUsernameState = {
+  serverErrors?: Record<string, string | string[]>;
+};
+
+// Deterministic stand-in for a Server Function (`"use server"` in a supporting framework):
+// resolves after a short in-story delay.
+async function reserveUsername(
+  _previousState: ReserveUsernameState,
+  formData: FormData,
+): Promise<ReserveUsernameState> {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 300);
+  });
+
+  if (formData.get("username") === "admin") {
+    return { serverErrors: { username: "'admin' is reserved for system use." } };
+  }
+
+  return {};
+}
+
+type ProfileValues = {
+  name: string;
+  age: string;
+};
+
+// Hand-rolled stand-in for a schema library's `safeParse` (e.g. Zod): one parse of the submitted
+// values yields per-field error arrays keyed by field `name`, shaped like
+// `z.flattenError(result.error).fieldErrors`.
+function parseProfile(values: ProfileValues): Record<string, string[]> {
+  const fieldErrors: Record<string, string[]> = {};
+
+  if (values.name.length === 0) {
+    fieldErrors.name = ["Name is required"];
+  }
+
+  const age = Number(values.age);
+  if (Number.isNaN(age)) {
+    fieldErrors.age = ["Age must be a number"];
+  } else if (age <= 0) {
+    fieldErrors.age = ["Age must be a positive number"];
+  }
+
+  return fieldErrors;
 }
 
 /** Form coordinates field values and server-style field errors. */
 export const Default: Story = {
-  render: () => <ExampleForm />,
+  render: function Render() {
+    const [homepage, setHomepage] = React.useState("https://example.com");
+    const [errors, setErrors] = React.useState<Record<string, string | string[]>>({});
+
+    return (
+      <Form<LaunchServerValues>
+        errors={errors}
+        onFormSubmit={(values) => {
+          if (values.homepage.includes("example.com")) {
+            setErrors({ homepage: "The example domain is not allowed." });
+            return;
+          }
+
+          setErrors({});
+        }}
+      >
+        <FormBody layout="single">
+          <InputField
+            magnitude="md"
+            orientation="vertical"
+            name="homepage"
+            label="Homepage"
+            type="url"
+            required
+            placeholder="https://plane.so"
+            value={homepage}
+            onValueChange={(nextHomepage) => {
+              setHomepage(nextHomepage);
+              if (errors.homepage) {
+                setErrors({});
+              }
+            }}
+          />
+          <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 value="http" label="HTTP" />
+            <CheckboxGroupFieldOption value="https" label="HTTPS" />
+            <CheckboxGroupFieldOption value="ssh" label="SSH" />
+          </CheckboxGroupField>
+          <SwitchField
+            name="restartOnFailure"
+            label="Restart on failure"
+            magnitude="md"
+            defaultChecked
+          />
+        </FormBody>
+        <FormActions layout="inline">
+          <Button sizing="hug" type="submit" prominence="secondary" tone="neutral" magnitude="md">
+            Submit
+          </Button>
+        </FormActions>
+      </Form>
+    );
+  },
 };
 
 /** Submitting with the disallowed domain surfaces the server error on the homepage field. */
 export const SubmitWithErrors: Story = {
+  ...Default,
   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" });
@@ -151,3 +201,240 @@ export const SubmitWithErrors: Story = {
     });
   },
 };
+
+/**
+ * Native constraint validation: submitting an empty required field marks it invalid — no custom
+ * `errors` wiring needed.
+ */
+export const ConstraintValidationInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Form
+      onSubmit={(event) => {
+        event.preventDefault();
+      }}
+    >
+      <FormBody layout="single">
+        <InputField
+          magnitude="md"
+          orientation="vertical"
+          name="email"
+          label="Email"
+          type="email"
+          required
+          placeholder="you@example.com"
+        />
+      </FormBody>
+      <FormActions layout="inline">
+        <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
+          Submit
+        </Button>
+      </FormActions>
+    </Form>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Submit" }));
+    await expect(canvas.getByRole("textbox", { name: "Email" })).toBeInvalid();
+  },
+};
+
+/** Async submission: the submit button shows its pending state while a server-style check resolves. */
+export const AsyncValidation: Story = {
+  render: function Render() {
+    const [pending, setPending] = React.useState(false);
+    const [errors, setErrors] = React.useState<Record<string, string | string[]>>({});
+
+    return (
+      <Form<CreateAccountValues>
+        errors={errors}
+        onFormSubmit={async (values) => {
+          setPending(true);
+          const { error } = await checkUsernameAvailability(values.username);
+          setPending(false);
+
+          if (error) {
+            setErrors({ username: error });
+            return;
+          }
+
+          setErrors({});
+        }}
+      >
+        <FormBody layout="single">
+          <InputField
+            magnitude="md"
+            orientation="vertical"
+            name="username"
+            label="Username"
+            required
+            defaultValue="admin"
+            placeholder="e.g. alice"
+          />
+        </FormBody>
+        <FormActions layout="inline">
+          <Button
+            sizing="hug"
+            type="submit"
+            prominence="primary"
+            tone="neutral"
+            magnitude="md"
+            loading={pending}
+          >
+            Create account
+          </Button>
+        </FormActions>
+      </Form>
+    );
+  },
+};
+
+/** Submitting a taken username surfaces the async server error; a free one clears it. */
+export const AsyncValidationInteraction: Story = {
+  ...AsyncValidation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Username" });
+    const submit = canvas.getByRole("button", { name: "Create account" });
+
+    await userEvent.click(submit);
+    await expect(submit).toHaveAttribute("aria-busy", "true");
+    await waitFor(async () => {
+      await expect(input).toHaveAccessibleDescription("This username is already taken.");
+    });
+
+    await userEvent.clear(input);
+    await userEvent.type(input, "alice");
+    await userEvent.click(submit);
+
+    await waitFor(async () => {
+      await expect(input).not.toHaveAccessibleDescription("This username is already taken.");
+    });
+  },
+};
+
+/** Submission through the form `action` with `React.useActionState`, as with a Server Function. */
+export const ServerFunction: Story = {
+  render: function Render() {
+    const [state, formAction, pending] = React.useActionState(reserveUsername, {});
+
+    return (
+      <Form action={formAction} errors={state.serverErrors}>
+        <FormBody layout="single">
+          <InputField
+            magnitude="md"
+            orientation="vertical"
+            name="username"
+            label="Username"
+            required
+            defaultValue="admin"
+            placeholder="e.g. alice"
+          />
+        </FormBody>
+        <FormActions layout="inline">
+          <Button
+            sizing="hug"
+            type="submit"
+            prominence="primary"
+            tone="neutral"
+            magnitude="md"
+            loading={pending}
+          >
+            Reserve username
+          </Button>
+        </FormActions>
+      </Form>
+    );
+  },
+};
+
+/** The action's returned errors surface on the matching field; a free username clears them. */
+export const ServerFunctionInteraction: Story = {
+  ...ServerFunction,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Username" });
+    const submit = canvas.getByRole("button", { name: "Reserve username" });
+
+    await userEvent.click(submit);
+    await waitFor(async () => {
+      await expect(input).toHaveAccessibleDescription("'admin' is reserved for system use.");
+    });
+
+    await userEvent.clear(input);
+    await userEvent.type(input, "alice");
+    await userEvent.click(submit);
+
+    await waitFor(async () => {
+      await expect(input).not.toHaveAccessibleDescription("'admin' is reserved for system use.");
+    });
+  },
+};
+
+/** One schema-style parse maps consolidated `fieldErrors` onto every field by `name`. */
+export const SchemaValidation: Story = {
+  render: function Render() {
+    const [errors, setErrors] = React.useState<Record<string, string | string[]>>({});
+
+    return (
+      <Form<ProfileValues>
+        errors={errors}
+        onFormSubmit={(values) => {
+          const fieldErrors = parseProfile(values);
+
+          if (Object.keys(fieldErrors).length > 0) {
+            setErrors(fieldErrors);
+            return;
+          }
+
+          setErrors({});
+        }}
+      >
+        <FormBody layout="single">
+          <InputField
+            magnitude="md"
+            orientation="vertical"
+            name="name"
+            label="Name"
+            placeholder="Enter name"
+          />
+          <InputField
+            magnitude="md"
+            orientation="vertical"
+            name="age"
+            label="Age"
+            placeholder="Enter age"
+          />
+        </FormBody>
+        <FormActions layout="inline">
+          <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
+            Submit
+          </Button>
+        </FormActions>
+      </Form>
+    );
+  },
+};
+
+/** An invalid submit errors both fields at once; valid values clear them on the next submit. */
+export const SchemaValidationInteraction: Story = {
+  ...SchemaValidation,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const name = canvas.getByRole<HTMLInputElement>("textbox", { name: "Name" });
+    const age = canvas.getByRole<HTMLInputElement>("textbox", { name: "Age" });
+    const submit = canvas.getByRole("button", { name: "Submit" });
+
+    await userEvent.click(submit);
+    await expect(name).toHaveAccessibleDescription("Name is required");
+    await expect(age).toHaveAccessibleDescription("Age must be a positive number");
+
+    await userEvent.type(name, "Ada Lovelace");
+    await userEvent.type(age, "36");
+    await userEvent.click(submit);
+
+    await waitFor(async () => {
+      await expect(name).not.toHaveAccessibleDescription("Name is required");
+    });
+    await expect(age).not.toHaveAccessibleDescription("Age must be a positive number");
+  },
+};
diff --git a/packages/propel/src/components/form/form.tsx b/packages/propel/src/components/form/form.tsx
new file mode 100644
index 00000000..e9527bbd
--- /dev/null
+++ b/packages/propel/src/components/form/form.tsx
@@ -0,0 +1,20 @@
+import { Form as BaseForm } from "@base-ui/react/form";
+import type { FormProps as BaseFormProps } from "@base-ui/react/form";
+
+import { Form as FormElement } from "../../elements/form";
+
+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. Lays out its regions (`FormBody`,
+ * `FormActions`) with a consistent vertical rhythm; field spacing and the actions-bar treatment
+ * live on those parts. Grafts Base UI's form behavior onto the styled `Form` `<form>` frame.
+ */
+export function Form<FormValues extends Record<string, unknown> = Record<string, unknown>>(
+  props: FormProps<FormValues>,
+) {
+  return <BaseForm {...props} render={<FormElement />} />;
+}
diff --git a/packages/propel/src/components/form/index.tsx b/packages/propel/src/components/form/index.tsx
index ab0023d6..64adb255 100644
--- a/packages/propel/src/components/form/index.tsx
+++ b/packages/propel/src/components/form/index.tsx
@@ -1,3 +1,9 @@
-// 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";
+export * from "./form";
+// Re-export the pure styling regions (no Base UI behavior) so a full form is composable from this
+// convenience entry; they compose inside the ready-made form above.
+export {
+  FormActions,
+  type FormActionsProps,
+  FormBody,
+  type FormBodyProps,
+} from "../../elements/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 29cf2f0d..9b68ef5d 100644
--- a/packages/propel/src/components/icon-button/icon-button.stories.tsx
+++ b/packages/propel/src/components/icon-button/icon-button.stories.tsx
@@ -2,15 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Plus } from "lucide-react";
 import { expect, fn } from "storybook/test";
 
+import { IconButton as IconButtonElement } from "../../elements/icon-button";
 import { iconControl } from "../../storybook/icon-control";
-import { IconButton as IconButtonElement } from "../../ui/icon-button";
-import {
-  IconButton,
-  IconButtonIcon,
-  type IconButtonMagnitude,
-  IconButtonSpinner,
-  type IconButtonProminence,
-} from "./index";
+import { IconButton, type IconButtonMagnitude, type IconButtonProminence } from "./index";
 
 const PROMINENCES: IconButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
 const MAGNITUDES: IconButtonMagnitude[] = ["sm", "md", "lg", "xl"];
@@ -18,7 +12,7 @@ const MAGNITUDES: IconButtonMagnitude[] = ["sm", "md", "lg", "xl"];
 const meta = {
   title: "Components/IconButton",
   component: IconButton,
-  subcomponents: { IconButtonElement, IconButtonIcon, IconButtonSpinner },
+  subcomponents: { IconButtonElement },
   argTypes: { children: iconControl },
   parameters: {
     design: {
diff --git a/packages/propel/src/components/icon-button/icon-button.tsx b/packages/propel/src/components/icon-button/icon-button.tsx
index cb4aee22..b9f12f2f 100644
--- a/packages/propel/src/components/icon-button/icon-button.tsx
+++ b/packages/propel/src/components/icon-button/icon-button.tsx
@@ -1,14 +1,20 @@
+import { Button as BaseButton } from "@base-ui/react/button";
 import { LoaderCircle } from "lucide-react";
 import type * as React from "react";
 
 import {
   IconButton as IconButtonElement,
   type IconButtonProps as IconButtonElementProps,
-  IconButtonIcon,
-  IconButtonSpinner,
-} from "../../ui/icon-button";
+} from "../../elements/icon-button";
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
 
 export type IconButtonProps = IconButtonElementProps & {
+  /**
+   * Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. an `<a>`): Base
+   * UI then adds `role`, tab focus, and Enter/Space activation as appropriate.
+   */
+  nativeButton?: boolean;
   /**
    * The single node to render (an icon, an avatar, ...), sized to the button's `--node-size`. It is
    * the button's only content; decorative, the accessible name comes from `aria-label`.
@@ -21,28 +27,50 @@ export type IconButtonProps = IconButtonElementProps & {
 };
 
 /**
- * The ready-made icon-only button: composes the square `IconButton` with an `IconButtonIcon` glyph
- * slot, swapping in an `IconButtonSpinner` while `loading`. 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.
+ * The ready-made icon-only button: grafts Base UI's `Button` behavior onto the square `IconButton`
+ * box, filling it with an `IconButtonIcon` glyph slot and swapping in an `IconButtonSpinner` while
+ * `loading`. It shares Button's design tokens (`prominence`/`tone`/`magnitude`) but is its own
+ * component/export. There is no `link` icon button. An `aria-label` is REQUIRED for the accessible
+ * name.
  */
-export function IconButton({ children, loading = false, disabled, ...props }: IconButtonProps) {
-  // `loading` mirrors Button: Base UI suppresses activation while keeping the button
-  // focusable through `focusableWhenDisabled`; `disabled` remains hard-disabled.
+export function IconButton({
+  render,
+  nativeButton,
+  children,
+  loading = false,
+  disabled,
+  prominence,
+  tone,
+  magnitude,
+  ...props
+}: IconButtonProps) {
+  // `loading` mirrors Button: Base UI suppresses activation while keeping the button focusable
+  // through `focusableWhenDisabled`; `disabled` remains hard-disabled.
   return (
-    <IconButtonElement
+    <BaseButton
       {...props}
+      nativeButton={nativeButton}
+      render={
+        <IconButtonElement
+          prominence={prominence}
+          tone={tone}
+          magnitude={magnitude}
+          // The consumer's render swaps the underlying element; the styled part stays the
+          // className owner (behavior part outer, styled part as the render target, rule 1a).
+          render={render}
+        />
+      }
       disabled={disabled || loading}
       focusableWhenDisabled={loading ? true : undefined}
       aria-busy={loading ? true : undefined}
     >
       {loading ? (
-        <IconButtonSpinner>
+        <Spinner>
           <LoaderCircle />
-        </IconButtonSpinner>
+        </Spinner>
       ) : (
-        <IconButtonIcon>{children}</IconButtonIcon>
+        <Icon>{children}</Icon>
       )}
-    </IconButtonElement>
+    </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/icon-button/index.tsx b/packages/propel/src/components/icon-button/index.tsx
index 342514a8..7ac60379 100644
--- a/packages/propel/src/components/icon-button/index.tsx
+++ b/packages/propel/src/components/icon-button/index.tsx
@@ -1,11 +1,7 @@
 export * from "./icon-button";
-// Re-export the atomic ui parts so the full anatomy is importable from this convenience entry.
+// Re-export the atomic elements parts so the full anatomy is importable from this convenience entry.
 export {
-  IconButtonIcon,
-  type IconButtonIconProps,
   type IconButtonMagnitude,
-  IconButtonSpinner,
-  type IconButtonSpinnerProps,
   type IconButtonTone,
   type IconButtonProminence,
-} from "../../ui/icon-button";
+} from "../../elements/icon-button";
diff --git a/packages/propel/src/components/input-field/input-field.stories.tsx b/packages/propel/src/components/input-field/input-field.stories.tsx
index 1f55acf7..9342c2c9 100644
--- a/packages/propel/src/components/input-field/input-field.stories.tsx
+++ b/packages/propel/src/components/input-field/input-field.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
   title: "Components/InputField",
   component: InputField,
   // Icon picker controls for the inline start/end slots.
-  argTypes: { inlineStartNode: iconControl, inlineEndNode: iconControl },
+  argTypes: { startIcon: iconControl, endIcon: iconControl },
   parameters: {
     design: {
       type: "figma",
@@ -92,8 +92,8 @@ export const WithIcons: Story = {
     orientation: "vertical",
     label: "Search",
     placeholder: "Search…",
-    inlineStartNode: <Search />,
-    inlineEndNode: <Mail />,
+    startIcon: <Search />,
+    endIcon: <Mail />,
   },
 };
 
@@ -196,8 +196,8 @@ export const RtlVerify: Story = {
         orientation="vertical"
         label="بحث"
         placeholder="Search…"
-        inlineStartNode={<Search />}
-        inlineEndNode={<Mail />}
+        startIcon={<Search />}
+        endIcon={<Mail />}
       />
       <InputField
         magnitude="md"
@@ -238,8 +238,8 @@ export const LtrVerify: Story = {
         orientation="vertical"
         label="Search"
         placeholder="Search…"
-        inlineStartNode={<Search />}
-        inlineEndNode={<Mail />}
+        startIcon={<Search />}
+        endIcon={<Mail />}
       />
       <InputField
         magnitude="md"
diff --git a/packages/propel/src/components/input-field/input-field.tsx b/packages/propel/src/components/input-field/input-field.tsx
index b2d911a6..7203612e 100644
--- a/packages/propel/src/components/input-field/input-field.tsx
+++ b/packages/propel/src/components/input-field/input-field.tsx
@@ -1,18 +1,22 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { Input as BaseInput } from "@base-ui/react/input";
 import type * as React from "react";
 
-import { FieldControlContent } from "../../ui/field/field-control-content";
-import type { InputMagnitude } from "../../ui/field/variants";
-import { InputField as InputFieldElement } from "../../ui/input-field/input-field";
-import type { InputProps } from "../../ui/input/index";
-import { Input } from "../../ui/input/input";
-import { InputGroup } from "../../ui/input/input-group";
-import { InputIconSlot } from "../../ui/input/input-icon-slot";
+import { FieldControlContent } from "../../elements/field/field-control-content";
+import type { InputMagnitude } from "../../elements/field/variants";
+import { InputField as InputFieldElement } from "../../elements/input-field/input-field";
+import { Input as InputElement } from "../../elements/input/input";
+import { InputGroup } from "../../elements/input/input-group";
+import { ControlIcon } from "../../internal/control-icon";
 import { FieldHelperText } from "../field/field-helper-text";
 import { FieldLabelGroup } from "../field/field-label-group";
 
-export type { InputMagnitude } from "../../ui/field/variants";
+export type { InputMagnitude } from "../../elements/field/variants";
 
-export type InputFieldProps = Omit<InputProps, "magnitude"> & {
+export type InputFieldProps = Omit<
+  React.ComponentProps<typeof BaseInput>,
+  "className" | "style" | "render"
+> & {
   /** Magnitude scale. `md` | `lg` | `xl`. */
   magnitude: InputMagnitude;
   /** Label text shown above (or beside) the control. */
@@ -31,9 +35,9 @@ export type InputFieldProps = Omit<InputProps, "magnitude"> & {
   /** 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;
+  startIcon?: React.ReactNode;
   /** A 16px node rendered at the inline end of the control. */
-  inlineEndNode?: React.ReactNode;
+  endIcon?: React.ReactNode;
 };
 
 /**
@@ -49,17 +53,17 @@ export function InputField({
   description,
   hint,
   error,
-  inlineStartNode,
-  inlineEndNode,
+  startIcon,
+  endIcon,
   disabled,
   ...controlProps
 }: InputFieldProps) {
   return (
-    <InputFieldElement
+    <BaseField.Root
       name={name}
       disabled={disabled}
       invalid={error != null || undefined}
-      orientation={orientation}
+      render={<InputFieldElement orientation={orientation} />}
     >
       <FieldLabelGroup
         magnitude={magnitude}
@@ -70,12 +74,16 @@ export function InputField({
       />
       <FieldControlContent orientation={orientation}>
         <InputGroup magnitude={magnitude}>
-          {inlineStartNode ? <InputIconSlot>{inlineStartNode}</InputIconSlot> : null}
-          <Input required={required} magnitude={magnitude} {...controlProps} />
-          {inlineEndNode ? <InputIconSlot>{inlineEndNode}</InputIconSlot> : null}
+          {startIcon ? <ControlIcon>{startIcon}</ControlIcon> : null}
+          <BaseInput
+            required={required}
+            {...controlProps}
+            render={<InputElement magnitude={magnitude} />}
+          />
+          {endIcon ? <ControlIcon>{endIcon}</ControlIcon> : null}
         </InputGroup>
         <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
       </FieldControlContent>
-    </InputFieldElement>
+    </BaseField.Root>
   );
 }
diff --git a/packages/propel/src/components/input/index.tsx b/packages/propel/src/components/input/index.tsx
index d11004e7..5d7ab5fe 100644
--- a/packages/propel/src/components/input/index.tsx
+++ b/packages/propel/src/components/input/index.tsx
@@ -1,5 +1,7 @@
-// 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. To frame a bare `Input` with a border and inline
-// icon slots, compose the `InputGroup` / `InputIconSlot` parts from `@plane/propel/ui/input`
-// (or reach for the ready-made `InputField` in `@plane/propel/components/field`).
-export * from "../../ui/input";
+// The ready-made `Input` grafts Base UI's `Input` control behavior onto the styled `elements` element.
+// Drop down to `@plane/propel/elements/input` for the bare styled parts, or reach for the ready-made
+// `InputField` in `@plane/propel/components/input-field`.
+export * from "./input";
+// The bordered frame and inline icon slot are pure styled elements (no Base UI behavior to graft),
+// so re-export them straight from `elements/input`.
+export { InputGroup, type InputGroupProps } from "../../elements/input";
diff --git a/packages/propel/src/components/input/input.stories.tsx b/packages/propel/src/components/input/input.stories.tsx
index 1fb60893..2bcbfe26 100644
--- a/packages/propel/src/components/input/input.stories.tsx
+++ b/packages/propel/src/components/input/input.stories.tsx
@@ -1,38 +1,23 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Mail, Search } from "lucide-react";
-import type * as React from "react";
 import { expect, userEvent } from "storybook/test";
 
-import { InputGroup, InputIconSlot } from "../../ui/input/index";
+import { InputGroup } from "../../elements/input/index";
+import { Icon } from "../../internal/icon";
 import { Field, FieldError, FieldLabel } from "../field/index";
-import { type InputMagnitude } from "./index";
-import { Input } from "./index";
+import { Input, type InputMagnitude } from "./index";
 
 const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
 
 const meta = {
   title: "Components/Input",
   component: Input,
-  subcomponents: { InputGroup, InputIconSlot },
+  subcomponents: { InputGroup },
 } 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">
-      <InputGroup magnitude={magnitude}>{children}</InputGroup>
-    </div>
-  );
-}
-
 /** Single native input element. Compose it with `Field` for labels, names, and validation. */
 export const Default: Story = {
   args: {
@@ -41,9 +26,11 @@ export const Default: Story = {
     placeholder: "Ada Lovelace",
   },
   render: (args) => (
-    <InputSurface>
-      <Input {...args} />
-    </InputSurface>
+    <div className="w-72">
+      <InputGroup magnitude={args.magnitude}>
+        <Input {...args} />
+      </InputGroup>
+    </div>
   ),
 };
 
@@ -56,18 +43,18 @@ export const Magnitudes: Story = {
   },
   parameters: { controls: { disable: true } },
   render: (args) => (
-    <div className="flex flex-col gap-3">
+    <div className="flex w-72 flex-col gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <InputSurface key={magnitude} magnitude={magnitude}>
+        <InputGroup key={magnitude} magnitude={magnitude}>
           <Input {...args} magnitude={magnitude} aria-label={magnitude} placeholder={magnitude} />
-        </InputSurface>
+        </InputGroup>
       ))}
     </div>
   ),
 };
 
-/** Leading and trailing icon addons frame the control via `InputIconSlot`. */
-export const WithIconSlots: Story = {
+/** Leading and trailing icon addons frame the control via the shared `Icon` slot. */
+export const WithIcons: Story = {
   args: {
     magnitude: "md",
     "aria-label": "Search",
@@ -75,15 +62,17 @@ export const WithIconSlots: Story = {
   },
   parameters: { controls: { disable: true } },
   render: (args) => (
-    <InputSurface>
-      <InputIconSlot>
-        <Search />
-      </InputIconSlot>
-      <Input {...args} />
-      <InputIconSlot>
-        <Mail />
-      </InputIconSlot>
-    </InputSurface>
+    <div className="w-72">
+      <InputGroup magnitude={args.magnitude}>
+        <Icon tint="secondary" magnitude="md">
+          <Search />
+        </Icon>
+        <Input {...args} />
+        <Icon tint="secondary" magnitude="md">
+          <Mail />
+        </Icon>
+      </InputGroup>
+    </div>
   ),
 };
 
@@ -95,9 +84,11 @@ export const FieldComposition: Story = {
       <FieldLabel magnitude="md" inset={false}>
         Display name
       </FieldLabel>
-      <InputSurface>
-        <Input {...args} placeholder="Ada Lovelace" />
-      </InputSurface>
+      <div className="w-72">
+        <InputGroup magnitude={args.magnitude}>
+          <Input {...args} placeholder="Ada Lovelace" />
+        </InputGroup>
+      </div>
     </Field>
   ),
   play: async ({ canvas }) => {
@@ -116,9 +107,11 @@ export const FieldErrorAssociation: Story = {
       <FieldLabel magnitude="md" inset={false}>
         Email
       </FieldLabel>
-      <InputSurface>
-        <Input {...args} defaultValue="not-an-email" />
-      </InputSurface>
+      <div className="w-72">
+        <InputGroup magnitude={args.magnitude}>
+          <Input {...args} defaultValue="not-an-email" />
+        </InputGroup>
+      </div>
       <FieldError magnitude="md" match={true}>
         Enter a valid email address.
       </FieldError>
diff --git a/packages/propel/src/components/input/input.tsx b/packages/propel/src/components/input/input.tsx
new file mode 100644
index 00000000..67e9df1d
--- /dev/null
+++ b/packages/propel/src/components/input/input.tsx
@@ -0,0 +1,15 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+
+import { Input as InputElement, type InputProps } from "../../elements/input/input";
+
+export type { InputProps };
+export type { InputMagnitude } from "../../elements/input/input";
+
+/**
+ * Single-line text field that automatically works inside `Field`. Base UI's `Input` control
+ * behavior grafted onto the styled `elements` `Input` element (rule 1a) — behavior part outer,
+ * styled part as the render target.
+ */
+export function Input({ magnitude, ...props }: InputProps) {
+  return <BaseInput {...props} render={<InputElement magnitude={magnitude} />} />;
+}
diff --git a/packages/propel/src/components/linear-progress/linear-progress.stories.tsx b/packages/propel/src/components/linear-progress/linear-progress.stories.tsx
index 536e5e23..7d02dd27 100644
--- a/packages/propel/src/components/linear-progress/linear-progress.stories.tsx
+++ b/packages/propel/src/components/linear-progress/linear-progress.stories.tsx
@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
+import * as React from "react";
+import { expect, waitFor } from "storybook/test";
 
 import {
   LinearProgressIndicator,
   LinearProgressTrack,
   LinearProgressValue,
-} from "../../ui/linear-progress";
+} from "../../elements/linear-progress";
 import { LinearProgress, type LinearProgressMagnitude, type LinearProgressTone } from "./index";
 
 const MAGNITUDES: LinearProgressMagnitude[] = ["sm", "md"];
@@ -16,6 +17,15 @@ const meta = {
   component: LinearProgress,
   subcomponents: { LinearProgressTrack, LinearProgressIndicator, LinearProgressValue },
   args: { value: 60, magnitude: "md", tone: "brand", "aria-label": "Upload progress" },
+  // The bar has no intrinsic width (`w-full` root, `flex-1 min-w-0` track), so a bare render
+  // collapses to 0px under the centered layout — give every story a real width to fill.
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
 } satisfies Meta<typeof LinearProgress>;
 
 export default meta;
@@ -55,6 +65,35 @@ export const Magnitudes: Story = {
 /** `value={null}` is indeterminate: an animated fill with no `aria-valuenow`. */
 export const Indeterminate: Story = { args: { value: null, showValue: false } };
 
+/**
+ * Drive `value` from task state — an export advancing in deterministic 300 ms steps here. The fill,
+ * the trailing `%`, and `aria-valuenow` follow each update, and the bar marks itself
+ * `data-complete` when the value reaches `max`.
+ */
+export const SimulatedTask: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render(args) {
+    const [value, setValue] = React.useState(0);
+    React.useEffect(() => {
+      if (value >= 100) return;
+      const timer = window.setTimeout(() => setValue((current) => current + 25), 300);
+      return () => window.clearTimeout(timer);
+    }, [value]);
+    return <LinearProgress {...args} value={value} aria-label="Export progress" />;
+  },
+};
+
+/** Hidden twin of `SimulatedTask`: the bar settles at 100% and reports completion. */
+export const SimulatedTaskInteraction: Story = {
+  ...SimulatedTask,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const bar = canvas.getByRole("progressbar", { name: "Export progress" });
+    await waitFor(() => expect(bar).toHaveAttribute("aria-valuenow", "100"), { timeout: 3000 });
+    await expect(bar).toHaveAttribute("data-complete");
+  },
+};
+
 /** It exposes the `progressbar` role and reflects the value as `aria-valuenow`. */
 export const HasProgressbarRole: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -64,3 +103,8 @@ export const HasProgressbarRole: Story = {
     await expect(bar).toHaveAttribute("aria-valuenow", "42");
   },
 };
+
+/** A visible text label before the track — `label` also names the bar for assistive tech. */
+export const WithLabel: Story = {
+  args: { value: 60, magnitude: "md", tone: "brand", label: "Uploading attachments" },
+};
diff --git a/packages/propel/src/components/linear-progress/linear-progress.tsx b/packages/propel/src/components/linear-progress/linear-progress.tsx
index 7281bba8..0302a1ac 100644
--- a/packages/propel/src/components/linear-progress/linear-progress.tsx
+++ b/packages/propel/src/components/linear-progress/linear-progress.tsx
@@ -1,13 +1,15 @@
 import { Progress as BaseProgress } from "@base-ui/react/progress";
+import type * as React from "react";
 
 import {
   LinearProgress as LinearProgressElement,
   LinearProgressIndicator,
   type LinearProgressIndicatorProps,
+  LinearProgressLabel,
   LinearProgressTrack,
   type LinearProgressTrackProps,
   LinearProgressValue,
-} from "../../ui/linear-progress";
+} from "../../elements/linear-progress";
 
 export type LinearProgressMagnitude = NonNullable<LinearProgressTrackProps["magnitude"]>;
 export type LinearProgressTone = NonNullable<LinearProgressIndicatorProps["tone"]>;
@@ -24,6 +26,8 @@ export type LinearProgressProps = Omit<BaseProgress.Root.Props, "className" | "s
   tone: LinearProgressTone;
   /** Show the trailing percentage label. @default true */
   showValue?: boolean;
+  /** Visible text label before the track — Base UI's `Progress.Label` (also names the bar). */
+  label?: React.ReactNode;
   /** Accessible name (required — the visible % is not a substitute). */
   "aria-label": string;
 };
@@ -31,25 +35,30 @@ export type LinearProgressProps = Omit<BaseProgress.Root.Props, "className" | "s
 /**
  * A horizontal determinate/indeterminate progress bar with an optional trailing `%` label. Drive it
  * with `value` (0–`max`); the fill and `aria-valuenow` follow. For a ring, use `CircularProgress`.
- * Composes the `ui/linear-progress` primitives on Base UI `Progress` (which owns `progressbar`).
+ * Grafts Base UI `Progress` (which owns `progressbar`) onto the `elements/linear-progress` styled
+ * parts.
  */
 export function LinearProgress({
   value,
   magnitude,
   tone,
   showValue = true,
+  label,
   ...props
 }: LinearProgressProps) {
   return (
-    <LinearProgressElement value={value} {...props}>
-      <LinearProgressTrack magnitude={magnitude}>
-        <LinearProgressIndicator tone={tone} />
-      </LinearProgressTrack>
+    <BaseProgress.Root value={value} {...props} render={<LinearProgressElement />}>
+      {label != null ? (
+        <BaseProgress.Label render={<LinearProgressLabel />}>{label}</BaseProgress.Label>
+      ) : null}
+      <BaseProgress.Track render={<LinearProgressTrack magnitude={magnitude} />}>
+        <BaseProgress.Indicator render={<LinearProgressIndicator tone={tone} />} />
+      </BaseProgress.Track>
       {showValue ? (
-        <LinearProgressValue>
+        <BaseProgress.Value render={<LinearProgressValue />}>
           {(_, currentValue) => (currentValue == null ? "" : `${Math.round(currentValue)}%`)}
-        </LinearProgressValue>
+        </BaseProgress.Value>
       ) : null}
-    </LinearProgressElement>
+    </BaseProgress.Root>
   );
 }
diff --git a/packages/propel/src/components/list/index.tsx b/packages/propel/src/components/list/index.tsx
index 2ba93b60..9a3599eb 100644
--- a/packages/propel/src/components/list/index.tsx
+++ b/packages/propel/src/components/list/index.tsx
@@ -1,22 +1,16 @@
 export * from "./list-section";
-// Re-export the atomic list parts so custom rows and sections are importable from this convenience.
+// The roving-focus `Composite` behavior grafted onto the styled `elements` List/rows.
+export * from "./list";
+export * from "./list-item-button";
+export * from "./list-item-link";
+// Re-export the pure styled parts (no Base UI behavior to graft) straight from `elements/list`.
 export {
-  List,
-  type ListProps,
   ListItem,
   type ListItemProps,
-  ListItemButton,
-  type ListItemButtonProps,
-  ListItemIcon,
-  type ListItemIconProps,
   ListItemLabel,
   type ListItemLabelProps,
-  ListItemLink,
-  type ListItemLinkProps,
   ListSectionHeading,
   type ListSectionHeadingProps,
   ListSectionTrigger,
   type ListSectionTriggerProps,
-  ListSectionTriggerIndicator,
-  type ListSectionTriggerIndicatorProps,
-} from "../../ui/list";
+} from "../../elements/list";
diff --git a/packages/propel/src/components/list/list-item-button.tsx b/packages/propel/src/components/list/list-item-button.tsx
new file mode 100644
index 00000000..77c3b874
--- /dev/null
+++ b/packages/propel/src/components/list/list-item-button.tsx
@@ -0,0 +1,16 @@
+import { CompositeItem, type CompositeItemProps } from "../../base/composite";
+import { ListItemButton as ListItemButtonElement } from "../../elements/list/list-item-button";
+
+export type ListItemButtonProps = Omit<
+  CompositeItemProps,
+  "className" | "style" | "tag" | "render"
+>;
+
+/**
+ * A list row's primary action — a `<button>` that is also a roving `Composite` item. Base UI's
+ * `CompositeItem` roving behavior grafted onto the styled `elements` `ListItemButton` element (rule
+ * 1a). Compose a `ListItemIcon` + `ListItemLabel` inside.
+ */
+export function ListItemButton(props: ListItemButtonProps) {
+  return <CompositeItem tag="button" {...props} render={<ListItemButtonElement />} />;
+}
diff --git a/packages/propel/src/components/list/list-item-link.tsx b/packages/propel/src/components/list/list-item-link.tsx
new file mode 100644
index 00000000..01f879a3
--- /dev/null
+++ b/packages/propel/src/components/list/list-item-link.tsx
@@ -0,0 +1,14 @@
+import { CompositeItem, type CompositeItemProps } from "../../base/composite";
+import { ListItemLink as ListItemLinkElement } from "../../elements/list/list-item-link";
+
+export type ListItemLinkProps = Omit<CompositeItemProps, "className" | "style" | "tag" | "render">;
+
+/**
+ * A list row's primary navigation target — an `<a>` that is also a roving `Composite` item. Base
+ * UI's `CompositeItem` roving behavior grafted onto the styled `elements` `ListItemLink` element
+ * (rule 1a). Mark the current page with `aria-current="page"`. Compose a `ListItemIcon` +
+ * `ListItemLabel` inside.
+ */
+export function ListItemLink(props: ListItemLinkProps) {
+  return <CompositeItem tag="a" {...props} render={<ListItemLinkElement />} />;
+}
diff --git a/packages/propel/src/components/list/list-section.tsx b/packages/propel/src/components/list/list-section.tsx
index 4c49b01a..2cc13386 100644
--- a/packages/propel/src/components/list/list-section.tsx
+++ b/packages/propel/src/components/list/list-section.tsx
@@ -2,15 +2,11 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
-import {
-  Collapsible,
-  type CollapsibleProps,
-  CollapsiblePanel,
-  CollapsiblePanelContent,
-} from "../../ui/collapsible";
-import { ListSectionTrigger, ListSectionTriggerIndicator } from "../../ui/list";
+import { CollapsiblePanel, CollapsiblePanelContent } from "../../elements/collapsible";
+import { ListSectionTrigger } from "../../elements/list";
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
 
-export type ListSectionProps = CollapsibleProps & {
+export type ListSectionProps = Omit<BaseCollapsible.Root.Props, "className" | "style"> & {
   /** The section heading shown in the toggle. */
   label: React.ReactNode;
   /** The section body — typically a `List` of rows. */
@@ -27,18 +23,18 @@ export type ListSectionProps = CollapsibleProps & {
  */
 export function ListSection({ label, children, indicator, ...props }: ListSectionProps) {
   return (
-    <Collapsible {...props}>
+    <BaseCollapsible.Root {...props}>
       <ListSectionTrigger render={<BaseCollapsible.Trigger />}>
         {label}
         {indicator ? (
-          <ListSectionTriggerIndicator>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
             <ChevronDown />
-          </ListSectionTriggerIndicator>
+          </DisclosureIndicator>
         ) : null}
       </ListSectionTrigger>
-      <CollapsiblePanel>
+      <BaseCollapsible.Panel render={<CollapsiblePanel />}>
         <CollapsiblePanelContent>{children}</CollapsiblePanelContent>
-      </CollapsiblePanel>
-    </Collapsible>
+      </BaseCollapsible.Panel>
+    </BaseCollapsible.Root>
   );
 }
diff --git a/packages/propel/src/components/list/list.stories.tsx b/packages/propel/src/components/list/list.stories.tsx
new file mode 100644
index 00000000..2e133c98
--- /dev/null
+++ b/packages/propel/src/components/list/list.stories.tsx
@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Ellipsis, Inbox, LayoutGrid, Settings } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemLabel,
+  ListItemLink,
+  ListSection,
+  ListSectionHeading,
+  ListSectionTrigger,
+} from "./index";
+
+// Components-tier story: the ready-made `List`/`ListItemLink`/`ListItemButton` already carry the
+// roving-tabindex `Composite` behavior, and `ListSection` bundles the collapsible section — so the
+// story composes the public API only, no Base UI wiring. `List` is role-flexible; these stories use
+// `role="toolbar"` (the canonical roving-controls role) so axe passes while showing the chrome.
+const meta = {
+  title: "Components/List",
+  component: List,
+  subcomponents: {
+    ListItem,
+    ListItemLink,
+    ListItemButton,
+    ListItemLabel,
+    ListSection,
+    ListSectionHeading,
+    ListSectionTrigger,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A navigation list: `ListItemLink` rows (plus one `ListItemButton` action row sharing the chrome).
+ * The current page carries `aria-current="page"` and its row reads as selected.
+ */
+export const Default: Story = {
+  render: () => (
+    <List role="toolbar" aria-label="Workspace">
+      <ListItem>
+        <ListItemLink href="#inbox">
+          <Icon magnitude="md">
+            <Inbox aria-hidden />
+          </Icon>
+          <ListItemLabel>Inbox</ListItemLabel>
+        </ListItemLink>
+      </ListItem>
+      <ListItem>
+        <ListItemLink href="#projects" aria-current="page">
+          <Icon magnitude="md">
+            <LayoutGrid aria-hidden />
+          </Icon>
+          <ListItemLabel>Projects</ListItemLabel>
+        </ListItemLink>
+      </ListItem>
+      <ListItem>
+        <ListItemLink href="#settings">
+          <Icon magnitude="md">
+            <Settings aria-hidden />
+          </Icon>
+          <ListItemLabel>Settings</ListItemLabel>
+        </ListItemLink>
+      </ListItem>
+      <ListItem>
+        {/* An action row (not navigation) — a button that shares the row chrome. */}
+        <ListItemButton>
+          <Icon magnitude="md">
+            <Ellipsis aria-hidden />
+          </Icon>
+          <ListItemLabel>More</ListItemLabel>
+        </ListItemButton>
+      </ListItem>
+    </List>
+  ),
+};
+
+/**
+ * Roving tabindex: one tab stop for the whole list (the active row is `tabindex="0"`, the rest
+ * `-1`), and ArrowDown moves focus between the rows — links and the action button alike.
+ */
+export const DefaultInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const inbox = canvas.getByRole("link", { name: "Inbox" });
+    const projects = canvas.getByRole("link", { name: "Projects" });
+    const settings = canvas.getByRole("link", { name: "Settings" });
+    const more = canvas.getByRole("button", { name: "More" });
+
+    // The current page is exposed via aria-current.
+    await expect(projects).toHaveAttribute("aria-current", "page");
+
+    // Single tab stop: only the active row is in the tab order.
+    await expect(inbox).toHaveAttribute("tabindex", "0");
+    await expect(projects).toHaveAttribute("tabindex", "-1");
+    await expect(settings).toHaveAttribute("tabindex", "-1");
+    await expect(more).toHaveAttribute("tabindex", "-1");
+
+    // ArrowDown roams focus through the rows.
+    inbox.focus();
+    await expect(inbox).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(projects).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(settings).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(more).toHaveFocus();
+  },
+};
+
+/**
+ * A collapsible section: `ListSection` renders the muted heading with the rotating disclosure
+ * chevron and toggles its body — pass the heading as `label` and a `List` of rows as `children`.
+ */
+export const Section: Story = {
+  render: () => (
+    <ListSection label="Workspace" indicator defaultOpen>
+      <List role="toolbar" aria-label="Workspace">
+        <ListItem>
+          <ListItemLink href="#projects" aria-current="page">
+            <Icon magnitude="md">
+              <LayoutGrid aria-hidden />
+            </Icon>
+            <ListItemLabel>Projects</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+        <ListItem>
+          <ListItemLink href="#settings">
+            <Icon magnitude="md">
+              <Settings aria-hidden />
+            </Icon>
+            <ListItemLabel>Settings</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+      </List>
+    </ListSection>
+  ),
+};
+
+/**
+ * Disclosure: the `ListSection` trigger exposes `aria-expanded` and toggles the section body on
+ * click.
+ */
+export const SectionInteraction: Story = {
+  ...Section,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Workspace" });
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    trigger.blur();
+  },
+};
diff --git a/packages/propel/src/components/list/list.tsx b/packages/propel/src/components/list/list.tsx
new file mode 100644
index 00000000..5df118ce
--- /dev/null
+++ b/packages/propel/src/components/list/list.tsx
@@ -0,0 +1,14 @@
+import { Composite, type CompositeProps } from "../../base/composite";
+import { List as ListElement } from "../../elements/list/list";
+
+export type ListProps = Omit<CompositeProps, "className" | "style" | "render">;
+
+/**
+ * A vertical roving-tabindex list — the primitive sidebars compose. Base UI's `Composite`
+ * roving-focus behavior grafted onto the styled `elements` `List` element (rule 1a). One tab stop
+ * for the whole list; arrow keys move between the focusable rows. Role-flexible: pass the
+ * `role`/`aria-*` the context calls for. Compose `ListItem` rows inside.
+ */
+export function List(props: ListProps) {
+  return <Composite {...props} render={<ListElement />} />;
+}
diff --git a/packages/propel/src/components/menu/create-handle.ts b/packages/propel/src/components/menu/create-handle.ts
new file mode 100644
index 00000000..3d2f9f6c
--- /dev/null
+++ b/packages/propel/src/components/menu/create-handle.ts
@@ -0,0 +1,10 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one menu shared by many launch points.
+ */
+export const createMenuHandle = BaseMenu.createHandle;
+
+export type MenuHandle = ReturnType<typeof createMenuHandle>;
diff --git a/packages/propel/src/components/menu/index.tsx b/packages/propel/src/components/menu/index.tsx
index 570f5239..aac1be97 100644
--- a/packages/propel/src/components/menu/index.tsx
+++ b/packages/propel/src/components/menu/index.tsx
@@ -1,43 +1,58 @@
+export * from "./menu";
 export * from "./menu-checkbox-item";
 export * from "./menu-content";
 export * from "./menu-footer";
+export * from "./menu-group";
 export * from "./menu-item";
 export * from "./menu-label";
 export * from "./menu-link-item";
 export * from "./menu-search";
+export * from "./menu-separator";
+export * from "./menu-submenu";
 export * from "./menu-submenu-content";
 export * from "./menu-submenu-trigger";
-// Re-export the atomic menu parts so a full menu can be assembled from one entry.
+export * from "./menu-trigger";
+export * from "./menu-radio-group";
+export * from "./menu-radio-item";
+export * from "./create-handle";
+export * from "./menu-viewport";
+// Re-export propel's STYLED menu parts so a full menu can be assembled from one entry. The
+// remaining behavior/structural roles (`RadioGroup`, `Portal`, `Positioner`, `Arrow`, `Viewport`,
+// `Backdrop`) are Base UI's — no propel API yet — so compose them from `@base-ui/react/menu` (and
+// the shared `internal/` primitives) directly at the call site. Names with a ready-made here
+// (`MenuItem`, `MenuCheckboxItem`, `MenuLabel`, `MenuLinkItem`, `MenuSeparator`,
+// `MenuSubmenuTrigger`, `MenuSearch`, `MenuFooter`) are deliberately NOT re-exported from `elements`.
 export {
-  Menu,
-  type MenuProps,
-  MenuArrow,
-  type MenuArrowProps,
-  MenuBackdrop,
-  type MenuBackdropProps,
   MenuCheckboxItemIndicator,
   type MenuCheckboxItemIndicatorProps,
-  MenuGroup,
-  type MenuGroupProps,
   MenuGroupLabel,
   type MenuGroupLabelProps,
+  MenuItemContent,
+  type MenuItemContentProps,
+  MenuItemControl,
+  type MenuItemControlProps,
+  MenuItemDescription,
+  type MenuItemDescriptionProps,
+  MenuItemMeta,
+  type MenuItemMetaProps,
+  MenuItemSecondaryText,
+  type MenuItemSecondaryTextProps,
+  MenuItemIndicator,
+  type MenuItemIndicatorProps,
+  MenuItemTitle,
+  type MenuItemTitleProps,
+  MenuItemTitleRow,
+  type MenuItemTitleRowProps,
+  MenuItemTrailing,
+  type MenuItemTrailingProps,
+  MenuLabelMeta,
+  type MenuLabelMetaProps,
+  MenuLabelTitle,
+  type MenuLabelTitleProps,
   MenuPopup,
   type MenuPopupProps,
-  MenuPortal,
-  MenuPositioner,
-  type MenuPositionerProps,
-  MenuRadioGroup,
-  type MenuRadioGroupProps,
-  MenuRadioItem,
-  type MenuRadioItemProps,
   MenuRadioItemIndicator,
   type MenuRadioItemIndicatorProps,
-  MenuSeparator,
-  type MenuSeparatorProps,
-  MenuSubmenu,
-  type MenuSubmenuProps,
-  MenuTrigger,
-  type MenuTriggerProps,
-  MenuViewport,
-  type MenuViewportProps,
-} from "../../ui/menu";
+  MenuSearchInput,
+  type MenuSearchInputProps,
+} from "../../elements/menu";
diff --git a/packages/propel/src/components/menu/menu-checkbox-item.tsx b/packages/propel/src/components/menu/menu-checkbox-item.tsx
index 152eeba6..8327d8dc 100644
--- a/packages/propel/src/components/menu/menu-checkbox-item.tsx
+++ b/packages/propel/src/components/menu/menu-checkbox-item.tsx
@@ -1,52 +1,48 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { Check } from "lucide-react";
 import type * as React from "react";
 
 import {
   MenuCheckboxItem as MenuCheckboxItemElement,
-  type MenuCheckboxItemProps as MenuCheckboxItemElementProps,
   MenuCheckboxItemIndicator,
   MenuItemContent,
   MenuItemControl,
-  MenuItemIcon,
   MenuItemMeta,
   MenuItemTitle,
   MenuItemTitleRow,
-} from "../../ui/menu";
+} from "../../elements/menu";
+import { Icon } from "../../internal/icon";
 
-export type MenuCheckboxItemProps = MenuCheckboxItemElementProps & {
+export type MenuCheckboxItemProps = Omit<BaseMenu.CheckboxItem.Props, "className" | "style"> & {
   /** Leading content shown after the checkbox. */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
   /** Trailing content. */
-  inlineEndNode?: React.ReactNode;
+  trailing?: React.ReactNode;
 };
 
 /**
- * The ready-made toggleable multi-select menu row: composes the atomic `MenuCheckboxItem` and lays
- * out the checkbox box (`MenuCheckboxItemIndicator` + a lucide `Check`), optional leading/trailing
- * nodes, and the label. Base UI's `MenuCheckboxItem` tracks the checked state, so `checked` /
- * `defaultChecked` / `onCheckedChange` forward straight to it and the indicator reads it from
- * context.
+ * The ready-made toggleable multi-select menu row: grafts Base UI's `Menu.CheckboxItem` behavior
+ * onto the styled `MenuCheckboxItem` and lays out the checkbox box (a kept-mounted
+ * `Menu.CheckboxItemIndicator` grafted onto `MenuCheckboxItemIndicator` + a lucide `Check`),
+ * optional leading/trailing nodes, and the label. Base UI's `Menu.CheckboxItem` tracks the checked
+ * state, so `checked` / `defaultChecked` / `onCheckedChange` forward straight to it and the
+ * indicator reads it from context.
  */
-export function MenuCheckboxItem({
-  inlineStartNode,
-  inlineEndNode,
-  children,
-  ...props
-}: MenuCheckboxItemProps) {
+export function MenuCheckboxItem({ icon, trailing, children, ...props }: MenuCheckboxItemProps) {
   return (
-    <MenuCheckboxItemElement {...props}>
+    <BaseMenu.CheckboxItem {...props} render={<MenuCheckboxItemElement />}>
       <MenuItemControl>
-        <MenuCheckboxItemIndicator>
+        <BaseMenu.CheckboxItemIndicator keepMounted render={<MenuCheckboxItemIndicator />}>
           <Check aria-hidden />
-        </MenuCheckboxItemIndicator>
+        </BaseMenu.CheckboxItemIndicator>
       </MenuItemControl>
-      {inlineStartNode != null ? <MenuItemIcon>{inlineStartNode}</MenuItemIcon> : null}
+      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
       <MenuItemContent>
         <MenuItemTitleRow>
           <MenuItemTitle>{children}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {inlineEndNode != null ? <MenuItemMeta>{inlineEndNode}</MenuItemMeta> : null}
-    </MenuCheckboxItemElement>
+      {trailing != null ? <MenuItemMeta>{trailing}</MenuItemMeta> : null}
+    </BaseMenu.CheckboxItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-content.shared.tsx b/packages/propel/src/components/menu/menu-content.shared.tsx
index 1abae2fb..efdfcd86 100644
--- a/packages/propel/src/components/menu/menu-content.shared.tsx
+++ b/packages/propel/src/components/menu/menu-content.shared.tsx
@@ -1,10 +1,11 @@
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import type * as React from "react";
 
-import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
-import { MenuPopup, MenuPortal, MenuPositioner } from "../../ui/menu";
+import { MenuPopup } from "../../elements/menu";
+import { OverlayPanel, type OverlayPanelSizing } from "../../internal/overlay-panel";
+import { Positioner } from "../../internal/positioner";
 
-export type MenuContentWidth = OverlayPanelWidth;
+export type MenuContentSizing = OverlayPanelSizing;
 
 export type MenuContentProps = Omit<BaseMenu.Popup.Props, "className" | "style"> & {
   /** Which side of the trigger the menu opens toward. @default "bottom" */
@@ -13,8 +14,8 @@ export type MenuContentProps = Omit<BaseMenu.Popup.Props, "className" | "style">
   sideOffset?: BaseMenu.Positioner.Props["sideOffset"];
   /** Alignment of the menu relative to the trigger along `side`. @default "start" */
   align?: BaseMenu.Positioner.Props["align"];
-  /** Fixed menu width. @default "anchor" */
-  width?: MenuContentWidth;
+  /** How the menu popup sizes itself. @default "anchor" */
+  sizing?: MenuContentSizing;
   /** Sticky chrome pinned above the role="menu" popup. */
   search?: React.ReactNode;
   /** Sticky chrome pinned below the role="menu" popup. */
@@ -25,7 +26,7 @@ export function MenuContentSurface({
   side,
   sideOffset,
   align,
-  width,
+  sizing,
   search,
   footer,
   ...props
@@ -35,12 +36,23 @@ export function MenuContentSurface({
   align: BaseMenu.Positioner.Props["align"];
 }) {
   return (
-    <MenuPortal>
-      <MenuPositioner side={side} sideOffset={sideOffset} align={align}>
-        <OverlayPanel elevation="overlay" radius="lg" width={width} header={search} footer={footer}>
-          <MenuPopup elevation="flat" {...props} />
+    <BaseMenu.Portal>
+      <BaseMenu.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <OverlayPanel
+          elevation="overlay"
+          radius="lg"
+          sizing={sizing}
+          header={search}
+          footer={footer}
+        >
+          <BaseMenu.Popup {...props} render={<MenuPopup elevation="flat" />} />
         </OverlayPanel>
-      </MenuPositioner>
-    </MenuPortal>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-footer.tsx b/packages/propel/src/components/menu/menu-footer.tsx
index 6cd4a8ab..ee5e9e68 100644
--- a/packages/propel/src/components/menu/menu-footer.tsx
+++ b/packages/propel/src/components/menu/menu-footer.tsx
@@ -1 +1 @@
-export { MenuFooter, type MenuFooterProps } from "../../ui/menu";
+export { MenuFooter, type MenuFooterProps } from "../../elements/menu";
diff --git a/packages/propel/src/components/menu/menu-group.tsx b/packages/propel/src/components/menu/menu-group.tsx
new file mode 100644
index 00000000..5b01a2e6
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-group.tsx
@@ -0,0 +1,11 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+export type MenuGroupProps = Omit<BaseMenu.Group.Props, "className" | "style">;
+
+/**
+ * Groups related menu items with their `MenuLabel` heading — Base UI's `Menu.Group` passthrough. A
+ * structural role with no propel styling of its own, so it lives in `components` (rules 1a, 2).
+ */
+export function MenuGroup(props: MenuGroupProps) {
+  return <BaseMenu.Group {...props} />;
+}
diff --git a/packages/propel/src/components/menu/menu-item.tsx b/packages/propel/src/components/menu/menu-item.tsx
index fb98d5ed..989a928b 100644
--- a/packages/propel/src/components/menu/menu-item.tsx
+++ b/packages/propel/src/components/menu/menu-item.tsx
@@ -1,3 +1,4 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { Check } from "lucide-react";
 import type * as React from "react";
 
@@ -5,37 +6,37 @@ import {
   MenuItem as MenuItemElement,
   MenuItemContent,
   MenuItemDescription,
-  MenuItemIcon,
   MenuItemSecondaryText,
-  MenuItemSelectedIndicator,
+  MenuItemIndicator,
   MenuItemTitle,
   MenuItemTitleRow,
   MenuItemTrailing,
-  type MenuItemProps as MenuItemElementProps,
-} from "../../ui/menu";
+} from "../../elements/menu";
+import { Icon } from "../../internal/icon";
 
-export type MenuItemProps = Omit<MenuItemElementProps, "layout"> & {
+export type MenuItemProps = Omit<BaseMenu.Item.Props, "className" | "style"> & {
   /** Leading content before the label. */
-  inlineStartNode?: React.ReactNode;
+  icon?: 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;
+  trailing?: 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.
+ * The ready-made selectable menu row: grafts Base UI's `Menu.Item` behavior onto the styled
+ * `MenuItem` and lays out optional leading/trailing nodes, the label, a secondary line, and the
+ * single-select check indicator.
  */
 export function MenuItem({
-  inlineStartNode,
+  icon,
   description,
   secondaryText,
-  inlineEndNode,
+  trailing,
   selected,
   children,
   ...props
@@ -43,8 +44,8 @@ export function MenuItem({
   // The taller, top-aligned row layout is implied by having a description — derived, not a prop.
   const layout = description != null ? "with-description" : "default";
   return (
-    <MenuItemElement layout={layout} {...props}>
-      {inlineStartNode != null ? <MenuItemIcon>{inlineStartNode}</MenuItemIcon> : null}
+    <BaseMenu.Item {...props} render={<MenuItemElement layout={layout} />}>
+      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
       <MenuItemContent>
         <MenuItemTitleRow>
           <MenuItemTitle>{children}</MenuItemTitle>
@@ -54,12 +55,12 @@ export function MenuItem({
         </MenuItemTitleRow>
         {description != null ? <MenuItemDescription>{description}</MenuItemDescription> : null}
       </MenuItemContent>
-      {inlineEndNode != null ? <MenuItemTrailing>{inlineEndNode}</MenuItemTrailing> : null}
+      {trailing != null ? <MenuItemTrailing>{trailing}</MenuItemTrailing> : null}
       {selected ? (
-        <MenuItemSelectedIndicator>
+        <MenuItemIndicator>
           <Check />
-        </MenuItemSelectedIndicator>
+        </MenuItemIndicator>
       ) : null}
-    </MenuItemElement>
+    </BaseMenu.Item>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-label.tsx b/packages/propel/src/components/menu/menu-label.tsx
index b7bf1000..5cfcc96f 100644
--- a/packages/propel/src/components/menu/menu-label.tsx
+++ b/packages/propel/src/components/menu/menu-label.tsx
@@ -1,24 +1,23 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import type * as React from "react";
 
-import {
-  MenuLabel as MenuLabelElement,
-  MenuLabelMeta,
-  type MenuLabelProps as MenuLabelElementProps,
-  MenuLabelTitle,
-} from "../../ui/menu";
+import { MenuLabel as MenuLabelElement, MenuLabelMeta, MenuLabelTitle } from "../../elements/menu";
 
-export type MenuLabelProps = MenuLabelElementProps & {
+export type MenuLabelProps = Omit<BaseMenu.GroupLabel.Props, "className" | "style"> & {
   /** Optional inline-end content on the heading row. */
-  inlineEndNode?: React.ReactNode;
+  meta?: React.ReactNode;
   children?: React.ReactNode;
 };
 
-/** A non-interactive section heading for a group of menu items. */
-export function MenuLabel({ inlineEndNode, children, ...props }: MenuLabelProps) {
+/**
+ * A non-interactive section heading for a group of menu items: grafts Base UI's `Menu.GroupLabel`
+ * behavior onto the styled `MenuLabel`.
+ */
+export function MenuLabel({ meta, children, ...props }: MenuLabelProps) {
   return (
-    <MenuLabelElement {...props}>
+    <BaseMenu.GroupLabel {...props} render={<MenuLabelElement />}>
       <MenuLabelTitle>{children}</MenuLabelTitle>
-      {inlineEndNode != null ? <MenuLabelMeta>{inlineEndNode}</MenuLabelMeta> : null}
-    </MenuLabelElement>
+      {meta != null ? <MenuLabelMeta>{meta}</MenuLabelMeta> : null}
+    </BaseMenu.GroupLabel>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-link-item.tsx b/packages/propel/src/components/menu/menu-link-item.tsx
index 573ffdf4..1ac298c5 100644
--- a/packages/propel/src/components/menu/menu-link-item.tsx
+++ b/packages/propel/src/components/menu/menu-link-item.tsx
@@ -1,41 +1,36 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import type * as React from "react";
 
 import {
   MenuItemContent,
-  MenuItemIcon,
   MenuItemTitle,
   MenuItemTitleRow,
   MenuItemTrailing,
   MenuLinkItem as MenuLinkItemElement,
-  type MenuLinkItemProps as MenuLinkItemElementProps,
-} from "../../ui/menu";
+} from "../../elements/menu";
+import { Icon } from "../../internal/icon";
 
-export type MenuLinkItemProps = MenuLinkItemElementProps & {
+export type MenuLinkItemProps = Omit<BaseMenu.LinkItem.Props, "className" | "style"> & {
   /** Leading content before the label. */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
   /** Trailing content after the label. */
-  inlineEndNode?: React.ReactNode;
+  trailing?: React.ReactNode;
 };
 
 /**
- * The ready-made navigational `<a>` menu row: composes the atomic `MenuLinkItem` and lays out
- * optional leading/trailing nodes and the label.
+ * The ready-made navigational `<a>` menu row: grafts Base UI's `Menu.LinkItem` behavior onto the
+ * styled `MenuLinkItem` and lays out optional leading/trailing nodes and the label.
  */
-export function MenuLinkItem({
-  inlineStartNode,
-  inlineEndNode,
-  children,
-  ...props
-}: MenuLinkItemProps) {
+export function MenuLinkItem({ icon, trailing, children, ...props }: MenuLinkItemProps) {
   return (
-    <MenuLinkItemElement {...props}>
-      {inlineStartNode != null ? <MenuItemIcon>{inlineStartNode}</MenuItemIcon> : null}
+    <BaseMenu.LinkItem {...props} render={<MenuLinkItemElement />}>
+      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
       <MenuItemContent>
         <MenuItemTitleRow>
           <MenuItemTitle>{children}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {inlineEndNode != null ? <MenuItemTrailing>{inlineEndNode}</MenuItemTrailing> : null}
-    </MenuLinkItemElement>
+      {trailing != null ? <MenuItemTrailing>{trailing}</MenuItemTrailing> : null}
+    </BaseMenu.LinkItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-radio-group.tsx b/packages/propel/src/components/menu/menu-radio-group.tsx
new file mode 100644
index 00000000..b3d34d99
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-radio-group.tsx
@@ -0,0 +1,8 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+export type MenuRadioGroupProps = Omit<BaseMenu.RadioGroup.Props, "className" | "style">;
+
+/** Wraps `MenuRadioItem`s sharing one `value` — Base UI's radio-group state, no element chrome. */
+export function MenuRadioGroup(props: MenuRadioGroupProps) {
+  return <BaseMenu.RadioGroup {...props} />;
+}
diff --git a/packages/propel/src/components/menu/menu-radio-item.tsx b/packages/propel/src/components/menu/menu-radio-item.tsx
new file mode 100644
index 00000000..57ee723d
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-radio-item.tsx
@@ -0,0 +1,47 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Circle } from "lucide-react";
+import type * as React from "react";
+
+import {
+  MenuItemContent,
+  MenuItemControl,
+  MenuItemMeta,
+  MenuItemTitle,
+  MenuItemTitleRow,
+  MenuRadioItem as MenuRadioItemElement,
+  MenuRadioItemIndicator,
+} from "../../elements/menu";
+import { Icon } from "../../internal/icon";
+
+export type MenuRadioItemProps = Omit<BaseMenu.RadioItem.Props, "className" | "style"> & {
+  /** Leading content shown after the radio dot. */
+  icon?: React.ReactNode;
+  /** Trailing content. */
+  trailing?: React.ReactNode;
+};
+
+/**
+ * The ready-made single-select menu row: grafts Base UI's `Menu.RadioItem` behavior onto the styled
+ * `MenuRadioItem` and lays out the radio dot (a kept-mounted `Menu.RadioItemIndicator` grafted onto
+ * `MenuRadioItemIndicator`), optional leading/trailing nodes, and the label. Wrap rows in a
+ * `MenuRadioGroup` carrying `value`/`onValueChange`; the dot reads the selected state from
+ * context.
+ */
+export function MenuRadioItem({ icon, trailing, children, ...props }: MenuRadioItemProps) {
+  return (
+    <BaseMenu.RadioItem {...props} render={<MenuRadioItemElement />}>
+      <MenuItemControl>
+        <BaseMenu.RadioItemIndicator keepMounted render={<MenuRadioItemIndicator />}>
+          <Circle aria-hidden />
+        </BaseMenu.RadioItemIndicator>
+      </MenuItemControl>
+      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
+      <MenuItemContent>
+        <MenuItemTitleRow>
+          <MenuItemTitle>{children}</MenuItemTitle>
+        </MenuItemTitleRow>
+      </MenuItemContent>
+      {trailing != null ? <MenuItemMeta>{trailing}</MenuItemMeta> : null}
+    </BaseMenu.RadioItem>
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-search.tsx b/packages/propel/src/components/menu/menu-search.tsx
index 6145deab..25b4b853 100644
--- a/packages/propel/src/components/menu/menu-search.tsx
+++ b/packages/propel/src/components/menu/menu-search.tsx
@@ -1,7 +1,8 @@
 import { Search } from "lucide-react";
 import type * as React from "react";
 
-import { MenuSearch as MenuSearchElement, MenuSearchIcon, MenuSearchInput } from "../../ui/menu";
+import { MenuSearch as MenuSearchElement, MenuSearchInput } from "../../elements/menu";
+import { Icon } from "../../internal/icon";
 
 export type MenuSearchProps = Omit<
   React.ComponentPropsWithoutRef<"input">,
@@ -15,17 +16,30 @@ export type MenuSearchProps = Omit<
   placeholder?: string;
 };
 
-/** A sticky search input pinned above a `MenuContent` menu popup. */
-export function MenuSearch({ value, onValueChange, placeholder, ...props }: MenuSearchProps) {
+/**
+ * A sticky search input pinned above a `MenuContent` menu popup. Stops keydown from bubbling so
+ * typing does not trigger the menu's own type-ahead navigation (behavior owned by `components`).
+ */
+export function MenuSearch({
+  value,
+  onValueChange,
+  placeholder,
+  onKeyDown,
+  ...props
+}: MenuSearchProps) {
   return (
     <MenuSearchElement>
-      <MenuSearchIcon>
+      <Icon tint="tertiary" magnitude="md">
         <Search />
-      </MenuSearchIcon>
+      </Icon>
       <MenuSearchInput
         type="text"
         value={value}
         onChange={(event) => onValueChange?.(event.target.value)}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          onKeyDown?.(event);
+        }}
         placeholder={placeholder}
         {...props}
       />
diff --git a/packages/propel/src/components/menu/menu-separator.tsx b/packages/propel/src/components/menu/menu-separator.tsx
new file mode 100644
index 00000000..f4b914f6
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-separator.tsx
@@ -0,0 +1,13 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+import { MenuSeparator as MenuSeparatorElement } from "../../elements/menu";
+
+export type MenuSeparatorProps = Omit<BaseMenu.Separator.Props, "className" | "style">;
+
+/**
+ * Ready-made divider between groups of menu items: grafts Base UI's `Menu.Separator` behavior
+ * (`role="separator"`) onto the styled `MenuSeparator` element.
+ */
+export function MenuSeparator(props: MenuSeparatorProps) {
+  return <BaseMenu.Separator {...props} render={<MenuSeparatorElement />} />;
+}
diff --git a/packages/propel/src/components/menu/menu-submenu-trigger.tsx b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
index 9e214293..985e1126 100644
--- a/packages/propel/src/components/menu/menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
@@ -1,46 +1,47 @@
-import { ChevronRight } from "lucide-react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
 import {
   MenuItemContent,
-  MenuItemIcon,
-  MenuItemSubmenuIndicator,
   MenuItemTitle,
   MenuItemTitleRow,
   MenuItemTrailing,
   MenuSubmenuTrigger as MenuSubmenuTriggerElement,
-  type MenuSubmenuTriggerProps as MenuSubmenuTriggerElementProps,
-} from "../../ui/menu";
+} from "../../elements/menu";
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
 
-export type MenuSubmenuTriggerProps = MenuSubmenuTriggerElementProps & {
+export type MenuSubmenuTriggerProps = Omit<BaseMenu.SubmenuTrigger.Props, "className" | "style"> & {
   /** Leading content before the label. */
-  inlineStartNode?: React.ReactNode;
+  icon?: React.ReactNode;
   /** Trailing content before the chevron. */
-  inlineEndNode?: React.ReactNode;
+  trailing?: React.ReactNode;
 };
 
 /**
- * The ready-made submenu trigger row: composes the atomic `MenuSubmenuTrigger` and lays out
- * optional leading/trailing nodes, the label, and the submenu chevron indicator.
+ * The ready-made submenu trigger row: grafts Base UI's `Menu.SubmenuTrigger` behavior onto the
+ * styled `MenuSubmenuTrigger` and lays out optional leading/trailing nodes, the label, and the
+ * submenu chevron indicator.
  */
 export function MenuSubmenuTrigger({
-  inlineStartNode,
-  inlineEndNode,
+  icon,
+  trailing,
   children,
   ...props
 }: MenuSubmenuTriggerProps) {
   return (
-    <MenuSubmenuTriggerElement {...props}>
-      {inlineStartNode != null ? <MenuItemIcon>{inlineStartNode}</MenuItemIcon> : null}
+    <BaseMenu.SubmenuTrigger {...props} render={<MenuSubmenuTriggerElement />}>
+      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
       <MenuItemContent>
         <MenuItemTitleRow>
           <MenuItemTitle>{children}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {inlineEndNode != null ? <MenuItemTrailing>{inlineEndNode}</MenuItemTrailing> : null}
-      <MenuItemSubmenuIndicator>
-        <ChevronRight />
-      </MenuItemSubmenuIndicator>
-    </MenuSubmenuTriggerElement>
+      {trailing != null ? <MenuItemTrailing>{trailing}</MenuItemTrailing> : null}
+      <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+        <ChevronDown />
+      </DisclosureIndicator>
+    </BaseMenu.SubmenuTrigger>
   );
 }
diff --git a/packages/propel/src/ui/menu/menu-submenu.tsx b/packages/propel/src/components/menu/menu-submenu.tsx
similarity index 81%
rename from packages/propel/src/ui/menu/menu-submenu.tsx
rename to packages/propel/src/components/menu/menu-submenu.tsx
index 8aa5d304..4e43ac6c 100644
--- a/packages/propel/src/ui/menu/menu-submenu.tsx
+++ b/packages/propel/src/components/menu/menu-submenu.tsx
@@ -17,6 +17,10 @@ export type MenuSubmenuProps = Omit<
   children?: React.ReactNode;
 };
 
+/**
+ * The submenu Root — Base UI's `SubmenuRoot` context/state provider (renders no element of its
+ * own). A behavior-only role, so it lives in `components` (rules 1a, 2).
+ */
 export function MenuSubmenu(props: MenuSubmenuProps) {
   return <BaseMenu.SubmenuRoot {...props} />;
 }
diff --git a/packages/propel/src/components/menu/menu-trigger.tsx b/packages/propel/src/components/menu/menu-trigger.tsx
new file mode 100644
index 00000000..92629a5f
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-trigger.tsx
@@ -0,0 +1,16 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+export type MenuTriggerProps<Payload = unknown> = Omit<
+  BaseMenu.Trigger.Props<Payload>,
+  "className" | "style"
+>;
+
+/**
+ * The button that opens the menu — Base UI's `Menu.Trigger` passthrough. Propel ships no menu
+ * trigger chrome (any control can open a menu), so graft the behavior onto the control you already
+ * have via `render` (`<MenuTrigger render={<Button …/>}>`); Base UI contributes the open/close
+ * behavior, ARIA wiring, and `data-*` state.
+ */
+export function MenuTrigger<Payload = unknown>(props: MenuTriggerProps<Payload>) {
+  return <BaseMenu.Trigger {...props} />;
+}
diff --git a/packages/propel/src/components/menu/menu-viewport.tsx b/packages/propel/src/components/menu/menu-viewport.tsx
new file mode 100644
index 00000000..f41a05a4
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-viewport.tsx
@@ -0,0 +1,13 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+import { PopupViewport } from "../../internal/popup-viewport";
+
+export type MenuViewportProps = Omit<BaseMenu.Viewport.Props, "className" | "style" | "render">;
+
+/**
+ * The content-morph container for animated menus — Base UI's `Menu.Viewport` grafted onto the
+ * shared relative viewport, so swapping popup content (e.g. drill-in panels) can transition sizes.
+ */
+export function MenuViewport(props: MenuViewportProps) {
+  return <BaseMenu.Viewport {...props} render={<PopupViewport />} />;
+}
diff --git a/packages/propel/src/components/menu/menu.stories.tsx b/packages/propel/src/components/menu/menu.stories.tsx
index 01424d1b..add803bc 100644
--- a/packages/propel/src/components/menu/menu.stories.tsx
+++ b/packages/propel/src/components/menu/menu.stories.tsx
@@ -25,6 +25,7 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Avatar } from "../avatar/index";
 import { Badge } from "../badge/index";
 import {
+  createMenuHandle,
   Menu,
   MenuCheckboxItem,
   MenuContent,
@@ -38,6 +39,9 @@ import {
   MenuSubmenuContent,
   MenuSubmenuTrigger,
   MenuTrigger,
+  MenuViewport,
+  MenuRadioGroup,
+  MenuRadioItem,
 } from "./index";
 
 const meta = {
@@ -65,6 +69,7 @@ const meta = {
     MenuSubmenu,
     MenuSubmenuTrigger,
     MenuSubmenuContent,
+    MenuViewport,
   },
 } satisfies Meta<typeof Menu>;
 
@@ -209,13 +214,13 @@ export const Status: Story = {
           {STATUSES.find((s) => s.key === selected)?.label ?? "Status"}
         </MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.map((s) => (
             <MenuItem
               key={s.key}
-              inlineStartNode={s.icon}
+              icon={s.icon}
               selected={selected === s.key}
               closeOnClick={false}
               onClick={() => setSelected(s.key)}
@@ -263,7 +268,7 @@ export const Labels: Story = {
       <Menu>
         <MenuTrigger render={<button type="button" className={triggerClass} />}>Labels</MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {canAdd ? (
@@ -271,14 +276,14 @@ export const Labels: Story = {
             // (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.
             <MenuItem
-              inlineStartNode={<Plus className="text-icon-secondary" />}
+              icon={<Plus className="text-icon-secondary" />}
               closeOnClick={false}
             >{`Add label "${trimmed}"`}</MenuItem>
           ) : null}
           {visible.map((l) => (
             <MenuCheckboxItem
               key={l.key}
-              inlineStartNode={<ColorSwatch className={l.color} />}
+              icon={<ColorSwatch className={l.color} />}
               checked={Boolean(checked[l.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [l.key]: next }))}
             >
@@ -322,26 +327,23 @@ export const ActionMenu: Story = {
   render: () => (
     <Menu>
       <MenuTrigger render={<button type="button" className={triggerClass} />}>Actions</MenuTrigger>
-      <MenuContent width="sm">
-        <MenuItem inlineStartNode={<Pencil />}>Edit</MenuItem>
-        <MenuItem inlineStartNode={<Copy />}>Make a copy</MenuItem>
-        <MenuItem inlineStartNode={<ExternalLink />}>Open in new tab</MenuItem>
-        <MenuItem
-          inlineStartNode={<Link2 />}
-          inlineEndNode={<span className="text-12 text-tertiary">⌘L</span>}
-        >
+      <MenuContent sizing="sm">
+        <MenuItem icon={<Pencil />}>Edit</MenuItem>
+        <MenuItem icon={<Copy />}>Make a copy</MenuItem>
+        <MenuItem icon={<ExternalLink />}>Open in new tab</MenuItem>
+        <MenuItem icon={<Link2 />} trailing={<span className="text-12 text-tertiary">⌘L</span>}>
           Copy link
         </MenuItem>
         <MenuSeparator />
         <MenuItem
-          inlineStartNode={<Trash2 />}
+          icon={<Trash2 />}
           description="Only completed or cancelled work items can be archived"
           disabled
         >
           Archive
         </MenuItem>
         <MenuSeparator />
-        <MenuItem inlineStartNode={<Trash2 className="text-danger-primary" />}>
+        <MenuItem icon={<Trash2 className="text-danger-primary" />}>
           {<span className="text-danger-primary">Delete</span>}
         </MenuItem>
       </MenuContent>
@@ -411,9 +413,9 @@ export const Description: Story = {
         <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Visibility
         </MenuTrigger>
-        <MenuContent width="lg">
+        <MenuContent sizing="lg">
           <MenuItem
-            inlineStartNode={<Lock />}
+            icon={<Lock />}
             description="Accessible only by invite"
             selected={selected === "private"}
             closeOnClick={false}
@@ -422,7 +424,7 @@ export const Description: Story = {
             Private
           </MenuItem>
           <MenuItem
-            inlineStartNode={<Globe />}
+            icon={<Globe />}
             description="Anyone in the workspace except Guests can join"
             selected={selected === "public"}
             closeOnClick={false}
@@ -462,9 +464,9 @@ export const LabelAndFooterSemantics: Story = {
       <MenuTrigger render={<button type="button" className={triggerClass} />}>
         Grouped menu
       </MenuTrigger>
-      <MenuContent width="sm" footer={<MenuFooter>Type to add another item.</MenuFooter>}>
+      <MenuContent sizing="sm" footer={<MenuFooter>Type to add another item.</MenuFooter>}>
         <MenuGroup>
-          <MenuLabel inlineEndNode={<span>3</span>}>Section</MenuLabel>
+          <MenuLabel meta={<span>3</span>}>Section</MenuLabel>
           <MenuItem>First item</MenuItem>
         </MenuGroup>
       </MenuContent>
@@ -494,13 +496,13 @@ export const Assignees: Story = {
           Assignees
         </MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.map((a) => (
             <MenuCheckboxItem
               key={a.key}
-              inlineStartNode={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
+              icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
               checked={Boolean(checked[a.key])}
               disabled={a.disabled}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [a.key]: next }))}
@@ -550,7 +552,7 @@ export const LanguagePicker: Story = {
           {LANGUAGES.find((l) => l.key === selected)?.label ?? "Language"}
         </MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.map((l) => (
@@ -604,13 +606,13 @@ export const Priority: Story = {
           Priority
         </MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.map((p) => (
             <MenuCheckboxItem
               key={p.key}
-              inlineStartNode={p.icon}
+              icon={p.icon}
               checked={Boolean(checked[p.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
             >
@@ -657,11 +659,11 @@ export const CheckedFillVisible: Story = {
         <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Priority
         </MenuTrigger>
-        <MenuContent width="sm">
+        <MenuContent sizing="sm">
           {PRIORITIES.map((p) => (
             <MenuCheckboxItem
               key={p.key}
-              inlineStartNode={p.icon}
+              icon={p.icon}
               checked={Boolean(checked[p.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
             >
@@ -751,7 +753,7 @@ export const Filters: Story = {
           Filters
         </MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {sections.map((section, index) => {
@@ -772,10 +774,10 @@ export const Filters: Story = {
                   {/* 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. */}
+                      trailing. */}
                   <MenuItem
                     aria-expanded={!isCollapsed}
-                    inlineEndNode={
+                    trailing={
                       isCollapsed ? (
                         <ChevronRight aria-hidden="true" />
                       ) : (
@@ -791,7 +793,7 @@ export const Filters: Story = {
                     ? visibleItems.map((i) => (
                         <MenuCheckboxItem
                           key={i.key}
-                          inlineStartNode={i.icon}
+                          icon={i.icon}
                           checked={Boolean(checked[i.key])}
                           onCheckedChange={toggle(i.key)}
                         >
@@ -895,12 +897,12 @@ export const EmptyState: Story = {
       <Menu defaultOpen>
         <MenuTrigger render={<button type="button" className={triggerClass} />}>Status</MenuTrigger>
         <MenuContent
-          width="sm"
+          sizing="sm"
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.length > 0 ? (
             visible.map((s) => (
-              <MenuItem key={s.key} inlineStartNode={s.icon}>
+              <MenuItem key={s.key} icon={s.icon}>
                 {s.label}
               </MenuItem>
             ))
@@ -956,10 +958,10 @@ export const Submenu: Story = {
       <MenuTrigger render={<button type="button" className={triggerClass} />}>
         Filter by
       </MenuTrigger>
-      <MenuContent width="sm">
+      <MenuContent sizing="sm">
         <MenuSubmenu>
           <MenuSubmenuTrigger
-            inlineEndNode={
+            trailing={
               <Badge magnitude="sm" tone="neutral">
                 5
               </Badge>
@@ -967,9 +969,9 @@ export const Submenu: Story = {
           >
             Priority
           </MenuSubmenuTrigger>
-          <MenuSubmenuContent width="sm">
+          <MenuSubmenuContent sizing="sm">
             {PRIORITIES.map((p) => (
-              <MenuItem key={p.key} inlineStartNode={p.icon} closeOnClick={false}>
+              <MenuItem key={p.key} icon={p.icon} closeOnClick={false}>
                 {p.label}
               </MenuItem>
             ))}
@@ -977,7 +979,7 @@ export const Submenu: Story = {
         </MenuSubmenu>
         <MenuSubmenu>
           <MenuSubmenuTrigger
-            inlineEndNode={
+            trailing={
               <Badge magnitude="sm" tone="neutral">
                 5
               </Badge>
@@ -985,9 +987,9 @@ export const Submenu: Story = {
           >
             State
           </MenuSubmenuTrigger>
-          <MenuSubmenuContent width="sm">
+          <MenuSubmenuContent sizing="sm">
             {STATUSES.map((s) => (
-              <MenuItem key={s.key} inlineStartNode={s.icon} closeOnClick={false}>
+              <MenuItem key={s.key} icon={s.icon} closeOnClick={false}>
                 {s.label}
               </MenuItem>
             ))}
@@ -995,7 +997,7 @@ export const Submenu: Story = {
         </MenuSubmenu>
         <MenuSubmenu>
           <MenuSubmenuTrigger
-            inlineEndNode={
+            trailing={
               <Badge magnitude="sm" tone="neutral">
                 5
               </Badge>
@@ -1003,13 +1005,11 @@ export const Submenu: Story = {
           >
             Assignee
           </MenuSubmenuTrigger>
-          <MenuSubmenuContent width="sm">
+          <MenuSubmenuContent sizing="sm">
             {ASSIGNEES.map((a) => (
               <MenuItem
                 key={a.key}
-                inlineStartNode={
-                  <Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />
-                }
+                icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
                 closeOnClick={false}
               >
                 {a.name}
@@ -1038,3 +1038,357 @@ export const SubmenuInteraction: Story = {
     });
   },
 };
+
+/**
+ * **OpenOnHover**. The trigger's `openOnHover` prop (with an optional hover `delay`) opens the menu
+ * from pointer hover as well as click/keyboard — for browse-style menus such as a quick-add.
+ */
+export const OpenOnHover: Story = {
+  parameters: {
+    a11y: {
+      // While the hover-opened popup is up, axe flags Base UI's focus guards (aria-hidden spans
+      // with tabindex=0 — floating-ui's standard focus-trap sentinels) as aria-hidden-focus
+      // violations. Intentional library markup, so suppress just this rule (same precedent as
+      // the menubar's aria-required-children suppression).
+      config: { rules: [{ id: "aria-hidden-focus", enabled: false }] },
+    },
+  },
+  render: () => (
+    <Menu>
+      <MenuTrigger
+        openOnHover
+        delay={100}
+        render={<button type="button" className={triggerClass} />}
+      >
+        Quick add
+      </MenuTrigger>
+      <MenuContent sizing="sm">
+        <MenuItem>Work item</MenuItem>
+        <MenuItem>Page</MenuItem>
+        <MenuItem>Cycle</MenuItem>
+        <MenuItem>Module</MenuItem>
+      </MenuContent>
+    </Menu>
+  ),
+};
+
+export const OpenOnHoverInteraction: Story = {
+  ...OpenOnHover,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("hovering the trigger opens the menu", async () => {
+      await userEvent.hover(canvas.getByRole("button", { name: "Quick add" }));
+      await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+      await waitFor(() => expect(findItem("menuitem", "Page")).toBeDefined());
+    });
+  },
+};
+
+/**
+ * **GroupLabels**. `MenuGroup` + `MenuLabel` title related items as non-interactive section
+ * headings (each group is labelled by its heading for assistive tech); a `MenuSeparator` divides
+ * the sections.
+ */
+export const GroupLabels: Story = {
+  render: function Render() {
+    const [sort, setSort] = React.useState("date");
+    const [workspace, setWorkspace] = React.useState<Record<string, boolean>>({ sidebar: true });
+    const sorts = [
+      { key: "date", label: "Date created" },
+      { key: "name", label: "Name" },
+      { key: "type", label: "Type" },
+    ];
+    const panels = [
+      { key: "minimap", label: "Minimap" },
+      { key: "search", label: "Search" },
+      { key: "sidebar", label: "Sidebar" },
+    ];
+    return (
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>View</MenuTrigger>
+        <MenuContent sizing="sm">
+          <MenuGroup>
+            <MenuLabel>Sort</MenuLabel>
+            {sorts.map((s) => (
+              <MenuItem
+                key={s.key}
+                selected={sort === s.key}
+                closeOnClick={false}
+                onClick={() => setSort(s.key)}
+              >
+                {s.label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuSeparator />
+          <MenuGroup>
+            <MenuLabel>Workspace</MenuLabel>
+            {panels.map((p) => (
+              <MenuCheckboxItem
+                key={p.key}
+                checked={Boolean(workspace[p.key])}
+                onCheckedChange={(next) => setWorkspace((w) => ({ ...w, [p.key]: next }))}
+              >
+                {p.label}
+              </MenuCheckboxItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </Menu>
+    );
+  },
+};
+
+export const GroupLabelsInteraction: Story = {
+  ...GroupLabels,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("each group is labelled by its heading", async () => {
+      await openMenu(canvas, "View");
+      const groups = await waitFor(() => {
+        const found = Array.from(document.body.querySelectorAll('[role="group"]'));
+        if (found.length < 2) throw new Error("groups not mounted yet");
+        return found;
+      });
+      const headings = groups.map((group) => {
+        const labelId = group.getAttribute("aria-labelledby");
+        return labelId != null ? document.getElementById(labelId)?.textContent : null;
+      });
+      await expect(headings).toContain("Sort");
+      await expect(headings).toContain("Workspace");
+    });
+  },
+};
+
+// A handle created outside the React tree links a detached `MenuTrigger` to its `Menu` — the
+// trigger can live anywhere in the DOM, no shared ancestor required.
+const workItemActionsHandle = createMenuHandle();
+
+/**
+ * **DetachedTrigger**. `createMenuHandle` detaches the trigger from the menu tree: pass the same
+ * handle to a `MenuTrigger` and to a `Menu` declared elsewhere, and the trigger drives it as if
+ * they were nested.
+ */
+export const DetachedTrigger: Story = {
+  render: () => (
+    <>
+      <MenuTrigger
+        handle={workItemActionsHandle}
+        render={<button type="button" className={triggerClass} />}
+      >
+        Work item actions
+      </MenuTrigger>
+      <Menu handle={workItemActionsHandle}>
+        <MenuContent sizing="sm">
+          <MenuItem icon={<Pencil />}>Edit</MenuItem>
+          <MenuItem icon={<Copy />}>Make a copy</MenuItem>
+          <MenuSeparator />
+          <MenuItem icon={<Trash2 className="text-danger-primary" />}>
+            {<span className="text-danger-primary">Delete</span>}
+          </MenuItem>
+        </MenuContent>
+      </Menu>
+    </>
+  ),
+};
+
+export const DetachedTriggerInteraction: Story = {
+  ...DetachedTrigger,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("the detached trigger opens the handle's menu", async () => {
+      await openMenu(canvas, "Work item actions");
+      await waitFor(() => expect(findItem("menuitem", "Edit")).toBeDefined());
+    });
+    await step("Escape closes it again", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(document.body.querySelector('[role="menu"]')).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+// One shared handle: several triggers open the same menu surface, each passing its own typed
+// payload; the `Menu`'s function-children receive the active trigger's payload.
+const commandMenuHandle = createMenuHandle<ReadonlyArray<string>>();
+
+const COMMAND_SECTIONS = {
+  file: ["New work item", "New page", "Import"],
+  edit: ["Undo", "Redo", "Duplicate"],
+} as const;
+
+/**
+ * **MultipleTriggers**. Several `MenuTrigger`s share one `Menu` through a typed handle; each
+ * trigger passes a `payload`, and the menu's function-children render whichever trigger opened it.
+ * `MenuViewport` lets the popup morph its size when the payload swaps while open.
+ */
+export const MultipleTriggers: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <MenuTrigger
+        handle={commandMenuHandle}
+        payload={COMMAND_SECTIONS.file}
+        render={<button type="button" className={triggerClass} />}
+      >
+        File
+      </MenuTrigger>
+      <MenuTrigger
+        handle={commandMenuHandle}
+        payload={COMMAND_SECTIONS.edit}
+        render={<button type="button" className={triggerClass} />}
+      >
+        Edit
+      </MenuTrigger>
+      <Menu handle={commandMenuHandle}>
+        {({ payload }) => (
+          <MenuContent sizing="sm">
+            <MenuViewport>
+              {(payload ?? []).map((command) => (
+                <MenuItem key={command}>{command}</MenuItem>
+              ))}
+            </MenuViewport>
+          </MenuContent>
+        )}
+      </Menu>
+    </div>
+  ),
+};
+
+export const MultipleTriggersInteraction: Story = {
+  ...MultipleTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("the File trigger opens the menu with its payload", async () => {
+      await openMenu(canvas, "File");
+      await waitFor(() => expect(findItem("menuitem", "New work item")).toBeDefined());
+      await expect(findItem("menuitem", "Undo")).toBeUndefined();
+    });
+    await step("the Edit trigger swaps the payload", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(document.body.querySelector('[role="menu"]')).not.toBeInTheDocument(),
+      );
+      await openMenu(canvas, "Edit");
+      await waitFor(() => expect(findItem("menuitem", "Undo")).toBeDefined());
+      await expect(findItem("menuitem", "New work item")).toBeUndefined();
+    });
+  },
+};
+
+// Controlled mode across multiple detached triggers (test-only fixture — the visible payload demo
+// is `MultipleTriggers`): `open` + `onOpenChange` hold the state outside the menu, and `triggerId`
+// tells it which trigger owns the surface; `eventDetails.trigger` identifies the trigger that
+// asked to open.
+const controlledMenuHandle = createMenuHandle<string>();
+
+/**
+ * Controlled `open`/`onOpenChange` with `triggerId` routing across multiple triggers. Not a
+ * documented demo; this is a test-only fixture.
+ */
+export const ControlledMultipleTriggers: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+    const [activeTriggerId, setActiveTriggerId] = React.useState<string | null>(null);
+    return (
+      <div className="flex items-center gap-2">
+        <MenuTrigger
+          handle={controlledMenuHandle}
+          id="controlled-menu-file"
+          payload="File"
+          render={<button type="button" className={triggerClass} />}
+        >
+          File
+        </MenuTrigger>
+        <MenuTrigger
+          handle={controlledMenuHandle}
+          id="controlled-menu-edit"
+          payload="Edit"
+          render={<button type="button" className={triggerClass} />}
+        >
+          Edit
+        </MenuTrigger>
+        <Menu
+          handle={controlledMenuHandle}
+          open={open}
+          triggerId={activeTriggerId}
+          onOpenChange={(nextOpen, eventDetails) => {
+            setOpen(nextOpen);
+            setActiveTriggerId(nextOpen ? (eventDetails.trigger?.id ?? null) : null);
+          }}
+        >
+          {({ payload }) => (
+            <MenuContent sizing="sm">
+              <MenuItem>{`${payload ?? ""} action`}</MenuItem>
+            </MenuContent>
+          )}
+        </Menu>
+      </div>
+    );
+  },
+  play: async ({ canvas, step }) => {
+    await step("clicking a trigger routes controlled open state through it", async () => {
+      await openMenu(canvas, "Edit");
+      // The handle routes the pressed trigger's payload into the popup — the menu shows the
+      // Edit actions, not the File ones.
+      await waitFor(() => expect(findItem("menuitem", "Edit action")).toBeDefined());
+      await expect(findItem("menuitem", "File action")).toBeUndefined();
+    });
+    await step("Escape closes through onOpenChange", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(document.body.querySelector('[role="menu"]')).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+/**
+ * Single-select radio rows: `MenuRadioGroup` carries the `value`, and each `MenuRadioItem` shows a
+ * kept-mounted radio dot that follows the selection.
+ */
+export const RadioRows: Story = {
+  render: function Render(args) {
+    const [density, setDensity] = React.useState("comfortable");
+    void args;
+    return (
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
+          Density
+        </MenuTrigger>
+        <MenuContent sizing="sm">
+          <MenuRadioGroup value={density} onValueChange={setDensity}>
+            <MenuRadioItem value="comfortable" closeOnClick={false}>
+              Comfortable
+            </MenuRadioItem>
+            <MenuRadioItem value="compact" closeOnClick={false}>
+              Compact
+            </MenuRadioItem>
+          </MenuRadioGroup>
+        </MenuContent>
+      </Menu>
+    );
+  },
+};
+
+/**
+ * Interaction test: rows expose `menuitemradio`, and picking one moves `aria-checked`. Tagged out
+ * of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const RadioRowsInteraction: Story = {
+  ...RadioRows,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await openMenu(canvas, "Density");
+    const comfortable = await within(document.body).findByRole("menuitemradio", {
+      name: "Comfortable",
+    });
+    await expect(comfortable).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(within(document.body).getByRole("menuitemradio", { name: "Compact" }));
+    await expect(
+      within(document.body).getByRole("menuitemradio", { name: "Compact" }),
+    ).toHaveAttribute("aria-checked", "true");
+    await expect(comfortable).toHaveAttribute("aria-checked", "false");
+  },
+};
diff --git a/packages/propel/src/ui/menu/menu.tsx b/packages/propel/src/components/menu/menu.tsx
similarity index 78%
rename from packages/propel/src/ui/menu/menu.tsx
rename to packages/propel/src/components/menu/menu.tsx
index bf7e7e40..ccef4ce4 100644
--- a/packages/propel/src/ui/menu/menu.tsx
+++ b/packages/propel/src/components/menu/menu.tsx
@@ -17,6 +17,11 @@ export type MenuProps<Payload = unknown> = Omit<
   children?: MenuRoot.Props<Payload>["children"];
 };
 
+/**
+ * The menu Root — Base UI's context/state provider (renders no element of its own). A behavior-only
+ * role, so it lives in `components` (rules 1a, 2); the styled parts live in `elements/menu` and are
+ * grafted onto Base UI behavior here.
+ */
 export function Menu<Payload = unknown>(props: MenuProps<Payload>) {
   return <BaseMenu.Root {...props} />;
 }
diff --git a/packages/propel/src/components/menubar/index.tsx b/packages/propel/src/components/menubar/index.tsx
index 58028748..f1ac8424 100644
--- a/packages/propel/src/components/menubar/index.tsx
+++ b/packages/propel/src/components/menubar/index.tsx
@@ -1,3 +1,7 @@
-// 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";
+export * from "./menubar";
+export * from "./menubar-trigger";
+// Re-export propel's STYLED menubar trigger slot parts so a full menu bar can be assembled from
+// one entry. The ready-made `MenubarTrigger` above replaces the same-named elements element (its
+// `Menu.Trigger` behavior is already grafted); the slot parts carry no behavior of their own and
+// compose as the trigger's children.
+export { MenubarTriggerLabel, type MenubarTriggerLabelProps } from "../../elements/menubar";
diff --git a/packages/propel/src/components/menubar/menubar-trigger.tsx b/packages/propel/src/components/menubar/menubar-trigger.tsx
new file mode 100644
index 00000000..51ef97c8
--- /dev/null
+++ b/packages/propel/src/components/menubar/menubar-trigger.tsx
@@ -0,0 +1,15 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+import { MenubarTrigger as MenubarTriggerElement } from "../../elements/menubar";
+
+export type MenubarTriggerProps = Omit<BaseMenu.Trigger.Props, "className" | "style">;
+
+/**
+ * The ready-made top-level menubar trigger: grafts Base UI's `Menu.Trigger` disclosure behavior
+ * onto the styled `MenubarTrigger` (behavior part outer, styled part as the render target). Place
+ * it inside a `Menu` root within a `Menubar`, composing its anatomy — an optional leading
+ * `MenubarTriggerIcon` and a `MenubarTriggerLabel` — as children.
+ */
+export function MenubarTrigger(props: MenubarTriggerProps) {
+  return <BaseMenu.Trigger {...props} render={<MenubarTriggerElement />} />;
+}
diff --git a/packages/propel/src/components/menubar/menubar.stories.tsx b/packages/propel/src/components/menubar/menubar.stories.tsx
index 4aebb5f7..a6a8ade1 100644
--- a/packages/propel/src/components/menubar/menubar.stories.tsx
+++ b/packages/propel/src/components/menubar/menubar.stories.tsx
@@ -1,36 +1,53 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   Copy,
+  FileOutput,
   FilePlus,
   FilePen,
   FolderOpen,
+  LayoutGrid,
   Pencil,
+  Printer,
   Redo2,
   Save,
   Scissors,
   Undo2,
+  ZoomIn,
+  ZoomOut,
 } from "lucide-react";
-import { expect, userEvent, waitFor } from "storybook/test";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Menu, MenuContent, MenuItem, MenuSeparator } from "../menu/index";
-import { Menubar, MenubarTrigger, MenubarTriggerIcon, MenubarTriggerLabel } from "./index";
+import { Icon } from "../../internal/icon";
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuSeparator,
+  MenuSubmenu,
+  MenuSubmenuContent,
+  MenuSubmenuTrigger,
+} from "../menu/index";
+import { Menubar, MenubarTrigger, MenubarTriggerLabel } 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). Each trigger composes its anatomy — a leading `MenubarTriggerIcon`
-// (the designer's "whether items have icons" axis) and a `MenubarTriggerLabel`. The
-// UI-tier story assembles the popup parts by hand.
+// using the ready-made `MenubarTrigger` (Base UI's `Menu.Trigger` behavior already
+// grafted) plus the `MenuContent` surface and the rich `MenuItem` rows (icon + label).
+// Each trigger composes its anatomy — a leading `MenubarTriggerIcon` (the designer's
+// "whether items have icons" axis) and a `MenubarTriggerLabel`. The elements-tier
+// story assembles the popup parts by hand.
 const meta = {
   title: "Components/Menubar",
   component: Menubar,
   subcomponents: {
     MenubarTrigger,
-    MenubarTriggerIcon,
     MenubarTriggerLabel,
     Menu,
     MenuContent,
     MenuItem,
+    MenuSeparator,
+    MenuSubmenu,
+    MenuSubmenuTrigger,
+    MenuSubmenuContent,
   },
 } satisfies Meta<typeof Menubar>;
 
@@ -53,36 +70,45 @@ export const Default: Story = {
   render: () => (
     <Menubar>
       <Menu>
-        <MenubarTrigger render={<BaseMenu.Trigger />}>
-          <MenubarTriggerIcon>
+        <MenubarTrigger>
+          <Icon tint="secondary">
             <FilePen />
-          </MenubarTriggerIcon>
+          </Icon>
           <MenubarTriggerLabel>File</MenubarTriggerLabel>
         </MenubarTrigger>
-        <MenuContent width="sm">
-          <MenuItem inlineStartNode={<FilePlus />}>New file</MenuItem>
-          <MenuItem inlineStartNode={<FolderOpen />}>Open…</MenuItem>
+        <MenuContent sizing="sm">
+          <MenuItem icon={<FilePlus />}>New file</MenuItem>
+          <MenuItem icon={<FolderOpen />}>Open…</MenuItem>
           <MenuSeparator />
-          <MenuItem inlineStartNode={<Save />}>Save</MenuItem>
+          <MenuItem icon={<Save />}>Save</MenuItem>
         </MenuContent>
       </Menu>
       <Menu>
-        <MenubarTrigger render={<BaseMenu.Trigger />}>
-          <MenubarTriggerIcon>
+        <MenubarTrigger>
+          <Icon tint="secondary">
             <Pencil />
-          </MenubarTriggerIcon>
+          </Icon>
           <MenubarTriggerLabel>Edit</MenubarTriggerLabel>
         </MenubarTrigger>
-        <MenuContent width="sm">
-          <MenuItem inlineStartNode={<Undo2 />}>Undo</MenuItem>
-          <MenuItem inlineStartNode={<Redo2 />}>Redo</MenuItem>
+        <MenuContent sizing="sm">
+          <MenuItem icon={<Undo2 />}>Undo</MenuItem>
+          <MenuItem icon={<Redo2 />}>Redo</MenuItem>
           <MenuSeparator />
-          <MenuItem inlineStartNode={<Scissors />}>Cut</MenuItem>
-          <MenuItem inlineStartNode={<Copy />}>Copy</MenuItem>
+          <MenuItem icon={<Scissors />}>Cut</MenuItem>
+          <MenuItem icon={<Copy />}>Copy</MenuItem>
         </MenuContent>
       </Menu>
     </Menubar>
   ),
+};
+
+/**
+ * Interaction test: a menubar trigger is a `role="menuitem"` and clicking it opens its menu. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const DefaultInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
   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" }));
@@ -91,3 +117,140 @@ export const Default: Story = {
     await expect(document.body).toHaveTextContent("Redo");
   },
 };
+
+/**
+ * A menubar menu nests submenus like a document editor's: the File menu's Export row and the View
+ * menu's Layout row (built on `MenuSubmenu`) each open a nested `MenuSubmenuContent` of options.
+ */
+export const Submenu: Story = {
+  parameters: {
+    a11y: {
+      // Same axe static-analysis false-positive as `Default` (Base UI's `aria-owns` owner
+      // `<span>` inside `role="menubar"`/`role="menu"`; dequelabs/axe-core#4048,
+      // floating-ui/floating-ui#3424). Suppress just this rule.
+      config: { rules: [{ id: "aria-required-children", enabled: false }] },
+    },
+  },
+  render: () => (
+    <Menubar>
+      <Menu>
+        <MenubarTrigger>
+          <MenubarTriggerLabel>File</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenuContent sizing="sm">
+          <MenuItem icon={<FilePlus />}>New file</MenuItem>
+          <MenuItem icon={<FolderOpen />}>Open…</MenuItem>
+          <MenuSeparator />
+          <MenuSubmenu>
+            <MenuSubmenuTrigger icon={<FileOutput />}>Export</MenuSubmenuTrigger>
+            <MenuSubmenuContent sizing="sm">
+              <MenuItem>PDF</MenuItem>
+              <MenuItem>PNG</MenuItem>
+              <MenuItem>SVG</MenuItem>
+            </MenuSubmenuContent>
+          </MenuSubmenu>
+          <MenuSeparator />
+          <MenuItem icon={<Printer />}>Print…</MenuItem>
+        </MenuContent>
+      </Menu>
+      <Menu>
+        <MenubarTrigger>
+          <MenubarTriggerLabel>View</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenuContent sizing="sm">
+          <MenuItem icon={<ZoomIn />}>Zoom in</MenuItem>
+          <MenuItem icon={<ZoomOut />}>Zoom out</MenuItem>
+          <MenuSeparator />
+          <MenuSubmenu>
+            <MenuSubmenuTrigger icon={<LayoutGrid />}>Layout</MenuSubmenuTrigger>
+            <MenuSubmenuContent sizing="sm">
+              <MenuItem>Single page</MenuItem>
+              <MenuItem>Two pages</MenuItem>
+              <MenuItem>Continuous</MenuItem>
+            </MenuSubmenuContent>
+          </MenuSubmenu>
+        </MenuContent>
+      </Menu>
+    </Menubar>
+  ),
+};
+
+/**
+ * Interaction test: the Export row inside a menubar menu is a submenu trigger
+ * (`aria-haspopup="menu"`) and activating it opens the nested menu of formats.
+ */
+export const SubmenuInteraction: Story = {
+  ...Submenu,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const body = within(document.body);
+    // Open the File menu from the bar (its trigger is a `role="menuitem"`).
+    await userEvent.click(canvas.getByRole("menuitem", { name: "File" }));
+    const exportRow = await body.findByRole("menuitem", { name: "Export" });
+    await expect(exportRow).toHaveAttribute("aria-haspopup", "menu");
+    // Activating the row opens the nested submenu alongside the parent menu.
+    await userEvent.click(exportRow);
+    await body.findByRole("menuitem", { name: "PDF" });
+    await waitFor(() =>
+      expect(document.body.querySelectorAll('[role="menu"]').length).toBeGreaterThan(1),
+    );
+  },
+};
+
+/**
+ * A whole menu can be disabled via `disabled` on its `Menu` root — its trigger stays in the bar for
+ * layout stability but is grayed out and cannot open, like a Help menu that has no content yet.
+ */
+export const DisabledMenu: Story = {
+  parameters: {
+    a11y: {
+      // Same axe static-analysis false-positive as `Default` (Base UI's `aria-owns` owner
+      // `<span>` inside `role="menubar"`; dequelabs/axe-core#4048,
+      // floating-ui/floating-ui#3424). Suppress just this rule.
+      config: { rules: [{ id: "aria-required-children", enabled: false }] },
+    },
+  },
+  render: () => (
+    <Menubar>
+      <Menu>
+        <MenubarTrigger>
+          <MenubarTriggerLabel>File</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenuContent sizing="sm">
+          <MenuItem icon={<FilePlus />}>New file</MenuItem>
+          <MenuItem icon={<FolderOpen />}>Open…</MenuItem>
+          <MenuSeparator />
+          <MenuItem icon={<Save />}>Save</MenuItem>
+        </MenuContent>
+      </Menu>
+      <Menu disabled>
+        <MenubarTrigger>
+          <MenubarTriggerLabel>Help</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenuContent sizing="sm">
+          <MenuItem>Documentation</MenuItem>
+          <MenuItem>Keyboard shortcuts</MenuItem>
+        </MenuContent>
+      </Menu>
+    </Menubar>
+  ),
+};
+
+/**
+ * Interaction test: disabling a `Menu` root lands the disabled state on its menubar trigger
+ * (`data-disabled`, so it cannot open its menu) while sibling menus keep working.
+ */
+export const DisabledMenuInteraction: Story = {
+  ...DisabledMenu,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    // The disabled state lands on the real rendered trigger, which the bar styles inert.
+    const help = canvas.getByRole("menuitem", { name: "Help" });
+    await expect(help).toHaveAttribute("data-disabled");
+    await expect(document.body.querySelector('[role="menu"]')).not.toBeInTheDocument();
+    // Sibling menus stay fully functional.
+    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/components/menubar/menubar.tsx b/packages/propel/src/components/menubar/menubar.tsx
new file mode 100644
index 00000000..08d092de
--- /dev/null
+++ b/packages/propel/src/components/menubar/menubar.tsx
@@ -0,0 +1,13 @@
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
+
+import { Menubar as MenubarElement } from "../../elements/menubar/menubar";
+
+export type MenubarProps = Omit<BaseMenubar.Props, "className" | "style">;
+
+/**
+ * The application menu bar: Base UI's `Menubar` behavior (arrow-key navigation, single-open)
+ * grafted onto Propel's styled `Menubar` container. Hosts a horizontal row of `Menu` roots.
+ */
+export function Menubar(props: MenubarProps) {
+  return <BaseMenubar {...props} render={<MenubarElement />} />;
+}
diff --git a/packages/propel/src/components/meter/index.tsx b/packages/propel/src/components/meter/index.tsx
index 2d75788b..7edd3040 100644
--- a/packages/propel/src/components/meter/index.tsx
+++ b/packages/propel/src/components/meter/index.tsx
@@ -11,4 +11,4 @@ export {
   type MeterTrackProps,
   MeterValue,
   type MeterValueProps,
-} from "../../ui/meter";
+} from "../../elements/meter";
diff --git a/packages/propel/src/components/meter/meter.stories.tsx b/packages/propel/src/components/meter/meter.stories.tsx
index 84c11456..ddc8613d 100644
--- a/packages/propel/src/components/meter/meter.stories.tsx
+++ b/packages/propel/src/components/meter/meter.stories.tsx
@@ -4,7 +4,7 @@ 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
+// `elements/meter` parts (root + label + track › indicator + value). The elements-tier story
 // assembles those parts by hand.
 const meta = {
   title: "Components/Meter",
diff --git a/packages/propel/src/components/meter/meter.tsx b/packages/propel/src/components/meter/meter.tsx
index b1cbf756..1c88afd9 100644
--- a/packages/propel/src/components/meter/meter.tsx
+++ b/packages/propel/src/components/meter/meter.tsx
@@ -1,3 +1,4 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
 import type * as React from "react";
 
 import {
@@ -8,10 +9,12 @@ import {
   MeterTrack,
   MeterValue,
   type MeterIndicatorLevel,
-  type MeterProps as MeterElementProps,
-} from "../../ui/meter";
+} from "../../elements/meter";
 
-export type MeterProps = MeterElementProps & {
+export type MeterProps = Omit<
+  BaseMeter.Root.Props,
+  "className" | "style" | "render" | "children"
+> & {
   /**
    * 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.
@@ -106,8 +109,8 @@ function deriveIndicatorLevel({
  * segment the current value falls in (warning for suboptimal, accent for normal, success for
  * optimal high — mirroring native `<meter>` semantics).
  *
- * Composed from the `ui/meter` parts (`Meter` root + `MeterLabel` + `MeterTrack` + `MeterIndicator`
- * + `MeterValue`), which are built on Base UI `Meter` (it owns the `meter` role +
+ * Composed from the `elements/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({
@@ -134,16 +137,16 @@ export function Meter({
   const header = hasLabel || showValue;
 
   return (
-    <MeterElement min={min} max={max} {...props}>
+    <BaseMeter.Root min={min} max={max} render={<MeterElement />} {...props}>
       {header ? (
         <MeterHeader>
-          {hasLabel ? <MeterLabel>{label}</MeterLabel> : null}
-          {showValue ? <MeterValue /> : null}
+          {hasLabel ? <BaseMeter.Label render={<MeterLabel />}>{label}</BaseMeter.Label> : null}
+          {showValue ? <BaseMeter.Value render={<MeterValue />} /> : null}
         </MeterHeader>
       ) : null}
-      <MeterTrack>
-        <MeterIndicator level={level} />
-      </MeterTrack>
-    </MeterElement>
+      <BaseMeter.Track render={<MeterTrack />}>
+        <BaseMeter.Indicator render={<MeterIndicator level={level} />} />
+      </BaseMeter.Track>
+    </BaseMeter.Root>
   );
 }
diff --git a/packages/propel/src/components/navigation-menu/index.tsx b/packages/propel/src/components/navigation-menu/index.tsx
index 290958cf..31b92a76 100644
--- a/packages/propel/src/components/navigation-menu/index.tsx
+++ b/packages/propel/src/components/navigation-menu/index.tsx
@@ -1,30 +1,25 @@
+export * from "./navigation-menu";
+export * from "./navigation-menu-content";
+export * from "./navigation-menu-item";
+export * from "./navigation-menu-link";
+export * from "./navigation-menu-list";
 export * from "./navigation-menu-panel";
-// Re-export the atomic navigation menu parts so a full menu can be assembled from one entry.
+export * from "./navigation-menu-trigger";
+export * from "./navigation-menu-viewport";
+// Re-export propel's STYLED navigation-menu parts so a full menu can be assembled from one entry.
+// Names with a ready-made here (`NavigationMenuList`, `NavigationMenuTrigger`,
+// `NavigationMenuLink`, `NavigationMenuViewport`) are deliberately NOT re-exported from
+// `elements`; `Popup` is composed by the ready-made `NavigationMenuPanel` (with `Portal` and the
+// shared `internal/positioner`), so it is not re-exported either.
 export {
-  NavigationMenu,
-  type NavigationMenuProps,
-  NavigationMenuArrow,
-  type NavigationMenuArrowProps,
-  NavigationMenuContent,
-  type NavigationMenuContentProps,
   NavigationMenuContentList,
   type NavigationMenuContentListProps,
   NavigationMenuIcon,
   type NavigationMenuIconProps,
-  NavigationMenuItem,
-  type NavigationMenuItemProps,
-  NavigationMenuLink,
-  type NavigationMenuLinkProps,
   NavigationMenuLinkDescription,
   type NavigationMenuLinkDescriptionProps,
   NavigationMenuLinkTitle,
   type NavigationMenuLinkTitleProps,
-  NavigationMenuList,
-  type NavigationMenuListProps,
-  NavigationMenuTrigger,
-  type NavigationMenuTriggerProps,
   NavigationMenuTriggerLabel,
   type NavigationMenuTriggerLabelProps,
-  NavigationMenuViewport,
-  type NavigationMenuViewportProps,
-} from "../../ui/navigation-menu";
+} from "../../elements/navigation-menu";
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-content.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-content.tsx
new file mode 100644
index 00000000..1288984b
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-content.tsx
@@ -0,0 +1,15 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
+export type NavigationMenuContentProps = Omit<
+  BaseNavigationMenu.Content.Props,
+  "className" | "style"
+>;
+
+/**
+ * An item's content container — Base UI's unstyled `<div>` that is moved into the popup's viewport
+ * while the item is active. A structural role with no propel styling, so it lives in `components`
+ * as a passthrough (rules 1a, 2); put a `NavigationMenuContentList` of links inside.
+ */
+export function NavigationMenuContent(props: NavigationMenuContentProps) {
+  return <BaseNavigationMenu.Content {...props} />;
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-item.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-item.tsx
new file mode 100644
index 00000000..4c25fd59
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-item.tsx
@@ -0,0 +1,12 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
+export type NavigationMenuItemProps = Omit<BaseNavigationMenu.Item.Props, "className" | "style">;
+
+/**
+ * An individual navigation menu item — Base UI's unstyled `<li>` that scopes a
+ * `NavigationMenuTrigger` to its `NavigationMenuContent`. A structural role with no propel styling,
+ * so it lives in `components` as a passthrough (rules 1a, 2).
+ */
+export function NavigationMenuItem(props: NavigationMenuItemProps) {
+  return <BaseNavigationMenu.Item {...props} />;
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-link.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-link.tsx
new file mode 100644
index 00000000..76bc09b3
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-link.tsx
@@ -0,0 +1,24 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
+import {
+  NavigationMenuLink as NavigationMenuLinkElement,
+  type NavigationMenuLinkProps as NavigationMenuLinkElementProps,
+} from "../../elements/navigation-menu";
+
+export type NavigationMenuLinkProps = Omit<BaseNavigationMenu.Link.Props, "className" | "style"> &
+  Pick<NavigationMenuLinkElementProps, "presentation">;
+
+/**
+ * The ready-made navigable link: grafts Base UI's `NavigationMenu.Link` behavior onto the styled
+ * link. `presentation="item"` is a top-level pill beside the triggers; `presentation="card"` is a
+ * stacked entry inside a `NavigationMenuContent`, pairing a `NavigationMenuLinkTitle` with an
+ * optional `NavigationMenuLinkDescription`.
+ */
+export function NavigationMenuLink({ presentation, ...props }: NavigationMenuLinkProps) {
+  return (
+    <BaseNavigationMenu.Link
+      {...props}
+      render={<NavigationMenuLinkElement presentation={presentation} />}
+    />
+  );
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-list.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-list.tsx
new file mode 100644
index 00000000..2e33e487
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-list.tsx
@@ -0,0 +1,13 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
+import { NavigationMenuList as NavigationMenuListElement } from "../../elements/navigation-menu";
+
+export type NavigationMenuListProps = Omit<BaseNavigationMenu.List.Props, "className" | "style">;
+
+/**
+ * The ready-made top-level row: grafts Base UI's `NavigationMenu.List` behavior (roving focus,
+ * open-state tracking) onto the styled `elements` list. Holds `NavigationMenuItem` children.
+ */
+export function NavigationMenuList(props: NavigationMenuListProps) {
+  return <BaseNavigationMenu.List {...props} render={<NavigationMenuListElement />} />;
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx
index 0cd643f0..c3767f7e 100644
--- a/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx
@@ -1,26 +1,24 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
 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";
+} from "../../elements/navigation-menu/navigation-menu-popup";
+import { Positioner } from "../../internal/positioner";
 
 export type NavigationMenuPanelProps = NavigationMenuPopupProps & {
   /** Which side of the trigger the panel opens toward. @default "bottom" */
-  side?: NavigationMenuPositionerProps["side"];
+  side?: BaseNavigationMenu.Positioner.Props["side"];
   /** Distance in px between the trigger and the panel. @default 4 */
-  sideOffset?: NavigationMenuPositionerProps["sideOffset"];
+  sideOffset?: BaseNavigationMenu.Positioner.Props["sideOffset"];
   /** Alignment of the panel relative to the trigger along `side`. @default "start" */
-  align?: NavigationMenuPositionerProps["align"];
+  align?: BaseNavigationMenu.Positioner.Props["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.
+ * The navigation menu surface: Base UI portal + positioner + popup grafted onto Propel styling.
+ * Named `Panel` to avoid clashing with Base UI's atomic per-item `NavigationMenu.Content`. The
+ * viewport and per-item content remain children.
  */
 export function NavigationMenuPanel({
   side = "bottom",
@@ -29,10 +27,15 @@ export function NavigationMenuPanel({
   ...props
 }: NavigationMenuPanelProps) {
   return (
-    <NavigationMenuPortal>
-      <NavigationMenuPositioner side={side} sideOffset={sideOffset} align={align}>
-        <NavigationMenuPopup {...props} />
-      </NavigationMenuPositioner>
-    </NavigationMenuPortal>
+    <BaseNavigationMenu.Portal>
+      <BaseNavigationMenu.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <BaseNavigationMenu.Popup {...props} render={<NavigationMenuPopup />} />
+      </BaseNavigationMenu.Positioner>
+    </BaseNavigationMenu.Portal>
   );
 }
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
new file mode 100644
index 00000000..46d7fb73
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
@@ -0,0 +1,33 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import { ChevronDown } from "lucide-react";
+import type * as React from "react";
+
+import {
+  NavigationMenuIcon,
+  NavigationMenuTrigger as NavigationMenuTriggerElement,
+  NavigationMenuTriggerLabel,
+} from "../../elements/navigation-menu";
+
+export type NavigationMenuTriggerProps = Omit<
+  BaseNavigationMenu.Trigger.Props,
+  "className" | "style"
+> & {
+  /** Replaces the default disclosure caret (a down chevron) in the trigger's `Icon` slot. */
+  icon?: React.ReactNode;
+};
+
+/**
+ * The ready-made trigger row: grafts Base UI's `NavigationMenu.Trigger` behavior onto the styled
+ * trigger, wraps the label, and bakes the rotating disclosure caret (`NavigationMenuIcon` with a
+ * default chevron — defaults are a `components` concern, rule 2a). Override the glyph via `icon`.
+ */
+export function NavigationMenuTrigger({ icon, children, ...props }: NavigationMenuTriggerProps) {
+  return (
+    <BaseNavigationMenu.Trigger {...props} render={<NavigationMenuTriggerElement />}>
+      <NavigationMenuTriggerLabel>{children}</NavigationMenuTriggerLabel>
+      <BaseNavigationMenu.Icon render={<NavigationMenuIcon />}>
+        {icon ?? <ChevronDown aria-hidden />}
+      </BaseNavigationMenu.Icon>
+    </BaseNavigationMenu.Trigger>
+  );
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-viewport.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-viewport.tsx
new file mode 100644
index 00000000..240e930c
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-viewport.tsx
@@ -0,0 +1,17 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
+import { NavigationMenuViewport as NavigationMenuViewportElement } from "../../elements/navigation-menu";
+
+export type NavigationMenuViewportProps = Omit<
+  BaseNavigationMenu.Viewport.Props,
+  "className" | "style"
+>;
+
+/**
+ * The ready-made morph container: grafts Base UI's `NavigationMenu.Viewport` behavior onto the
+ * styled viewport, which resizes between items' content via Base UI's
+ * `--popup-width`/`--popup-height`. Nest it inside `NavigationMenuPanel`.
+ */
+export function NavigationMenuViewport(props: NavigationMenuViewportProps) {
+  return <BaseNavigationMenu.Viewport {...props} render={<NavigationMenuViewportElement />} />;
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
index 0126e62b..6b39cbfb 100644
--- a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
+++ b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
@@ -1,8 +1,8 @@
 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 { expect, waitFor, within } from "storybook/test";
 
+import { ScrollArea } from "../scroll-area";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -19,9 +19,11 @@ import {
   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.
+// Components-tier story: every part is a ready-made — the root `NavigationMenu`, the
+// `NavigationMenuList`/`NavigationMenuItem` row, the `NavigationMenuTrigger` (caret baked in),
+// per-item `NavigationMenuContent`, `NavigationMenuLink`, and the `NavigationMenuPanel` (Portal ›
+// Positioner › Popup) with `NavigationMenuViewport` nested inside — so nothing is hand-wired from
+// Base UI. The elements-tier story assembles the behavior chain by hand.
 const meta = {
   title: "Components/NavigationMenu",
   component: NavigationMenu,
@@ -37,6 +39,7 @@ const meta = {
     NavigationMenuLinkTitle,
     NavigationMenuLinkDescription,
     NavigationMenuPanel,
+    NavigationMenuViewport,
   },
   parameters: {
     design: {
@@ -85,67 +88,68 @@ const RESOURCE_LINKS = [
   },
 ];
 
+// Enough entries to overflow the height-capped panel in the `LargeContent` story.
+const PROJECT_LINKS = Array.from({ length: 24 }, (_, index) => ({
+  href: `#project-${index + 1}`,
+  title: `Project ${index + 1}`,
+}));
+
 // The demo links carry real hrefs for correct anchor semantics, but cancel navigation:
 // the Vitest browser runner shares one page across story files, so an activated link
 // navigates the page, tears down the iframe, and fails unrelated stories.
 const cancelNavigation = (event: React.MouseEvent) => event.preventDefault();
 
-/** A rich content link pairing a title with a description, wrapped in its list item. */
-function ContentLink({ href, title, description }: (typeof PRODUCT_LINKS)[number]) {
-  return (
-    <li>
-      <NavigationMenuLink presentation="card" render={<a href={href} onClick={cancelNavigation} />}>
-        <NavigationMenuLinkTitle>{title}</NavigationMenuLinkTitle>
-        <NavigationMenuLinkDescription>{description}</NavigationMenuLinkDescription>
-      </NavigationMenuLink>
-    </li>
-  );
-}
-
-/** A trigger row that pairs the label with the rotating disclosure caret. */
-function TriggerRow({ children }: { children: React.ReactNode }) {
-  return (
-    <NavigationMenuTrigger>
-      <NavigationMenuTriggerLabel>{children}</NavigationMenuTriggerLabel>
-      <NavigationMenuIcon>
-        <ChevronDown aria-hidden />
-      </NavigationMenuIcon>
-    </NavigationMenuTrigger>
-  );
-}
-
 /** Two menu items plus a bare top-level link, opening into the shared `NavigationMenuPanel`. */
 export const Default: Story = {
   render: () => (
     <NavigationMenu>
       <NavigationMenuList>
         <NavigationMenuItem>
-          <TriggerRow>Product</TriggerRow>
+          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <ul className="grid w-md grid-cols-2 gap-1 p-2">
+            <NavigationMenuContentList>
               {PRODUCT_LINKS.map((item) => (
-                <ContentLink key={item.href} {...item} />
+                <li key={item.href}>
+                  <NavigationMenuLink
+                    href={item.href}
+                    presentation="card"
+                    onClick={cancelNavigation}
+                  >
+                    <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
+                    <NavigationMenuLinkDescription>
+                      {item.description}
+                    </NavigationMenuLinkDescription>
+                  </NavigationMenuLink>
+                </li>
               ))}
-            </ul>
+            </NavigationMenuContentList>
           </NavigationMenuContent>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <TriggerRow>Resources</TriggerRow>
+          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
           <NavigationMenuContent>
             <NavigationMenuContentList>
               {RESOURCE_LINKS.map((item) => (
-                <ContentLink key={item.href} {...item} />
+                <li key={item.href}>
+                  <NavigationMenuLink
+                    href={item.href}
+                    presentation="card"
+                    onClick={cancelNavigation}
+                  >
+                    <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
+                    <NavigationMenuLinkDescription>
+                      {item.description}
+                    </NavigationMenuLinkDescription>
+                  </NavigationMenuLink>
+                </li>
               ))}
             </NavigationMenuContentList>
           </NavigationMenuContent>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuLink
-            presentation="item"
-            render={<a href="#pricing" onClick={cancelNavigation} />}
-          >
+          <NavigationMenuLink href="#pricing" presentation="item" onClick={cancelNavigation}>
             Pricing
           </NavigationMenuLink>
         </NavigationMenuItem>
@@ -162,7 +166,8 @@ export const Default: Story = {
  * 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 = {
+export const DefaultInteraction: Story = {
+  ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
   parameters: {
     a11y: {
@@ -181,26 +186,97 @@ export const OpenContent: Story = {
       },
     },
   },
+  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");
+    });
+  },
+};
+
+/**
+ * The link's two presentations side by side: `item` is a top-level pill beside the triggers; `card`
+ * stacks a `NavigationMenuLinkTitle` over an optional `NavigationMenuLinkDescription` inside a
+ * content panel.
+ */
+export const Presentations: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#pricing" presentation="item" onClick={cancelNavigation}>
+            Pricing
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#docs" presentation="card" onClick={cancelNavigation}>
+            <NavigationMenuLinkTitle>Documentation</NavigationMenuLinkTitle>
+            <NavigationMenuLinkDescription>
+              Guides and API references.
+            </NavigationMenuLinkDescription>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};
+
+/** Behavior test: both presentations render real, named links with their hrefs intact. */
+export const PresentationsInteraction: Story = {
+  ...Presentations,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const item = canvas.getByRole("link", { name: "Pricing" });
+    await expect(item).toHaveAttribute("href", "#pricing");
+
+    const card = canvas.getByRole("link", { name: /Documentation/ });
+    await expect(card).toHaveAttribute("href", "#docs");
+    await expect(card).toHaveTextContent("Guides and API references.");
+  },
+};
+
+/**
+ * A menu whose content outgrows the panel: the story caps the content region's height and wraps the
+ * link list in a `ScrollArea`, so the panel keeps a stable size while the links scroll — the
+ * recommended composition for large menus instead of native popup scrollbars.
+ */
+export const LargeContent: Story = {
   render: () => (
     <NavigationMenu>
       <NavigationMenuList>
         <NavigationMenuItem>
-          <TriggerRow>Product</TriggerRow>
+          <NavigationMenuTrigger>Projects</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <NavigationMenuContentList>
-              {PRODUCT_LINKS.map((item) => (
-                <li key={item.href}>
-                  <NavigationMenuLink
-                    presentation="card"
-                    render={<a href={item.href} onClick={cancelNavigation} />}
-                  >
-                    <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
-                  </NavigationMenuLink>
-                </li>
-              ))}
-            </NavigationMenuContentList>
+            <div className="flex h-72 flex-col">
+              <ScrollArea orientation="vertical" visibility="auto" magnitude="thin">
+                <NavigationMenuContentList>
+                  {PROJECT_LINKS.map((item) => (
+                    <li key={item.href}>
+                      <NavigationMenuLink
+                        href={item.href}
+                        presentation="card"
+                        onClick={cancelNavigation}
+                      >
+                        <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
+                      </NavigationMenuLink>
+                    </li>
+                  ))}
+                </NavigationMenuContentList>
+              </ScrollArea>
+            </div>
           </NavigationMenuContent>
         </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#pricing" presentation="item" onClick={cancelNavigation}>
+            Pricing
+          </NavigationMenuLink>
+        </NavigationMenuItem>
       </NavigationMenuList>
 
       <NavigationMenuPanel>
@@ -208,15 +284,50 @@ export const OpenContent: Story = {
       </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.
+/**
+ * Behavior test: opening the trigger renders every link into the portaled panel, and the capped
+ * content region overflows so the list actually scrolls.
+ */
+export const LargeContentInteraction: Story = {
+  ...LargeContent,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  parameters: {
+    a11y: {
+      // Same two Base UI internals as `DefaultInteraction` (the focus-guard sentinels and the
+      // portaled second `<nav>` landmark) — static-analysis false positives while the popup is
+      // open, so suppress just those two rules here as well.
+      config: {
+        rules: [
+          { id: "aria-hidden-focus", enabled: false },
+          { id: "landmark-unique", enabled: false },
+        ],
+      },
+    },
+  },
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /Projects/ });
     await userEvent.click(trigger);
     await expect(trigger).toHaveAttribute("aria-expanded", "true");
-    await waitFor(async () => {
-      await expect(document.body).toHaveTextContent("Cycles");
+
+    // The popup is portaled, so query the document body once open. The last link exists in the
+    // DOM even though it starts scrolled out of view.
+    const lastLink = await within(document.body).findByRole("link", { name: "Project 24" });
+
+    // The height-capped wrapper + `ScrollArea` leave an ancestor of the link overflowing its box
+    // (the scrollable viewport); wait for layout to settle before measuring.
+    await waitFor(() => {
+      let node = lastLink.parentElement;
+      let scroller: HTMLElement | null = null;
+      while (node && node !== document.body) {
+        if (node.scrollHeight > node.clientHeight) {
+          scroller = node;
+          break;
+        }
+        node = node.parentElement;
+      }
+      void expect(scroller).not.toBeNull();
     });
   },
 };
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu.tsx b/packages/propel/src/components/navigation-menu/navigation-menu.tsx
new file mode 100644
index 00000000..d4a9139c
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu.tsx
@@ -0,0 +1,13 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+
+export type NavigationMenuProps = Omit<BaseNavigationMenu.Root.Props, "className" | "style">;
+
+/**
+ * The navigation menu Root — Base UI's context/state provider. It renders Base UI's unstyled
+ * `<nav>` container (a `<div>` when nested) and carries no propel styling, so it is a behavior-only
+ * role and lives in `components` (rules 1a, 2); the styled parts live in `elements/navigation-menu`
+ * and are grafted onto Base UI behavior here.
+ */
+export function NavigationMenu(props: NavigationMenuProps) {
+  return <BaseNavigationMenu.Root {...props} />;
+}
diff --git a/packages/propel/src/components/number-field/index.tsx b/packages/propel/src/components/number-field/index.tsx
index 0b66ef89..ab4521b7 100644
--- a/packages/propel/src/components/number-field/index.tsx
+++ b/packages/propel/src/components/number-field/index.tsx
@@ -1,12 +1,13 @@
 export * from "./number-field";
+export * from "./number-field-scrub-area";
+export * from "./number-field-scrub-area-cursor";
+// Re-export propel's STYLED number field parts so a full field can be assembled from one entry. The
+// behavior parts (`Group`, `Decrement`, `Input`, `Increment`) are Base UI's — graft them from
+// `@base-ui/react/number-field` onto these styled parts at the call site.
 export {
-  NumberFieldDecrement,
-  type NumberFieldDecrementProps,
   NumberFieldGroup,
   type NumberFieldGroupProps,
-  NumberFieldIncrement,
-  type NumberFieldIncrementProps,
   NumberFieldInput,
   type NumberFieldInputProps,
   type NumberFieldMagnitude,
-} from "../../ui/number-field";
+} from "../../elements/number-field";
diff --git a/packages/propel/src/components/number-field/number-field-scrub-area-cursor.tsx b/packages/propel/src/components/number-field/number-field-scrub-area-cursor.tsx
new file mode 100644
index 00000000..7ee3916d
--- /dev/null
+++ b/packages/propel/src/components/number-field/number-field-scrub-area-cursor.tsx
@@ -0,0 +1,11 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+
+export type NumberFieldScrubAreaCursorProps = Omit<
+  BaseNumberField.ScrubAreaCursor.Props,
+  "className" | "style"
+>;
+
+/** The virtual cursor shown while scrubbing; pass your cursor svg as children. */
+export function NumberFieldScrubAreaCursor(props: NumberFieldScrubAreaCursorProps) {
+  return <BaseNumberField.ScrubAreaCursor {...props} />;
+}
diff --git a/packages/propel/src/components/number-field/number-field-scrub-area.tsx b/packages/propel/src/components/number-field/number-field-scrub-area.tsx
new file mode 100644
index 00000000..2bf3a924
--- /dev/null
+++ b/packages/propel/src/components/number-field/number-field-scrub-area.tsx
@@ -0,0 +1,11 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+
+export type NumberFieldScrubAreaProps = Omit<
+  BaseNumberField.ScrubArea.Props,
+  "className" | "style"
+>;
+
+/** Drag-to-change scrubbing over the field's label region — Base UI behavior, no chrome. */
+export function NumberFieldScrubArea(props: NumberFieldScrubAreaProps) {
+  return <BaseNumberField.ScrubArea {...props} />;
+}
diff --git a/packages/propel/src/components/number-field/number-field.stories.tsx b/packages/propel/src/components/number-field/number-field.stories.tsx
index 31a6d4db..d8a33c3a 100644
--- a/packages/propel/src/components/number-field/number-field.stories.tsx
+++ b/packages/propel/src/components/number-field/number-field.stories.tsx
@@ -3,7 +3,9 @@ import { Minus, Plus } from "lucide-react";
 import { expect } from "storybook/test";
 
 import { IconButton } from "../icon-button";
-import { NumberField } from "./index";
+import { NumberField, type NumberFieldMagnitude } from "./index";
+
+const MAGNITUDES: NumberFieldMagnitude[] = ["sm", "md", "lg", "xl"];
 
 // Components-tier story: the ready-made `NumberField` — a numeric input flanked by
 // −/+ buttons, wired for you. Drive it with `value`/`defaultValue`, bound it with
@@ -34,6 +36,55 @@ export const Default: Story = {
   args: { defaultValue: 2, min: 1, max: 64, magnitude: "xl" },
 };
 
+/**
+ * All sizes (sm/md/lg/xl) side by side. The input height matches the stepper button square, so each
+ * field's decrement/increment `IconButton`s carry the same `magnitude` as the field — that is what
+ * keeps the group container flush.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude`, building magnitude-matched steppers and a distinct accessible name per
+  // field, so disable those controls; the rest stay live and update every field at once.
+  argTypes: {
+    magnitude: { control: false },
+    decrement: { control: false },
+    increment: { control: false },
+    "aria-label": { control: false },
+  },
+  args: { defaultValue: 2, min: 1, max: 64, magnitude: "xl" },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <NumberField
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          aria-label={`Number of instances (${magnitude})`}
+          decrement={
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude={magnitude}
+              aria-label={`Decrease (${magnitude})`}
+            >
+              <Minus />
+            </IconButton>
+          }
+          increment={
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude={magnitude}
+              aria-label={`Increase (${magnitude})`}
+            >
+              <Plus />
+            </IconButton>
+          }
+        />
+      ))}
+    </div>
+  ),
+};
+
 /** Clicking the +/- buttons steps the value within `min`/`max`. */
 export const IncrementAndDecrement: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/number-field/number-field.tsx b/packages/propel/src/components/number-field/number-field.tsx
index 1a9c3949..78f5c2a2 100644
--- a/packages/propel/src/components/number-field/number-field.tsx
+++ b/packages/propel/src/components/number-field/number-field.tsx
@@ -1,16 +1,17 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
 import type * as React from "react";
 
 import {
   NumberField as NumberFieldElement,
-  NumberFieldDecrement,
   NumberFieldGroup,
-  NumberFieldIncrement,
   NumberFieldInput,
   type NumberFieldMagnitude,
-  type NumberFieldProps as NumberFieldElementProps,
-} from "../../ui/number-field";
+} from "../../elements/number-field";
 
-export type NumberFieldProps = NumberFieldElementProps & {
+export type NumberFieldProps = Omit<
+  BaseNumberField.Root.Props,
+  "className" | "style" | "render"
+> & {
   /** Visual size of the field: controls the input height. Required. */
   magnitude: NumberFieldMagnitude;
   /**
@@ -30,10 +31,10 @@ export type NumberFieldProps = NumberFieldElementProps & {
  * 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`. The `decrement`/`increment` steppers are consumer-provided controls, grafted onto
- * the behavior wrappers via `render`.
+ * Grafts Base UI `NumberField` behavior onto the `elements/number-field` styled parts
+ * (`NumberField` root + `NumberFieldGroup` + `NumberFieldInput`) via `render`. The
+ * `decrement`/`increment` steppers are consumer-provided controls, grafted onto Base UI's
+ * `Decrement`/`Increment` behavior.
  */
 export function NumberField({
   "aria-label": ariaLabel,
@@ -44,17 +45,21 @@ export function NumberField({
   ...props
 }: NumberFieldProps) {
   return (
-    <NumberFieldElement {...props}>
-      <NumberFieldGroup>
-        <NumberFieldDecrement render={decrement} />
+    <BaseNumberField.Root {...props} render={<NumberFieldElement />}>
+      <BaseNumberField.Group render={<NumberFieldGroup />}>
+        <BaseNumberField.Decrement render={decrement} />
         {/* The accessible name belongs on the input, not the root div. */}
-        <NumberFieldInput
-          magnitude={magnitude}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledby}
+        <BaseNumberField.Input
+          render={
+            <NumberFieldInput
+              magnitude={magnitude}
+              aria-label={ariaLabel}
+              aria-labelledby={ariaLabelledby}
+            />
+          }
         />
-        <NumberFieldIncrement render={increment} />
-      </NumberFieldGroup>
-    </NumberFieldElement>
+        <BaseNumberField.Increment render={increment} />
+      </BaseNumberField.Group>
+    </BaseNumberField.Root>
   );
 }
diff --git a/packages/propel/src/components/otp-field/index.tsx b/packages/propel/src/components/otp-field/index.tsx
index e1561fd0..572949e1 100644
--- a/packages/propel/src/components/otp-field/index.tsx
+++ b/packages/propel/src/components/otp-field/index.tsx
@@ -7,4 +7,4 @@ export {
   type OTPFieldLabelProps,
   OTPFieldSeparator,
   type OTPFieldSeparatorProps,
-} from "../../ui/otp-field";
+} from "../../elements/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
index 93fe3afa..e13d7dd1 100644
--- a/packages/propel/src/components/otp-field/otp-field.stories.tsx
+++ b/packages/propel/src/components/otp-field/otp-field.stories.tsx
@@ -1,11 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
+import * as React from "react";
+import { expect, waitFor } from "storybook/test";
 
-import { OTPField } from "./index";
+import { Form } from "../form";
+import { OTPField, type OTPFieldInputMagnitude } from "./index";
+
+const MAGNITUDES: OTPFieldInputMagnitude[] = ["md", "lg", "xl"];
 
 // Components-tier story: the ready-made `OTPField` — pass `length`, `magnitude`, and
 // `tone`; 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
+// The elements-tier story shows how to compose the parts (e.g. a grouped `123-456` layout
 // with a separator).
 const meta = {
   title: "Components/OTPField",
@@ -19,6 +23,21 @@ type Story = StoryObj<typeof meta>;
 /** A six-digit verification code. */
 export const Default: Story = {};
 
+/** All box sizes (md/lg/xl) side by side, filled with a realistic code. */
+export const Magnitudes: Story = {
+  // Iterates `magnitude`, so disable just that control; the rest stay live and
+  // update every field at once.
+  argTypes: { magnitude: { control: false } },
+  args: { defaultValue: "123456" },
+  render: (args) => (
+    <div className="flex flex-col items-start gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <OTPField key={magnitude} {...args} magnitude={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
 const Interaction: Story = {
   ...Default,
 };
@@ -50,6 +69,110 @@ export const TypingFillsSlots: Story = {
   },
 };
 
+/** `validationType="alphanumeric"` accepts recovery codes that mix letters and numbers. */
+export const Alphanumeric: Story = {
+  args: { validationType: "alphanumeric", defaultValue: "A7C9XZ", "aria-label": "Recovery code" },
+};
+
+/**
+ * Interaction test: an alphanumeric field accepts letters that the default numeric validation would
+ * reject. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const AlphanumericInteraction: Story = {
+  ...Alphanumeric,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { ...Alphanumeric.args, defaultValue: "" },
+  play: async ({ canvas, userEvent }) => {
+    const inputs = canvas.getAllByRole("textbox");
+    await userEvent.click(inputs[0]);
+    await userEvent.keyboard("X7");
+    await expect(inputs[0]).toHaveDisplayValue("X");
+    await expect(inputs[1]).toHaveDisplayValue("7");
+  },
+};
+
+/**
+ * `normalizeValue` rewrites accepted characters (here uppercasing a recovery code), while
+ * characters the validation rejects surface through `onValueInvalid` — fed back to the user via the
+ * `error` line until the next valid keystroke clears it.
+ */
+export const Normalized: Story = {
+  args: { validationType: "alphanumeric", "aria-label": "Recovery code" },
+  render: function Render(args) {
+    const [error, setError] = React.useState<React.ReactNode>(null);
+    return (
+      <OTPField
+        {...args}
+        normalizeValue={(value) => value.toUpperCase()}
+        onValueChange={() => setError(null)}
+        onValueInvalid={() => setError("Only letters and numbers are allowed")}
+        error={error}
+      />
+    );
+  },
+};
+
+/**
+ * Interaction test: typed characters are normalized to uppercase, and a rejected character raises
+ * the invalid feedback while leaving the value unchanged. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const NormalizedInteraction: Story = {
+  ...Normalized,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const inputs = canvas.getAllByRole("textbox");
+    await userEvent.click(inputs[0]);
+    await userEvent.keyboard("a7");
+    await expect(inputs[0]).toHaveDisplayValue("A");
+    await expect(inputs[1]).toHaveDisplayValue("7");
+    await userEvent.keyboard("!");
+    await expect(canvas.getByText("Only letters and numbers are allowed")).toBeInTheDocument();
+    await expect(inputs[2]).toHaveDisplayValue("");
+  },
+};
+
+/**
+ * Inside a `Form`, `autoSubmit` submits the owning form the moment the last slot is filled — no
+ * separate confirm button needed. (`onValueComplete` is the alternative for reacting to completion
+ * without a form.)
+ */
+export const FormIntegration: Story = {
+  args: { autoSubmit: true, name: "code" },
+  render: function Render(args) {
+    const [submitted, setSubmitted] = React.useState(false);
+    return (
+      <div className="flex flex-col items-start gap-3">
+        <Form onFormSubmit={() => setSubmitted(true)}>
+          <OTPField {...args} />
+        </Form>
+        <output className="text-13 text-secondary">
+          {submitted ? "Code submitted — signing you in…" : null}
+        </output>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interaction test: filling the last slot auto-submits the owning `Form`, which reports through
+ * `onFormSubmit`. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const FormIntegrationInteraction: Story = {
+  ...FormIntegration,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const inputs = canvas.getAllByRole("textbox");
+    await userEvent.click(inputs[0]);
+    await userEvent.keyboard("123456");
+    await waitFor(async () => {
+      await expect(canvas.getByText("Code submitted — signing you in…")).toBeInTheDocument();
+    });
+  },
+};
+
 /** `mask` obscures the entered characters. */
 export const Masked: Story = {
   parameters: { controls: { disable: true } },
@@ -60,3 +183,40 @@ export const Masked: Story = {
 export const Invalid: Story = {
   args: { error: "Code is invalid", defaultValue: "12" },
 };
+
+/**
+ * Interaction test: `error` renders the message and flips every slot to the invalid state —
+ * `Field.Root invalid` propagates `data-invalid` to each of the six textboxes. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  ...Invalid,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const inputs = canvas.getAllByRole("textbox");
+    await expect(inputs).toHaveLength(6);
+    for (const input of inputs) {
+      await expect(input).toHaveAttribute("data-invalid");
+    }
+    await expect(canvas.getByText("Code is invalid")).toBeInTheDocument();
+  },
+};
+
+/** `groups={[3, 3]}` splits the run with a separator — the 123-456 verification-code shape. */
+export const Grouped: Story = {
+  args: { length: 6, magnitude: "md", groups: [3, 3] },
+};
+
+/**
+ * Interaction test: grouped slots still expose all six textboxes with the separator between the
+ * halves. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const GroupedInteraction: Story = {
+  ...Grouped,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    await expect(canvas.getAllByRole("textbox")).toHaveLength(6);
+    await expect(canvas.getByText("-")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/otp-field/otp-field.tsx b/packages/propel/src/components/otp-field/otp-field.tsx
index 131246e5..f304b9d7 100644
--- a/packages/propel/src/components/otp-field/otp-field.tsx
+++ b/packages/propel/src/components/otp-field/otp-field.tsx
@@ -1,28 +1,33 @@
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
 import * as React from "react";
 
-import { Field } from "../../ui/field/field";
-import { FieldError } from "../../ui/field/field-error";
-import type { FieldMagnitude } from "../../ui/field/variants";
+import type { FieldMagnitude } from "../../elements/field/variants";
 import {
   OTPField as OTPFieldElement,
   OTPFieldInput,
   type OTPFieldInputMagnitude,
   OTPFieldLabel,
-  type OTPFieldProps as OTPFieldElementProps,
-} from "../../ui/otp-field";
+  OTPFieldSeparator,
+} from "../../elements/otp-field";
+import { Field, FieldError } from "../field";
 
 // OTP slots size sm/md/lg; the error line maps onto the field text scale (md/lg/xl).
 const OTP_HELPER_MAGNITUDE: Record<OTPFieldInputMagnitude, FieldMagnitude> = {
-  sm: "md",
   md: "md",
-  lg: "lg",
+  lg: "md",
+  xl: "lg",
 };
 
-export type OTPFieldProps = OTPFieldElementProps & {
+export type OTPFieldProps = Omit<BaseOTPField.Root.Props, "className" | "style"> & {
   /** Box size passed to every slot. */
   magnitude: OTPFieldInputMagnitude;
   /** Error text shown below the slots; its presence flips every slot to the danger state. */
   error?: React.ReactNode;
+  /**
+   * Slot counts per visual group, separated by an `OTPFieldSeparator` (e.g. `[3, 3]` renders
+   * `123-456`). The counts must sum to `length`; omit for one flat run of slots.
+   */
+  groups?: readonly number[];
 };
 
 /**
@@ -33,34 +38,61 @@ export type OTPFieldProps = OTPFieldElementProps & {
  * `data-invalid` to every slot, which recolors its border (and focus ring) to danger off that
  * state.
  *
- * 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.
+ * Grafts Base UI `OTPField` behavior onto the `elements/otp-field` styled parts (`OTPField` root +
+ * `OTPFieldInput`). Each slot resolves its index from the root context, so the ready-made simply
+ * renders one per slot; `groups` splits the run with separators (e.g. `groups={[3, 3]}` renders
+ * `123-456`).
  */
-export function OTPField({ length, magnitude, error, ...props }: OTPFieldProps) {
+export function OTPField({ length, magnitude, error, groups, ...props }: OTPFieldProps) {
+  if (groups != null && groups.reduce((sum, count) => sum + count, 0) !== length) {
+    throw new Error(`propel OTPField: groups [${groups.join(", ")}] must sum to length ${length}.`);
+  }
   // 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 (
     <Field invalid={error != null || undefined}>
-      <OTPFieldElement length={length} {...props}>
+      <BaseOTPField.Root length={length} {...props} render={<OTPFieldElement />}>
         <OTPFieldLabel id={firstSlotLabelId}>Character 1</OTPFieldLabel>
-        {Array.from({ length }, (_, index) =>
+        {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} magnitude={magnitude} aria-labelledby={firstSlotLabelId} />
+          const slot =
+            index === 0 ? (
+              <BaseOTPField.Input
+                key={index}
+                render={<OTPFieldInput magnitude={magnitude} />}
+                aria-labelledby={firstSlotLabelId}
+              />
+            ) : (
+              <BaseOTPField.Input
+                key={index}
+                render={<OTPFieldInput magnitude={magnitude} />}
+                aria-label={`Character ${index + 1}`}
+              />
+            );
+          // A separator sits after each group boundary except the last.
+          const boundary =
+            groups != null &&
+            index < length - 1 &&
+            groups
+              .slice(0, -1)
+              .reduce<number[]>((acc, count) => {
+                acc.push((acc.at(-1) ?? 0) + count);
+                return acc;
+              }, [])
+              .includes(index + 1);
+          return boundary ? (
+            <React.Fragment key={index}>
+              {slot}
+              <OTPFieldSeparator aria-hidden>-</OTPFieldSeparator>
+            </React.Fragment>
           ) : (
-            <OTPFieldInput
-              key={index}
-              magnitude={magnitude}
-              aria-label={`Character ${index + 1}`}
-            />
-          ),
-        )}
-      </OTPFieldElement>
+            slot
+          );
+        })}
+      </BaseOTPField.Root>
       <FieldError magnitude={OTP_HELPER_MAGNITUDE[magnitude]} match={error != null}>
         {error}
       </FieldError>
diff --git a/packages/propel/src/components/pagination/pagination.stories.tsx b/packages/propel/src/components/pagination/pagination.stories.tsx
index a844039c..a2738a98 100644
--- a/packages/propel/src/components/pagination/pagination.stories.tsx
+++ b/packages/propel/src/components/pagination/pagination.stories.tsx
@@ -15,7 +15,7 @@ import {
   PaginationRange,
   PaginationRangeCurrent,
   PaginationSpinner,
-} from "../../ui/pagination/index";
+} from "../../elements/pagination/index";
 import { Pagination } from "./index";
 
 const meta = {
diff --git a/packages/propel/src/components/pagination/pagination.tsx b/packages/propel/src/components/pagination/pagination.tsx
index edec24d7..cf2c4664 100644
--- a/packages/propel/src/components/pagination/pagination.tsx
+++ b/packages/propel/src/components/pagination/pagination.tsx
@@ -1,7 +1,7 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
-import { Menu, MenuTrigger } from "../../ui/menu/index";
 import {
   Pagination as PaginationElement,
   PaginationArrowButton,
@@ -16,8 +16,8 @@ import {
   PaginationRange,
   PaginationRangeCurrent,
   PaginationSpinner,
-} from "../../ui/pagination/index";
-import { MenuContent, MenuItem } from "../menu/index";
+} from "../../elements/pagination/index";
+import { Menu, 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
@@ -25,7 +25,7 @@ import { MenuContent, MenuItem } from "../menu/index";
 // 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.
 //
-// This components tier only COMPOSES the `ui/pagination` parts (each a single styled
+// This components tier only COMPOSES the `elements/pagination` parts (each a single styled
 // element); all chrome lives in their cva — there is no className/cva/cx here.
 
 // Builds the sequence of visible page tokens. Always shows the first and last page;
@@ -176,7 +176,7 @@ export function Pagination({
             works via the Menu (Enter/ArrowDown opens, arrows move, Enter selects).
           */}
           <Menu>
-            <MenuTrigger
+            <BaseMenu.Trigger
               render={<PaginationPerPageTrigger />}
               aria-label={`${pageSize.value} ${l.perPage}`}
             >
@@ -184,8 +184,8 @@ export function Pagination({
               <PaginationPerPageIndicator>
                 <ChevronDown />
               </PaginationPerPageIndicator>
-            </MenuTrigger>
-            <MenuContent width="anchor" align="center">
+            </BaseMenu.Trigger>
+            <MenuContent sizing="anchor" align="center">
               {pageSize.options.map((option) => (
                 <MenuItem
                   key={option}
diff --git a/packages/propel/src/components/pill/icon-pill.tsx b/packages/propel/src/components/pill/icon-pill.tsx
index 5d1cb689..863cf79a 100644
--- a/packages/propel/src/components/pill/icon-pill.tsx
+++ b/packages/propel/src/components/pill/icon-pill.tsx
@@ -1,39 +1,51 @@
+import { Button as BaseButton } from "@base-ui/react/button";
 import { LoaderCircle } from "lucide-react";
 import type * as React from "react";
 
 import {
   IconPill as IconPillElement,
   type IconPillProps as IconPillElementProps,
-  PillIcon,
-  PillSpinner,
-} from "../../ui/pill";
+} from "../../elements/pill";
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
 
-export type IconPillProps = Omit<IconPillElementProps, "children"> & {
+export type IconPillProps = IconPillElementProps & {
   /** The icon, sized and tinted by the pill. */
   children: React.ReactNode;
+  /** Required: icon-only pills have no visible text, so they must be labeled. */
+  "aria-label": string;
   /** Busy state: swaps the icon for a spinner and blocks clicks. */
   loading?: boolean;
 };
 
 /**
- * The ready-made icon-only pill: composes the `IconPill` container with the icon (or a spinner
- * while `loading`). `loading` disables the button while keeping it focusable (`aria-busy`).
+ * The ready-made icon-only pill: grafts Base UI's `Button` behavior onto the square `IconPill`
+ * container (behavior outer, the styled button as the render target), filling it with the icon (or
+ * a spinner while `loading`). `loading` disables the button while keeping it focusable
+ * (`aria-busy`). An `aria-label` is required for the accessible name.
  */
-export function IconPill({ loading = false, disabled, children, ...props }: IconPillProps) {
+export function IconPill({
+  magnitude,
+  loading = false,
+  disabled,
+  children,
+  ...props
+}: IconPillProps) {
   return (
-    <IconPillElement
+    <BaseButton
       {...props}
+      render={<IconPillElement magnitude={magnitude} />}
       disabled={disabled || loading}
       focusableWhenDisabled={loading ? true : undefined}
       aria-busy={loading ? true : undefined}
     >
       {loading ? (
-        <PillSpinner>
+        <Spinner>
           <LoaderCircle />
-        </PillSpinner>
+        </Spinner>
       ) : (
-        <PillIcon>{children}</PillIcon>
+        <Icon>{children}</Icon>
       )}
-    </IconPillElement>
+    </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/pill/index.tsx b/packages/propel/src/components/pill/index.tsx
index 359040d1..ccb97d34 100644
--- a/packages/propel/src/components/pill/index.tsx
+++ b/packages/propel/src/components/pill/index.tsx
@@ -1,12 +1,5 @@
 export * from "./icon-pill";
 export * from "./pill";
 export * from "./pill-switch";
-// Re-export the atomic ui parts so a fully custom pill is importable from this convenience.
-export {
-  PillIcon,
-  type PillIconProps,
-  PillLabel,
-  type PillLabelProps,
-  type PillMagnitude,
-  PillSpinner,
-} from "../../ui/pill";
+// Re-export the atomic elements parts so a fully custom pill is importable from this convenience.
+export { PillLabel, type PillLabelProps, type PillMagnitude } from "../../elements/pill";
diff --git a/packages/propel/src/components/pill/pill-switch.tsx b/packages/propel/src/components/pill/pill-switch.tsx
index 465010f8..64d17289 100644
--- a/packages/propel/src/components/pill/pill-switch.tsx
+++ b/packages/propel/src/components/pill/pill-switch.tsx
@@ -3,11 +3,11 @@ import type { Toggle as BaseToggleTypes } from "@base-ui/react/toggle";
 import type * as React from "react";
 
 import {
-  PillIcon,
   PillLabel,
   type PillMagnitude,
   PillSwitch as PillSwitchElement,
-} from "../../ui/pill";
+} from "../../elements/pill";
+import { Icon } from "../../internal/icon";
 
 export type PillSwitchProps<Value extends string = string> = Omit<
   BaseToggleTypes.Props<Value>,
@@ -16,30 +16,29 @@ export type PillSwitchProps<Value extends string = string> = Omit<
   /** Size of the pill. */
   magnitude: PillMagnitude;
   /** A node before the label (inline-start), sized to the pill's `--node-size`. */
-  inlineStartNode?: React.ReactNode;
+  startIcon?: React.ReactNode;
   /** A node after the label (inline-end), sized to the pill's `--node-size`. */
-  inlineEndNode?: React.ReactNode;
+  endIcon?: React.ReactNode;
 };
 
 /**
- * The ready-made toggle pill: composes the styled `PillSwitch` container with `Toggle` behavior
- * (the styled button stays the outer element, the `Toggle` is grafted via `render`), an optional
- * leading node, the `PillLabel`, and an optional trailing node. The selected look is the
- * container's pressed state.
+ * The ready-made toggle pill: grafts Base UI's `Toggle` behavior onto the styled `PillSwitch`
+ * container (behavior outer, the styled button as the render target), with an optional leading
+ * node, the `PillLabel`, and an optional trailing node. The selected look is the container's
+ * pressed state.
  */
 export function PillSwitch<Value extends string = string>({
   magnitude,
-  inlineStartNode,
-  inlineEndNode,
-  render,
+  startIcon,
+  endIcon,
   children,
   ...toggleProps
 }: PillSwitchProps<Value>) {
   return (
-    <PillSwitchElement magnitude={magnitude} render={<Toggle render={render} {...toggleProps} />}>
-      {inlineStartNode ? <PillIcon>{inlineStartNode}</PillIcon> : null}
+    <Toggle {...toggleProps} render={<PillSwitchElement magnitude={magnitude} />}>
+      {startIcon ? <Icon>{startIcon}</Icon> : null}
       <PillLabel>{children}</PillLabel>
-      {inlineEndNode ? <PillIcon>{inlineEndNode}</PillIcon> : null}
-    </PillSwitchElement>
+      {endIcon ? <Icon>{endIcon}</Icon> : null}
+    </Toggle>
   );
 }
diff --git a/packages/propel/src/components/pill/pill.stories.tsx b/packages/propel/src/components/pill/pill.stories.tsx
index 076a7894..45db385d 100644
--- a/packages/propel/src/components/pill/pill.stories.tsx
+++ b/packages/propel/src/components/pill/pill.stories.tsx
@@ -2,7 +2,7 @@ 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, PillIcon, PillLabel, PillSpinner, PillSwitch } from "./index";
+import { IconPill, PillButton, PillLabel, PillSwitch } from "./index";
 
 const MAGNITUDES = ["sm", "md", "lg"] as const;
 
@@ -13,7 +13,7 @@ const clickSpies = { onClick: fn(), onLoadingClick: fn() };
 const meta = {
   title: "Components/Pill",
   component: PillButton,
-  subcomponents: { PillSwitch, IconPill, PillIcon, PillLabel, PillSpinner },
+  subcomponents: { PillSwitch, IconPill, PillLabel },
   args: { magnitude: "md", children: "Label" },
   parameters: {
     design: {
@@ -28,7 +28,7 @@ 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" },
+  args: { magnitude: "md", startIcon: <Plus />, children: "Add label" },
 };
 
 /** Every magnitude (`sm` / `md` / `lg`) of `PillButton`. */
@@ -37,7 +37,7 @@ export const Magnitudes: Story = {
   render: () => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <PillButton key={magnitude} magnitude={magnitude} inlineStartNode={<Tag />}>
+        <PillButton key={magnitude} magnitude={magnitude} startIcon={<Tag />}>
           {magnitude}
         </PillButton>
       ))}
@@ -57,16 +57,16 @@ export const States: Story = {
   },
   render: () => (
     <div className="flex items-center gap-3">
-      <PillButton magnitude="md" inlineStartNode={<Tag />}>
+      <PillButton magnitude="md" startIcon={<Tag />}>
         Default
       </PillButton>
-      <PillButton id="pill-hover" magnitude="md" inlineStartNode={<Tag />}>
+      <PillButton id="pill-hover" magnitude="md" startIcon={<Tag />}>
         Hover
       </PillButton>
-      <PillButton id="pill-active" magnitude="md" inlineStartNode={<Tag />}>
+      <PillButton id="pill-active" magnitude="md" startIcon={<Tag />}>
         Active
       </PillButton>
-      <PillButton magnitude="md" inlineStartNode={<Tag />} disabled>
+      <PillButton magnitude="md" startIcon={<Tag />} disabled>
         Disabled
       </PillButton>
       <PillButton magnitude="md" loading>
@@ -84,10 +84,10 @@ export const Switch: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-3">
-      <PillSwitch magnitude="md" inlineStartNode={<Tag />}>
+      <PillSwitch magnitude="md" startIcon={<Tag />}>
         Off
       </PillSwitch>
-      <PillSwitch magnitude="md" inlineStartNode={<Check />} defaultPressed>
+      <PillSwitch magnitude="md" startIcon={<Check />} defaultPressed>
         On
       </PillSwitch>
     </div>
@@ -156,7 +156,7 @@ export const ButtonClicks: Story = {
 export const SwitchToggles: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
-    <PillSwitch magnitude="md" inlineStartNode={<Tag />}>
+    <PillSwitch magnitude="md" startIcon={<Tag />}>
       Toggle me
     </PillSwitch>
   ),
diff --git a/packages/propel/src/components/pill/pill.tsx b/packages/propel/src/components/pill/pill.tsx
index 9c8c2ebd..70a06c5b 100644
--- a/packages/propel/src/components/pill/pill.tsx
+++ b/packages/propel/src/components/pill/pill.tsx
@@ -1,52 +1,56 @@
+import { Button as BaseButton } from "@base-ui/react/button";
 import { LoaderCircle } from "lucide-react";
 import type * as React from "react";
 
 import {
   PillButton as PillButtonElement,
   type PillButtonProps as PillButtonElementProps,
-  PillIcon,
   PillLabel,
-  PillSpinner,
-} from "../../ui/pill";
+} from "../../elements/pill";
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
 
 export type PillButtonProps = PillButtonElementProps & {
   /** A node before the label (inline-start), sized to the pill's `--node-size`. */
-  inlineStartNode?: React.ReactNode;
+  startIcon?: React.ReactNode;
   /** A node after the label (inline-end), sized to the pill's `--node-size`. */
-  inlineEndNode?: React.ReactNode;
+  endIcon?: React.ReactNode;
   /** Busy state: swaps the inline-start node for a spinner and blocks clicks. */
   loading?: boolean;
 };
 
 /**
- * The ready-made pill button: composes the `PillButton` container with an optional leading node (or
- * a spinner while `loading`), the `PillLabel`, and an optional trailing node. `loading` disables
- * the button while keeping it focusable (`aria-busy`).
+ * The ready-made pill button: grafts Base UI's `Button` behavior onto the styled `PillButton`
+ * container (behavior outer, the styled button as the render target), with an optional leading node
+ * (or a spinner while `loading`), the `PillLabel`, and an optional trailing node. `loading`
+ * disables the button while keeping it focusable (`aria-busy`).
  */
 export function PillButton({
-  inlineStartNode,
-  inlineEndNode,
+  magnitude,
+  startIcon,
+  endIcon,
   loading = false,
   disabled,
   children,
   ...props
 }: PillButtonProps) {
   return (
-    <PillButtonElement
+    <BaseButton
       {...props}
+      render={<PillButtonElement magnitude={magnitude} />}
       disabled={disabled || loading}
       focusableWhenDisabled={loading ? true : undefined}
       aria-busy={loading ? true : undefined}
     >
       {loading ? (
-        <PillSpinner>
+        <Spinner>
           <LoaderCircle />
-        </PillSpinner>
-      ) : inlineStartNode ? (
-        <PillIcon>{inlineStartNode}</PillIcon>
+        </Spinner>
+      ) : startIcon ? (
+        <Icon>{startIcon}</Icon>
       ) : null}
       <PillLabel>{children}</PillLabel>
-      {!loading && inlineEndNode ? <PillIcon>{inlineEndNode}</PillIcon> : null}
-    </PillButtonElement>
+      {!loading && endIcon ? <Icon>{endIcon}</Icon> : null}
+    </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/popover/create-handle.ts b/packages/propel/src/components/popover/create-handle.ts
new file mode 100644
index 00000000..201fea4e
--- /dev/null
+++ b/packages/propel/src/components/popover/create-handle.ts
@@ -0,0 +1,10 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one popover shared by many launch points.
+ */
+export const createPopoverHandle = BasePopover.createHandle;
+
+export type PopoverHandle = ReturnType<typeof createPopoverHandle>;
diff --git a/packages/propel/src/components/popover/index.tsx b/packages/propel/src/components/popover/index.tsx
index e7544ee8..26ed4410 100644
--- a/packages/propel/src/components/popover/index.tsx
+++ b/packages/propel/src/components/popover/index.tsx
@@ -1,8 +1,4 @@
+export * from "./popover";
 export * 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";
+export * from "./popover-trigger";
+export * from "./create-handle";
diff --git a/packages/propel/src/components/popover/popover-content.tsx b/packages/propel/src/components/popover/popover-content.tsx
index 1e30d034..73088ff6 100644
--- a/packages/propel/src/components/popover/popover-content.tsx
+++ b/packages/propel/src/components/popover/popover-content.tsx
@@ -1,17 +1,18 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
 
-import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
-import { PopoverPanelPopup, PopoverPortal, PopoverPositioner } from "../../ui/popover";
+import { PopoverPanelPopup } from "../../elements/popover";
+import { OverlayPanel, type OverlayPanelSizing } from "../../internal/overlay-panel";
+import { Positioner } from "../../internal/positioner";
 
-type PopoverContentWidth = OverlayPanelWidth;
+type PopoverContentSizing = OverlayPanelSizing;
 
 export type PopoverContentProps = Omit<BasePopover.Popup.Props, "className" | "style"> & {
   /** Which side of the trigger the panel opens toward. The spec's adjustable placement axis. */
   side: BasePopover.Positioner.Props["side"];
   /** Alignment of the panel relative to the trigger along `side`. The spec's alignment axis. */
   align: BasePopover.Positioner.Props["align"];
-  /** Fixed panel width. The spec's adjustable width axis. */
-  width: PopoverContentWidth;
+  /** How the panel sizes itself. The spec's adjustable width axis. */
+  sizing: PopoverContentSizing;
   /** Distance in px between the trigger and the panel. @default 4 */
   sideOffset?: BasePopover.Positioner.Props["sideOffset"];
 };
@@ -19,22 +20,27 @@ export type PopoverContentProps = Omit<BasePopover.Popup.Props, "className" | "s
 /**
  * A generic floating panel surface for arbitrary controls and form content. Composes the popover
  * portal + positioner + the shared elevated overlay panel around a bare scroll-body popup; all
- * styling lives in the `ui` parts it composes.
+ * styling lives in the `elements` parts it composes.
  */
 export function PopoverContent({
   side,
   align,
-  width,
+  sizing,
   sideOffset = 4,
   ...props
 }: PopoverContentProps) {
   return (
-    <PopoverPortal>
-      <PopoverPositioner side={side} sideOffset={sideOffset} align={align}>
-        <OverlayPanel elevation="overlay" radius="lg" width={width}>
-          <PopoverPanelPopup {...props} />
+    <BasePopover.Portal>
+      <BasePopover.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <OverlayPanel elevation="overlay" radius="lg" sizing={sizing}>
+          <BasePopover.Popup {...props} render={<PopoverPanelPopup />} />
         </OverlayPanel>
-      </PopoverPositioner>
-    </PopoverPortal>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
   );
 }
diff --git a/packages/propel/src/ui/popover/popover-trigger.tsx b/packages/propel/src/components/popover/popover-trigger.tsx
similarity index 100%
rename from packages/propel/src/ui/popover/popover-trigger.tsx
rename to packages/propel/src/components/popover/popover-trigger.tsx
diff --git a/packages/propel/src/components/popover/popover.stories.tsx b/packages/propel/src/components/popover/popover.stories.tsx
index 28bd6cca..8e660a23 100644
--- a/packages/propel/src/components/popover/popover.stories.tsx
+++ b/packages/propel/src/components/popover/popover.stories.tsx
@@ -1,15 +1,15 @@
-import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../ui/button";
+import { Button } from "../../elements/button";
 import { Checkbox } from "../checkbox/index";
+import { DirectionProvider } from "../direction-provider";
 import { PillSwitch } from "../pill/index";
 import { Radio, RadioGroup } from "../radio/index";
-import { Popover, PopoverContent, PopoverTrigger } from "./index";
+import { createPopoverHandle, Popover, PopoverContent, PopoverTrigger } from "./index";
 
 const meta = {
   title: "Components/Popover",
@@ -89,7 +89,7 @@ export const Default: Story = {
       >
         Options
       </Button>
-      <PopoverContent side="bottom" align="start" width="md" aria-label="Options">
+      <PopoverContent side="bottom" align="start" sizing="md" aria-label="Options">
         <ToggleFooter defaultToggles={{ sub: true }} />
       </PopoverContent>
     </Popover>
@@ -156,7 +156,7 @@ export const DisplayProperties: Story = {
         >
           Display
         </Button>
-        <PopoverContent side="bottom" align="start" width="md" aria-label="Display options">
+        <PopoverContent side="bottom" align="start" sizing="md" aria-label="Display options">
           <PanelLabel>Display Properties</PanelLabel>
           <div className="flex flex-wrap gap-1.5 px-2 py-1.5">
             {PILLS.map((p) => (
@@ -236,7 +236,7 @@ export const DisplayAccordion: Story = {
         >
           Display options
         </Button>
-        <PopoverContent side="bottom" align="start" width="md" aria-label="Display options">
+        <PopoverContent side="bottom" align="start" sizing="md" aria-label="Display options">
           {SECTIONS.map((title) => {
             const key = title.split(" ")[0].toLowerCase();
             const isOpen = open === key;
@@ -307,6 +307,310 @@ export const DisplayAccordionInteraction: Story = {
   },
 };
 
+/**
+ * **OpenOnHover** — `PopoverTrigger`'s `openOnHover` (with a tuned `delay`) opens the panel on
+ * hover for glanceable, read-mostly surfaces, like peeking at the filters currently applied to a
+ * view. Clicking the trigger still toggles the panel, so keyboard and touch users are not locked
+ * out.
+ */
+export const OpenOnHover: Story = {
+  render: () => (
+    <Popover>
+      <Button
+        sizing="hug"
+        prominence="secondary"
+        tone="neutral"
+        magnitude="xl"
+        render={<PopoverTrigger openOnHover delay={100} />}
+      >
+        Filters
+      </Button>
+      <PopoverContent side="bottom" align="start" sizing="md" aria-label="Active filters">
+        <PanelLabel>Applied filters</PanelLabel>
+        <div className="flex flex-col gap-1 px-2 py-1.5 text-13 text-secondary">
+          <div>State: In progress</div>
+          <div>Assignee: You</div>
+          <div>Due date: This week</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const OpenOnHoverInteraction: Story = {
+  ...OpenOnHover,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("hovering the trigger opens the panel after the delay", async () => {
+      await userEvent.hover(canvas.getByRole("button", { name: "Filters" }));
+      await waitFor(() =>
+        expect(document.body.querySelector('[aria-label="Active filters"]')).toBeInTheDocument(),
+      );
+    });
+    await step("Escape dismisses the hover-opened panel", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(
+          document.body.querySelector('[aria-label="Active filters"]'),
+        ).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+// A handle created outside the React tree links a detached `PopoverTrigger` to its `Popover` —
+// the trigger can live anywhere in the DOM, no shared ancestor required.
+const displayPopoverHandle = createPopoverHandle();
+
+/**
+ * **DetachedTrigger** — `createPopoverHandle()` links a `PopoverTrigger` that lives OUTSIDE the
+ * `Popover` to it via the `handle` prop, so a toolbar button can open a panel that is declared
+ * elsewhere in the tree (the panel still anchors to the trigger that opened it).
+ */
+export const DetachedTrigger: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-6">
+      <div className="flex items-center justify-between rounded-md border border-subtle px-3 py-2">
+        <span className="text-13 font-medium text-primary">Work items</span>
+        {/* The trigger: outside the `Popover`, linked through the shared handle. */}
+        <Button
+          sizing="hug"
+          prominence="secondary"
+          tone="neutral"
+          magnitude="xl"
+          render={<PopoverTrigger handle={displayPopoverHandle} />}
+        >
+          Display
+        </Button>
+      </div>
+      {/* The popover: declared elsewhere, associated by `handle`. */}
+      <Popover handle={displayPopoverHandle}>
+        <PopoverContent side="bottom" align="end" sizing="md" aria-label="Display options">
+          <ToggleFooter defaultToggles={{ sub: true }} />
+        </PopoverContent>
+      </Popover>
+    </div>
+  ),
+};
+
+export const DetachedTriggerInteraction: Story = {
+  ...DetachedTrigger,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    await step("the detached trigger opens the handle-linked popover", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Display" }));
+      const panel = await waitFor(() => {
+        const el = document.body.querySelector('[aria-label="Display options"]');
+        if (!el) throw new Error("panel not open");
+        return el as HTMLElement;
+      });
+      await expect(
+        within(panel).getByRole("checkbox", { name: "Show sub-work items" }),
+      ).toBeChecked();
+    });
+    await step("Escape closes it and returns focus to the detached trigger", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(
+          document.body.querySelector('[aria-label="Display options"]'),
+        ).not.toBeInTheDocument(),
+      );
+      await expect(canvas.getByRole("button", { name: "Display" })).toHaveFocus();
+    });
+  },
+};
+
+/**
+ * **MultipleTriggers** — one popover shared by several triggers. Each `PopoverTrigger` carries a
+ * `payload`, and the `Popover`'s render-function children receive the active trigger's payload, so
+ * the shared panel shows the details of whichever member chip opened it (and anchors to that
+ * chip).
+ */
+export const MultipleTriggers: Story = {
+  render: function Render() {
+    type Member = { name: string; role: string };
+    const members: Member[] = [
+      { name: "Aaliyah Chen", role: "Product designer" },
+      { name: "Marco Ruiz", role: "Frontend engineer" },
+    ];
+    return (
+      <Popover<Member>>
+        {({ payload }) => (
+          <>
+            <div className="flex items-center gap-2">
+              {members.map((member) => (
+                <Button
+                  key={member.name}
+                  sizing="hug"
+                  prominence="secondary"
+                  tone="neutral"
+                  magnitude="xl"
+                  render={<PopoverTrigger payload={member} />}
+                >
+                  {member.name}
+                </Button>
+              ))}
+            </div>
+            <PopoverContent side="bottom" align="start" sizing="md" aria-label="Member details">
+              {payload ? (
+                <div className="flex flex-col gap-0.5 px-2 py-1.5">
+                  <div className="text-13 font-medium text-primary">{payload.name}</div>
+                  <div className="text-12 text-tertiary">{payload.role}</div>
+                </div>
+              ) : null}
+            </PopoverContent>
+          </>
+        )}
+      </Popover>
+    );
+  },
+};
+
+export const MultipleTriggersInteraction: Story = {
+  ...MultipleTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const findPanel = () =>
+      waitFor(() => {
+        const el = document.body.querySelector('[aria-label="Member details"]');
+        if (!el) throw new Error("panel not open");
+        return el as HTMLElement;
+      });
+
+    await step("the first trigger opens the shared panel with its payload", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Aaliyah Chen" }));
+      const panel = await findPanel();
+      await expect(within(panel).getByText("Product designer")).toBeInTheDocument();
+    });
+    await step("the second trigger reopens it with its own payload", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(
+          document.body.querySelector('[aria-label="Member details"]'),
+        ).not.toBeInTheDocument(),
+      );
+      await userEvent.click(canvas.getByRole("button", { name: "Marco Ruiz" }));
+      const panel = await findPanel();
+      await expect(within(panel).getByText("Frontend engineer")).toBeInTheDocument();
+    });
+  },
+};
+
+/**
+ * **Controlled** — external state drives the popover via `open` + `onOpenChange`, with `triggerId`
+ * naming the active trigger among several (each `PopoverTrigger` gets an `id`; the change event's
+ * `trigger` element reports which one fired). The panel content follows the active trigger, and a
+ * plain button outside the popover reopens the Filter panel programmatically.
+ */
+export const Controlled: Story = {
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+    const [triggerId, setTriggerId] = React.useState<string | null>(null);
+    return (
+      <div className="flex items-center gap-2">
+        <Popover
+          open={open}
+          triggerId={triggerId}
+          onOpenChange={(nextOpen, eventDetails) => {
+            setOpen(nextOpen);
+            setTriggerId(eventDetails.trigger?.id ?? null);
+          }}
+        >
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<PopoverTrigger id="view-sort-trigger" />}
+          >
+            Sort
+          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            render={<PopoverTrigger id="view-filter-trigger" />}
+          >
+            Filter
+          </Button>
+          <PopoverContent side="bottom" align="start" sizing="md" aria-label="View options">
+            {triggerId === "view-filter-trigger" ? (
+              <>
+                <PanelLabel>Filter by</PanelLabel>
+                <ToggleFooter />
+              </>
+            ) : (
+              <>
+                <PanelLabel>Sort by</PanelLabel>
+                <RadioGroup density="compact" defaultValue="priority">
+                  <PanelRadioRow value="priority" label="Priority" />
+                  <PanelRadioRow value="created" label="Last created" />
+                  <PanelRadioRow value="updated" label="Last updated" />
+                </RadioGroup>
+              </>
+            )}
+          </PopoverContent>
+        </Popover>
+        {/* Programmatic opening: any control can set the state (and the target trigger). */}
+        <Button
+          sizing="hug"
+          prominence="tertiary"
+          tone="neutral"
+          magnitude="xl"
+          onClick={() => {
+            setTriggerId("view-filter-trigger");
+            setOpen(true);
+          }}
+        >
+          Reopen filters
+        </Button>
+      </div>
+    );
+  },
+};
+
+export const ControlledInteraction: Story = {
+  ...Controlled,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const findPanel = () =>
+      waitFor(() => {
+        const el = document.body.querySelector('[aria-label="View options"]');
+        if (!el) throw new Error("panel not open");
+        return el as HTMLElement;
+      });
+    const waitForClosed = () =>
+      waitFor(() =>
+        expect(document.body.querySelector('[aria-label="View options"]')).not.toBeInTheDocument(),
+      );
+
+    await step("the Sort trigger opens the panel with the sort section", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Sort" }));
+      const panel = await findPanel();
+      await expect(within(panel).getByText("Sort by")).toBeInTheDocument();
+    });
+    await step("Escape closes through the controlled state", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitForClosed();
+    });
+    await step("the Filter trigger swaps the panel content", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Filter" }));
+      const panel = await findPanel();
+      await expect(within(panel).getByText("Filter by")).toBeInTheDocument();
+      await userEvent.keyboard("{Escape}");
+      await waitForClosed();
+    });
+    await step("an outside button reopens the Filter panel programmatically", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Reopen filters" }));
+      const panel = await findPanel();
+      await expect(within(panel).getByText("Filter by")).toBeInTheDocument();
+      await userEvent.keyboard("{Escape}");
+      await waitForClosed();
+    });
+  },
+};
+
 /**
  * The popover is RTL-safe: the positioner resolves logical sides, so opening toward `inline-start`
  * / `inline-end` flips with writing direction. Wrapped in Base UI's `DirectionProvider` (and
@@ -344,7 +648,7 @@ export const RTL: Story = {
           >
             خيارات
           </Button>
-          <PopoverContent side="bottom" align="start" width="md" aria-label="Options">
+          <PopoverContent side="bottom" align="start" sizing="md" aria-label="Options">
             <PanelLabel>الترتيب حسب</PanelLabel>
             <RadioGroup density="comfortable" defaultValue="priority">
               <PanelRadioRow value="priority" label="الأولوية" />
diff --git a/packages/propel/src/ui/popover/popover.tsx b/packages/propel/src/components/popover/popover.tsx
similarity index 100%
rename from packages/propel/src/ui/popover/popover.tsx
rename to packages/propel/src/components/popover/popover.tsx
diff --git a/packages/propel/src/components/preview-card/create-handle.ts b/packages/propel/src/components/preview-card/create-handle.ts
new file mode 100644
index 00000000..ddf3a07a
--- /dev/null
+++ b/packages/propel/src/components/preview-card/create-handle.ts
@@ -0,0 +1,10 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one previewcard shared by many launch points.
+ */
+export const createPreviewCardHandle = BasePreviewCard.createHandle;
+
+export type PreviewCardHandle = ReturnType<typeof createPreviewCardHandle>;
diff --git a/packages/propel/src/components/preview-card/index.tsx b/packages/propel/src/components/preview-card/index.tsx
index a6ad3d59..9fa08ede 100644
--- a/packages/propel/src/components/preview-card/index.tsx
+++ b/packages/propel/src/components/preview-card/index.tsx
@@ -1,18 +1,16 @@
+export * from "./preview-card";
+export * from "./preview-card-arrow";
 export * from "./preview-card-content";
-// Re-export the atomic parts so a full preview card can be assembled from one entry.
+export * from "./preview-card-description";
+export * from "./preview-card-title";
+export * from "./preview-card-trigger";
+export * from "./create-handle";
+// Re-export propel's STYLED preview-card parts so a full card can be assembled from one entry. The
+// remaining behavior/structural parts (`Portal`, `Backdrop`, `Positioner`) are composed inside
+// `PreviewCardContent`, so consumers never wire Base UI directly.
 export {
-  PreviewCard,
-  type PreviewCardProps,
-  PreviewCardArrow,
-  type PreviewCardArrowProps,
   PreviewCardBody,
   type PreviewCardBodyProps,
-  PreviewCardDescription,
-  type PreviewCardDescriptionProps,
   PreviewCardImage,
   type PreviewCardImageProps,
-  PreviewCardTitle,
-  type PreviewCardTitleProps,
-  PreviewCardTrigger,
-  type PreviewCardTriggerProps,
-} from "../../ui/preview-card";
+} from "../../elements/preview-card";
diff --git a/packages/propel/src/components/preview-card/preview-card-arrow.tsx b/packages/propel/src/components/preview-card/preview-card-arrow.tsx
new file mode 100644
index 00000000..6bffb582
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card-arrow.tsx
@@ -0,0 +1,13 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+
+import { Arrow } from "../../internal/arrow";
+
+export type PreviewCardArrowProps = Omit<BasePreviewCard.Arrow.Props, "className" | "style">;
+
+/**
+ * The optional caret pointing from the popup back to the trigger: Base UI `PreviewCard.Arrow`
+ * behavior grafted onto the shared `internal/arrow` styled caret (tinted to the popup surface).
+ */
+export function PreviewCardArrow(props: PreviewCardArrowProps) {
+  return <BasePreviewCard.Arrow {...props} render={<Arrow />} />;
+}
diff --git a/packages/propel/src/components/preview-card/preview-card-content.tsx b/packages/propel/src/components/preview-card/preview-card-content.tsx
index cd2fabc4..a8b2c710 100644
--- a/packages/propel/src/components/preview-card/preview-card-content.tsx
+++ b/packages/propel/src/components/preview-card/preview-card-content.tsx
@@ -1,25 +1,25 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+
 import {
-  PreviewCardBackdrop,
   PreviewCardPopup,
   type PreviewCardPopupProps,
-  PreviewCardPortal,
-  PreviewCardPositioner,
-  type PreviewCardPositionerProps,
-} from "../../ui/preview-card";
+} from "../../elements/preview-card/preview-card-popup";
+import { Backdrop } from "../../internal/backdrop";
+import { Positioner } from "../../internal/positioner";
 
 export type PreviewCardContentProps = PreviewCardPopupProps & {
   /** Which side of the trigger the card opens toward. @default "bottom" */
-  side?: PreviewCardPositionerProps["side"];
+  side?: BasePreviewCard.Positioner.Props["side"];
   /** Distance in px between the trigger and the card. @default 4 */
-  sideOffset?: PreviewCardPositionerProps["sideOffset"];
+  sideOffset?: BasePreviewCard.Positioner.Props["sideOffset"];
   /** Alignment of the card relative to the trigger along `side`. @default "center" */
-  align?: PreviewCardPositionerProps["align"];
+  align?: BasePreviewCard.Positioner.Props["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.
+ * Convenience that composes the anchored preview card boilerplate — Base UI portal, backdrop,
+ * positioner, and popup grafted onto Propel's styled surfaces — so a consumer only writes the
+ * trigger and the card body. Pass `side`/`sideOffset`/`align` through to the positioner.
  */
 export function PreviewCardContent({
   side = "bottom",
@@ -28,11 +28,16 @@ export function PreviewCardContent({
   ...props
 }: PreviewCardContentProps) {
   return (
-    <PreviewCardPortal>
-      <PreviewCardBackdrop />
-      <PreviewCardPositioner side={side} sideOffset={sideOffset} align={align}>
-        <PreviewCardPopup {...props} />
-      </PreviewCardPositioner>
-    </PreviewCardPortal>
+    <BasePreviewCard.Portal>
+      <BasePreviewCard.Backdrop render={<Backdrop />} />
+      <BasePreviewCard.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <BasePreviewCard.Popup {...props} render={<PreviewCardPopup />} />
+      </BasePreviewCard.Positioner>
+    </BasePreviewCard.Portal>
   );
 }
diff --git a/packages/propel/src/components/preview-card/preview-card-description.tsx b/packages/propel/src/components/preview-card/preview-card-description.tsx
new file mode 100644
index 00000000..748c2c65
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card-description.tsx
@@ -0,0 +1,15 @@
+import {
+  OverlayDescription,
+  type OverlayDescriptionProps,
+} from "../../internal/overlay-description";
+
+export type PreviewCardDescriptionProps = Omit<OverlayDescriptionProps, "magnitude">;
+
+/**
+ * Supporting description text beneath the title — the shared `internal/overlay-description` recipe
+ * at the preview card's `md` size (13px secondary text). The size is fixed here (a `components`
+ * default, rule 13).
+ */
+export function PreviewCardDescription(props: PreviewCardDescriptionProps) {
+  return <OverlayDescription magnitude="md" {...props} />;
+}
diff --git a/packages/propel/src/components/preview-card/preview-card-title.tsx b/packages/propel/src/components/preview-card/preview-card-title.tsx
new file mode 100644
index 00000000..c8ea6058
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card-title.tsx
@@ -0,0 +1,12 @@
+import { OverlayTitle, type OverlayTitleProps } from "../../internal/overlay-title";
+
+export type PreviewCardTitleProps = Omit<OverlayTitleProps, "magnitude">;
+
+/**
+ * The card's primary heading — the shared `internal/overlay-title` recipe at the preview card's
+ * `md` size (semibold 14px primary text). The size is fixed here (a `components` default, rule
+ * 13).
+ */
+export function PreviewCardTitle(props: PreviewCardTitleProps) {
+  return <OverlayTitle magnitude="md" {...props} />;
+}
diff --git a/packages/propel/src/components/preview-card/preview-card-trigger.tsx b/packages/propel/src/components/preview-card/preview-card-trigger.tsx
new file mode 100644
index 00000000..e1881963
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card-trigger.tsx
@@ -0,0 +1,12 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+
+export type PreviewCardTriggerProps = Omit<BasePreviewCard.Trigger.Props, "className" | "style">;
+
+/**
+ * The link that opens the preview card on hover or focus. Renders an `<a>` by default; pass
+ * `render` to project the trigger onto your own element (e.g. an `AnchorButton` rendering an
+ * `<a>`). Maps 1:1 to `PreviewCard.Trigger`.
+ */
+export function PreviewCardTrigger(props: PreviewCardTriggerProps) {
+  return <BasePreviewCard.Trigger {...props} />;
+}
diff --git a/packages/propel/src/components/preview-card/preview-card.stories.tsx b/packages/propel/src/components/preview-card/preview-card.stories.tsx
index c61c66b0..a19a6f89 100644
--- a/packages/propel/src/components/preview-card/preview-card.stories.tsx
+++ b/packages/propel/src/components/preview-card/preview-card.stories.tsx
@@ -1,19 +1,24 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
+import { Button } from "../button/index";
 import {
+  createPreviewCardHandle,
   PreviewCard,
   PreviewCardArrow,
   PreviewCardBody,
   PreviewCardContent,
   PreviewCardDescription,
+  PreviewCardImage,
   PreviewCardTitle,
   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`).
+// the card body (and may drop in the re-exported `PreviewCardArrow`). The trigger is
+// `PreviewCardTrigger` — propel's behavior passthrough of Base UI's `PreviewCard.Trigger`.
 
 const meta = {
   title: "Components/PreviewCard",
@@ -23,6 +28,7 @@ const meta = {
     PreviewCardContent,
     PreviewCardArrow,
     PreviewCardBody,
+    PreviewCardImage,
     PreviewCardTitle,
     PreviewCardDescription,
   },
@@ -31,26 +37,26 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Real external hrefs keep link semantics, but navigation is cancelled: the Vitest
+// browser runner shares one page across story files, so a real navigation tears down
+// the iframe and fails unrelated stories.
+function triggerAnchor(href: string) {
+  return (
+    <a
+      href={href}
+      className="text-accent-strong underline"
+      onClick={(event) => event.preventDefault()}
+    />
+  );
+}
+
 /** 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={
-            // Real external href for link semantics, but cancel navigation: the Vitest
-            // browser runner shares one page across story files, so a real navigation
-            // tears down the iframe and fails unrelated stories.
-            <a
-              href="https://plane.so"
-              className="text-accent-strong underline"
-              onClick={(event) => event.preventDefault()}
-            />
-          }
-        >
-          Plane
-        </PreviewCardTrigger>
+        <PreviewCardTrigger render={triggerAnchor("https://plane.so")}>Plane</PreviewCardTrigger>
         <PreviewCardContent side="top">
           <PreviewCardBody>
             <PreviewCardTitle>Plane</PreviewCardTitle>
@@ -76,3 +82,232 @@ export const DefaultInteraction: Story = {
     );
   },
 };
+
+/**
+ * A link preview with a thumbnail: `PreviewCardImage` sits above the text body and bakes in the
+ * clip + cover-fit treatment, so the consumer only supplies `src`/`alt` and the intrinsic
+ * dimensions.
+ */
+export const WithImage: Story = {
+  render: () => (
+    <p className="max-w-prose text-14 text-secondary">
+      Skim the{" "}
+      <PreviewCard>
+        <PreviewCardTrigger render={triggerAnchor("https://plane.so/brand")}>
+          brand guidelines
+        </PreviewCardTrigger>
+        <PreviewCardContent sideOffset={8}>
+          <PreviewCardImage
+            src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
+            alt="Station signage set in large, high-contrast lettering"
+            width={320}
+            height={214}
+          />
+          <PreviewCardBody>
+            <PreviewCardTitle>Brand guidelines</PreviewCardTitle>
+            <PreviewCardDescription>
+              Typography, color, and logo usage for everything Plane ships.
+            </PreviewCardDescription>
+          </PreviewCardBody>
+          <PreviewCardArrow />
+        </PreviewCardContent>
+      </PreviewCard>{" "}
+      before shipping the new landing page.
+    </p>
+  ),
+};
+
+export const WithImageInteraction: Story = {
+  ...WithImage,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    await userEvent.hover(canvas.getByRole("link", { name: "brand guidelines" }));
+    await waitFor(
+      () =>
+        expect(
+          within(document.body).getByRole("img", { name: /station signage/i }),
+        ).toBeInTheDocument(),
+      { timeout: 3000 },
+    );
+  },
+};
+
+// Per-trigger payload content: the card resolves its body from the string payload the
+// active trigger passed, so one card serves several launch points.
+const topics: Record<string, { title: string; description: string }> = {
+  cycles: {
+    title: "Cycles",
+    description: "Time-boxed iterations for planning and shipping work in focused sprints.",
+  },
+  modules: {
+    title: "Modules",
+    description: "Larger bodies of related work items tracked together across cycles.",
+  },
+};
+
+// One handle shared by several launch points: created OUTSIDE the React tree with
+// `createPreviewCardHandle()` and passed to both the detached triggers and the root.
+const topicPreviewCard = createPreviewCardHandle();
+
+/**
+ * One card serving several detached triggers. The triggers are rendered outside the `PreviewCard`
+ * root and linked to it through a shared `createPreviewCardHandle()` handle — and each passes a
+ * `payload` that the card reads through the root's function-as-children to show trigger-specific
+ * content.
+ */
+export const DetachedTriggers: Story = {
+  render: () => (
+    <>
+      <p className="max-w-prose text-14 text-secondary">
+        Plan sprint work with{" "}
+        <PreviewCardTrigger
+          handle={topicPreviewCard}
+          payload="cycles"
+          render={triggerAnchor("https://docs.plane.so/core-concepts/cycles")}
+        >
+          cycles
+        </PreviewCardTrigger>{" "}
+        and group feature work with{" "}
+        <PreviewCardTrigger
+          handle={topicPreviewCard}
+          payload="modules"
+          render={triggerAnchor("https://docs.plane.so/core-concepts/modules")}
+        >
+          modules
+        </PreviewCardTrigger>
+        .
+      </p>
+      <PreviewCard handle={topicPreviewCard}>
+        {({ payload }) => {
+          const topic = typeof payload === "string" ? topics[payload] : undefined;
+          return (
+            <PreviewCardContent sideOffset={8}>
+              {topic === undefined ? null : (
+                <PreviewCardBody>
+                  <PreviewCardTitle>{topic.title}</PreviewCardTitle>
+                  <PreviewCardDescription>{topic.description}</PreviewCardDescription>
+                </PreviewCardBody>
+              )}
+              <PreviewCardArrow />
+            </PreviewCardContent>
+          );
+        }}
+      </PreviewCard>
+    </>
+  ),
+};
+
+export const DetachedTriggersInteraction: Story = {
+  ...DetachedTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const body = within(document.body);
+    await step("hovering the cycles link opens its preview", async () => {
+      await userEvent.hover(canvas.getByRole("link", { name: "cycles" }));
+      await waitFor(() => expect(body.getByText(/focused sprints/)).toBeInTheDocument(), {
+        timeout: 3000,
+      });
+    });
+    await step("the modules link reuses the same card with its own payload", async () => {
+      await userEvent.unhover(canvas.getByRole("link", { name: "cycles" }));
+      await userEvent.hover(canvas.getByRole("link", { name: "modules" }));
+      await waitFor(
+        () => expect(body.getByText(/tracked together across cycles/)).toBeInTheDocument(),
+        { timeout: 3000 },
+      );
+    });
+  },
+};
+
+/**
+ * A controlled card shared by several in-root triggers: `open` + `onOpenChange` own the visibility,
+ * and `triggerId` (paired with each trigger's `id`) selects which trigger anchors the card — read
+ * back from `eventDetails.trigger` on hover, or set programmatically to open the card from
+ * application code.
+ */
+export const Controlled: Story = {
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+    const [triggerId, setTriggerId] = React.useState<string | null>(null);
+    return (
+      <div className="flex flex-col items-start gap-4">
+        <PreviewCard
+          open={open}
+          triggerId={triggerId}
+          onOpenChange={(nextOpen, eventDetails) => {
+            setOpen(nextOpen);
+            setTriggerId(eventDetails.trigger?.id ?? null);
+          }}
+        >
+          {({ payload }) => {
+            const topic = typeof payload === "string" ? topics[payload] : undefined;
+            return (
+              <>
+                <p className="max-w-prose text-14 text-secondary">
+                  Group sprint work into{" "}
+                  <PreviewCardTrigger
+                    id="cycles-trigger"
+                    payload="cycles"
+                    render={triggerAnchor("https://docs.plane.so/core-concepts/cycles")}
+                  >
+                    cycles
+                  </PreviewCardTrigger>{" "}
+                  or feature work into{" "}
+                  <PreviewCardTrigger
+                    id="modules-trigger"
+                    payload="modules"
+                    render={triggerAnchor("https://docs.plane.so/core-concepts/modules")}
+                  >
+                    modules
+                  </PreviewCardTrigger>
+                  .
+                </p>
+                <PreviewCardContent sideOffset={8}>
+                  {topic === undefined ? null : (
+                    <PreviewCardBody>
+                      <PreviewCardTitle>{topic.title}</PreviewCardTitle>
+                      <PreviewCardDescription>{topic.description}</PreviewCardDescription>
+                    </PreviewCardBody>
+                  )}
+                  <PreviewCardArrow />
+                </PreviewCardContent>
+              </>
+            );
+          }}
+        </PreviewCard>
+        <Button
+          prominence="secondary"
+          tone="neutral"
+          magnitude="lg"
+          sizing="hug"
+          onClick={() => {
+            setTriggerId("modules-trigger");
+            setOpen(true);
+          }}
+        >
+          Preview modules
+        </Button>
+      </div>
+    );
+  },
+};
+
+export const ControlledInteraction: Story = {
+  ...Controlled,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, step }) => {
+    const body = within(document.body);
+    await step("the button opens the card programmatically at the modules trigger", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Preview modules" }));
+      await waitFor(() =>
+        expect(body.getByText(/tracked together across cycles/)).toBeInTheDocument(),
+      );
+    });
+    await step("Escape closes it through onOpenChange", async () => {
+      await userEvent.keyboard("{Escape}");
+      await waitFor(() =>
+        expect(body.queryByText(/tracked together across cycles/)).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
diff --git a/packages/propel/src/components/preview-card/preview-card.tsx b/packages/propel/src/components/preview-card/preview-card.tsx
new file mode 100644
index 00000000..c1445b43
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card.tsx
@@ -0,0 +1,13 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+
+export type PreviewCardProps = Omit<BasePreviewCard.Root.Props, "className" | "style">;
+
+/**
+ * The preview-card Root — Base UI's context/state provider (renders no element of its own). A
+ * behavior-only role, so it lives in `components` (rules 1a, 2); the styled parts live in
+ * `elements/preview-card` (and shared `internal/` primitives) and are grafted onto Base UI behavior
+ * here.
+ */
+export function PreviewCard(props: PreviewCardProps) {
+  return <BasePreviewCard.Root {...props} />;
+}
diff --git a/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx b/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx
index 5d56294b..1884400c 100644
--- a/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx
+++ b/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx
@@ -1,9 +1,8 @@
 import type * as React from "react";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
 import { useFieldOptionMagnitude } from "../../internal/field-option-magnitude";
-import { FieldItem } from "../../ui/field/field-item";
-import type { FieldMagnitude } from "../../ui/field/variants";
-import { FieldItemContent } from "../field";
+import { FieldItem, FieldItemContent } from "../field";
 import { Radio, type RadioProps } from "../radio/radio";
 
 export type RadioGroupFieldOptionProps = RadioProps & {
diff --git a/packages/propel/src/components/radio-group-field/radio-group-field.stories.tsx b/packages/propel/src/components/radio-group-field/radio-group-field.stories.tsx
index 93f4eb85..c8724d9e 100644
--- a/packages/propel/src/components/radio-group-field/radio-group-field.stories.tsx
+++ b/packages/propel/src/components/radio-group-field/radio-group-field.stories.tsx
@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
+import type { RadioGroupDensity } from "../radio/index";
 import { RadioGroupField, RadioGroupFieldOption } from "./index";
 
+const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
+const DENSITIES: RadioGroupDensity[] = ["comfortable", "compact"];
+
 // A fieldset of radio options (Field + Fieldset + RadioGroup + option rows).
 const meta = {
   title: "Components/RadioGroupField",
@@ -30,6 +35,54 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+/** Legend, description, and option text at every magnitude (`md` / `lg` / `xl`). */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each group with the magnitude name, so disable those
+  // controls (plus `name`, overridden per group); the rest stay live and update every group.
+  argTypes: {
+    magnitude: { control: false },
+    label: { control: false },
+    name: { control: false },
+  },
+  render: (args) => (
+    <div className="flex items-start gap-10">
+      {MAGNITUDES.map((magnitude) => (
+        <RadioGroupField
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          label={magnitude}
+          name={`priority-${magnitude}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** Row spacing between options: `comfortable` keeps a gap, `compact` stacks them flush. */
+export const Densities: Story = {
+  // Iterates `density` and labels each group with the density name, so disable those
+  // controls (plus `name`, overridden per group); the rest stay live and update every group.
+  argTypes: {
+    density: { control: false },
+    label: { control: false },
+    name: { control: false },
+  },
+  render: (args) => (
+    <div className="flex items-start gap-10">
+      {DENSITIES.map((density) => (
+        <RadioGroupField
+          key={density}
+          {...args}
+          density={density}
+          label={density}
+          name={`priority-${density}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
 export const RendersRadios: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
diff --git a/packages/propel/src/components/radio-group-field/radio-group-field.tsx b/packages/propel/src/components/radio-group-field/radio-group-field.tsx
index bf09346a..0d0177bb 100644
--- a/packages/propel/src/components/radio-group-field/radio-group-field.tsx
+++ b/packages/propel/src/components/radio-group-field/radio-group-field.tsx
@@ -1,12 +1,11 @@
 import type * as React from "react";
 
+import type { FieldMagnitude } from "../../elements/field/variants";
+import { Fieldset, FieldsetLegend } from "../../elements/fieldset/index";
 import { FieldOptionMagnitudeProvider } from "../../internal/field-option-magnitude";
-import { Field } from "../../ui/field/field";
-import { FieldDescription } from "../../ui/field/field-description";
-import type { FieldMagnitude } from "../../ui/field/variants";
-import { Fieldset, FieldsetLegend } from "../../ui/fieldset/index";
-import { RadioGroup, type RadioGroupProps } from "../../ui/radio/index";
+import { Field, FieldDescription } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
+import { RadioGroup, type RadioGroupProps } from "../radio/index";
 
 export type RadioGroupFieldProps<Value = string> = Omit<
   RadioGroupProps<Value>,
diff --git a/packages/propel/src/components/radio/index.tsx b/packages/propel/src/components/radio/index.tsx
index b8913a42..dad2b547 100644
--- a/packages/propel/src/components/radio/index.tsx
+++ b/packages/propel/src/components/radio/index.tsx
@@ -1,10 +1,5 @@
 export * 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";
+export * from "./radio-group";
+// Re-export the atomic styled parts so the full radio surface is importable from this convenience
+// entry; they compose inside the ready-made `Radio` above.
+export { Radio as RadioRing, RadioIndicator, type RadioIndicatorProps } from "../../elements/radio";
diff --git a/packages/propel/src/components/radio/radio-group.tsx b/packages/propel/src/components/radio/radio-group.tsx
new file mode 100644
index 00000000..de8c687d
--- /dev/null
+++ b/packages/propel/src/components/radio/radio-group.tsx
@@ -0,0 +1,25 @@
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { RadioGroup as BaseRadioGroupTypes } from "@base-ui/react/radio-group";
+
+import { RadioGroup as RadioGroupElement, type RadioGroupDensity } from "../../elements/radio";
+
+export type { RadioGroupDensity } from "../../elements/radio";
+
+// Mirror `BaseRadioGroup`'s own `Value` generic (default `any`); the typed/safe variant is the
+// components-tier `RadioGroupField`.
+export type RadioGroupProps<Value = any> = Omit<
+  BaseRadioGroupTypes.Props<Value>,
+  "className" | "style"
+> & {
+  /** Spacing between radio options. */
+  density: RadioGroupDensity;
+};
+
+/**
+ * Groups a set of `Radio` options so at most one can be selected at a time. Grafts Base UI's
+ * radio-group behavior (single-select state + roving focus) onto the styled `RadioGroup` frame,
+ * which owns the required row-spacing `density`.
+ */
+export function RadioGroup<Value = any>({ density, ...props }: RadioGroupProps<Value>) {
+  return <BaseRadioGroup render={<RadioGroupElement density={density} />} {...props} />;
+}
diff --git a/packages/propel/src/components/radio/radio.stories.tsx b/packages/propel/src/components/radio/radio.stories.tsx
index 20393d98..ccd82b80 100644
--- a/packages/propel/src/components/radio/radio.stories.tsx
+++ b/packages/propel/src/components/radio/radio.stories.tsx
@@ -1,17 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
 import { expect } from "storybook/test";
 
-import { Fieldset, FieldsetLegend } from "../../ui/fieldset/index";
+import { Fieldset, FieldsetLegend } from "../../elements/fieldset/index";
+import { Button } from "../button/index";
 import { Field } from "../field/index";
+import { Form, FormActions, FormBody } from "../form/index";
 import { RadioGroupField, RadioGroupFieldOption } from "../radio-group-field/index";
-import { Radio, RadioGroup } from "./index";
+import { Radio, RadioGroup, RadioIndicator, RadioRing } from "./index";
 
 const meta = {
   title: "Components/Radio",
   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, RadioGroupField, RadioGroupFieldOption },
+  subcomponents: { Radio, RadioGroupField, RadioGroupFieldOption, RadioIndicator, RadioRing },
   parameters: {
     design: {
       type: "figma",
@@ -114,6 +117,133 @@ export const States: Story = {
   ),
 };
 
+/**
+ * A radio renders as a `<span>` by default so an enclosing `<label>` stays valid HTML. When the
+ * label is a sibling wired up with `htmlFor`/`id` instead, render the ring as a real `<button>`:
+ * pass `nativeButton` and graft the styled `RadioRing` onto a `<button>` via `render`. The look is
+ * unchanged, and clicking a sibling label still selects its radio.
+ */
+export const NativeButton: Story = {
+  args: { density: "comfortable" },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <div id="storage-type-label" className="text-13 font-medium text-primary">
+        Storage type
+      </div>
+      <RadioGroup density="comfortable" defaultValue="ssd" aria-labelledby="storage-type-label">
+        <div className="flex items-center gap-2">
+          <Radio
+            value="ssd"
+            id="storage-type-ssd"
+            nativeButton
+            render={<RadioRing render={<button type="button" />} />}
+          />
+          <label htmlFor="storage-type-ssd" className="text-13 text-secondary">
+            SSD
+          </label>
+        </div>
+        <div className="flex items-center gap-2">
+          <Radio
+            value="hdd"
+            id="storage-type-hdd"
+            nativeButton
+            render={<RadioRing render={<button type="button" />} />}
+          />
+          <label htmlFor="storage-type-hdd" className="text-13 text-secondary">
+            HDD
+          </label>
+        </div>
+      </RadioGroup>
+    </div>
+  ),
+};
+
+/**
+ * Interaction test: the native-button pattern keeps the radio semantics — each ring IS a `<button>`
+ * with `role="radio"`, the sibling `htmlFor` label names it, and clicking the label selects it.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const NativeButtonInteraction: Story = {
+  ...NativeButton,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const ssd = canvas.getByRole("radio", { name: "SSD" });
+    const hdd = canvas.getByRole("radio", { name: "HDD" });
+
+    // Real <button> elements, named by their sibling labels.
+    await expect(ssd.tagName).toBe("BUTTON");
+    await expect(hdd.tagName).toBe("BUTTON");
+    await expect(ssd).toHaveAttribute("aria-checked", "true");
+
+    // Clicking a sibling label activates its radio, like any labelled native button.
+    await userEvent.click(canvas.getByText("HDD"));
+    await expect(hdd).toHaveAttribute("aria-checked", "true");
+    await expect(ssd).toHaveAttribute("aria-checked", "false");
+  },
+};
+
+/**
+ * Form integration: `RadioGroupField` already owns the `Field` name, so inside a `Form` the group's
+ * selected value serializes with the submission — `onFormSubmit` receives it under the field's
+ * `name`, with no extra wiring on the radios. Submit to see the captured value.
+ */
+export const FormIntegration: Story = {
+  args: { density: "comfortable" },
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const [submitted, setSubmitted] = React.useState<{ storageType: string } | null>(null);
+    return (
+      <div className="flex w-80 flex-col gap-3">
+        <Form<{ storageType: string }> onFormSubmit={(values) => setSubmitted(values)}>
+          <FormBody layout="single">
+            <RadioGroupField
+              name="storageType"
+              label="Storage type"
+              magnitude="md"
+              density="comfortable"
+              defaultValue="ssd"
+            >
+              <RadioGroupFieldOption value="ssd" label="SSD" />
+              <RadioGroupFieldOption value="hdd" label="HDD" />
+            </RadioGroupField>
+          </FormBody>
+          <FormActions layout="inline">
+            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
+              Save
+            </Button>
+          </FormActions>
+        </Form>
+        <output className="text-13 text-secondary">
+          {submitted ? `Storage type: ${submitted.storageType}` : null}
+        </output>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interaction test: the `Field` name serializes the group's selected value into `Form`'s
+ * `onFormSubmit` — the default selection first, then the newly picked option after resubmitting.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const FormIntegrationInteraction: Story = {
+  ...FormIntegration,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const save = canvas.getByRole("button", { name: "Save" });
+
+    // Submitting with the default selection serializes "ssd".
+    await userEvent.click(save);
+    await expect(canvas.getByText("Storage type: ssd")).toBeInTheDocument();
+
+    // Picking another option and resubmitting serializes the new value.
+    await userEvent.click(canvas.getByRole("radio", { name: "HDD" }));
+    await userEvent.click(save);
+    await expect(canvas.getByText("Storage type: hdd")).toBeInTheDocument();
+  },
+};
+
 /**
  * With no `value`/`defaultValue`, the group starts with nothing checked. Selecting an option checks
  * it and clears any previously-selected one, so at most one radio is checked at a time. Tagged so
diff --git a/packages/propel/src/components/radio/radio.tsx b/packages/propel/src/components/radio/radio.tsx
index ac29a584..041cb4ba 100644
--- a/packages/propel/src/components/radio/radio.tsx
+++ b/packages/propel/src/components/radio/radio.tsx
@@ -1,23 +1,21 @@
-import {
-  Radio as RadioElement,
-  RadioIndicator,
-  type RadioProps as RadioElementProps,
-} from "../../ui/radio";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
 
-export type RadioProps = RadioElementProps;
+import { Radio as RadioElement, RadioIndicator } from "../../elements/radio";
+
+export type RadioProps = Omit<BaseRadio.Root.Props, "className" | "style">;
 
 /**
- * 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`.
+ * The ready-made radio option: grafts Base UI's `Radio` behavior onto the styled `Radio` ring and
+ * `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 (
-    <RadioElement {...props}>
-      <RadioIndicator />
-    </RadioElement>
+    <BaseRadio.Root render={<RadioElement />} {...props}>
+      <BaseRadio.Indicator render={<RadioIndicator />} />
+    </BaseRadio.Root>
   );
 }
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 84168bfe..54349cc0 100644
--- a/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
+++ b/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { ScrollArea } from "./index";
+import { ScrollArea, type ScrollAreaProps } from "./index";
+
+const MAGNITUDES: ScrollAreaProps["magnitude"][] = ["thin", "standard"];
 
 const meta = {
   title: "Components/ScrollArea",
@@ -104,3 +106,44 @@ export const AlwaysVisible: Story = {
     ),
   },
 };
+
+/**
+ * Both scrollbar gutter steps side by side: `thin` — 12 px gutter (3 px inset padding), for dense
+ * UI like menus and pickers; `standard` — 16 px gutter (5 px inset padding), for roomier panels.
+ * The thumb stays 6 px in both. Each panel overflows on both axes so the vertical rail, horizontal
+ * rail, and corner are all auditable; shown with `visibility="always"` so the rails are visible at
+ * rest.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and captions each panel with it, so that control is disabled.
+  // `orientation` is fixed to `both` because the showcase content overflows both axes (rendering
+  // fewer rails would leave an unscrollbarred overflow); `visibility` stays live and updates both
+  // panels at once.
+  argTypes: { magnitude: { control: false }, orientation: { control: false } },
+  args: {
+    orientation: "both",
+    visibility: "always",
+    magnitude: "thin",
+    children: (
+      <div className="flex w-max 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 content wide and tall enough to overflow both axes.
+          </p>
+        ))}
+      </div>
+    ),
+  },
+  render: (args) => (
+    <div className="flex min-h-0 flex-1 gap-3 p-3">
+      {MAGNITUDES.map((magnitude) => (
+        <div key={magnitude} className="flex min-w-0 flex-1 flex-col gap-1.5">
+          <p className="text-12 text-tertiary">{magnitude}</p>
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-subtle">
+            <ScrollArea {...args} magnitude={magnitude} />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/components/scroll-area/scroll-area.tsx b/packages/propel/src/components/scroll-area/scroll-area.tsx
index 38751656..d51299a5 100644
--- a/packages/propel/src/components/scroll-area/scroll-area.tsx
+++ b/packages/propel/src/components/scroll-area/scroll-area.tsx
@@ -1,3 +1,4 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import * as React from "react";
 
 import {
@@ -8,7 +9,7 @@ import {
   type ScrollAreaScrollbarVisibility,
   ScrollAreaThumb,
   ScrollAreaViewport,
-} from "../../ui/scroll-area";
+} from "../../elements/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
@@ -17,7 +18,7 @@ import {
 // 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 gutter and thumb styling are owned by the
-// `ui/scroll-area` parts (their cva), reveal/width driven by the `visibility` and `magnitude`
+// `elements/scroll-area` parts (their cva), reveal/width driven by the `visibility` and `magnitude`
 // props threaded to each `ScrollAreaScrollbar`.
 
 /** Which axes scroll. Drives which scrollbars (and the corner) are rendered. */
@@ -58,20 +59,27 @@ export function ScrollArea({ orientation, visibility, magnitude, children }: Scr
     // 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.
-    <ScrollAreaElement>
-      <ScrollAreaViewport>{children}</ScrollAreaViewport>
+    // scrollbars are positioned absolutely by Base UI, so they never take flex space. The
+    // Base UI behavior parts graft onto the styled `elements` parts via `render`.
+    <BaseScrollArea.Root render={<ScrollAreaElement />}>
+      <BaseScrollArea.Viewport render={<ScrollAreaViewport />}>{children}</BaseScrollArea.Viewport>
       {showVertical ? (
-        <ScrollAreaScrollbar orientation="vertical" visibility={visibility} magnitude={magnitude}>
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
+        <BaseScrollArea.Scrollbar
+          orientation="vertical"
+          render={<ScrollAreaScrollbar visibility={visibility} magnitude={magnitude} />}
+        >
+          <BaseScrollArea.Thumb render={<ScrollAreaThumb />} />
+        </BaseScrollArea.Scrollbar>
       ) : null}
       {showHorizontal ? (
-        <ScrollAreaScrollbar orientation="horizontal" visibility={visibility} magnitude={magnitude}>
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
+        <BaseScrollArea.Scrollbar
+          orientation="horizontal"
+          render={<ScrollAreaScrollbar visibility={visibility} magnitude={magnitude} />}
+        >
+          <BaseScrollArea.Thumb render={<ScrollAreaThumb />} />
+        </BaseScrollArea.Scrollbar>
       ) : null}
-      {orientation === "both" ? <ScrollAreaCorner /> : null}
-    </ScrollAreaElement>
+      {orientation === "both" ? <BaseScrollArea.Corner render={<ScrollAreaCorner />} /> : null}
+    </BaseScrollArea.Root>
   );
 }
diff --git a/packages/propel/src/components/select-field/select-field.stories.tsx b/packages/propel/src/components/select-field/select-field.stories.tsx
index 08c2e009..8fa1417c 100644
--- a/packages/propel/src/components/select-field/select-field.stories.tsx
+++ b/packages/propel/src/components/select-field/select-field.stories.tsx
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import { SelectField } from "./index";
+import { type FieldMagnitude, SelectField } from "./index";
+
+const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
 
 const SERVER_TYPES = [
   { label: "General purpose", value: "general" },
@@ -28,6 +30,23 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+/**
+ * Every magnitude (`md` / `lg` / `xl`) stacked. Magnitude steps the label and helper-text size; the
+ * trigger scale follows it, with `xl` mapping onto the largest trigger (`lg`).
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each field with the magnitude name, so disable
+  // just those two controls; the rest stay live and update every field at once.
+  argTypes: { magnitude: { control: false }, label: { control: false } },
+  render: (args) => (
+    <div className="flex w-72 flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <SelectField key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
 export const RendersTrigger: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
diff --git a/packages/propel/src/components/select-field/select-field.tsx b/packages/propel/src/components/select-field/select-field.tsx
index 1575f0cf..c4675d2e 100644
--- a/packages/propel/src/components/select-field/select-field.tsx
+++ b/packages/propel/src/components/select-field/select-field.tsx
@@ -1,26 +1,24 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
 import { Check, ChevronsUpDown } from "lucide-react";
 import type * as React from "react";
 
-import { Field } from "../../ui/field/field";
-import { FieldDescription } from "../../ui/field/field-description";
-import type { FieldMagnitude } from "../../ui/field/variants";
+import type { FieldMagnitude } from "../../elements/field/variants";
 import {
-  Select,
-  SelectIcon,
-  SelectItem,
   SelectItemIndicator,
-  SelectItemText,
   SelectLabel,
-  SelectList,
-  SelectPopup,
-  SelectPortal,
-  SelectPositioner,
-  type SelectProps,
   SelectTrigger,
   type SelectTriggerMagnitude,
   SelectValue,
-} from "../../ui/select/index";
+} from "../../elements/select/index";
+import { Icon } from "../../internal/icon";
+import { ListboxItem } from "../../internal/listbox-item";
+import { ListboxPopup } from "../../internal/listbox-popup";
+import { Positioner } from "../../internal/positioner";
+import { Field, FieldDescription } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
+import { Select, type SelectProps } from "../select";
+
+export type { FieldMagnitude } from "../../elements/field/variants";
 
 // The field magnitude axis (md/lg/xl) drives label and helper-text size; the select
 // trigger/item axis is sm/md/lg, so xl maps onto the largest trigger (lg).
@@ -66,32 +64,36 @@ export function SelectField({
   return (
     <Field name={name} disabled={disabled} invalid={error != null || undefined}>
       <Select disabled={disabled} items={options} {...selectProps}>
-        <SelectLabel>{label}</SelectLabel>
-        <SelectTrigger magnitude={selectMagnitude}>
-          <SelectValue />
-          <SelectIcon>
+        <BaseSelect.Label render={<SelectLabel />}>{label}</BaseSelect.Label>
+        <BaseSelect.Trigger render={<SelectTrigger magnitude={selectMagnitude} />}>
+          <BaseSelect.Value render={<SelectValue />} />
+          <Icon tint="secondary">
             <ChevronsUpDown />
-          </SelectIcon>
-        </SelectTrigger>
+          </Icon>
+        </BaseSelect.Trigger>
         {description != null ? (
           <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
         ) : null}
-        <SelectPortal>
-          <SelectPositioner>
-            <SelectPopup>
-              <SelectList>
+        <BaseSelect.Portal>
+          <BaseSelect.Positioner render={<Positioner />}>
+            <BaseSelect.Popup render={<ListboxPopup />}>
+              <BaseSelect.List>
                 {options.map((option) => (
-                  <SelectItem key={option.value} value={option.value} magnitude={selectMagnitude}>
-                    <SelectItemIndicator>
+                  <BaseSelect.Item
+                    key={option.value}
+                    value={option.value}
+                    render={<ListboxItem layout="indicator" magnitude={selectMagnitude} />}
+                  >
+                    <BaseSelect.ItemIndicator keepMounted render={<SelectItemIndicator />}>
                       <Check />
-                    </SelectItemIndicator>
-                    <SelectItemText>{option.label}</SelectItemText>
-                  </SelectItem>
+                    </BaseSelect.ItemIndicator>
+                    <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>
+                  </BaseSelect.Item>
                 ))}
-              </SelectList>
-            </SelectPopup>
-          </SelectPositioner>
-        </SelectPortal>
+              </BaseSelect.List>
+            </BaseSelect.Popup>
+          </BaseSelect.Positioner>
+        </BaseSelect.Portal>
         <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
       </Select>
     </Field>
diff --git a/packages/propel/src/components/select/index.tsx b/packages/propel/src/components/select/index.tsx
index 54bf637f..88f96519 100644
--- a/packages/propel/src/components/select/index.tsx
+++ b/packages/propel/src/components/select/index.tsx
@@ -1,26 +1,25 @@
+export * from "./select";
 export * from "./select-content";
-// Re-export the atomic select parts so a full select can be assembled from one entry.
+export * from "./select-item";
+export * from "./select-label";
+export * from "./select-list";
+export * from "./select-trigger";
+export * from "./select-group";
+export * from "./select-group-label";
+// Re-export propel's STYLED select parts that stay styling-only, so a full select can be assembled
+// from one entry. The ready-mades above graft Base UI's `Trigger`/`Value`/`Label`/`List`/`Item`
+// behavior onto the styled parts, so consumers never compose `@base-ui/react/select` directly. The
+// styled `SelectTrigger`/`SelectValue`/`SelectIcon`/`SelectLabel` elements are NOT re-exported here
+// — the same-named ready-mades replace them (name collision rule); import them from
+// `elements/select` to hand-wire a custom anatomy.
 export {
-  Select,
-  type SelectProps,
   SelectField,
   type SelectFieldProps,
-  SelectIcon,
-  type SelectIconProps,
-  SelectItem,
-  type SelectItemMagnitude,
-  type SelectItemProps,
   SelectItemIndicator,
   type SelectItemIndicatorProps,
-  SelectItemText,
-  SelectLabel,
-  type SelectLabelProps,
-  SelectList,
   SelectScrollDownArrow,
+  type SelectScrollDownArrowProps,
   SelectScrollUpArrow,
-  SelectTrigger,
+  type SelectScrollUpArrowProps,
   type SelectTriggerMagnitude,
-  type SelectTriggerProps,
-  SelectValue,
-  type SelectValueProps,
-} from "../../ui/select";
+} from "../../elements/select";
diff --git a/packages/propel/src/components/select/select-content.tsx b/packages/propel/src/components/select/select-content.tsx
index c91570f7..62e4f5fa 100644
--- a/packages/propel/src/components/select/select-content.tsx
+++ b/packages/propel/src/components/select/select-content.tsx
@@ -1,17 +1,18 @@
-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";
+import { Select as BaseSelect } from "@base-ui/react/select";
 
-export type SelectContentProps = SelectPopupProps & {
+import { ListboxPopup, type ListboxPopupProps } from "../../internal/listbox-popup";
+import { Positioner } from "../../internal/positioner";
+
+export type SelectContentProps = ListboxPopupProps & {
   /** Which side of the trigger the list opens toward. @default "bottom" */
-  side?: SelectPositionerProps["side"];
+  side?: BaseSelect.Positioner.Props["side"];
   /** Distance in px between the trigger and the list. @default 4 */
-  sideOffset?: SelectPositionerProps["sideOffset"];
+  sideOffset?: BaseSelect.Positioner.Props["sideOffset"];
   /** Alignment of the list relative to the trigger along `side`. @default "start" */
-  align?: SelectPositionerProps["align"];
+  align?: BaseSelect.Positioner.Props["align"];
 };
 
-/** The select list surface: portal + positioner + popup with Propel overlay styling. */
+/** The select list surface: Base UI portal + positioner + popup grafted onto Propel styling. */
 export function SelectContent({
   side = "bottom",
   sideOffset = 4,
@@ -19,10 +20,15 @@ export function SelectContent({
   ...props
 }: SelectContentProps) {
   return (
-    <SelectPortal>
-      <SelectPositioner side={side} sideOffset={sideOffset} align={align}>
-        <SelectPopup {...props} />
-      </SelectPositioner>
-    </SelectPortal>
+    <BaseSelect.Portal>
+      <BaseSelect.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        render={<Positioner />}
+      >
+        <BaseSelect.Popup {...props} render={<ListboxPopup />} />
+      </BaseSelect.Positioner>
+    </BaseSelect.Portal>
   );
 }
diff --git a/packages/propel/src/components/select/select-group-label.tsx b/packages/propel/src/components/select/select-group-label.tsx
new file mode 100644
index 00000000..b2287f7f
--- /dev/null
+++ b/packages/propel/src/components/select/select-group-label.tsx
@@ -0,0 +1,16 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+import { ListboxGroupLabel } from "../../internal/listbox-group-label";
+
+export type SelectGroupLabelProps = Omit<
+  BaseSelect.GroupLabel.Props,
+  "className" | "style" | "render"
+>;
+
+/**
+ * The muted heading naming a `SelectGroup` — Base UI's `GroupLabel` behavior grafted onto the
+ * shared styled listbox heading.
+ */
+export function SelectGroupLabel(props: SelectGroupLabelProps) {
+  return <BaseSelect.GroupLabel {...props} render={<ListboxGroupLabel />} />;
+}
diff --git a/packages/propel/src/components/select/select-group.tsx b/packages/propel/src/components/select/select-group.tsx
new file mode 100644
index 00000000..7c6fb16f
--- /dev/null
+++ b/packages/propel/src/components/select/select-group.tsx
@@ -0,0 +1,8 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export type SelectGroupProps = Omit<BaseSelect.Group.Props, "className" | "style">;
+
+/** Groups related options under a `SelectGroupLabel`. */
+export function SelectGroup(props: SelectGroupProps) {
+  return <BaseSelect.Group {...props} />;
+}
diff --git a/packages/propel/src/components/select/select-item.tsx b/packages/propel/src/components/select/select-item.tsx
new file mode 100644
index 00000000..1f2c8109
--- /dev/null
+++ b/packages/propel/src/components/select/select-item.tsx
@@ -0,0 +1,29 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Check } from "lucide-react";
+
+import { SelectItemIndicator } from "../../elements/select";
+import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
+
+export type SelectItemProps = Omit<BaseSelect.Item.Props, "className" | "render" | "style"> & {
+  /** Visual size of the row: controls its height and text size. Required. */
+  magnitude: ListboxItemMagnitude;
+};
+
+/**
+ * The ready-made select option row: grafts Base UI's `Select.Item` behavior onto the shared listbox
+ * row and bakes the selection marker — Base UI's `Select.ItemIndicator` grafted onto the styled
+ * `SelectItemIndicator` with a check glyph. The marker is `keepMounted` because the
+ * `layout="indicator"` row places children positionally: it must occupy the leading column even
+ * while unselected (the styled marker hides its glyph off `data-selected`). Children become the
+ * item's text via Base UI's `Select.ItemText`.
+ */
+export function SelectItem({ children, magnitude, ...props }: SelectItemProps) {
+  return (
+    <BaseSelect.Item {...props} render={<ListboxItem layout="indicator" magnitude={magnitude} />}>
+      <BaseSelect.ItemIndicator keepMounted render={<SelectItemIndicator />}>
+        <Check aria-hidden />
+      </BaseSelect.ItemIndicator>
+      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>
+    </BaseSelect.Item>
+  );
+}
diff --git a/packages/propel/src/components/select/select-label.tsx b/packages/propel/src/components/select/select-label.tsx
new file mode 100644
index 00000000..d2b73526
--- /dev/null
+++ b/packages/propel/src/components/select/select-label.tsx
@@ -0,0 +1,13 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+import { SelectLabel as SelectLabelElement } from "../../elements/select";
+
+export type SelectLabelProps = Omit<BaseSelect.Label.Props, "className" | "render" | "style">;
+
+/**
+ * The ready-made select label: grafts Base UI's `Select.Label` behavior — automatic association
+ * with the trigger — onto the styled label.
+ */
+export function SelectLabel(props: SelectLabelProps) {
+  return <BaseSelect.Label {...props} render={<SelectLabelElement />} />;
+}
diff --git a/packages/propel/src/components/select/select-list.tsx b/packages/propel/src/components/select/select-list.tsx
new file mode 100644
index 00000000..5f62c7a2
--- /dev/null
+++ b/packages/propel/src/components/select/select-list.tsx
@@ -0,0 +1,12 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export type SelectListProps = Omit<BaseSelect.List.Props, "className" | "style">;
+
+/**
+ * The container for the select items — Base UI's `Select.List`, unstyled (the popup surface is
+ * `SelectContent`; the rows are `SelectItem`s). A passthrough so consumers never import
+ * `@base-ui/react/select` themselves.
+ */
+export function SelectList(props: SelectListProps) {
+  return <BaseSelect.List {...props} />;
+}
diff --git a/packages/propel/src/components/select/select-trigger.tsx b/packages/propel/src/components/select/select-trigger.tsx
new file mode 100644
index 00000000..1e00bde9
--- /dev/null
+++ b/packages/propel/src/components/select/select-trigger.tsx
@@ -0,0 +1,37 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { ChevronsUpDown } from "lucide-react";
+import type * as React from "react";
+
+import {
+  SelectTrigger as SelectTriggerElement,
+  type SelectTriggerMagnitude,
+  SelectValue,
+} from "../../elements/select";
+import { Icon } from "../../internal/icon";
+
+export type SelectTriggerProps = Omit<
+  BaseSelect.Trigger.Props,
+  "children" | "className" | "render" | "style"
+> & {
+  /** Visual size of the trigger: controls its height, text, and icon size. Required. */
+  magnitude: SelectTriggerMagnitude;
+  /** Glyph for the trailing `SelectIcon` slot. Defaults to a chevrons-up-down. */
+  icon?: React.ReactNode;
+  /** Shown in the trigger while nothing is selected — Base UI's `Select.Value` placeholder. */
+  placeholder?: React.ReactNode;
+};
+
+/**
+ * The ready-made select trigger: grafts Base UI's `Select.Trigger` behavior onto the styled trigger
+ * and bakes its anatomy — the selected value (Base UI's `Select.Value` grafted onto the styled
+ * `SelectValue`) plus the trailing `SelectIcon`, whose default glyph is overridable via `icon`
+ * (defaults are a `components` concern). Children are baked, so the prop is omitted.
+ */
+export function SelectTrigger({ icon, magnitude, placeholder, ...props }: SelectTriggerProps) {
+  return (
+    <BaseSelect.Trigger {...props} render={<SelectTriggerElement magnitude={magnitude} />}>
+      <BaseSelect.Value render={<SelectValue />} placeholder={placeholder} />
+      <Icon tint="secondary">{icon ?? <ChevronsUpDown aria-hidden />}</Icon>
+    </BaseSelect.Trigger>
+  );
+}
diff --git a/packages/propel/src/components/select/select.stories.tsx b/packages/propel/src/components/select/select.stories.tsx
index 3cf192a4..d6729e82 100644
--- a/packages/propel/src/components/select/select.stories.tsx
+++ b/packages/propel/src/components/select/select.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, ChevronsUpDown } from "lucide-react";
 import { expect, within } from "storybook/test";
 
 import { Field, FieldError } from "../field/index";
@@ -7,14 +6,13 @@ import {
   Select,
   SelectContent,
   SelectField,
-  SelectIcon,
+  SelectGroup,
+  SelectGroupLabel,
   SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
   SelectLabel,
   SelectList,
   SelectTrigger,
-  SelectValue,
+  type SelectTriggerMagnitude,
 } from "./index";
 
 const SERVER_TYPES = [
@@ -23,9 +21,11 @@ const SERVER_TYPES = [
   { 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 MAGNITUDES: SelectTriggerMagnitude[] = ["sm", "md", "lg"];
+
+// Components-tier story: the ready-mades collapse the Base UI wiring — `SelectTrigger` bakes the
+// value + chevron, `SelectContent` the portal/positioner/popup, and `SelectItem` the check marker —
+// so the anatomy composes without touching `@base-ui/react/select`.
 const meta = {
   title: "Components/Select",
   component: Select,
@@ -33,20 +33,18 @@ const meta = {
     SelectField,
     SelectLabel,
     SelectTrigger,
-    SelectValue,
-    SelectIcon,
     SelectContent,
     SelectList,
     SelectItem,
-    SelectItemIndicator,
-    SelectItemText,
+    SelectGroup,
+    SelectGroupLabel,
   },
 } satisfies Meta<typeof Select>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Trigger-based select using the ready-made `SelectContent` surface inside a `Field`. */
+/** A labeled select inside a `Field`: trigger + popup of options, all ready-made parts. */
 export const Default: Story = {
   args: { items: SERVER_TYPES, defaultValue: "general", required: true },
   render: (args) => (
@@ -54,21 +52,13 @@ export const Default: Story = {
       <Select {...args}>
         <SelectField>
           <SelectLabel>Server type</SelectLabel>
-          <SelectTrigger magnitude="md">
-            <SelectValue />
-            <SelectIcon>
-              <ChevronsUpDown />
-            </SelectIcon>
-          </SelectTrigger>
+          <SelectTrigger magnitude="md" />
         </SelectField>
         <SelectContent>
           <SelectList>
             {SERVER_TYPES.map(({ label, value }) => (
               <SelectItem key={value} value={value} magnitude="md">
-                <SelectItemIndicator>
-                  <Check />
-                </SelectItemIndicator>
-                <SelectItemText>{label}</SelectItemText>
+                {label}
               </SelectItem>
             ))}
           </SelectList>
@@ -79,6 +69,10 @@ export const Default: Story = {
   ),
 };
 
+/**
+ * Interaction test: the labeled trigger opens the popup and lists the options. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
 export const DefaultInteraction: Story = {
   ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -90,3 +84,264 @@ export const DefaultInteraction: Story = {
     ).toBeInTheDocument();
   },
 };
+
+/**
+ * Without a `defaultValue`, the trigger shows the `placeholder` until an option is picked — Base
+ * UI's `Select.Value` placeholder, surfaced as a `SelectTrigger` prop.
+ */
+export const Placeholder: Story = {
+  render: () => (
+    <Field name="serverType">
+      <Select items={SERVER_TYPES}>
+        <SelectField>
+          <SelectLabel>Server type</SelectLabel>
+          <SelectTrigger magnitude="md" placeholder="Choose a server type" />
+        </SelectField>
+        <SelectContent>
+          <SelectList>
+            {SERVER_TYPES.map(({ label, value }) => (
+              <SelectItem key={value} value={value} magnitude="md">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectList>
+        </SelectContent>
+      </Select>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: the trigger shows the placeholder while empty and swaps to the picked option's
+ * label after selection.
+ */
+export const PlaceholderInteraction: Story = {
+  ...Placeholder,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("combobox", { name: "Server type" });
+    await expect(trigger).toHaveTextContent("Choose a server type");
+
+    await userEvent.click(trigger);
+    const popup = within(document.body);
+    await userEvent.click(await popup.findByRole("option", { name: "Compute optimized" }));
+    await expect(trigger).toHaveTextContent("Compute optimized");
+    // Close the popup so the trailing axe pass does not flag Base UI's focus guards.
+    await userEvent.keyboard("{Escape}");
+  },
+};
+
+/**
+ * `multiple` keeps the popup open across picks and checks every selected row; the trigger joins the
+ * selected labels. Selection state lives on the root — the anatomy is unchanged.
+ */
+export const Multiple: Story = {
+  render: () => (
+    <Field name="regions">
+      <Select multiple items={SERVER_TYPES} defaultValue={["general", "compute"]}>
+        <SelectField>
+          <SelectLabel>Server types</SelectLabel>
+          <SelectTrigger magnitude="md" />
+        </SelectField>
+        <SelectContent>
+          <SelectList>
+            {SERVER_TYPES.map(({ label, value }) => (
+              <SelectItem key={value} value={value} magnitude="md">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectList>
+        </SelectContent>
+      </Select>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: the trigger joins both preselected labels, and picking a third keeps the first
+ * two selected.
+ */
+export const MultipleInteraction: Story = {
+  ...Multiple,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("combobox", { name: "Server types" });
+    await expect(trigger).toHaveTextContent("General purpose, Compute optimized");
+
+    await userEvent.click(trigger);
+    const popup = within(document.body);
+    await userEvent.click(await popup.findByRole("option", { name: "Memory optimized" }));
+    await expect(popup.getByRole("option", { name: "General purpose" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    await expect(popup.getByRole("option", { name: "Memory optimized" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    await expect(trigger).toHaveTextContent("General purpose, Compute optimized, Memory optimized");
+  },
+};
+
+const ASSIGNEES = [
+  { id: "u_01", name: "Aaditya Kapoor" },
+  { id: "u_02", name: "Bianca Ferreira" },
+  { id: "u_03", name: "Marcus Chen" },
+];
+
+/**
+ * Items can carry object values instead of primitives: the root's `items` pairs each object with
+ * the label the trigger displays, and `itemToStringValue` converts the selected object to a string
+ * for form submission.
+ */
+export const ObjectValues: Story = {
+  render: () => (
+    <Field name="assignee">
+      <Select
+        items={ASSIGNEES.map((member) => ({ label: member.name, value: member }))}
+        defaultValue={ASSIGNEES[0]}
+        itemToStringValue={(member) => member.id}
+      >
+        <SelectField>
+          <SelectLabel>Assignee</SelectLabel>
+          <SelectTrigger magnitude="md" />
+        </SelectField>
+        <SelectContent>
+          <SelectList>
+            {ASSIGNEES.map((member) => (
+              <SelectItem key={member.id} value={member} magnitude="md">
+                {member.name}
+              </SelectItem>
+            ))}
+          </SelectList>
+        </SelectContent>
+      </Select>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: the trigger resolves the preselected object to its label, and picking another
+ * row swaps the displayed label to the newly selected object's.
+ */
+export const ObjectValuesInteraction: Story = {
+  ...ObjectValues,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("combobox", { name: "Assignee" });
+    await expect(trigger).toHaveTextContent("Aaditya Kapoor");
+
+    await userEvent.click(trigger);
+    const popup = within(document.body);
+    await userEvent.click(await popup.findByRole("option", { name: "Marcus Chen" }));
+    await expect(trigger).toHaveTextContent("Marcus Chen");
+    // Close the popup so the trailing axe pass does not flag Base UI's focus guards.
+    await userEvent.keyboard("{Escape}");
+  },
+};
+
+const REGION_GROUPS = [
+  {
+    label: "Americas",
+    items: [
+      { label: "US Central 1", value: "us-central-1" },
+      { label: "US East 1", value: "us-east-1" },
+    ],
+  },
+  {
+    label: "Europe",
+    items: [
+      { label: "EU Central 1", value: "eu-central-1" },
+      { label: "EU West 1", value: "eu-west-1" },
+    ],
+  },
+];
+
+/**
+ * Related options sit under `SelectGroup` + `SelectGroupLabel` section headings inside the popup;
+ * the flattened `items` on the root keep the trigger's label lookup working.
+ */
+export const Grouped: Story = {
+  render: () => (
+    <Field name="region">
+      <Select items={REGION_GROUPS.flatMap((group) => group.items)} defaultValue="us-central-1">
+        <SelectField>
+          <SelectLabel>Region</SelectLabel>
+          <SelectTrigger magnitude="md" />
+        </SelectField>
+        <SelectContent>
+          <SelectList>
+            {REGION_GROUPS.map((group) => (
+              <SelectGroup key={group.label}>
+                <SelectGroupLabel>{group.label}</SelectGroupLabel>
+                {group.items.map(({ label, value }) => (
+                  <SelectItem key={value} value={value} magnitude="md">
+                    {label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+          </SelectList>
+        </SelectContent>
+      </Select>
+    </Field>
+  ),
+};
+
+/**
+ * Interaction test: each group is labeled by its `SelectGroupLabel` (aria-labelledby wiring), and
+ * the options render inside their own group.
+ */
+export const GroupedInteraction: Story = {
+  ...Grouped,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox", { name: "Region" }));
+    const popup = within(document.body);
+    const europe = await popup.findByRole("group", { name: "Europe" });
+    await expect(within(europe).getByRole("option", { name: "EU West 1" })).toBeInTheDocument();
+    const americas = popup.getByRole("group", { name: "Americas" });
+    await expect(within(americas).getByRole("option", { name: "US East 1" })).toBeInTheDocument();
+  },
+};
+
+/** All trigger sizes (Figma S/Base/L map to sm/md/lg); the option rows track the same magnitude. */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex items-end gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Select key={magnitude} items={SERVER_TYPES} defaultValue="general">
+          <SelectField>
+            <SelectLabel>{magnitude}</SelectLabel>
+            <SelectTrigger magnitude={magnitude} />
+          </SelectField>
+          <SelectContent>
+            <SelectList>
+              {SERVER_TYPES.map(({ label, value }) => (
+                <SelectItem key={value} value={value} magnitude={magnitude}>
+                  {label}
+                </SelectItem>
+              ))}
+            </SelectList>
+          </SelectContent>
+        </Select>
+      ))}
+    </div>
+  ),
+};
+
+/** Interaction test: every magnitude renders a labeled trigger, and each still opens its popup. */
+export const MagnitudesInteraction: Story = {
+  ...Magnitudes,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    for (const magnitude of MAGNITUDES) {
+      await expect(canvas.getByRole("combobox", { name: magnitude })).toBeInTheDocument();
+    }
+    await userEvent.click(canvas.getByRole("combobox", { name: "sm" }));
+    const popup = within(document.body);
+    await expect(
+      await popup.findByRole("option", { name: "Memory optimized" }),
+    ).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/select/select.tsx b/packages/propel/src/components/select/select.tsx
new file mode 100644
index 00000000..0a75411b
--- /dev/null
+++ b/packages/propel/src/components/select/select.tsx
@@ -0,0 +1,21 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<
+  BaseSelect.Root.Props<Value, Multiple>,
+  "className" | "style"
+> & {
+  /** The select's anatomy — a `SelectTrigger` and the popup of items. */
+  children?: React.ReactNode;
+};
+
+/**
+ * The select Root — Base UI's context/state provider (renders no element of its own). A
+ * behavior-only role, so it lives in `components` (rules 1a, 2); the styled parts live in
+ * `elements/select` and are grafted onto Base UI behavior here.
+ */
+export function Select<Value, Multiple extends boolean | undefined = false>(
+  props: SelectProps<Value, Multiple>,
+) {
+  return <BaseSelect.Root {...props} />;
+}
diff --git a/packages/propel/src/components/separator/index.tsx b/packages/propel/src/components/separator/index.tsx
index cf0033f6..2cbe0237 100644
--- a/packages/propel/src/components/separator/index.tsx
+++ b/packages/propel/src/components/separator/index.tsx
@@ -1,3 +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";
+// The ready-made Separator: Base UI's `Separator` behavior grafted onto the styled `elements` element.
+// Drop down to `@plane/propel/elements/separator` only when you need the lower-level styled `<div>`.
+export * from "./separator";
diff --git a/packages/propel/src/components/separator/separator.tsx b/packages/propel/src/components/separator/separator.tsx
new file mode 100644
index 00000000..54b809e6
--- /dev/null
+++ b/packages/propel/src/components/separator/separator.tsx
@@ -0,0 +1,40 @@
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+
+import { Separator as SeparatorElement } from "../../elements/separator";
+
+export type SeparatorProps = Omit<BaseSeparator.Props, "className" | "style" | "orientation"> & {
+  /**
+   * The axis the rule runs along — one of the spec's adjustable ("depends") axes, so it is required
+   * rather than silently defaulting. `"horizontal"` is a full-width rule between stacked content;
+   * `"vertical"` is a full-height rule between inline content. Base UI reflects it as
+   * `[data-orientation]` (the single source of truth the cva keys off) and sets
+   * `aria-orientation`.
+   */
+  orientation: NonNullable<BaseSeparator.Props["orientation"]>;
+  /**
+   * Whether the separator is purely decorative (visually present but hidden from assistive
+   * technology). The spec's adjustable "Role" axis, so it is required — make a conscious choice
+   * rather than relying on a silent default. Pass `true` for visual-only dividers; pass `false` for
+   * separators that mark a meaningful content boundary and should be announced to screen readers.
+   * Base UI sets `role="separator"` and `aria-orientation`; `decorative` overrides both.
+   */
+  decorative: boolean;
+};
+
+/**
+ * A thin rule that visually divides content. Grafts Base UI's `Separator` behavior onto the styled
+ * `elements` `Separator` `<div>` via `render`. Both adjustable axes from the design spec are
+ * required: `orientation` (`"horizontal"` | `"vertical"`) and `decorative` (the "Role" axis —
+ * semantic vs. visual-only). Spacing around the rule belongs to the surrounding layout, not the
+ * separator.
+ */
+export function Separator({ decorative, ...props }: SeparatorProps) {
+  // A semantic separator keeps Base UI's `role="separator"` + `aria-orientation`. A decorative one
+  // is removed from the a11y tree: it takes `role="none"` and drops `aria-orientation` (a `<div>`
+  // without `role="separator"` may not carry it). We spread these only when decorative so we never
+  // clobber Base UI's defaults with `undefined` on the semantic path.
+  const a11y = decorative
+    ? { role: "none", "aria-orientation": undefined, "aria-hidden": true }
+    : null;
+  return <BaseSeparator {...props} {...a11y} render={<SeparatorElement />} />;
+}
diff --git a/packages/propel/src/components/slider/index.tsx b/packages/propel/src/components/slider/index.tsx
index 1e27edcd..d268ab0a 100644
--- a/packages/propel/src/components/slider/index.tsx
+++ b/packages/propel/src/components/slider/index.tsx
@@ -15,4 +15,4 @@ export {
   type SliderTrackProps,
   SliderValue,
   type SliderValueProps,
-} from "../../ui/slider";
+} from "../../elements/slider";
diff --git a/packages/propel/src/components/slider/slider.stories.tsx b/packages/propel/src/components/slider/slider.stories.tsx
index 2c186c1a..7ec8d726 100644
--- a/packages/propel/src/components/slider/slider.stories.tsx
+++ b/packages/propel/src/components/slider/slider.stories.tsx
@@ -1,12 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
 import { expect } from "storybook/test";
 
-import { Slider } from "./index";
+import { Button } from "../button";
+import { Field } from "../field";
+import { Form, FormActions, FormBody } from "../form";
+import { Slider, type SliderMagnitude } from "./index";
+
+const MAGNITUDES: SliderMagnitude[] = ["sm", "md", "lg"];
 
 // Components-tier story: the ready-made single-thumb `Slider`. It composes the
-// `ui/slider` parts (label + value + control + track + indicator + thumb) for you —
+// `elements/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).
+// elements-tier story shows how to assemble the parts (e.g. a two-thumb range).
 const meta = {
   title: "Components/Slider",
   component: Slider,
@@ -39,6 +45,21 @@ export const DefaultInteraction: Story = {
   },
 };
 
+/** All thumb sizes: `sm` (12 px), `md` (16 px), `lg` (20 px). The track bar height never changes. */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each slider with the magnitude name, so disable just
+  // those two controls; the rest stay live and update every slider at once.
+  argTypes: { magnitude: { control: false }, label: { control: false } },
+  args: { magnitude: "md", defaultValue: 40, min: 0, max: 100, step: 1 },
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <Slider key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
 /** `format` (Intl options) controls the readout — here a percentage. */
 export const Percentage: Story = {
   args: {
@@ -88,3 +109,111 @@ export const WithoutLabelInteraction: Story = {
     await expect(canvas.getByRole("slider", { name: "Brightness" })).toBeInTheDocument();
   },
 };
+
+/**
+ * `thumbAlignment="edge"` keeps the whole thumb inside the control: at the extremes the thumb's
+ * edge lines up with the track's edge instead of overhanging it by half the thumb width.
+ */
+export const EdgeAlignedThumb: Story = {
+  args: {
+    label: "Progress",
+    magnitude: "md",
+    defaultValue: 25,
+    min: 0,
+    max: 100,
+    step: 1,
+    thumbAlignment: "edge",
+  },
+};
+
+/**
+ * Interaction test: keyboard `End`/`Home` snap the value to the bounds (the readout follows) while
+ * the edge-aligned thumb stays inside the track instead of overhanging it. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const EdgeAlignedThumbInteraction: Story = {
+  ...EdgeAlignedThumb,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const slider = canvas.getByRole("slider", { name: "Progress" });
+    const thumb = canvasElement.querySelector("[data-index='0']");
+    const track = thumb?.parentElement;
+    if (thumb == null || track == null) {
+      throw new Error("Expected the slider thumb and track elements to be rendered.");
+    }
+
+    await userEvent.tab();
+    await expect(slider).toHaveFocus();
+
+    // `End` snaps to the max; the thumb's far edge stays inside the track.
+    await userEvent.keyboard("{End}");
+    await expect(canvas.getByText("100")).toBeInTheDocument();
+    await expect(thumb.getBoundingClientRect().right).toBeLessThanOrEqual(
+      track.getBoundingClientRect().right + 1,
+    );
+
+    // `Home` snaps to the min; the thumb's near edge stays inside the track.
+    await userEvent.keyboard("{Home}");
+    await expect(canvas.getByText("0")).toBeInTheDocument();
+    await expect(thumb.getBoundingClientRect().left).toBeGreaterThanOrEqual(
+      track.getBoundingClientRect().left - 1,
+    );
+  },
+};
+
+/**
+ * Form integration: wrap the slider in a `Field` with a `name` and Base UI wires the rest — the
+ * field name flows onto the thumb's hidden input, its value serializes with the form, and `Form`'s
+ * `onFormSubmit` receives the number under the field's `name`. Submit to see the captured value.
+ */
+export const FormIntegration: Story = {
+  parameters: { controls: { disable: true } },
+  args: { magnitude: "md" },
+  render: function Render(args) {
+    const [submitted, setSubmitted] = React.useState<{ volume: number } | null>(null);
+    return (
+      <div className="flex flex-col gap-3">
+        <Form<{ volume: number }> onFormSubmit={(values) => setSubmitted(values)}>
+          <FormBody layout="single">
+            <Field name="volume">
+              <Slider {...args} label="Volume" defaultValue={40} min={0} max={100} step={1} />
+            </Field>
+          </FormBody>
+          <FormActions layout="inline">
+            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
+              Save
+            </Button>
+          </FormActions>
+        </Form>
+        <output className="text-13 text-secondary">
+          {submitted ? `Volume: ${submitted.volume}` : null}
+        </output>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interaction test: the `Field` name serializes the slider's value into `Form`'s `onFormSubmit` —
+ * the default value first, then the keyboard-nudged value after resubmitting. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const FormIntegrationInteraction: Story = {
+  ...FormIntegration,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const slider = canvas.getByRole("slider", { name: "Volume" });
+    const save = canvas.getByRole("button", { name: "Save" });
+
+    // Submitting with the default value serializes 40 under the field name.
+    await userEvent.click(save);
+    await expect(canvas.getByText("Volume: 40")).toBeInTheDocument();
+
+    // Nudging the thumb with the keyboard and resubmitting serializes the new value.
+    await userEvent.tab({ shift: true });
+    await expect(slider).toHaveFocus();
+    await userEvent.keyboard("{ArrowRight}");
+    await userEvent.click(save);
+    await expect(canvas.getByText("Volume: 41")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/slider/slider.tsx b/packages/propel/src/components/slider/slider.tsx
index 2b421042..501170c4 100644
--- a/packages/propel/src/components/slider/slider.tsx
+++ b/packages/propel/src/components/slider/slider.tsx
@@ -1,3 +1,4 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
 import type * as React from "react";
 
 import {
@@ -7,13 +8,12 @@ import {
   SliderIndicator,
   SliderLabel,
   type SliderMagnitude,
-  type SliderProps as SliderElementProps,
   SliderThumb,
   SliderTrack,
   SliderValue,
-} from "../../ui/slider";
+} from "../../elements/slider";
 
-export type SliderProps = SliderElementProps<number> & {
+export type SliderProps = Omit<BaseSlider.Root.Props<number>, "className" | "style"> & {
   /**
    * 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.
@@ -34,23 +34,28 @@ export type SliderProps = SliderElementProps<number> & {
  * `magnitude` sets the thumb and hit-area size (`sm` / `md` / `lg`). The track bar height and shape
  * are always the same per the design spec.
  *
- * 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.
+ * Grafts Base UI `Slider` behavior onto the `elements/slider` styled parts (`Slider` root +
+ * `SliderLabel` + `SliderValue` + `SliderControl` + `SliderTrack` + `SliderIndicator` +
+ * `SliderThumb`). For multiple thumbs or fully custom layout, graft the `elements/slider` parts
+ * directly.
  */
 export function Slider({ label, "aria-label": ariaLabel, magnitude, ...props }: SliderProps) {
   return (
-    <SliderElement {...props}>
+    <BaseSlider.Root render={<SliderElement />} {...props}>
       <SliderHeader>
-        {label == null ? <span /> : <SliderLabel>{label}</SliderLabel>}
-        <SliderValue />
+        {label == null ? (
+          <span />
+        ) : (
+          <BaseSlider.Label render={<SliderLabel />}>{label}</BaseSlider.Label>
+        )}
+        <BaseSlider.Value render={<SliderValue />} />
       </SliderHeader>
-      <SliderControl magnitude={magnitude}>
-        <SliderTrack>
-          <SliderIndicator />
-          <SliderThumb magnitude={magnitude} aria-label={ariaLabel} />
-        </SliderTrack>
-      </SliderControl>
-    </SliderElement>
+      <BaseSlider.Control render={<SliderControl magnitude={magnitude} />}>
+        <BaseSlider.Track render={<SliderTrack />}>
+          <BaseSlider.Indicator render={<SliderIndicator />} />
+          <BaseSlider.Thumb render={<SliderThumb magnitude={magnitude} />} aria-label={ariaLabel} />
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
   );
 }
diff --git a/packages/propel/src/components/switch-field/switch-field.tsx b/packages/propel/src/components/switch-field/switch-field.tsx
index 6eb7dbf5..b7b19483 100644
--- a/packages/propel/src/components/switch-field/switch-field.tsx
+++ b/packages/propel/src/components/switch-field/switch-field.tsx
@@ -1,9 +1,7 @@
 import type * as React from "react";
 
-import { Field } from "../../ui/field/field";
-import { FieldItem } from "../../ui/field/field-item";
-import type { FieldMagnitude } from "../../ui/field/variants";
-import { FieldItemContent } from "../field";
+import type { FieldMagnitude } from "../../elements/field/variants";
+import { Field, FieldItem, FieldItemContent } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 import { Switch, type SwitchMagnitude, type SwitchProps } from "../switch/index";
 
diff --git a/packages/propel/src/components/switch/index.tsx b/packages/propel/src/components/switch/index.tsx
index faaa0721..3ad65102 100644
--- a/packages/propel/src/components/switch/index.tsx
+++ b/packages/propel/src/components/switch/index.tsx
@@ -1,3 +1,3 @@
 export * 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";
+export { Switch as SwitchTrack, SwitchThumb, type SwitchThumbProps } from "../../elements/switch";
diff --git a/packages/propel/src/components/switch/switch.stories.tsx b/packages/propel/src/components/switch/switch.stories.tsx
index adb94cb1..dde8ed49 100644
--- a/packages/propel/src/components/switch/switch.stories.tsx
+++ b/packages/propel/src/components/switch/switch.stories.tsx
@@ -1,13 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
 import { expect } from "storybook/test";
 
-import { Switch, type SwitchMagnitude } from "./index";
+import { Button } from "../button/index";
+import { Form, FormActions, FormBody } from "../form/index";
+import { SwitchField } from "../switch-field/index";
+import { Switch, type SwitchMagnitude, SwitchThumb, SwitchTrack } from "./index";
 
 const MAGNITUDES: SwitchMagnitude[] = ["lg", "md", "sm"];
 
 const meta = {
   title: "Components/Switch",
   component: Switch,
+  // The ready-made Switch composes the styled SwitchTrack + SwitchThumb; SwitchField is the
+  // field-row composition (adds their tabs to the args table + records the relationships in the
+  // manifest).
+  subcomponents: { SwitchField, SwitchThumb, SwitchTrack },
   parameters: {
     design: {
       type: "figma",
@@ -105,3 +113,138 @@ export const DisabledDoesNotToggle: Story = {
     await expect(sw).toHaveAttribute("aria-checked", "false");
   },
 };
+
+/**
+ * The simplest labeling approach: the switch renders as a `<span>` by default, so an enclosing
+ * `<label>` stays valid HTML — the label names the switch and clicking its text toggles it. For a
+ * full field row with description and helper text, use `SwitchField`.
+ */
+export const Labeled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <label className="inline-flex cursor-pointer items-center gap-2 text-13 text-secondary">
+      <Switch magnitude="md" defaultChecked={false} />
+      Notifications
+    </label>
+  ),
+};
+
+/**
+ * Interaction test: the wrapping `<label>` names the switch and clicking the label toggles it, like
+ * any labelled native control. Tagged out of the sidebar/docs/manifest while still running under
+ * the default `test` tag.
+ */
+export const LabeledInteraction: Story = {
+  ...Labeled,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    // The wrapping label names the switch.
+    const sw = canvas.getByRole("switch", { name: "Notifications" });
+    await expect(sw).toHaveAttribute("aria-checked", "false");
+
+    // Clicking the label toggles it.
+    await userEvent.click(canvas.getByText("Notifications"));
+    await expect(sw).toHaveAttribute("aria-checked", "true");
+  },
+};
+
+/**
+ * When the label is a sibling wired up with `htmlFor`/`id` instead of a wrapper, render the track
+ * as a real `<button>`: pass `nativeButton` and graft the styled `SwitchTrack` onto a `<button>`
+ * via `render`. The look is unchanged, and clicking the sibling label still toggles the switch.
+ */
+export const NativeButton: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Switch
+        magnitude="md"
+        defaultChecked
+        id="notifications-switch"
+        nativeButton
+        render={<SwitchTrack magnitude="md" render={<button type="button" />} />}
+      />
+      <label htmlFor="notifications-switch" className="text-13 text-secondary">
+        Notifications
+      </label>
+    </div>
+  ),
+};
+
+/**
+ * Interaction test: the native-button pattern keeps the switch semantics — the track IS a
+ * `<button>` with `role="switch"`, the sibling `htmlFor` label names it, and clicking the label
+ * toggles it. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const NativeButtonInteraction: Story = {
+  ...NativeButton,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const sw = canvas.getByRole("switch", { name: "Notifications" });
+
+    // A real <button>, named by its sibling label.
+    await expect(sw.tagName).toBe("BUTTON");
+    await expect(sw).toHaveAttribute("aria-checked", "true");
+
+    // Clicking the sibling label toggles it, like any labelled native button.
+    await userEvent.click(canvas.getByText("Notifications"));
+    await expect(sw).toHaveAttribute("aria-checked", "false");
+  },
+};
+
+/**
+ * Form integration: `SwitchField` already owns the `Field` name and label association, so inside a
+ * `Form` the switch's checked state serializes with the submission — `onFormSubmit` receives it
+ * under the field's `name`, with no extra wiring on the switch. Submit to see the captured value.
+ */
+export const FormIntegration: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const [submitted, setSubmitted] = React.useState<{ restartOnFailure: boolean } | null>(null);
+    return (
+      <div className="flex w-80 flex-col gap-3">
+        <Form<{ restartOnFailure: boolean }> onFormSubmit={(values) => setSubmitted(values)}>
+          <FormBody layout="single">
+            <SwitchField
+              name="restartOnFailure"
+              label="Restart on failure"
+              magnitude="md"
+              defaultChecked
+            />
+          </FormBody>
+          <FormActions layout="inline">
+            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
+              Save
+            </Button>
+          </FormActions>
+        </Form>
+        <output className="text-13 text-secondary">
+          {submitted ? `Restart on failure: ${submitted.restartOnFailure ? "on" : "off"}` : null}
+        </output>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interaction test: the `Field` name serializes the switch's checked state into `Form`'s
+ * `onFormSubmit` — the default state first, then the flipped state after toggling and resubmitting.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const FormIntegrationInteraction: Story = {
+  ...FormIntegration,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const save = canvas.getByRole("button", { name: "Save" });
+
+    // Submitting with the default state serializes the checked switch.
+    await userEvent.click(save);
+    await expect(canvas.getByText("Restart on failure: on")).toBeInTheDocument();
+
+    // Toggling off and resubmitting serializes the new state.
+    await userEvent.click(canvas.getByRole("switch", { name: "Restart on failure" }));
+    await userEvent.click(save);
+    await expect(canvas.getByText("Restart on failure: off")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/switch/switch.tsx b/packages/propel/src/components/switch/switch.tsx
index b37c4ea1..90271683 100644
--- a/packages/propel/src/components/switch/switch.tsx
+++ b/packages/propel/src/components/switch/switch.tsx
@@ -1,17 +1,18 @@
-import {
-  Switch as SwitchElement,
-  type SwitchProps as SwitchElementProps,
-  SwitchThumb,
-} from "../../ui/switch";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
 
-export type { SwitchMagnitude } from "../../ui/switch";
+import { Switch as SwitchElement, type SwitchMagnitude, SwitchThumb } from "../../elements/switch";
 
-export type SwitchProps = SwitchElementProps;
+export type { SwitchMagnitude } from "../../elements/switch";
+
+export type SwitchProps = Omit<BaseSwitch.Root.Props, "className" | "style"> & {
+  /** The switch size axis. */
+  magnitude: SwitchMagnitude;
+};
 
 /**
- * The ready-made switch: composes the atomic `Switch` track with its `SwitchThumb`. The track owns
- * the required `magnitude`; the thumb sizes itself from it. Built on Base UI's `Switch` (so it
- * carries `role="switch"` and full keyboard/form support). Maps to Figma's "Toggle" component.
+ * The ready-made switch: grafts Base UI's `Switch` behavior onto the styled `Switch` track and
+ * `SwitchThumb` knob. The track owns the required `magnitude`; the thumb sizes itself from it. Base
+ * UI supplies `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`)
@@ -19,8 +20,8 @@ export type SwitchProps = SwitchElementProps;
  */
 export function Switch({ magnitude, ...props }: SwitchProps) {
   return (
-    <SwitchElement magnitude={magnitude} {...props}>
-      <SwitchThumb />
-    </SwitchElement>
+    <BaseSwitch.Root render={<SwitchElement magnitude={magnitude} />} {...props}>
+      <BaseSwitch.Thumb render={<SwitchThumb />} />
+    </BaseSwitch.Root>
   );
 }
diff --git a/packages/propel/src/components/table/index.tsx b/packages/propel/src/components/table/index.tsx
index f197eba2..16d536ad 100644
--- a/packages/propel/src/components/table/index.tsx
+++ b/packages/propel/src/components/table/index.tsx
@@ -8,7 +8,7 @@ export {
   type TableHeaderProps,
   TableRow,
   type TableRowProps,
-} from "../../ui/table/index";
+} from "../../elements/table/index";
 export * from "./table-action-cell";
 export * from "./table-cell";
 export * 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
index 9d958e5a..a9bd6fd4 100644
--- a/packages/propel/src/components/table/table-action-cell.tsx
+++ b/packages/propel/src/components/table/table-action-cell.tsx
@@ -1,13 +1,14 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { Ellipsis } from "lucide-react";
 import type * as React from "react";
 
-import { Menu, MenuTrigger, type MenuProps } from "../../ui/menu/index";
 import {
   TableCell,
   type TableCellProps,
   TableCellTrigger,
   TableCellTriggerIndicator,
-} from "../../ui/table/index";
+} from "../../elements/table/index";
+import { Menu, type MenuProps } from "../menu";
 import { useTableMode } from "./table-context";
 
 export type TableActionCellProps = Omit<
@@ -45,13 +46,13 @@ export function TableActionCell({
   return (
     <TableCell mode={mode} pinned="none" padding="trigger" {...props}>
       <Menu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-        <MenuTrigger
+        <BaseMenu.Trigger
           disabled={disabled}
           aria-label={ariaLabel}
           render={<TableCellTrigger layout="action" />}
         >
           <TableCellTriggerIndicator>{icon ?? <Ellipsis />}</TableCellTriggerIndicator>
-        </MenuTrigger>
+        </BaseMenu.Trigger>
         {children}
       </Menu>
     </TableCell>
diff --git a/packages/propel/src/components/table/table-cell.tsx b/packages/propel/src/components/table/table-cell.tsx
index 383659a2..427b71f8 100644
--- a/packages/propel/src/components/table/table-cell.tsx
+++ b/packages/propel/src/components/table/table-cell.tsx
@@ -5,26 +5,26 @@ import {
   type TableCellProps as TableCellElementProps,
   TableCellContent,
   TableCellLayout,
-  TableCellSlot,
-} from "../../ui/table/index";
+} from "../../elements/table/index";
+import { NodeSlot } from "../../internal/node-slot";
 import { useTableMode } from "./table-context";
 
 export type TableCellProps = Omit<TableCellElementProps, "mode"> & {
   /** Leading content beside the cell text — an icon or an `Avatar`. */
-  inlineStartNode?: React.ReactNode;
+  startIcon?: React.ReactNode;
   /** Trailing content beside the cell text — an icon or an `Avatar`. */
-  inlineEndNode?: React.ReactNode;
+  endIcon?: React.ReactNode;
 };
 
 /** A ready-made data cell: optional leading/trailing slots around a truncating content region. */
-export function TableCell({ inlineStartNode, inlineEndNode, children, ...props }: TableCellProps) {
+export function TableCell({ startIcon, endIcon, children, ...props }: TableCellProps) {
   const mode = useTableMode();
   return (
     <TableCellElement mode={mode} {...props}>
       <TableCellLayout>
-        {inlineStartNode != null ? <TableCellSlot>{inlineStartNode}</TableCellSlot> : null}
+        {startIcon != null ? <NodeSlot>{startIcon}</NodeSlot> : null}
         <TableCellContent>{children}</TableCellContent>
-        {inlineEndNode != null ? <TableCellSlot>{inlineEndNode}</TableCellSlot> : null}
+        {endIcon != null ? <NodeSlot>{endIcon}</NodeSlot> : null}
       </TableCellLayout>
     </TableCellElement>
   );
diff --git a/packages/propel/src/components/table/table-context.ts b/packages/propel/src/components/table/table-context.ts
index ec2b8c2f..098467aa 100644
--- a/packages/propel/src/components/table/table-context.ts
+++ b/packages/propel/src/components/table/table-context.ts
@@ -1,11 +1,11 @@
 import * as React from "react";
 
-import { type TableMode } from "../../ui/table";
+import { type TableMode } from "../../elements/table";
 
 /**
  * Carries the root `Table`'s `mode` down to each `TableHead`/`TableCell` so they pick the matching
  * borders. Lives in the components tier: a context is cross-tree coordination — composition — not a
- * single-element `ui` concern.
+ * single-element `elements` concern.
  */
 export const TableModeContext = React.createContext<TableMode>("table");
 
diff --git a/packages/propel/src/components/table/table-editable-cell.tsx b/packages/propel/src/components/table/table-editable-cell.tsx
index b3e3be21..a8945b40 100644
--- a/packages/propel/src/components/table/table-editable-cell.tsx
+++ b/packages/propel/src/components/table/table-editable-cell.tsx
@@ -1,14 +1,15 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { ChevronDown } from "lucide-react";
 import type * as React from "react";
 
-import { Menu, MenuTrigger, type MenuProps } from "../../ui/menu/index";
 import {
   TableCell,
   type TableCellProps,
   TableCellTrigger,
   TableCellTriggerIndicator,
   TableCellTriggerLabel,
-} from "../../ui/table/index";
+} from "../../elements/table/index";
+import { Menu, type MenuProps } from "../menu";
 import { useTableMode } from "./table-context";
 
 export type TableEditableCellProps = Omit<
@@ -49,7 +50,7 @@ export function TableEditableCell({
   return (
     <TableCell mode={mode} pinned="none" padding="trigger" {...props}>
       <Menu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-        <MenuTrigger
+        <BaseMenu.Trigger
           disabled={disabled}
           aria-label={ariaLabel}
           render={<TableCellTrigger layout="editable" selected={selected} />}
@@ -58,7 +59,7 @@ export function TableEditableCell({
           <TableCellTriggerIndicator>
             <ChevronDown />
           </TableCellTriggerIndicator>
-        </MenuTrigger>
+        </BaseMenu.Trigger>
         {children}
       </Menu>
     </TableCell>
diff --git a/packages/propel/src/components/table/table-head.tsx b/packages/propel/src/components/table/table-head.tsx
index d1f3cdf9..bef67518 100644
--- a/packages/propel/src/components/table/table-head.tsx
+++ b/packages/propel/src/components/table/table-head.tsx
@@ -7,7 +7,7 @@ import {
   TableHeadSortIndicator,
   TableHeadSortTrigger,
   TableHeadTitle,
-} from "../../ui/table/index";
+} from "../../elements/table/index";
 import { useTableMode } from "./table-context";
 
 /** Sort direction of a sortable `TableHead`. `none` shows the neutral affordance. */
diff --git a/packages/propel/src/components/table/table.stories.tsx b/packages/propel/src/components/table/table.stories.tsx
index e1dc6d14..28041d8a 100644
--- a/packages/propel/src/components/table/table.stories.tsx
+++ b/packages/propel/src/components/table/table.stories.tsx
@@ -101,7 +101,7 @@ export const Default: Story = {
             <TableCell
               pinned="none"
               padding="cell"
-              inlineStartNode={
+              startIcon={
                 <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
               }
             >
@@ -193,7 +193,7 @@ export const Sortable: Story = {
               <TableCell
                 pinned="none"
                 padding="cell"
-                inlineStartNode={
+                startIcon={
                   <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
                 }
               >
@@ -263,7 +263,7 @@ export const EditableCells: Story = {
               <TableCell
                 pinned="none"
                 padding="cell"
-                inlineStartNode={
+                startIcon={
                   <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
                 }
               >
@@ -366,7 +366,7 @@ export const WithPagination: Story = {
                 <TableCell
                   pinned="none"
                   padding="cell"
-                  inlineStartNode={
+                  startIcon={
                     <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
                   }
                 >
@@ -455,7 +455,7 @@ export const RichRows: Story = {
               <TableCell
                 pinned="none"
                 padding="cell"
-                inlineStartNode={
+                startIcon={
                   <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
                 }
               >
@@ -479,8 +479,8 @@ export const RichRows: Story = {
               </TableEditableCell>
               <TableActionCell aria-label={`Options for ${person.name}`}>
                 <MenuContent>
-                  <MenuItem inlineStartNode={<Pencil />}>Edit</MenuItem>
-                  <MenuItem inlineStartNode={<Trash2 />}>Delete</MenuItem>
+                  <MenuItem icon={<Pencil />}>Edit</MenuItem>
+                  <MenuItem icon={<Trash2 />}>Delete</MenuItem>
                 </MenuContent>
               </TableActionCell>
             </TableRow>
@@ -537,7 +537,7 @@ export const StickyHeaderAndColumns: Story = {
               <TableCell
                 pinned="start"
                 padding="cell"
-                inlineStartNode={
+                startIcon={
                   <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
                 }
               >
@@ -613,7 +613,7 @@ export const SortableKeyboard: Story = {
               <TableCell
                 pinned="none"
                 padding="cell"
-                inlineStartNode={
+                startIcon={
                   <Avatar magnitude="xs" alt={person.name} fallback={person.name.charAt(0)} />
                 }
               >
diff --git a/packages/propel/src/components/table/table.tsx b/packages/propel/src/components/table/table.tsx
index 4ee2c0c5..ad523eff 100644
--- a/packages/propel/src/components/table/table.tsx
+++ b/packages/propel/src/components/table/table.tsx
@@ -1,14 +1,14 @@
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import type * as React from "react";
 
-import { ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb } from "../../ui/scroll-area";
+import { ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb } from "../../elements/scroll-area";
 import {
   Table as TableElement,
   type TableProps as TableElementProps,
   TableScrollArea,
   type TableMode,
   TableScrollAreaViewport,
-} from "../../ui/table";
+} from "../../elements/table";
 import { TableModeContext } from "./table-context";
 
 export type TableProps = TableElementProps & {
@@ -19,23 +19,31 @@ export type TableProps = TableElementProps & {
 
 /**
  * The ready-made table: the styled `<table>` wrapped in a rounded, hairline-bordered scroll frame,
- * sharing its layout `mode` with the cells/heads via context.
+ * sharing its layout `mode` with the cells/heads via context. The Base UI `ScrollArea` behavior
+ * grafts onto the styled `TableScrollArea` frame + viewport (and the overlay scrollbars) via
+ * `render`, behavior part outer.
  */
 export function Table({ mode, children, ...props }: TableProps) {
   return (
     <TableModeContext.Provider value={mode}>
-      <TableScrollArea render={<BaseScrollArea.Root />}>
-        <TableScrollAreaViewport render={<BaseScrollArea.Viewport />}>
+      <BaseScrollArea.Root render={<TableScrollArea />}>
+        <BaseScrollArea.Viewport render={<TableScrollAreaViewport />}>
           <TableElement {...props}>{children}</TableElement>
-        </TableScrollAreaViewport>
-        <ScrollAreaScrollbar orientation="vertical" visibility="auto" magnitude="thin">
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
-        <ScrollAreaScrollbar orientation="horizontal" visibility="auto" magnitude="thin">
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
-        <ScrollAreaCorner />
-      </TableScrollArea>
+        </BaseScrollArea.Viewport>
+        <BaseScrollArea.Scrollbar
+          orientation="vertical"
+          render={<ScrollAreaScrollbar visibility="auto" magnitude="thin" />}
+        >
+          <BaseScrollArea.Thumb render={<ScrollAreaThumb />} />
+        </BaseScrollArea.Scrollbar>
+        <BaseScrollArea.Scrollbar
+          orientation="horizontal"
+          render={<ScrollAreaScrollbar visibility="auto" magnitude="thin" />}
+        >
+          <BaseScrollArea.Thumb render={<ScrollAreaThumb />} />
+        </BaseScrollArea.Scrollbar>
+        <BaseScrollArea.Corner render={<ScrollAreaCorner />} />
+      </BaseScrollArea.Root>
     </TableModeContext.Provider>
   );
 }
diff --git a/packages/propel/src/components/tabs/index.tsx b/packages/propel/src/components/tabs/index.tsx
index 5d740f3a..d1d4bb6f 100644
--- a/packages/propel/src/components/tabs/index.tsx
+++ b/packages/propel/src/components/tabs/index.tsx
@@ -1,13 +1,13 @@
 export * from "./tab";
 export * from "./tabs";
+export * from "./tabs-indicator";
 export * from "./tabs-list";
-// Re-export the atomic structural parts so a full tab set is importable from this convenience.
+export * from "./tabs-panel";
+// Re-export the styled parts with no behavior of their own so a full tab set is importable from this
+// convenience: the horizontal scroll frame the ready-made `TabsList` composes, and the set's
+// `appearance` axis type.
 export {
-  TabsIndicator,
-  type TabsIndicatorProps,
   TabsListScrollArea,
   type TabsListScrollAreaProps,
-  TabsPanel,
-  type TabsPanelProps,
   type TabsAppearance,
-} from "../../ui/tabs";
+} from "../../elements/tabs";
diff --git a/packages/propel/src/components/tabs/tab.tsx b/packages/propel/src/components/tabs/tab.tsx
index 125771c6..6407e7fa 100644
--- a/packages/propel/src/components/tabs/tab.tsx
+++ b/packages/propel/src/components/tabs/tab.tsx
@@ -1,35 +1,36 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import * as React from "react";
 
-import { NodeSlot } from "../../internal/node-slot";
 import {
   Tab as TabElement,
-  type TabProps as TabElementProps,
   TabUnderlineBar,
   TabUnderlineBarTrack,
   TabUnderlineLabel,
-} from "../../ui/tabs";
+} from "../../elements/tabs";
+import { NodeSlot } from "../../internal/node-slot";
 import { TabsAppearanceContext } from "./tabs-context";
 
-export type TabProps = Omit<TabElementProps, "appearance"> & {
+export type TabProps = Omit<BaseTabs.Tab.Props, "className" | "style"> & {
   /**
    * 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;
+  icon?: React.ReactNode;
 };
 
 /**
- * The ready-made tab button: composes the atomic `Tab` (taking the set's `appearance` from context,
- * so you don't pass it) and lays out an optional `inlineStartNode` with the label. The `underline`
- * appearance additionally renders the sliding bar track beneath the label.
+ * The ready-made tab button: grafts the Base UI `Tabs.Tab` behavior onto the styled `elements/tabs`
+ * tab (taking the set's `appearance` from context, so you don't pass it) and lays out an optional
+ * `icon` with the label. The `underline` appearance additionally renders the sliding bar track
+ * beneath the label.
  */
-export function Tab({ inlineStartNode, children, ...props }: TabProps) {
+export function Tab({ icon, children, ...props }: TabProps) {
   const appearance = React.useContext(TabsAppearanceContext);
-  const iconNode = inlineStartNode ? <NodeSlot aria-hidden>{inlineStartNode}</NodeSlot> : null;
+  const iconNode = icon ? <NodeSlot aria-hidden>{icon}</NodeSlot> : null;
 
   if (appearance === "underline") {
     return (
-      <TabElement appearance={appearance} {...props}>
+      <BaseTabs.Tab render={<TabElement appearance={appearance} />} {...props}>
         <TabUnderlineLabel>
           {iconNode}
           {children}
@@ -37,14 +38,14 @@ export function Tab({ inlineStartNode, children, ...props }: TabProps) {
         <TabUnderlineBarTrack>
           <TabUnderlineBar />
         </TabUnderlineBarTrack>
-      </TabElement>
+      </BaseTabs.Tab>
     );
   }
 
   return (
-    <TabElement appearance={appearance} {...props}>
+    <BaseTabs.Tab render={<TabElement appearance={appearance} />} {...props}>
       {iconNode}
       {children}
-    </TabElement>
+    </BaseTabs.Tab>
   );
 }
diff --git a/packages/propel/src/components/tabs/tabs-context.ts b/packages/propel/src/components/tabs/tabs-context.ts
index 5481425c..c97af458 100644
--- a/packages/propel/src/components/tabs/tabs-context.ts
+++ b/packages/propel/src/components/tabs/tabs-context.ts
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import { type TabsAppearance } from "../../ui/tabs";
+import { type TabsAppearance } from "../../elements/tabs";
 
 /**
  * Set by the components `Tabs` so the `TabsList`/`Tab`s inside share the set's `appearance`. Lives
  * in the components tier: a context is cross-tree coordination — composition — not a single-element
- * `ui` concern.
+ * `elements` concern.
  */
 export const TabsAppearanceContext = React.createContext<TabsAppearance>("contained");
diff --git a/packages/propel/src/components/tabs/tabs-indicator.tsx b/packages/propel/src/components/tabs/tabs-indicator.tsx
new file mode 100644
index 00000000..efa43f98
--- /dev/null
+++ b/packages/propel/src/components/tabs/tabs-indicator.tsx
@@ -0,0 +1,14 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+
+import { TabsIndicator as TabsIndicatorElement } from "../../elements/tabs";
+
+export type TabsIndicatorProps = Omit<BaseTabs.Indicator.Props, "className" | "style">;
+
+/**
+ * The ready-made active-tab underline: grafts the Base UI `Tabs.Indicator` behavior (which tracks
+ * the active tab via the `--active-tab-*` CSS vars) onto the styled `elements/tabs` indicator. The
+ * built-in `TabsList` renders it for the `underline` appearance; surfaced for custom lists.
+ */
+export function TabsIndicator(props: TabsIndicatorProps) {
+  return <BaseTabs.Indicator render={<TabsIndicatorElement />} {...props} />;
+}
diff --git a/packages/propel/src/components/tabs/tabs-list.tsx b/packages/propel/src/components/tabs/tabs-list.tsx
index c2578c7c..af0f8cbe 100644
--- a/packages/propel/src/components/tabs/tabs-list.tsx
+++ b/packages/propel/src/components/tabs/tabs-list.tsx
@@ -1,34 +1,38 @@
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import * as React from "react";
 
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "../../ui/scroll-area";
-import {
-  TabsIndicator,
-  TabsList as TabsListElement,
-  type TabsListProps as TabsListElementProps,
-  TabsListScrollArea,
-} from "../../ui/tabs";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "../../elements/scroll-area";
+import { TabsList as TabsListElement, TabsListScrollArea } from "../../elements/tabs";
 import { TabsAppearanceContext } from "./tabs-context";
+import { TabsIndicator } from "./tabs-indicator";
 
-export type TabsListProps = Omit<TabsListElementProps, "appearance">;
+export type TabsListProps = Omit<BaseTabs.List.Props, "className" | "style">;
 
 /**
  * The ready-made tab strip: grafts the Base UI `ScrollArea.Root` onto the styled
- * `TabsListScrollArea` frame, then composes the atomic `TabsList` (taking the set's `appearance`
- * from context) rendered as the scroll viewport plus a horizontal scrollbar so a long row of tabs
- * scrolls, and renders the active-tab underline `TabsIndicator` for the `underline` appearance.
+ * `TabsListScrollArea` frame, then grafts the Base UI `Tabs.List` behavior onto the styled
+ * `TabsList` (taking the set's `appearance` from context) rendered as the scroll viewport, plus a
+ * horizontal scrollbar so a long row of tabs scrolls, and renders the active-tab underline
+ * `TabsIndicator` for the `underline` appearance.
  */
 export function TabsList({ children, ...props }: TabsListProps) {
   const appearance = React.useContext(TabsAppearanceContext);
   return (
-    <TabsListScrollArea render={<BaseScrollArea.Root />}>
-      <TabsListElement appearance={appearance} render={<BaseScrollArea.Viewport />} {...props}>
+    <BaseScrollArea.Root render={<TabsListScrollArea />}>
+      <BaseTabs.List
+        render={<BaseScrollArea.Viewport render={<TabsListElement appearance={appearance} />} />}
+        {...props}
+      >
         {children}
         {appearance === "underline" ? <TabsIndicator /> : null}
-      </TabsListElement>
-      <ScrollAreaScrollbar orientation="horizontal" visibility="auto" magnitude="thin">
-        <ScrollAreaThumb />
-      </ScrollAreaScrollbar>
-    </TabsListScrollArea>
+      </BaseTabs.List>
+      <BaseScrollArea.Scrollbar
+        orientation="horizontal"
+        render={<ScrollAreaScrollbar visibility="auto" magnitude="thin" />}
+      >
+        <BaseScrollArea.Thumb render={<ScrollAreaThumb />} />
+      </BaseScrollArea.Scrollbar>
+    </BaseScrollArea.Root>
   );
 }
diff --git a/packages/propel/src/components/tabs/tabs-panel.tsx b/packages/propel/src/components/tabs/tabs-panel.tsx
new file mode 100644
index 00000000..48b43219
--- /dev/null
+++ b/packages/propel/src/components/tabs/tabs-panel.tsx
@@ -0,0 +1,13 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+
+import { TabsPanel as TabsPanelElement } from "../../elements/tabs";
+
+export type TabsPanelProps = Omit<BaseTabs.Panel.Props, "className" | "style">;
+
+/**
+ * The ready-made tab panel: grafts the Base UI `Tabs.Panel` behavior (shown when the `Tab` of the
+ * matching `value` is active) onto the styled `elements/tabs` panel.
+ */
+export function TabsPanel(props: TabsPanelProps) {
+  return <BaseTabs.Panel render={<TabsPanelElement />} {...props} />;
+}
diff --git a/packages/propel/src/components/tabs/tabs.stories.tsx b/packages/propel/src/components/tabs/tabs.stories.tsx
index a1fb94a5..ec3e7803 100644
--- a/packages/propel/src/components/tabs/tabs.stories.tsx
+++ b/packages/propel/src/components/tabs/tabs.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Activity, LayoutGrid, Settings } from "lucide-react";
-import type * as React from "react";
 import { expect, waitFor } from "storybook/test";
 
 import { Tab, Tabs, TabsIndicator, TabsList, TabsPanel } from "./index";
@@ -23,28 +22,6 @@ const TAB_ITEMS = [
   },
 ];
 
-function TabsFixture({
-  withIcons = false,
-  ...props
-}: React.ComponentProps<typeof Tabs> & { withIcons?: boolean }) {
-  return (
-    <Tabs {...props}>
-      <TabsList>
-        {TAB_ITEMS.map((t) => (
-          <Tab key={t.value} value={t.value} inlineStartNode={withIcons ? t.icon : undefined}>
-            {t.label}
-          </Tab>
-        ))}
-      </TabsList>
-      {TAB_ITEMS.map((t) => (
-        <TabsPanel key={t.value} value={t.value}>
-          {t.panel}
-        </TabsPanel>
-      ))}
-    </Tabs>
-  );
-}
-
 const meta = {
   title: "Components/Tabs",
   component: Tabs,
@@ -67,25 +44,85 @@ type Story = StoryObj<typeof meta>;
 /** A working contained tab set: a raised card lifts the active tab inside the pill. */
 export const Contained: Story = {
   args: { appearance: "contained" },
-  render: (args) => <TabsFixture {...args} />,
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsList>
+        {TAB_ITEMS.map((t) => (
+          <Tab key={t.value} value={t.value}>
+            {t.label}
+          </Tab>
+        ))}
+      </TabsList>
+      {TAB_ITEMS.map((t) => (
+        <TabsPanel key={t.value} value={t.value}>
+          {t.panel}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  ),
 };
 
 /** A working underline tab set: a dark bar slides under the active tab. */
 export const Underline: Story = {
   args: { appearance: "underline" },
-  render: (args) => <TabsFixture {...args} />,
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsList>
+        {TAB_ITEMS.map((t) => (
+          <Tab key={t.value} value={t.value}>
+            {t.label}
+          </Tab>
+        ))}
+      </TabsList>
+      {TAB_ITEMS.map((t) => (
+        <TabsPanel key={t.value} value={t.value}>
+          {t.panel}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  ),
 };
 
-/** Both variants accept an optional `inlineStartNode` (a 16px slot tinted to the tab's text color). */
+/** Both variants accept an optional `icon` (a 16px slot tinted to the tab's text color). */
 export const WithIcons: Story = {
   args: { appearance: "contained" },
-  render: (args) => <TabsFixture {...args} withIcons />,
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsList>
+        {TAB_ITEMS.map((t) => (
+          <Tab key={t.value} value={t.value} icon={t.icon}>
+            {t.label}
+          </Tab>
+        ))}
+      </TabsList>
+      {TAB_ITEMS.map((t) => (
+        <TabsPanel key={t.value} value={t.value}>
+          {t.panel}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  ),
 };
 
-/** The `inlineStartNode` slot on the underline appearance. */
+/** The `icon` slot on the underline appearance. */
 export const UnderlineWithIcons: Story = {
   args: { appearance: "underline" },
-  render: (args) => <TabsFixture {...args} withIcons />,
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsList>
+        {TAB_ITEMS.map((t) => (
+          <Tab key={t.value} value={t.value} icon={t.icon}>
+            {t.label}
+          </Tab>
+        ))}
+      </TabsList>
+      {TAB_ITEMS.map((t) => (
+        <TabsPanel key={t.value} value={t.value}>
+          {t.panel}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  ),
 };
 
 /**
diff --git a/packages/propel/src/components/tabs/tabs.tsx b/packages/propel/src/components/tabs/tabs.tsx
index 54559efa..3a06f972 100644
--- a/packages/propel/src/components/tabs/tabs.tsx
+++ b/packages/propel/src/components/tabs/tabs.tsx
@@ -1,22 +1,22 @@
-import type * as React from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 
-import { Tabs as TabsElement, type TabsProps as TabsElementProps } from "../../ui/tabs";
+import { Tabs as TabsElement, type TabsAppearance } from "../../elements/tabs";
 import { TabsAppearanceContext } from "./tabs-context";
 
-export type TabsProps = TabsElementProps & {
-  children?: React.ReactNode;
+export type TabsProps = Omit<BaseTabs.Root.Props, "className" | "style"> & {
+  /** Whether the set is a contained pill or a flat underline strip. Shared with its parts. */
+  appearance: TabsAppearance;
 };
 
 /**
- * The ready-made tab set: shares its `appearance` with the `TabsList`/`Tab`s inside via context,
- * composed around the single-element `ui/tabs` root.
+ * The ready-made tab set: grafts the Base UI `Tabs.Root` behavior onto the styled `elements/tabs`
+ * root and shares its `appearance` with the `TabsList`/`Tab`s inside via context, so you don't
+ * repeat it.
  */
-export function Tabs({ appearance, children, ...props }: TabsProps) {
+export function Tabs({ appearance, ...props }: TabsProps) {
   return (
     <TabsAppearanceContext.Provider value={appearance}>
-      <TabsElement appearance={appearance} {...props}>
-        {children}
-      </TabsElement>
+      <BaseTabs.Root render={<TabsElement appearance={appearance} />} {...props} />
     </TabsAppearanceContext.Provider>
   );
 }
diff --git a/packages/propel/src/components/text-area-field/text-area-field.tsx b/packages/propel/src/components/text-area-field/text-area-field.tsx
index eabf9082..41e23a24 100644
--- a/packages/propel/src/components/text-area-field/text-area-field.tsx
+++ b/packages/propel/src/components/text-area-field/text-area-field.tsx
@@ -1,14 +1,14 @@
 import type * as React from "react";
 
-import { Field } from "../../ui/field/field";
-import { FieldControlContent } from "../../ui/field/field-control-content";
-import type { InputMagnitude } from "../../ui/field/variants";
-import { TextArea, type TextAreaProps } from "../../ui/text-area/text-area";
-
-export type { InputMagnitude };
-import { TextAreaGroup } from "../../ui/text-area/text-area-group";
+import { FieldControlContent } from "../../elements/field/field-control-content";
+import type { InputMagnitude } from "../../elements/field/variants";
+import { TextAreaGroup } from "../../elements/text-area/text-area-group";
+import { Field } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 import { FieldLabelGroup } from "../field/field-label-group";
+import { TextArea, type TextAreaProps } from "../text-area";
+
+export type { InputMagnitude };
 
 export type TextAreaFieldProps = Omit<TextAreaProps, "magnitude" | "surface"> & {
   /** Magnitude scale. `md` | `lg` | `xl`. */
diff --git a/packages/propel/src/components/text-area/index.tsx b/packages/propel/src/components/text-area/index.tsx
index 03d8d4f7..7595e1cf 100644
--- a/packages/propel/src/components/text-area/index.tsx
+++ b/packages/propel/src/components/text-area/index.tsx
@@ -1,4 +1,7 @@
-// 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. The `TextAreaGroup` frame ships here too, so a consumer can
-// wrap a bare `TextArea` without dropping to `ui/field`.
-export * from "../../ui/text-area";
+// The ready-made `TextArea` grafts Base UI's `Field.Control` behavior onto the styled `elements` element.
+// Drop down to `@plane/propel/elements/text-area` for the bare styled parts, or reach for the ready-made
+// `TextAreaField` in `@plane/propel/components/text-area-field`.
+export * from "./text-area";
+// The bordered frame is a pure styled element (no Base UI behavior to graft), so re-export it
+// straight from `elements/text-area`.
+export { TextAreaGroup, type TextAreaGroupProps } from "../../elements/text-area";
diff --git a/packages/propel/src/components/text-area/text-area.stories.tsx b/packages/propel/src/components/text-area/text-area.stories.tsx
index d04d8176..b866fad0 100644
--- a/packages/propel/src/components/text-area/text-area.stories.tsx
+++ b/packages/propel/src/components/text-area/text-area.stories.tsx
@@ -2,7 +2,16 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
 import { Field, FieldError, FieldLabel } from "../field/index";
-import { TextArea, TextAreaGroup } from "./index";
+import { TextArea, TextAreaGroup, type TextAreaMagnitude, type TextAreaResize } from "./index";
+
+const MAGNITUDES: TextAreaMagnitude[] = ["sm", "md", "lg", "xl"];
+const RESIZES: TextAreaResize[] = ["none", "vertical", "both"];
+
+const RESIZE_COPY: Record<TextAreaResize, string> = {
+  none: "No resize handle — the textarea keeps its size.",
+  vertical: "Drag the corner handle to grow the textarea vertically.",
+  both: "Drag the corner handle to grow the textarea in both directions.",
+};
 
 const meta = {
   title: "Components/TextArea",
@@ -40,6 +49,104 @@ export const Default: Story = {
   ),
 };
 
+/** Every text magnitude (sm/md/lg/xl) with the same content, framed by `TextAreaGroup`. */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each textarea for its value, so disable just those two
+  // controls; the rest stay live and update every textarea at once.
+  argTypes: { magnitude: { control: false }, "aria-label": { control: false } },
+  args: {
+    magnitude: "md",
+    surface: "field",
+    resize: "vertical",
+    rows: 2,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <TextAreaGroup key={magnitude}>
+          <TextArea
+            {...args}
+            magnitude={magnitude}
+            aria-label={`Comment (${magnitude})`}
+            defaultValue={`The ${magnitude} magnitude sizes the value text.`}
+          />
+        </TextAreaGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * `surface` picks the control presentation: `field` pairs with the bordered `TextAreaGroup` frame,
+ * `embedded` pads itself inside a composer frame that owns the chrome, and `inline` hugs its line
+ * height for compact single-row composers.
+ */
+export const Surfaces: Story = {
+  parameters: { controls: { disable: true } },
+  args: { magnitude: "md", surface: "field", resize: "none" },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      <TextAreaGroup>
+        <TextArea
+          {...args}
+          surface="field"
+          aria-label="Field comment"
+          rows={2}
+          defaultValue="The field surface sits inside the TextAreaGroup frame."
+        />
+      </TextAreaGroup>
+      <div className="flex w-full flex-col overflow-clip rounded-xl border border-subtle-1 bg-layer-2">
+        <TextArea
+          {...args}
+          surface="embedded"
+          aria-label="Embedded comment"
+          rows={2}
+          defaultValue="The embedded surface pads itself inside a composer frame."
+        />
+      </div>
+      <div className="flex items-center gap-2 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2">
+        <TextArea
+          {...args}
+          surface="inline"
+          aria-label="Inline comment"
+          rows={1}
+          defaultValue="The inline surface hugs a compact row."
+        />
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * `resize` controls the native drag handle: `none` locks the size, `vertical` allows height
+ * changes, `both` frees both axes.
+ */
+export const Resize: Story = {
+  // Iterates `resize` and labels each textarea for its value, so disable just those two
+  // controls; the rest stay live and update every textarea at once.
+  argTypes: { resize: { control: false }, "aria-label": { control: false } },
+  args: {
+    magnitude: "md",
+    surface: "field",
+    resize: "vertical",
+    rows: 2,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {RESIZES.map((resize) => (
+        <TextAreaGroup key={resize}>
+          <TextArea
+            {...args}
+            resize={resize}
+            aria-label={`Comment (resize ${resize})`}
+            defaultValue={RESIZE_COPY[resize]}
+          />
+        </TextAreaGroup>
+      ))}
+    </div>
+  ),
+};
+
 export const FieldComposition: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { magnitude: "md", surface: "field", resize: "vertical", rows: 3 },
diff --git a/packages/propel/src/components/text-area/text-area.tsx b/packages/propel/src/components/text-area/text-area.tsx
new file mode 100644
index 00000000..bb347bc4
--- /dev/null
+++ b/packages/propel/src/components/text-area/text-area.tsx
@@ -0,0 +1,48 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+import {
+  TextArea as TextAreaElement,
+  type TextAreaMagnitude,
+  type TextAreaResize,
+  type TextAreaSurface,
+} from "../../elements/text-area/text-area";
+
+export type { TextAreaMagnitude, TextAreaResize, TextAreaSurface };
+
+type BaseFieldControlProps = BaseField.Control.Props;
+// `Field.Control` is input-shaped; restore the textarea-only native attrs (rows, cols, wrap…) minus
+// the keys Field.Control already owns.
+type NativeTextAreaProps = Omit<
+  React.ComponentProps<"textarea">,
+  keyof BaseFieldControlProps | "children" | "className" | "style"
+>;
+
+export type TextAreaProps = Omit<BaseFieldControlProps, "className" | "style" | "render"> &
+  NativeTextAreaProps & {
+    /** Text size for the textarea value. */
+    magnitude: TextAreaMagnitude;
+    /** Control presentation for standalone fields or embedded composer surfaces. */
+    surface: TextAreaSurface;
+    /** Controls whether the user can resize the textarea (none, vertical, both). */
+    resize: TextAreaResize;
+    /** 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"];
+  };
+
+/**
+ * Multi-line text field that automatically works inside `Field`. Base UI's `Field.Control` behavior
+ * grafted onto the styled `elements` `TextArea` element (rule 1a) — behavior part outer, styled
+ * part as the render target. Base UI ships no textarea control, so `Field.Control` renders the
+ * styled `<textarea>` directly (this replaces the former `base/text-area` wrapper).
+ */
+export function TextArea({ magnitude, surface, resize, ...props }: TextAreaProps) {
+  return (
+    <BaseField.Control
+      {...props}
+      render={<TextAreaElement magnitude={magnitude} surface={surface} resize={resize} />}
+    />
+  );
+}
diff --git a/packages/propel/src/components/toast/index.tsx b/packages/propel/src/components/toast/index.tsx
index e814209d..9fe97b97 100644
--- a/packages/propel/src/components/toast/index.tsx
+++ b/packages/propel/src/components/toast/index.tsx
@@ -2,9 +2,12 @@ export * from "./toast";
 export * from "./toast-status-icon";
 export * from "./toast-list";
 export * from "./toast-provider";
+export { useToastManager } from "./manager";
 
-// 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.
+// Re-export propel's STYLED toast parts so a custom toast can be assembled from one entry point if
+// the ready-made `Toast` doesn't fit. The behavior-only roles (`Provider`, `Portal`, `Close`) are
+// Base UI's — no propel styling — so compose them from `@base-ui/react/toast` directly at the call
+// site.
 export {
   Toast as ToastElement,
   type ToastProps as ToastElementProps,
@@ -16,22 +19,16 @@ export {
   type ToastActionGroupProps,
   ToastActions,
   type ToastActionsProps,
-  ToastClose,
-  type ToastCloseProps,
-  ToastCloseSlot,
-  type ToastCloseSlotProps,
+  ToastCloseGroup,
+  type ToastCloseGroupProps,
   ToastContent,
   type ToastContentProps,
   ToastDescription,
   type ToastDescriptionProps,
-  ToastPortal,
-  ToastProvider as ToastProviderElement,
-  type ToastProviderProps as ToastProviderElementProps,
   ToastTextGroup,
   type ToastTextGroupProps,
   ToastTitle,
   type ToastTitleProps,
   ToastViewport,
   type ToastViewportProps,
-  useToastManager,
-} from "../../ui/toast/index";
+} from "../../elements/toast/index";
diff --git a/packages/propel/src/components/toast/manager.ts b/packages/propel/src/components/toast/manager.ts
new file mode 100644
index 00000000..ca133c48
--- /dev/null
+++ b/packages/propel/src/components/toast/manager.ts
@@ -0,0 +1,7 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+
+// Base UI's toast manager hook + global manager factory. These are hooks/factories
+// (behavior), not styled elements, so they live in `components` and pass through
+// unchanged from `@base-ui/react/toast`.
+export const useToastManager = BaseToast.useToastManager;
+export const createToastManager = BaseToast.createToastManager;
diff --git a/packages/propel/src/components/toast/solid-circle-alert.tsx b/packages/propel/src/components/toast/solid-circle-alert.tsx
deleted file mode 100644
index 37c627be..00000000
--- a/packages/propel/src/components/toast/solid-circle-alert.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-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/components/toast/solid-circle-check.tsx b/packages/propel/src/components/toast/solid-circle-check.tsx
deleted file mode 100644
index 35e97ffe..00000000
--- a/packages/propel/src/components/toast/solid-circle-check.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-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/components/toast/solid-circle-x.tsx b/packages/propel/src/components/toast/solid-circle-x.tsx
deleted file mode 100644
index 66477fb0..00000000
--- a/packages/propel/src/components/toast/solid-circle-x.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-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/components/toast/solid-icon.tsx b/packages/propel/src/components/toast/solid-icon.tsx
deleted file mode 100644
index aa80b00c..00000000
--- a/packages/propel/src/components/toast/solid-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-export type StatusIconProps = React.SVGProps<SVGSVGElement>;
-
-export function SolidIcon(props: StatusIconProps) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/components/toast/solid-info.tsx b/packages/propel/src/components/toast/solid-info.tsx
deleted file mode 100644
index 320654ea..00000000
--- a/packages/propel/src/components/toast/solid-info.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-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/components/toast/solid-triangle-alert.tsx b/packages/propel/src/components/toast/solid-triangle-alert.tsx
deleted file mode 100644
index adff938e..00000000
--- a/packages/propel/src/components/toast/solid-triangle-alert.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-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/components/toast/toast-provider.tsx b/packages/propel/src/components/toast/toast-provider.tsx
index d96dd82c..66bfdd1e 100644
--- a/packages/propel/src/components/toast/toast-provider.tsx
+++ b/packages/propel/src/components/toast/toast-provider.tsx
@@ -1,12 +1,7 @@
-import type { Toast as BaseToast } from "@base-ui/react/toast";
-import type { ToastManager } from "@base-ui/react/toast";
+import { Toast as BaseToast, type ToastManager } from "@base-ui/react/toast";
 import type * as React from "react";
 
-import {
-  ToastPortal,
-  ToastProvider as ToastProviderElement,
-  ToastViewport,
-} from "../../ui/toast/index";
+import { ToastViewport } from "../../elements/toast/index";
 import type { ToastData } from "./toast";
 import { ToastList } from "./toast-list";
 
@@ -25,18 +20,18 @@ export type ToastProviderProps = Omit<
 
 /**
  * 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}.
+ * `useToast().add({ title, description, data: { tone } })`. Composes the atomic `elements/toast`
+ * parts (Provider + Portal + Viewport) and the manager-driven {@link ToastList}.
  */
 export function ToastProvider({ children, close, ...props }: ToastProviderProps) {
   return (
-    <ToastProviderElement {...props}>
+    <BaseToast.Provider {...props}>
       {children}
-      <ToastPortal>
-        <ToastViewport>
+      <BaseToast.Portal>
+        <BaseToast.Viewport render={<ToastViewport />}>
           <ToastList close={close} />
-        </ToastViewport>
-      </ToastPortal>
-    </ToastProviderElement>
+        </BaseToast.Viewport>
+      </BaseToast.Portal>
+    </BaseToast.Provider>
   );
 }
diff --git a/packages/propel/src/components/toast/toast-status-icon.tsx b/packages/propel/src/components/toast/toast-status-icon.tsx
index 3a55e41c..f5e80a47 100644
--- a/packages/propel/src/components/toast/toast-status-icon.tsx
+++ b/packages/propel/src/components/toast/toast-status-icon.tsx
@@ -4,19 +4,19 @@ import {
   ToastStatusIcon as ToastStatusIconElement,
   type ToastStatusIconProps as ToastStatusIconElementProps,
   type ToastTone,
-} from "../../ui/toast";
-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";
+} from "../../elements/toast";
+import { SolidCircleAlert } from "../../internal/solid-icons/solid-circle-alert";
+import { SolidCircleCheck } from "../../internal/solid-icons/solid-circle-check";
+import { SolidCircleX } from "../../internal/solid-icons/solid-circle-x";
+import type { SolidIconProps } from "../../internal/solid-icons/solid-icon";
+import { SolidInfo } from "../../internal/solid-icons/solid-info";
+import { SolidTriangleAlert } from "../../internal/solid-icons/solid-triangle-alert";
 
-type StatusGlyph = (props: StatusIconProps) => React.JSX.Element;
+type StatusGlyph = (props: SolidIconProps) => React.JSX.Element;
 
 // Each tone auto-selects a filled status glyph (see the solid-* assets) — 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. The ui `ToastStatusIcon` slot owns the
+// status equivalents, so these are hand-authored. The elements `ToastStatusIcon` slot owns the
 // `size-4 shrink-0` box + per-tone color; this ready-made owns only the tone→glyph mapping.
 const STATUS_ICON: Record<ToastTone, StatusGlyph> = {
   success: SolidCircleCheck,
@@ -30,7 +30,8 @@ export type ToastStatusIconProps = Omit<ToastStatusIconElementProps, "children">
 
 /**
  * The tone-colored status icon at a toast's inline-start. Picks a filled glyph from `tone` and
- * renders it inside the ui `ToastStatusIcon` slot, so consumers choose a `tone` and never an icon.
+ * renders it inside the elements `ToastStatusIcon` slot, so consumers choose a `tone` and never an
+ * icon.
  */
 export function ToastStatusIcon({ tone, ...props }: ToastStatusIconProps) {
   const Glyph = STATUS_ICON[tone];
diff --git a/packages/propel/src/components/toast/toast.stories.tsx b/packages/propel/src/components/toast/toast.stories.tsx
index c6f923d3..b4616852 100644
--- a/packages/propel/src/components/toast/toast.stories.tsx
+++ b/packages/propel/src/components/toast/toast.stories.tsx
@@ -7,7 +7,9 @@ import { IconButton } from "../icon-button";
 import {
   Toast,
   type ToastData,
+  ToastList,
   type ToastProps,
+  ToastStatusIcon,
   type ToastTone,
   ToastProvider,
   useToast,
@@ -85,6 +87,7 @@ class ToastErrorBoundary extends React.Component<
 const meta = {
   title: "Components/Toast",
   component: ToastProvider,
+  subcomponents: { Toast, ToastList, ToastStatusIcon },
   args: { close: closeButton },
   // Every story renders inside a single ToastProvider so its trigger can queue
   // toasts and the viewport can display them.
@@ -297,6 +300,136 @@ export const WithPrimaryAction: Story = {
   ),
 };
 
+/**
+ * Report an async task with a single toast that advances through its lifecycle:
+ * `useToast().promise(promise, { loading, success, error })` queues a loading toast, then updates
+ * it in place when the promise settles. Each state carries its own `data.tone`, so the status icon
+ * tracks the lifecycle (neutral while pending, success/danger once settled). The demo settles
+ * deterministically after a 300 ms delay.
+ */
+export const AsyncPromise: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const { promise } = useToast();
+    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={() => {
+          void promise<string, ToastData>(
+            new Promise<string>((resolve) => {
+              setTimeout(() => resolve("3 attachments"), 300);
+            }),
+            {
+              loading: {
+                title: "Uploading files",
+                description: "Your attachments are on their way",
+                data: { tone: "neutral" },
+              },
+              success: (uploaded) => ({
+                title: "Upload complete",
+                description: `${uploaded} uploaded`,
+                data: { tone: "success" },
+              }),
+              error: {
+                title: "Upload failed",
+                description: "Something went wrong — try again",
+                data: { tone: "danger" },
+              },
+            },
+          );
+        }}
+      >
+        Upload files
+      </button>
+    );
+  },
+};
+
+/**
+ * Interaction test for the promise lifecycle: clicking the trigger shows the loading toast, and
+ * once the 300 ms task resolves the SAME toast updates in place to the success state (one dialog
+ * throughout, no second toast). Tagged so it stays out of the sidebar/docs/manifest.
+ */
+export const AsyncPromiseInteraction: Story = {
+  ...AsyncPromise,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const body = within(document.body);
+
+    await userEvent.click(canvas.getByRole("button", { name: "Upload files" }));
+
+    // The loading state appears first, as a dialog named by its loading title.
+    const toast = await body.findByRole("dialog", { name: "Uploading files" });
+    await expect(toast).toBeVisible();
+
+    // When the promise resolves, the same toast updates in place to the success state.
+    await waitFor(() => expect(body.getByText("Upload complete")).toBeVisible());
+    await expect(body.getByText("3 attachments uploaded")).toBeVisible();
+    await expect(body.getAllByRole("dialog")).toHaveLength(1);
+    await expect(body.queryByText("Uploading files")).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * Deduplicated toast: pass a stable `id` to `add` and repeated calls update the existing toast in
+ * place (refreshing its auto-dismiss timer) instead of stacking duplicates. Click the trigger
+ * repeatedly while the toast is visible — the save count updates inside the one toast.
+ */
+export const Deduplicated: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const { add } = useToast();
+    const [saves, setSaves] = React.useState(0);
+    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={() => {
+          const next = saves + 1;
+          setSaves(next);
+          add({
+            id: "draft-save",
+            title: "Draft saved",
+            description: `Saved ${next} ${next === 1 ? "time" : "times"} this session`,
+            data: { tone: "success" },
+          });
+        }}
+      >
+        Save draft
+      </button>
+    );
+  },
+};
+
+/**
+ * Interaction test for deduplication: two clicks on the trigger produce ONE toast — the second
+ * `add` call with the same `id` upserts the existing toast (its description advances to the new
+ * save count) rather than queueing a duplicate. Tagged so it stays out of the
+ * sidebar/docs/manifest.
+ */
+export const DeduplicatedInteraction: Story = {
+  ...Deduplicated,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const body = within(document.body);
+    const trigger = canvas.getByRole("button", { name: "Save draft" });
+
+    await userEvent.click(trigger);
+    const toast = await body.findByRole("dialog", { name: "Draft saved" });
+    await expect(within(toast).getByText("Saved 1 time this session")).toBeVisible();
+
+    // A second add with the same `id` updates the existing toast in place…
+    await userEvent.click(trigger);
+    await waitFor(() =>
+      expect(within(toast).getByText("Saved 2 times this session")).toBeVisible(),
+    );
+
+    // …so the live region still holds exactly one toast.
+    await expect(body.getAllByRole("dialog", { name: "Draft saved" })).toHaveLength(1);
+  },
+};
+
 /**
  * Real interaction test: clicking the trigger queues a toast whose title and description become
  * visible inside the live region (Base UI renders the viewport as a polite `role="region"` live
diff --git a/packages/propel/src/components/toast/toast.tsx b/packages/propel/src/components/toast/toast.tsx
index 6905d622..fde996d8 100644
--- a/packages/propel/src/components/toast/toast.tsx
+++ b/packages/propel/src/components/toast/toast.tsx
@@ -1,4 +1,4 @@
-import type { Toast as BaseToast } from "@base-ui/react/toast";
+import { Toast as BaseToast } from "@base-ui/react/toast";
 import type * as React from "react";
 
 import {
@@ -7,17 +7,15 @@ import {
   ToastActionButton,
   ToastActionGroup,
   ToastActions,
-  ToastClose,
-  ToastCloseSlot,
+  ToastCloseGroup,
   ToastContent,
   ToastDescription,
   type ToastTone,
   ToastTextGroup,
   ToastTitle,
-  createToastManager as createBaseToastManager,
-  useToastManager,
-} from "../../ui/toast/index";
+} from "../../elements/toast/index";
 import { LinearProgress } from "../linear-progress/index";
+import { createToastManager as createBaseToastManager, useToastManager } from "./manager";
 import { ToastStatusIcon } from "./toast-status-icon";
 
 // The semantic intent of a toast (Figma "Property 1": Default / Variant2 / Variant3
@@ -109,13 +107,13 @@ export function Toast({ toast, close, ...props }: ToastProps) {
   const primaryAction = data.primaryAction;
   const hasActionRow = leftActions.length > 0 || primaryAction != null;
   return (
-    <ToastElement toast={toast} {...props}>
+    <BaseToast.Root toast={toast} {...props} render={<ToastElement />}>
       {/* `mt-0.5` on the icon (via toastStatusIconVariants) baselines it with the title. */}
       <ToastStatusIcon tone={data.tone} />
-      <ToastContent>
+      <BaseToast.Content render={<ToastContent />}>
         <ToastTextGroup>
-          <ToastTitle />
-          <ToastDescription />
+          <BaseToast.Title render={<ToastTitle />} />
+          <BaseToast.Description render={<ToastDescription />} />
         </ToastTextGroup>
         {data.progress != null ? (
           <LinearProgress
@@ -128,7 +126,7 @@ export function Toast({ toast, close, ...props }: ToastProps) {
         {hasActionRow ? (
           // The left cluster grows to fill so the primary action pins to the inline-end
           // edge; `ToastActionGroup` carries the offset that lines the buttons up with
-          // the title text. RTL-safe via logical utilities (owned by the ui parts).
+          // the title text. RTL-safe via logical utilities (owned by the elements parts).
           <ToastActions>
             <ToastActionGroup>
               {leftActions.map((action, index) => (
@@ -145,14 +143,16 @@ export function Toast({ toast, close, ...props }: ToastProps) {
             {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>
+              <BaseToast.Action render={<ToastAction />} onClick={primaryAction.onClick}>
+                {primaryAction.label}
+              </BaseToast.Action>
             ) : null}
           </ToastActions>
         ) : null}
-      </ToastContent>
-      <ToastCloseSlot>
-        <ToastClose render={close} />
-      </ToastCloseSlot>
-    </ToastElement>
+      </BaseToast.Content>
+      <ToastCloseGroup>
+        <BaseToast.Close render={close} />
+      </ToastCloseGroup>
+    </BaseToast.Root>
   );
 }
diff --git a/packages/propel/src/components/toggle-group/toggle-group.stories.tsx b/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
index ba7dcd85..506b51cb 100644
--- a/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
+++ b/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
@@ -1,17 +1,19 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { List, ListOrdered } from "lucide-react";
+import { Bold, Italic, List, ListOrdered, Underline } from "lucide-react";
 import { expect, fn } from "storybook/test";
 
-import { Toggle, ToggleIcon } from "../toggle/index";
+import { Toggle, type ToggleMagnitude } from "../toggle/index";
 import { ToggleGroup } from "./index";
 
-// Components-tier story: the ready-made `ToggleGroup` (a 1:1 re-export of the ui
+const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];
+
+// Components-tier story: the ready-made `ToggleGroup` (a 1:1 re-export of the elements
 // primitive) holding ready-made `Toggle` items. The group sizes each toggle via
-// `magnitude` and tracks selection. The UI-tier story documents the same parts.
+// `magnitude` and tracks selection. The elements-tier story documents the same parts.
 const meta = {
   title: "Components/ToggleGroup",
   component: ToggleGroup,
-  subcomponents: { Toggle, ToggleIcon },
+  subcomponents: { Toggle },
   args: { magnitude: "md" },
   parameters: {
     a11y: {
@@ -34,14 +36,10 @@ export const Default: Story = {
   render: (args) => (
     <ToggleGroup {...args} aria-label="List style">
       <Toggle value="bulleted" aria-label="Bulleted list">
-        <ToggleIcon>
-          <List />
-        </ToggleIcon>
+        <List />
       </Toggle>
       <Toggle value="numbered" aria-label="Numbered list">
-        <ToggleIcon>
-          <ListOrdered />
-        </ToggleIcon>
+        <ListOrdered />
       </Toggle>
     </ToggleGroup>
   ),
@@ -66,3 +64,72 @@ export const DefaultInteraction: Story = {
     await expect(args.onValueChange).toHaveBeenCalled();
   },
 };
+
+/**
+ * Every size side by side — the group's `magnitude` sizes each `Toggle` inside via context, and
+ * each magnitude also scales the `ToggleIcon` glyph via `--node-size`.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and gives each group its own accessible name, so disable just
+  // that control; the rest stay live and update every group at once.
+  argTypes: { magnitude: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <ToggleGroup
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          multiple
+          defaultValue={["bold"]}
+          aria-label={`Text formatting (${magnitude})`}
+        >
+          <Toggle value="bold" aria-label={`Bold (${magnitude})`}>
+            <Bold />
+          </Toggle>
+          <Toggle value="italic" aria-label={`Italic (${magnitude})`}>
+            <Italic />
+          </Toggle>
+          <Toggle value="underline" aria-label={`Underline (${magnitude})`}>
+            <Underline />
+          </Toggle>
+        </ToggleGroup>
+      ))}
+    </div>
+  ),
+};
+
+/** `multiple` lets more than one toggle stay pressed at once. */
+export const Multiple: Story = {
+  args: { magnitude: "md", multiple: true, defaultValue: ["bold", "italic"] },
+  render: (args) => (
+    <ToggleGroup {...args} aria-label="Text formatting">
+      <Toggle value="bold" aria-label="Bold">
+        <Bold />
+      </Toggle>
+      <Toggle value="italic" aria-label="Italic">
+        <Italic />
+      </Toggle>
+      <Toggle value="underline" aria-label="Underline">
+        <Underline />
+      </Toggle>
+    </ToggleGroup>
+  ),
+};
+
+/**
+ * Interaction test: in a `multiple` group, pressing another toggle keeps the current ones pressed.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const MultipleInteraction: Story = {
+  ...Multiple,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const bold = canvas.getByRole("button", { name: "Bold" });
+    const underline = canvas.getByRole("button", { name: "Underline" });
+    await expect(bold).toHaveAttribute("aria-pressed", "true");
+    await userEvent.click(underline);
+    await expect(underline).toHaveAttribute("aria-pressed", "true");
+    await expect(bold).toHaveAttribute("aria-pressed", "true");
+  },
+};
diff --git a/packages/propel/src/components/toggle-group/toggle-group.tsx b/packages/propel/src/components/toggle-group/toggle-group.tsx
index 6b1ae6bb..868500c7 100644
--- a/packages/propel/src/components/toggle-group/toggle-group.tsx
+++ b/packages/propel/src/components/toggle-group/toggle-group.tsx
@@ -1,13 +1,14 @@
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import type * as React from "react";
 
-import {
-  ToggleGroup as ToggleGroupElement,
-  type ToggleGroupProps as ToggleGroupElementProps,
-} from "../../ui/toggle-group";
-import type { ToggleMagnitude } from "../../ui/toggle/variants";
+import { ToggleGroup as ToggleGroupElement } from "../../elements/toggle-group";
+import type { ToggleMagnitude } from "../../elements/toggle/variants";
 import { ToggleGroupContext } from "../toggle/toggle-group-context";
 
-export type ToggleGroupProps<Value extends string = string> = ToggleGroupElementProps<Value> & {
+export type ToggleGroupProps<Value extends string = string> = Omit<
+  BaseToggleGroup.Props<Value>,
+  "className" | "style"
+> & {
   /** Size applied to every `Toggle` in the group (each `Toggle` can still override it). */
   magnitude: ToggleMagnitude;
   children?: React.ReactNode;
@@ -15,17 +16,16 @@ export type ToggleGroupProps<Value extends string = string> = ToggleGroupElement
 
 /**
  * The ready-made toggle group: shares `magnitude` with every `Toggle` inside via context (a
- * `Toggle`'s own `magnitude` still wins), composed around the `ui/toggle-group` primitive (which
- * manages single/multi-select state + roving focus).
+ * `Toggle`'s own `magnitude` still wins), grafting Base UI's single/multi-select state + roving
+ * focus onto the `elements/toggle-group` styled container.
  */
 export function ToggleGroup<Value extends string = string>({
   magnitude,
-  children,
   ...props
 }: ToggleGroupProps<Value>) {
   return (
     <ToggleGroupContext.Provider value={magnitude}>
-      <ToggleGroupElement {...props}>{children}</ToggleGroupElement>
+      <BaseToggleGroup render={<ToggleGroupElement />} {...props} />
     </ToggleGroupContext.Provider>
   );
 }
diff --git a/packages/propel/src/components/toggle/index.tsx b/packages/propel/src/components/toggle/index.tsx
index a2f1b30c..dad07ac5 100644
--- a/packages/propel/src/components/toggle/index.tsx
+++ b/packages/propel/src/components/toggle/index.tsx
@@ -1,2 +1,2 @@
 export * from "./toggle";
-export { ToggleIcon, type ToggleIconProps, type ToggleMagnitude } from "../../ui/toggle";
+export { type ToggleMagnitude } from "../../elements/toggle";
diff --git a/packages/propel/src/components/toggle/toggle-group-context.ts b/packages/propel/src/components/toggle/toggle-group-context.ts
index 51de6f02..16554cd5 100644
--- a/packages/propel/src/components/toggle/toggle-group-context.ts
+++ b/packages/propel/src/components/toggle/toggle-group-context.ts
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import { type ToggleMagnitude } from "../../ui/toggle";
+import { type ToggleMagnitude } from "../../elements/toggle";
 
 /**
  * Set by the components `ToggleGroup` so every `Toggle` inside it shares one `magnitude`. Lives in
  * the components tier: a context is cross-tree coordination — composition — not a single-element
- * `ui` concern.
+ * `elements` concern.
  */
 export const ToggleGroupContext = React.createContext<ToggleMagnitude | undefined>(undefined);
diff --git a/packages/propel/src/components/toggle/toggle.stories.tsx b/packages/propel/src/components/toggle/toggle.stories.tsx
index bbd603c4..b1209095 100644
--- a/packages/propel/src/components/toggle/toggle.stories.tsx
+++ b/packages/propel/src/components/toggle/toggle.stories.tsx
@@ -1,16 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Star } from "lucide-react";
+import { Heart, Star } from "lucide-react";
+import * as React from "react";
 import { expect } from "storybook/test";
 
-import { Toggle, ToggleIcon } from "./index";
+import { Toggle, type ToggleMagnitude } from "./index";
 
-// Components-tier story: the ready-made `Toggle` (a 1:1 re-export of the ui primitive) —
-// a two-state icon button with its `ToggleIcon` glyph slot. The UI-tier story documents
+const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];
+
+// Components-tier story: the ready-made `Toggle` (a 1:1 re-export of the elements primitive) —
+// a two-state icon button that wraps its bare svg child in the shared glyph slot. The elements-tier story documents
 // the same parts and magnitudes.
 const meta = {
   title: "Components/Toggle",
   component: Toggle,
-  subcomponents: { ToggleIcon },
   args: { magnitude: "md", "aria-label": "Favorite" },
 } satisfies Meta<typeof Toggle>;
 
@@ -22,9 +24,7 @@ export const Default: Story = {
   args: { magnitude: "md" },
   render: (args) => (
     <Toggle {...args}>
-      <ToggleIcon>
-        <Star />
-      </ToggleIcon>
+      <Star />
     </Toggle>
   ),
 };
@@ -45,25 +45,78 @@ export const DefaultInteraction: Story = {
   },
 };
 
+/** Every size side by side; each magnitude also scales the glyph via `--node-size`. */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and gives each toggle its own accessible name, so disable just
+  // those two controls; the rest stay live and update every toggle at once.
+  argTypes: { magnitude: { control: false }, "aria-label": { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Toggle
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          aria-label={`Favorite (${magnitude})`}
+        >
+          <Star />
+        </Toggle>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Controlled `pressed`/`onPressedChange`: the consumer owns the state and derives the glyph from it
+ * — an outline heart when off, a filled heart once favorited.
+ */
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const [pressed, setPressed] = React.useState(false);
+    return (
+      <Toggle magnitude="md" aria-label="Favorite" pressed={pressed} onPressedChange={setPressed}>
+        <Heart fill={pressed ? "currentColor" : "none"} />
+      </Toggle>
+    );
+  },
+};
+
+/**
+ * Interaction test: the controlled round-trip — a click lifts state through `onPressedChange` and
+ * flows back down through `pressed`, and the state-derived glyph fills in and empties again. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const ControlledInteraction: Story = {
+  ...Controlled,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const toggle = canvas.getByRole("button", { name: "Favorite" });
+    const glyph = () => toggle.querySelector("svg");
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+    await expect(glyph()).toHaveAttribute("fill", "none");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await expect(glyph()).toHaveAttribute("fill", "currentColor");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+    await expect(glyph()).toHaveAttribute("fill", "none");
+  },
+};
+
 /** 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">
-        <ToggleIcon>
-          <Star />
-        </ToggleIcon>
+        <Star />
       </Toggle>
       <Toggle magnitude="md" defaultPressed aria-label="On">
-        <ToggleIcon>
-          <Star />
-        </ToggleIcon>
+        <Star />
       </Toggle>
       <Toggle magnitude="md" disabled aria-label="Disabled">
-        <ToggleIcon>
-          <Star />
-        </ToggleIcon>
+        <Star />
       </Toggle>
     </div>
   ),
diff --git a/packages/propel/src/components/toggle/toggle.tsx b/packages/propel/src/components/toggle/toggle.tsx
index 5ad2b979..647bb572 100644
--- a/packages/propel/src/components/toggle/toggle.tsx
+++ b/packages/propel/src/components/toggle/toggle.tsx
@@ -1,15 +1,14 @@
+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 {
-  Toggle as ToggleElement,
-  type ToggleProps as ToggleElementProps,
-  type ToggleMagnitude,
-} from "../../ui/toggle";
+import { Toggle as ToggleElement, type ToggleMagnitude } from "../../elements/toggle";
+import { Icon } from "../../internal/icon";
 import { ToggleGroupContext } from "./toggle-group-context";
 
 export type ToggleProps<Value extends string = string> = Omit<
-  ToggleElementProps<Value>,
-  "magnitude"
+  BaseToggleTypes.Props<Value>,
+  "className" | "style"
 > & {
   /**
    * Size override. Inside a `ToggleGroup` the group's `magnitude` is used (so you can omit it);
@@ -18,8 +17,23 @@ export type ToggleProps<Value extends string = string> = Omit<
   magnitude?: ToggleMagnitude;
 };
 
-/** The ready-made toggle: takes its `magnitude` from the surrounding `ToggleGroup` via context. */
-export function Toggle<Value extends string = string>({ magnitude, ...props }: ToggleProps<Value>) {
+/**
+ * The ready-made toggle: grafts Base UI's `Toggle` behavior onto the styled `Toggle` button
+ * (behavior outer, the styled button as the render target), taking its `magnitude` from the
+ * surrounding `ToggleGroup` via context.
+ */
+export function Toggle<Value extends string = string>({
+  magnitude,
+  children,
+  ...toggleProps
+}: ToggleProps<Value>) {
   const groupMagnitude = React.useContext(ToggleGroupContext);
-  return <ToggleElement magnitude={magnitude ?? groupMagnitude ?? "md"} {...props} />;
+  return (
+    <BaseToggle
+      {...toggleProps}
+      render={<ToggleElement magnitude={magnitude ?? groupMagnitude ?? "md"} />}
+    >
+      <Icon>{children}</Icon>
+    </BaseToggle>
+  );
 }
diff --git a/packages/propel/src/components/toolbar/index.tsx b/packages/propel/src/components/toolbar/index.tsx
index b21eb820..6bb846d5 100644
--- a/packages/propel/src/components/toolbar/index.tsx
+++ b/packages/propel/src/components/toolbar/index.tsx
@@ -1,21 +1,20 @@
+export * from "./toolbar";
 export * from "./toolbar-button";
 export * from "./toolbar-toggle";
 export * from "./toolbar-menu-trigger-button";
+export * from "./toolbar-menu-trigger";
+export * from "./toolbar-group";
+export * from "./toolbar-separator";
+export * from "./toolbar-toggle-group";
+export * from "./toolbar-link";
+export * from "./toolbar-input";
+// Re-export propel's STYLING-ONLY toolbar parts (no Base UI behavior of their own) so a full
+// toolbar can be assembled from one entry.
 export {
   ToolbarMenuTriggerIndicator,
   type ToolbarMenuTriggerIndicatorProps,
   ToolbarMenuTriggerLabel,
   type ToolbarMenuTriggerLabelProps,
-  ToolbarGroup,
-  type ToolbarGroupProps,
-  ToolbarItemIcon,
-  type ToolbarItemIconProps,
-  ToolbarSeparator,
-  type ToolbarSeparatorProps,
-  ToolbarToggleGroup,
-  type ToolbarToggleGroupProps,
   type ToolbarDensity,
   type ToolbarElevation,
-} from "../../ui/toolbar/index";
-export * from "./toolbar";
-export * from "./toolbar-menu-trigger";
+} from "../../elements/toolbar/index";
diff --git a/packages/propel/src/components/toolbar/toolbar-button.tsx b/packages/propel/src/components/toolbar/toolbar-button.tsx
index 77042263..83a75914 100644
--- a/packages/propel/src/components/toolbar/toolbar-button.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-button.tsx
@@ -1,19 +1,32 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import * as React from "react";
 
 import {
   ToolbarButton as ToolbarButtonElement,
   type ToolbarButtonProps as ToolbarButtonElementProps,
   type ToolbarDensity,
-} from "../../ui/toolbar";
+} from "../../elements/toolbar";
+import { Icon } from "../../internal/icon";
 import { ToolbarDensityContext } from "./toolbar-context";
 
 export type ToolbarButtonProps = Omit<ToolbarButtonElementProps, "density"> & {
   /** Density override; defaults to the surrounding `Toolbar`'s density. */
   density?: ToolbarDensity;
+  /** Accessible name for the icon button. */
+  "aria-label": string;
 };
 
-/** A toolbar action button that takes its `density` from the surrounding `Toolbar` via context. */
-export function ToolbarButton({ density, ...props }: ToolbarButtonProps) {
+/**
+ * A toolbar action button: grafts Base UI's `Toolbar.Button` (roving-focus item) behavior onto the
+ * styled `ToolbarButton`, taking its `density` from the surrounding `Toolbar` via context.
+ */
+export function ToolbarButton({ density, children, ...props }: ToolbarButtonProps) {
   const toolbarDensity = React.useContext(ToolbarDensityContext);
-  return <ToolbarButtonElement density={density ?? toolbarDensity} {...props} />;
+  return (
+    <BaseToolbar.Button
+      render={<ToolbarButtonElement density={density ?? toolbarDensity} {...props} />}
+    >
+      <Icon>{children}</Icon>
+    </BaseToolbar.Button>
+  );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar-context.ts b/packages/propel/src/components/toolbar/toolbar-context.ts
index 1a117dcf..96861234 100644
--- a/packages/propel/src/components/toolbar/toolbar-context.ts
+++ b/packages/propel/src/components/toolbar/toolbar-context.ts
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import { type ToolbarDensity } from "../../ui/toolbar";
+import { type ToolbarDensity } from "../../elements/toolbar";
 
 /**
  * Set by the components `Toolbar` so the controls inside share its `density`. Lives in the
- * components tier: a context is cross-tree coordination — composition — not a single-element `ui`
- * concern.
+ * components tier: a context is cross-tree coordination — composition — not a single-element
+ * `elements` concern.
  */
 export const ToolbarDensityContext = React.createContext<ToolbarDensity>("compact");
diff --git a/packages/propel/src/components/toolbar/toolbar-group.tsx b/packages/propel/src/components/toolbar/toolbar-group.tsx
new file mode 100644
index 00000000..653d8317
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-group.tsx
@@ -0,0 +1,16 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+
+import {
+  ToolbarGroup as ToolbarGroupElement,
+  type ToolbarGroupProps as ToolbarGroupElementProps,
+} from "../../elements/toolbar";
+
+export type ToolbarGroupProps = ToolbarGroupElementProps;
+
+/**
+ * Groups related controls with a small gap between them: grafts Base UI's `Toolbar.Group` behavior
+ * (the `group` role) onto the styled `ToolbarGroup` cluster.
+ */
+export function ToolbarGroup(props: ToolbarGroupProps) {
+  return <BaseToolbar.Group render={<ToolbarGroupElement {...props} />} />;
+}
diff --git a/packages/propel/src/components/toolbar/toolbar-input.tsx b/packages/propel/src/components/toolbar/toolbar-input.tsx
new file mode 100644
index 00000000..878d8706
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-input.tsx
@@ -0,0 +1,25 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import * as React from "react";
+
+import { type ToolbarDensity, ToolbarInput as ToolbarInputElement } from "../../elements/toolbar";
+import { ToolbarDensityContext } from "./toolbar-context";
+
+export type ToolbarInputProps = Omit<BaseToolbar.Input.Props, "className" | "style"> & {
+  /** Size override; defaults to the surrounding `Toolbar`'s density. */
+  density?: ToolbarDensity;
+};
+
+/**
+ * An inline text input in the toolbar's roving tab order (e.g. a filter box) — Base UI's
+ * `Toolbar.Input` grafted onto the styled miniature field, its height tracking the toolbar's
+ * density. Give it an `aria-label` naming what it filters or searches.
+ */
+export function ToolbarInput({ density, ...props }: ToolbarInputProps) {
+  const toolbarDensity = React.useContext(ToolbarDensityContext);
+  return (
+    <BaseToolbar.Input
+      {...props}
+      render={<ToolbarInputElement density={density ?? toolbarDensity} />}
+    />
+  );
+}
diff --git a/packages/propel/src/components/toolbar/toolbar-link.tsx b/packages/propel/src/components/toolbar/toolbar-link.tsx
new file mode 100644
index 00000000..a62776be
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-link.tsx
@@ -0,0 +1,28 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import * as React from "react";
+
+import { ToolbarLink as ToolbarLinkElement, type ToolbarDensity } from "../../elements/toolbar";
+import { Icon } from "../../internal/icon";
+import { ToolbarDensityContext } from "./toolbar-context";
+
+export type ToolbarLinkProps = Omit<BaseToolbar.Link.Props, "className" | "style"> & {
+  /** Size override; defaults to the surrounding `Toolbar`'s density. */
+  density?: ToolbarDensity;
+};
+
+/**
+ * A toolbar item that navigates — Base UI's `Toolbar.Link` (`<a>` in the roving tab order) grafted
+ * onto the toolbar item chrome, wrapping bare svg children in the shared glyph slot like
+ * `ToolbarButton` does.
+ */
+export function ToolbarLink({ density, children, ...props }: ToolbarLinkProps) {
+  const toolbarDensity = React.useContext(ToolbarDensityContext);
+  return (
+    <BaseToolbar.Link
+      render={<ToolbarLinkElement density={density ?? toolbarDensity} />}
+      {...props}
+    >
+      <Icon>{children}</Icon>
+    </BaseToolbar.Link>
+  );
+}
diff --git a/packages/propel/src/components/toolbar/toolbar-menu-trigger-button.tsx b/packages/propel/src/components/toolbar/toolbar-menu-trigger-button.tsx
index 0b75903d..84f24ce7 100644
--- a/packages/propel/src/components/toolbar/toolbar-menu-trigger-button.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-menu-trigger-button.tsx
@@ -1,10 +1,11 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import * as React from "react";
 
 import {
   ToolbarMenuTriggerButton as ToolbarMenuTriggerButtonElement,
   type ToolbarMenuTriggerButtonProps as ToolbarMenuTriggerButtonElementProps,
   type ToolbarDensity,
-} from "../../ui/toolbar";
+} from "../../elements/toolbar";
 import { ToolbarDensityContext } from "./toolbar-context";
 
 export type ToolbarMenuTriggerButtonProps = Omit<
@@ -15,8 +16,15 @@ export type ToolbarMenuTriggerButtonProps = Omit<
   density?: ToolbarDensity;
 };
 
-/** A toolbar menu-trigger button that takes its `density` from the surrounding `Toolbar`. */
+/**
+ * A toolbar menu-trigger button: grafts Base UI's `Toolbar.Button` (roving-focus item) behavior
+ * onto the styled `ToolbarMenuTriggerButton`, taking its `density` from the surrounding `Toolbar`.
+ */
 export function ToolbarMenuTriggerButton({ density, ...props }: ToolbarMenuTriggerButtonProps) {
   const toolbarDensity = React.useContext(ToolbarDensityContext);
-  return <ToolbarMenuTriggerButtonElement density={density ?? toolbarDensity} {...props} />;
+  return (
+    <BaseToolbar.Button
+      render={<ToolbarMenuTriggerButtonElement density={density ?? toolbarDensity} {...props} />}
+    />
+  );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx b/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
index 5eb21599..e161dd7a 100644
--- a/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
@@ -1,7 +1,7 @@
 import { Menu } from "@base-ui/react/menu";
 import { ChevronDown } from "lucide-react";
 
-import { ToolbarMenuTriggerIndicator, ToolbarMenuTriggerLabel } from "../../ui/toolbar/index";
+import { ToolbarMenuTriggerIndicator, ToolbarMenuTriggerLabel } from "../../elements/toolbar/index";
 import { ToolbarMenuTriggerButton } from "./toolbar-menu-trigger-button";
 
 export type ToolbarMenuTriggerProps = Omit<Menu.Trigger.Props, "className" | "style">;
diff --git a/packages/propel/src/components/toolbar/toolbar-separator.tsx b/packages/propel/src/components/toolbar/toolbar-separator.tsx
new file mode 100644
index 00000000..7808c155
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-separator.tsx
@@ -0,0 +1,16 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+
+import {
+  ToolbarSeparator as ToolbarSeparatorElement,
+  type ToolbarSeparatorProps as ToolbarSeparatorElementProps,
+} from "../../elements/toolbar";
+
+export type ToolbarSeparatorProps = ToolbarSeparatorElementProps;
+
+/**
+ * A thin vertical rule that visually divides one cluster of controls from the next: grafts Base
+ * UI's `Toolbar.Separator` behavior (the `separator` role + orientation) onto the styled rule.
+ */
+export function ToolbarSeparator(props: ToolbarSeparatorProps) {
+  return <BaseToolbar.Separator render={<ToolbarSeparatorElement {...props} />} />;
+}
diff --git a/packages/propel/src/components/toolbar/toolbar-toggle-group.tsx b/packages/propel/src/components/toolbar/toolbar-toggle-group.tsx
new file mode 100644
index 00000000..dc4e3421
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-toggle-group.tsx
@@ -0,0 +1,19 @@
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+
+import { ToolbarToggleGroup as ToolbarToggleGroupElement } from "../../elements/toolbar";
+
+export type ToolbarToggleGroupProps<Value extends string = string> = Omit<
+  BaseToggleGroup.Props<Value>,
+  "className" | "style"
+>;
+
+/**
+ * A cluster of `ToolbarToggle`s sharing one selection: Base UI `ToggleGroup`'s single/`multiple`
+ * value state grafted onto the styled `elements` toggle-group container. Drive it with
+ * `value`/`defaultValue` + `onValueChange`, and give it an `aria-label` naming the cluster.
+ */
+export function ToolbarToggleGroup<Value extends string = string>(
+  props: ToolbarToggleGroupProps<Value>,
+) {
+  return <BaseToggleGroup render={<ToolbarToggleGroupElement />} {...props} />;
+}
diff --git a/packages/propel/src/components/toolbar/toolbar-toggle.tsx b/packages/propel/src/components/toolbar/toolbar-toggle.tsx
index ffa0cb98..3ccf365d 100644
--- a/packages/propel/src/components/toolbar/toolbar-toggle.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-toggle.tsx
@@ -1,37 +1,57 @@
 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 { ToolbarButton as ToolbarButtonElement, type ToolbarDensity } from "../../ui/toolbar";
+import {
+  ToolbarButton as ToolbarButtonElement,
+  type ToolbarButtonProps,
+  type ToolbarDensity,
+} from "../../elements/toolbar";
+import { Icon } from "../../internal/icon";
 import { ToolbarDensityContext } from "./toolbar-context";
 
 export type ToolbarToggleProps<Value extends string = string> = Omit<
   BaseToggleTypes.Props<Value>,
-  "className" | "style"
+  "className" | "style" | "render"
 > & {
   /** Density override; defaults to the surrounding `Toolbar`'s density. */
   density?: ToolbarDensity;
   /** Accessible name for the icon toggle. */
   "aria-label": string;
+  /** Custom render for the underlying styled toolbar button. */
+  render?: ToolbarButtonProps["render"];
 };
 
 /**
- * A two-state toolbar button for formatting toggles like bold or italic. Composes the styled
- * `ToolbarButton` with `Toggle` behavior, and takes its `density` from the surrounding `Toolbar`
- * via context.
+ * A two-state toolbar button for formatting toggles like bold or italic. Grafts Base UI's
+ * `Toolbar.Button` (roving-focus item) and `Toggle` (pressed state) behaviors onto the styled
+ * `ToolbarButton`, and takes its `density` from the surrounding `Toolbar` via context.
  */
 export function ToolbarToggle<Value extends string = string>({
   render,
   density,
+  children,
   "aria-label": ariaLabel,
   ...toggleProps
 }: ToolbarToggleProps<Value>) {
   const toolbarDensity = React.useContext(ToolbarDensityContext);
   return (
-    <ToolbarButtonElement
-      density={density ?? toolbarDensity}
-      aria-label={ariaLabel}
-      render={<Toggle render={render} {...toggleProps} />}
-    />
+    <BaseToolbar.Button
+      render={
+        <Toggle
+          {...toggleProps}
+          render={
+            <ToolbarButtonElement
+              density={density ?? toolbarDensity}
+              aria-label={ariaLabel}
+              render={render}
+            />
+          }
+        />
+      }
+    >
+      <Icon>{children}</Icon>
+    </BaseToolbar.Button>
   );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index 7a2d1ddd..31451668 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -1,4 +1,3 @@
-import { ToggleGroup } from "@base-ui/react/toggle-group";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   AlignCenter,
@@ -9,6 +8,7 @@ import {
   Heading1,
   Heading2,
   Heading3,
+  History,
   Image,
   Italic,
   Link,
@@ -23,16 +23,17 @@ import {
   Underline,
 } from "lucide-react";
 import type * as React from "react";
-import { expect } from "storybook/test";
+import { expect, waitFor, within } from "storybook/test";
 
-import { Menu, MenuSeparator } from "../../ui/menu";
-import { MenuContent, MenuItem } from "../menu";
+import { Menu, MenuContent, MenuItem, MenuSeparator } from "../menu";
+import { Tooltip, TooltipProvider } from "../tooltip";
 import {
   Toolbar,
+  ToolbarInput,
   ToolbarButton,
+  ToolbarLink,
   ToolbarMenuTrigger,
   ToolbarGroup,
-  ToolbarItemIcon,
   ToolbarSeparator,
   ToolbarToggle,
   ToolbarToggleGroup,
@@ -63,99 +64,65 @@ function FormattingToolbar(args: React.ComponentProps<typeof Toolbar>) {
         </MenuContent>
       </Menu>
       <ToolbarButton aria-label="Comment">
-        <ToolbarItemIcon>
-          <MessageSquare />
-        </ToolbarItemIcon>
+        <MessageSquare />
       </ToolbarButton>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Text formatting">
         <ToolbarToggle aria-label="Bold">
-          <ToolbarItemIcon>
-            <Bold />
-          </ToolbarItemIcon>
+          <Bold />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Italic">
-          <ToolbarItemIcon>
-            <Italic />
-          </ToolbarItemIcon>
+          <Italic />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Underline">
-          <ToolbarItemIcon>
-            <Underline />
-          </ToolbarItemIcon>
+          <Underline />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Strikethrough">
-          <ToolbarItemIcon>
-            <Strikethrough />
-          </ToolbarItemIcon>
+          <Strikethrough />
         </ToolbarToggle>
       </ToolbarGroup>
       <ToolbarSeparator />
-      <ToolbarToggleGroup
-        render={<ToggleGroup defaultValue={["left"]} aria-label="Text alignment" />}
-      >
+      <ToolbarToggleGroup defaultValue={["left"]} aria-label="Text alignment">
         <ToolbarToggle value="left" aria-label="Align left">
-          <ToolbarItemIcon>
-            <AlignLeft />
-          </ToolbarItemIcon>
+          <AlignLeft />
         </ToolbarToggle>
         <ToolbarToggle value="center" aria-label="Align center">
-          <ToolbarItemIcon>
-            <AlignCenter />
-          </ToolbarItemIcon>
+          <AlignCenter />
         </ToolbarToggle>
         <ToolbarToggle value="right" aria-label="Align right">
-          <ToolbarItemIcon>
-            <AlignRight />
-          </ToolbarItemIcon>
+          <AlignRight />
         </ToolbarToggle>
       </ToolbarToggleGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Lists">
         <ToolbarToggle aria-label="Bullet list">
-          <ToolbarItemIcon>
-            <List />
-          </ToolbarItemIcon>
+          <List />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Numbered list">
-          <ToolbarItemIcon>
-            <ListOrdered />
-          </ToolbarItemIcon>
+          <ListOrdered />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Checklist">
-          <ToolbarItemIcon>
-            <ListChecks />
-          </ToolbarItemIcon>
+          <ListChecks />
         </ToolbarToggle>
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Blocks">
         <ToolbarToggle aria-label="Quote">
-          <ToolbarItemIcon>
-            <Quote />
-          </ToolbarItemIcon>
+          <Quote />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Code block">
-          <ToolbarItemIcon>
-            <Code />
-          </ToolbarItemIcon>
+          <Code />
         </ToolbarToggle>
         <ToolbarButton aria-label="Insert table">
-          <ToolbarItemIcon>
-            <Table />
-          </ToolbarItemIcon>
+          <Table />
         </ToolbarButton>
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarButton aria-label="Insert link">
-        <ToolbarItemIcon>
-          <Link />
-        </ToolbarItemIcon>
+        <Link />
       </ToolbarButton>
       <ToolbarButton aria-label="Insert image">
-        <ToolbarItemIcon>
-          <Image />
-        </ToolbarItemIcon>
+        <Image />
       </ToolbarButton>
     </Toolbar>
   );
@@ -167,9 +134,10 @@ const meta = {
   // Toolbar is a compound component: document its parts alongside it so the args
   // table gets a tab per part and the manifest records the relationship.
   subcomponents: {
+    ToolbarInput,
     ToolbarGroup,
     ToolbarButton,
-    ToolbarItemIcon,
+    ToolbarLink,
     ToolbarToggle,
     ToolbarToggleGroup,
     ToolbarSeparator,
@@ -178,6 +146,8 @@ const meta = {
     MenuContent,
     MenuItem,
     MenuSeparator,
+    Tooltip,
+    TooltipProvider,
   },
   args: { elevation: "raised", density: "compact" },
   render: (args) => <FormattingToolbar {...args} />,
@@ -250,9 +220,7 @@ export const DensityDrivesControlSize: Story = {
   render: () => (
     <Toolbar elevation="flat" density="compact">
       <ToolbarToggle aria-label="Bold">
-        <ToolbarItemIcon>
-          <Bold />
-        </ToolbarItemIcon>
+        <Bold />
       </ToolbarToggle>
     </Toolbar>
   ),
@@ -279,14 +247,14 @@ export const ComposableMenu: Story = {
       <Menu defaultOpen>
         <ToolbarMenuTrigger aria-label="Text style">Text</ToolbarMenuTrigger>
         <MenuContent>
-          <MenuItem inlineStartNode={<Pilcrow />} selected>
+          <MenuItem icon={<Pilcrow />} selected>
             Paragraph
           </MenuItem>
-          <MenuItem inlineStartNode={<Heading1 />}>Heading 1</MenuItem>
-          <MenuItem inlineStartNode={<Heading2 />}>Heading 2</MenuItem>
-          <MenuItem inlineStartNode={<Heading3 />}>Heading 3</MenuItem>
+          <MenuItem icon={<Heading1 />}>Heading 1</MenuItem>
+          <MenuItem icon={<Heading2 />}>Heading 2</MenuItem>
+          <MenuItem icon={<Heading3 />}>Heading 3</MenuItem>
           <MenuSeparator />
-          <MenuItem inlineStartNode={<Code />} disabled>
+          <MenuItem icon={<Code />} disabled>
             Code block
           </MenuItem>
         </MenuContent>
@@ -328,19 +296,13 @@ export const KeyboardRovingFocus: Story = {
   render: () => (
     <Toolbar elevation="raised" density="compact">
       <ToolbarToggle aria-label="Bold">
-        <ToolbarItemIcon>
-          <Bold />
-        </ToolbarItemIcon>
+        <Bold />
       </ToolbarToggle>
       <ToolbarToggle aria-label="Italic">
-        <ToolbarItemIcon>
-          <Italic />
-        </ToolbarItemIcon>
+        <Italic />
       </ToolbarToggle>
       <ToolbarToggle aria-label="Underline">
-        <ToolbarItemIcon>
-          <Underline />
-        </ToolbarItemIcon>
+        <Underline />
       </ToolbarToggle>
     </Toolbar>
   ),
@@ -380,3 +342,146 @@ export const KeyboardRovingFocus: Story = {
     await expect(italic).toHaveAttribute("aria-pressed", "false");
   },
 };
+
+/**
+ * An inline filter input in the roving tab order — a miniature field whose height tracks the
+ * toolbar's density. Invented pending a Figma spec (flagged for design polish).
+ */
+export const WithFilter: Story = {
+  render: (args) => (
+    <Toolbar {...args} aria-label="Issue actions">
+      <ToolbarInput aria-label="Filter issues" placeholder="Filter…" />
+      <ToolbarSeparator />
+      <ToolbarGroup aria-label="Text formatting">
+        <ToolbarToggle aria-label="Bold">
+          <Bold />
+        </ToolbarToggle>
+        <ToolbarToggle aria-label="Italic">
+          <Italic />
+        </ToolbarToggle>
+      </ToolbarGroup>
+    </Toolbar>
+  ),
+};
+
+/**
+ * Interaction test: the input participates in the toolbar and takes text. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const WithFilterInteraction: Story = {
+  ...WithFilter,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("textbox", { name: "Filter issues" });
+    await userEvent.type(input, "bug");
+    await expect(input).toHaveValue("bug");
+  },
+};
+
+/**
+ * A toolbar item that navigates instead of acting: `ToolbarLink` is an `<a>` sharing the same
+ * roving tab order and icon chrome as the buttons around it — here linking to the document's edit
+ * history. Like the icon buttons it wraps a bare glyph in the shared slot, so its accessible name
+ * comes from `aria-label`.
+ */
+export const WithLink: Story = {
+  render: (args) => (
+    <Toolbar {...args} aria-label="Document actions">
+      <ToolbarGroup aria-label="Text formatting">
+        <ToolbarToggle aria-label="Bold">
+          <Bold />
+        </ToolbarToggle>
+        <ToolbarToggle aria-label="Italic">
+          <Italic />
+        </ToolbarToggle>
+      </ToolbarGroup>
+      <ToolbarSeparator />
+      <ToolbarLink href="#history" aria-label="View edit history">
+        <History />
+      </ToolbarLink>
+    </Toolbar>
+  ),
+};
+
+/**
+ * Interaction test: the link is a named `<a>` that participates in the toolbar's roving tab order —
+ * the separator is skipped, Arrow Right reaches the link, and the roving `tabindex=0` follows.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const WithLinkInteraction: Story = {
+  ...WithLink,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const link = canvas.getByRole("link", { name: "View edit history" });
+    await expect(link).toHaveAttribute("href", "#history");
+
+    // The link starts out of the tab order — the toolbar is a single tab stop.
+    await expect(link).toHaveAttribute("tabindex", "-1");
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "Bold" })).toHaveFocus();
+
+    // Arrow Right roams past the toggles (skipping the separator) onto the link,
+    // and the roving tabindex follows it.
+    await userEvent.keyboard("{ArrowRight}{ArrowRight}");
+    await expect(link).toHaveFocus();
+    await expect(link).toHaveAttribute("tabindex", "0");
+  },
+};
+
+/**
+ * Toolbar controls are icon-only, so pair each with a `Tooltip` naming it (plus a dimmed shortcut
+ * hint). The control goes in as the tooltip's trigger child — the tooltip grafts its hover/focus
+ * behavior onto the control without disturbing the toolbar's roving focus — and a shared
+ * `TooltipProvider` keeps open/close timing consistent while sweeping across the bar.
+ */
+export const WithTooltips: Story = {
+  render: (args) => (
+    <TooltipProvider>
+      <Toolbar {...args} aria-label="Text formatting">
+        <Tooltip content="Bold" shortcut="⌘ B">
+          <ToolbarToggle aria-label="Bold">
+            <Bold />
+          </ToolbarToggle>
+        </Tooltip>
+        <Tooltip content="Italic" shortcut="⌘ I">
+          <ToolbarToggle aria-label="Italic">
+            <Italic />
+          </ToolbarToggle>
+        </Tooltip>
+        <Tooltip content="Underline" shortcut="⌘ U">
+          <ToolbarToggle aria-label="Underline">
+            <Underline />
+          </ToolbarToggle>
+        </Tooltip>
+      </Toolbar>
+    </TooltipProvider>
+  ),
+};
+
+/**
+ * Interaction test: focusing a toolbar item opens its tooltip (focus opens immediately, no hover
+ * delay), and the toolbar's roving focus keeps working with the tooltip grafted on — Arrow Right
+ * moves to the next control and the tooltip follows. Tagged out of the sidebar/docs/manifest while
+ * still running under the default `test` tag.
+ */
+export const WithTooltipsInteraction: Story = {
+  ...WithTooltips,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    // The tooltip popup portals outside the story canvas, so query the document.
+    const body = within(document.body);
+
+    // Tab enters the toolbar; the focused control's tooltip opens.
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "Bold" })).toHaveFocus();
+    const tooltip = await body.findByRole("tooltip");
+    await expect(tooltip).toHaveTextContent("Bold");
+
+    // Roving focus still works with the tooltip grafted on: Arrow Right moves to the
+    // next control and the tooltip swaps (the old one leaves asynchronously, so retry
+    // until only the new one remains).
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(canvas.getByRole("button", { name: "Italic" })).toHaveFocus();
+    await waitFor(() => expect(body.getByRole("tooltip")).toHaveTextContent("Italic"));
+  },
+};
diff --git a/packages/propel/src/components/toolbar/toolbar.tsx b/packages/propel/src/components/toolbar/toolbar.tsx
index c1dd0643..730e8fba 100644
--- a/packages/propel/src/components/toolbar/toolbar.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.tsx
@@ -1,9 +1,10 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import type * as React from "react";
 
 import {
   Toolbar as ToolbarElement,
   type ToolbarProps as ToolbarElementProps,
-} from "../../ui/toolbar";
+} from "../../elements/toolbar";
 import { ToolbarDensityContext } from "./toolbar-context";
 
 export type ToolbarProps = ToolbarElementProps & {
@@ -11,15 +12,16 @@ export type ToolbarProps = ToolbarElementProps & {
 };
 
 /**
- * The ready-made toolbar: shares its `density` with the controls inside via context (so each
- * control packs to match), composed around the single-element `ui/toolbar` row.
+ * The ready-made toolbar: grafts Base UI's `Toolbar.Root` behavior (the `toolbar` role + roving
+ * focus) onto the styled `elements/toolbar` row and shares its `density` with the controls inside
+ * via context (so each control packs to match).
  */
 export function Toolbar({ density, children, ...props }: ToolbarProps) {
   return (
     <ToolbarDensityContext.Provider value={density}>
-      <ToolbarElement density={density} {...props}>
+      <BaseToolbar.Root render={<ToolbarElement density={density} {...props} />}>
         {children}
-      </ToolbarElement>
+      </BaseToolbar.Root>
     </ToolbarDensityContext.Provider>
   );
 }
diff --git a/packages/propel/src/components/tooltip/create-handle.ts b/packages/propel/src/components/tooltip/create-handle.ts
new file mode 100644
index 00000000..93dbe4f7
--- /dev/null
+++ b/packages/propel/src/components/tooltip/create-handle.ts
@@ -0,0 +1,10 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+
+/**
+ * Base UI's detached-handle API, flattened to the family name: create a handle outside the React
+ * tree, pass it to the root's `handle` prop, and drive the surface imperatively
+ * (`handle.open(payload)`) — e.g. one tooltip shared by many launch points.
+ */
+export const createTooltipHandle = BaseTooltip.createHandle;
+
+export type TooltipHandle = ReturnType<typeof createTooltipHandle>;
diff --git a/packages/propel/src/components/tooltip/index.tsx b/packages/propel/src/components/tooltip/index.tsx
index 5068bf8a..39d764ef 100644
--- a/packages/propel/src/components/tooltip/index.tsx
+++ b/packages/propel/src/components/tooltip/index.tsx
@@ -1,3 +1,14 @@
 export * from "./tooltip";
-// Re-export the shared-timing provider so tooltip groups can be assembled from one entry.
-export { TooltipProvider, type TooltipProviderProps } from "../../ui/tooltip";
+export * from "./tooltip-provider";
+export * from "./create-handle";
+// Re-export propel's STYLED tooltip parts so a full tooltip can be assembled from one entry. The
+// behavior/structural parts (`Root`, `Trigger`, `Portal`, `Positioner`) are Base UI's — no propel
+// styling — so compose them from `@base-ui/react/tooltip` directly at the call site.
+export {
+  TooltipArrow,
+  type TooltipArrowProps,
+  TooltipPopup,
+  type TooltipPopupProps,
+  TooltipShortcut,
+  type TooltipShortcutProps,
+} from "../../elements/tooltip";
diff --git a/packages/propel/src/ui/tooltip/tooltip-provider.tsx b/packages/propel/src/components/tooltip/tooltip-provider.tsx
similarity index 100%
rename from packages/propel/src/ui/tooltip/tooltip-provider.tsx
rename to packages/propel/src/components/tooltip/tooltip-provider.tsx
diff --git a/packages/propel/src/components/tooltip/tooltip.stories.tsx b/packages/propel/src/components/tooltip/tooltip.stories.tsx
index b8db38ac..7acab4dd 100644
--- a/packages/propel/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.stories.tsx
@@ -1,8 +1,8 @@
-import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useLayoutEffect } from "react";
+import { useLayoutEffect, useState } from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
+import { DirectionProvider } from "../direction-provider";
 import { Tooltip, TooltipProvider } from "./index";
 
 const sidesGridStyle = {
@@ -19,6 +19,7 @@ const ALL_SIDES = ["top", "bottom", "left", "right", "inline-start", "inline-end
 const meta = {
   title: "Components/Tooltip",
   component: Tooltip,
+  subcomponents: { TooltipProvider },
   args: {
     content: "Tooltip text",
     children: <button type="button">Hover or focus me</button>,
@@ -91,8 +92,10 @@ export const SidesRtl: Story = {
   // wouldn't reach it. Mirror a real RTL app: set it on the root, restore on unmount.
   // `DirectionProvider` (below) is what tells Base UI's Positioner to resolve the
   // logical sides; it crosses the portal via React context.
+  // Decorators are components too, so the hooks rule (2c) applies: a named function, not an
+  // arrow, carries the `useLayoutEffect`.
   decorators: [
-    (Story) => {
+    function RtlDocumentDir(Story) {
       useLayoutEffect(() => {
         const html = document.documentElement;
         const prev = html.getAttribute("dir");
@@ -129,6 +132,54 @@ export const WithShortcut: Story = {
   },
 };
 
+/**
+ * `TooltipProvider` groups the tooltips beneath it, so a row of adjacent triggers feels like one
+ * surface: once any tooltip in the group is open, moving to a neighboring trigger shows its tooltip
+ * immediately instead of restarting the hover delay, and the shared `closeDelay` keeps the swap
+ * smooth. This mirrors the classic formatting-toolbar hint pattern.
+ */
+export const WithProvider: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <TooltipProvider closeDelay={100}>
+      <div style={{ display: "flex", gap: "0.5rem" }}>
+        <Tooltip content="Bold the selection">
+          <button type="button">Bold</button>
+        </Tooltip>
+        <Tooltip content="Italicize the selection">
+          <button type="button">Italic</button>
+        </Tooltip>
+        <Tooltip content="Underline the selection">
+          <button type="button">Underline</button>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+/**
+ * The open state can be owned externally: `open` and `onOpenChange` pass through to Base UI's root,
+ * so product code can point the tooltip at its own UI programmatically — here the "Show hint"
+ * button opens it — while hover, focus, blur, and **Escape** still request state changes through
+ * `onOpenChange`, so the tooltip never gets stuck open.
+ */
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Render() {
+    const [open, setOpen] = useState(false);
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+        <Tooltip content="Copies the invite link" open={open} onOpenChange={setOpen}>
+          <button type="button">Copy link</button>
+        </Tooltip>
+        <button type="button" onClick={() => setOpen(true)}>
+          Show hint
+        </button>
+      </div>
+    );
+  },
+};
+
 /**
  * Focusing the trigger opens the tooltip (a `role="tooltip"` popup with the label appears);
  * blurring it closes the tooltip again. Focus is used instead of hover so the open/close is
@@ -190,34 +241,74 @@ export const EscapeCloses: Story = {
 };
 
 /**
- * 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.
+ * Hidden behavior twin of `WithProvider`: the provider shares open/close timing across the group,
+ * so moving from one trigger to the next swaps the visible tooltip. Focus (not hover) keeps the
+ * open/close deterministic regardless of Base UI's hover delays, and the accessibility assertion
+ * stays on the real portaled `role="tooltip"` popup.
  */
-export const SharedProviderTiming: Story = {
+export const WithProviderInteraction: Story = {
+  ...WithProvider,
   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();
+    await expect(canvas.getByRole("button", { name: "Bold" })).toHaveFocus();
     const firstTooltip = await body.findByRole("tooltip");
-    await expect(firstTooltip).toHaveTextContent("First tooltip");
+    await expect(firstTooltip).toHaveTextContent("Bold the selection");
+
+    // Moving focus to the next trigger swaps to its tooltip. The first one may
+    // linger for the provider's shared closeDelay, so retry until exactly one
+    // tooltip remains and it carries the new label.
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "Italic" })).toHaveFocus();
+    await waitFor(() =>
+      expect(body.getByRole("tooltip")).toHaveTextContent("Italicize the selection"),
+    );
+  },
+};
 
+/**
+ * Hidden behavior twin of `WithShortcut` (relocated from the old elements-tier story, rule 2b): the
+ * open tooltip is one `role="tooltip"` popup carrying both the label and the `shortcut` hint, so
+ * assistive tech announces them together. Focus (not hover) keeps the open deterministic regardless
+ * of Base UI's hover delays.
+ */
+export const WithShortcutInteraction: Story = {
+  ...WithShortcut,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { ...WithShortcut.args, delay: 0 },
+  play: async ({ canvas }) => {
     await userEvent.tab();
-    await expect(canvas.getByRole("button", { name: "Second trigger" })).toHaveFocus();
-    await waitFor(() => expect(body.getByRole("tooltip")).toHaveTextContent("Second tooltip"));
+    await expect(canvas.getByRole("button", { name: "Hover or focus me" })).toHaveFocus();
+    const tooltip = await within(document.body).findByRole("tooltip");
+    await expect(tooltip).toHaveTextContent("Open command menu");
+    await expect(tooltip).toHaveTextContent("⌘ K");
+  },
+};
+
+/**
+ * Hidden behavior twin of `Controlled`: the external "Show hint" button opens the tooltip through
+ * state (`open`), and **Escape** routes a close request back through `onOpenChange`, proving the
+ * controlled loop is wired both ways. Escape is asserted with focus still on the external button —
+ * Base UI listens at the document level while the tooltip is open.
+ */
+export const ControlledInteraction: Story = {
+  ...Controlled,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const screen = within(document.body);
+
+    // Closed until opened programmatically.
+    await expect(screen.queryByRole("tooltip")).toBeNull();
+
+    // The external button opens the tooltip via state.
+    await userEvent.click(canvas.getByRole("button", { name: "Show hint" }));
+    await expect(await screen.findByRole("tooltip")).toHaveTextContent("Copies the invite link");
+
+    // Escape requests a close through `onOpenChange`, which updates the
+    // controlled state and dismisses the tooltip (it leaves asynchronously).
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("tooltip")).toBeNull());
   },
 };
diff --git a/packages/propel/src/components/tooltip/tooltip.tsx b/packages/propel/src/components/tooltip/tooltip.tsx
index 0966f198..3c4870b3 100644
--- a/packages/propel/src/components/tooltip/tooltip.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.tsx
@@ -2,15 +2,8 @@ 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 TooltipElement,
-  TooltipArrow,
-  TooltipPopup,
-  TooltipPortal,
-  TooltipPositioner,
-  TooltipShortcut,
-  TooltipTrigger,
-} from "../../ui/tooltip";
+import { TooltipArrow, TooltipPopup, TooltipShortcut } from "../../elements/tooltip";
+import { Positioner } from "../../internal/positioner";
 
 export type TooltipProps<Payload = unknown> = Omit<
   TooltipRoot.Props<Payload>,
@@ -57,10 +50,11 @@ export type TooltipProps<Payload = unknown> = Omit<
  * `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).
+ * Grafts Base UI's tooltip behavior onto propel's styled parts: `Tooltip.Root` + `Tooltip.Trigger`
+ * + `Tooltip.Portal` → `Tooltip.Positioner` (shared `internal/positioner`) → `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,
@@ -72,22 +66,22 @@ export function Tooltip<Payload = unknown>({
   ...props
 }: TooltipProps<Payload>) {
   return (
-    <TooltipElement {...props}>
-      <TooltipTrigger delay={delay} render={children} />
-      <TooltipPortal>
-        <TooltipPositioner side={side} sideOffset={sideOffset}>
+    <BaseTooltip.Root {...props}>
+      <BaseTooltip.Trigger delay={delay} render={children} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner side={side} sideOffset={sideOffset} render={<Positioner />}>
           {/* 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">
+              padding, and the gap to the shortcut) lives on the styled `TooltipPopup`. */}
+          <BaseTooltip.Popup role="tooltip" render={<TooltipPopup />}>
             {content}
             {shortcut != null ? <TooltipShortcut>{shortcut}</TooltipShortcut> : null}
-            <TooltipArrow />
-          </TooltipPopup>
-        </TooltipPositioner>
-      </TooltipPortal>
-    </TooltipElement>
+            <BaseTooltip.Arrow render={<TooltipArrow />} />
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
   );
 }
diff --git a/packages/propel/src/components/workspace-avatar/index.tsx b/packages/propel/src/components/workspace-avatar/index.tsx
index 823e082e..51934422 100644
--- a/packages/propel/src/components/workspace-avatar/index.tsx
+++ b/packages/propel/src/components/workspace-avatar/index.tsx
@@ -1,5 +1,5 @@
 export * from "./workspace-avatar";
 // Re-export the avatar tone palette + the workspace magnitude type so the components-tier
-// story (and consumers) can reach them without dropping to the ui tier.
-export { AVATAR_TONES, type AvatarTone } from "../../ui/avatar";
-export { type WorkspaceAvatarMagnitude } from "../../ui/workspace-avatar";
+// story (and consumers) can reach them without dropping to the elements tier.
+export { AVATAR_TONES, type AvatarTone } from "../../elements/avatar";
+export { type WorkspaceAvatarMagnitude } from "../../elements/workspace-avatar";
diff --git a/packages/propel/src/components/workspace-avatar/workspace-avatar.tsx b/packages/propel/src/components/workspace-avatar/workspace-avatar.tsx
index 6c9ac94c..6b410780 100644
--- a/packages/propel/src/components/workspace-avatar/workspace-avatar.tsx
+++ b/packages/propel/src/components/workspace-avatar/workspace-avatar.tsx
@@ -1,12 +1,13 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import type * as React from "react";
 
-import { type AvatarTone, getAvatarTone } from "../../ui/avatar";
+import { type AvatarTone, getAvatarTone } from "../../elements/avatar";
 import {
   WorkspaceAvatar as WorkspaceAvatarElement,
   WorkspaceAvatarFallback,
   WorkspaceAvatarImage,
   type WorkspaceAvatarProps as WorkspaceAvatarElementProps,
-} from "../../ui/workspace-avatar";
+} from "../../elements/workspace-avatar";
 
 export type WorkspaceAvatarProps = WorkspaceAvatarElementProps & {
   /** Workspace logo URL. Falls back to the initial when absent/loading/failed. */
@@ -17,11 +18,13 @@ export type WorkspaceAvatarProps = WorkspaceAvatarElementProps & {
   fallback?: React.ReactNode;
   /** Initials background color. Defaults to a stable color derived from `alt`. */
   tone?: AvatarTone;
+  /** Milliseconds before the fallback shows, to avoid a flash while `src` loads quickly. */
+  delay?: number;
 };
 
 /**
  * The ready-made workspace avatar: a logo that falls back to initials, composed from the
- * `ui/workspace-avatar` parts (`WorkspaceAvatar` root + `WorkspaceAvatarImage` +
+ * `elements/workspace-avatar` parts (`WorkspaceAvatar` root + `WorkspaceAvatarImage` +
  * `WorkspaceAvatarFallback`). Pass `src` for the logo, `fallback` for initials, and optionally
  * `tone` (otherwise derived from `alt`).
  */
@@ -31,6 +34,7 @@ export function WorkspaceAvatar({
   alt,
   fallback,
   tone,
+  delay,
   ...props
 }: WorkspaceAvatarProps) {
   // Base UI shows the fallback whenever the logo is absent, loading, or failed, so the
@@ -41,13 +45,21 @@ export function WorkspaceAvatar({
   // 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
-    // (logo / initials); the inner image is decorative.
-    <WorkspaceAvatarElement role="img" aria-label={alt} magnitude={magnitude} {...props}>
-      {src ? <WorkspaceAvatarImage src={src} alt="" /> : null}
-      <WorkspaceAvatarFallback tone={hasInitials ? resolvedTone : "none"}>
-        {fallback}
-      </WorkspaceAvatarFallback>
-    </WorkspaceAvatarElement>
+    // Base UI's `Avatar` behavior grafts onto the styled `elements` parts via `render` (behavior part
+    // outer, styled part as the render target). `role="img"` + `aria-label` give the avatar one
+    // accessible name in every state (logo / initials); the inner image is decorative.
+    <BaseAvatar.Root
+      {...props}
+      render={<WorkspaceAvatarElement magnitude={magnitude} />}
+      role="img"
+      aria-label={alt}
+    >
+      {src ? <BaseAvatar.Image render={<WorkspaceAvatarImage />} src={src} alt="" /> : null}
+      {hasInitials ? (
+        <BaseAvatar.Fallback delay={delay} render={<WorkspaceAvatarFallback tone={resolvedTone} />}>
+          {fallback}
+        </BaseAvatar.Fallback>
+      ) : null}
+    </BaseAvatar.Root>
   );
 }
diff --git a/packages/propel/src/elements/accordion/accordion-header.tsx b/packages/propel/src/elements/accordion/accordion-header.tsx
new file mode 100644
index 00000000..f865e231
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion-header.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionHeaderVariants } from "./variants";
+
+export type AccordionHeaderProps = Omit<useRender.ComponentProps<"h3">, "className" | "style">;
+
+/**
+ * The heading wrapper for an accordion trigger. Base-UI-agnostic — graft in `components` via
+ * `<BaseAccordion.Header render={<AccordionHeader/>} />`.
+ */
+export function AccordionHeader({ render, ...props }: AccordionHeaderProps) {
+  const defaultProps: useRender.ElementProps<"h3"> = { className: accordionHeaderVariants() };
+  return useRender({ defaultTagName: "h3", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/accordion-item.tsx b/packages/propel/src/elements/accordion/accordion-item.tsx
new file mode 100644
index 00000000..9f937c65
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion-item.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionItemVariants } from "./variants";
+
+export type AccordionItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A single collapsible section: pairs an `AccordionHeader` and `AccordionPanel`. Base-UI-agnostic —
+ * graft in `components` via `<BaseAccordion.Item render={<AccordionItem/>} value={…} />`.
+ */
+export function AccordionItem({ render, ...props }: AccordionItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: accordionItemVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/accordion-panel-content.tsx b/packages/propel/src/elements/accordion/accordion-panel-content.tsx
new file mode 100644
index 00000000..857df497
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion-panel-content.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionPanelContentVariants } from "./variants";
+
+export type AccordionPanelContentProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The padded inner content of an `AccordionPanel`. The padding lives here rather than on the panel
+ * itself, because the panel animates its height open/closed and padding there would offset the
+ * measured height.
+ */
+export function AccordionPanelContent({ render, ...props }: AccordionPanelContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: accordionPanelContentVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/accordion-panel.tsx b/packages/propel/src/elements/accordion/accordion-panel.tsx
new file mode 100644
index 00000000..fe6933a5
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion-panel.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionPanelVariants } from "./variants";
+
+export type AccordionPanelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The collapsible content region for an item. Animates open/closed using Base UI's
+ * `--accordion-panel-height`. Base-UI-agnostic — graft in `components` via `<BaseAccordion.Panel
+ * render={<AccordionPanel/>} />`.
+ */
+export function AccordionPanel({ render, ...props }: AccordionPanelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: accordionPanelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/accordion-trigger-title.tsx b/packages/propel/src/elements/accordion/accordion-trigger-title.tsx
new file mode 100644
index 00000000..5a3ab71e
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion-trigger-title.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionTriggerTitleVariants } from "./variants";
+
+export type AccordionTriggerTitleProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trigger's label. Grows to fill the trigger row so a trailing `AccordionTriggerIndicator` sits
+ * at the inline-end edge.
+ */
+export function AccordionTriggerTitle({ render, ...props }: AccordionTriggerTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: accordionTriggerTitleVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/accordion-trigger.tsx b/packages/propel/src/elements/accordion/accordion-trigger.tsx
new file mode 100644
index 00000000..38ac853e
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion-trigger.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionTriggerVariants } from "./variants";
+
+export type AccordionTriggerProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * The clickable control that opens and closes its panel. Base-UI-agnostic — graft in `components`
+ * via `<BaseAccordion.Trigger render={<AccordionTrigger/>} />`, which wires `aria-expanded` and
+ * `aria-controls`.
+ */
+export function AccordionTrigger({ render, ...props }: AccordionTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: accordionTriggerVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/accordion.stories.tsx b/packages/propel/src/elements/accordion/accordion.stories.tsx
new file mode 100644
index 00000000..f4c621fa
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion.stories.tsx
@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, CircleHelp } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionPanelContent,
+  AccordionTrigger,
+  AccordionTriggerTitle,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the `data-*`/aria
+// attributes Base UI's accordion would set (`data-panel-open=""` on the trigger,
+// `data-starting-style=""` on the panel) or the native `disabled` attribute. The accordion is a
+// structural disclosure primitive with no variant axes (see variants.ts), so the state matrix IS
+// the whole configuration space. Grafting, keyboard, and aria behavior are demonstrated and tested
+// in the components-tier story (Components/Accordion).
+const meta = {
+  title: "Elements/Accordion",
+  component: Accordion,
+  subcomponents: {
+    AccordionItem,
+    AccordionHeader,
+    AccordionTrigger,
+    AccordionTriggerTitle,
+    AccordionPanel,
+    AccordionPanelContent,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-118.5">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ITEMS = [
+  {
+    label: "What is Plane?",
+    body: "An open-source project management tool.",
+  },
+  {
+    label: "How does pricing work?",
+    body: "Free to self-host.",
+  },
+  {
+    label: "Can I import my data?",
+    body: "Yes, from common trackers.",
+  },
+];
+
+/**
+ * The full anatomy assembled statically: `Accordion` › `AccordionItem` › `AccordionHeader` ›
+ * `AccordionTrigger` (leading internal `Icon`, growing `AccordionTriggerTitle`, trailing internal
+ * `DisclosureIndicator`), plus `AccordionPanel` › `AccordionPanelContent` (the padding lives on the
+ * content so the panel's height animation measures cleanly). The first item is pinned open:
+ * `data-panel-open=""` on the trigger rotates the caret (the trigger carries `group`; the indicator
+ * reads `group-data-panel-open`) and its panel renders — closed items render no panel, matching
+ * Base UI's unmount-while-closed default.
+ */
+export const Default: Story = {
+  render: () => (
+    <Accordion>
+      {ITEMS.map((item, index) => {
+        const open = index === 0;
+        return (
+          <AccordionItem key={item.label}>
+            <AccordionHeader>
+              <AccordionTrigger aria-expanded={open} data-panel-open={open ? "" : undefined}>
+                <Icon tint="secondary">
+                  <CircleHelp />
+                </Icon>
+                <AccordionTriggerTitle>{item.label}</AccordionTriggerTitle>
+                <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+                  <ChevronDown />
+                </DisclosureIndicator>
+              </AccordionTrigger>
+            </AccordionHeader>
+            {open ? (
+              <AccordionPanel>
+                <AccordionPanelContent>{item.body}</AccordionPanelContent>
+              </AccordionPanel>
+            ) : null}
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  ),
+};
+
+/**
+ * Every pinnable state side by side, in one `Accordion` frame:
+ *
+ * - **Closed** — the resting row; the caret points inline-end (`-rotate-90`, RTL-mirrored).
+ * - **Open** — `data-panel-open=""` rotates the caret to point down and the panel shows at its
+ *   natural height.
+ * - **Panel entering** — `data-starting-style=""` pins the panel at the height-0 endpoint of its
+ *   open/close transition, so the row looks closed while the caret already points down.
+ * - **Panel exiting** — `data-ending-style=""` pins the same height-0 endpoint on the way closed;
+ *   Base UI has already dropped `data-panel-open`, so the caret rests inline-end again.
+ * - **Disabled** — the native `disabled` attribute dims the row and swaps the cursor.
+ *
+ * Hover and focus-visible are CSS pseudo-classes, not attributes, so they cannot be pinned here —
+ * the components-tier `States` story forces them with the pseudo-states addon.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Accordion>
+      <AccordionItem>
+        <AccordionHeader>
+          <AccordionTrigger aria-expanded={false}>
+            <AccordionTriggerTitle>Closed</AccordionTriggerTitle>
+            <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </AccordionTrigger>
+        </AccordionHeader>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>
+          <AccordionTrigger aria-expanded data-panel-open="">
+            <AccordionTriggerTitle>Open</AccordionTriggerTitle>
+            <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionPanel>
+          <AccordionPanelContent>The expanded panel at its natural height.</AccordionPanelContent>
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>
+          <AccordionTrigger aria-expanded data-panel-open="">
+            <AccordionTriggerTitle>Panel entering</AccordionTriggerTitle>
+            <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionPanel data-starting-style="">
+          <AccordionPanelContent>Pinned at the height-0 transition endpoint.</AccordionPanelContent>
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>
+          <AccordionTrigger aria-expanded={false}>
+            <AccordionTriggerTitle>Panel exiting</AccordionTriggerTitle>
+            <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionPanel data-ending-style="">
+          <AccordionPanelContent>Pinned at the height-0 transition endpoint.</AccordionPanelContent>
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>
+          <AccordionTrigger disabled aria-expanded={false}>
+            <AccordionTriggerTitle>Disabled</AccordionTriggerTitle>
+            <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </AccordionTrigger>
+        </AccordionHeader>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-panel-open` trigger rotates its caret relative to the closed one, and the
+ * `data-starting-style`/`data-ending-style` panels compute to height 0. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement }) => {
+    const caretRotate = (name: string) => {
+      const caret = canvas.getByRole("button", { name }).querySelector("[aria-hidden]");
+      if (!(caret instanceof HTMLElement)) throw new Error(`missing caret in "${name}" trigger`);
+      return getComputedStyle(caret).rotate;
+    };
+    // The compiled `group-data-panel-open:rotate-0` selector rotates the open caret away from the
+    // closed caret's resting `-rotate-90`.
+    await expect(caretRotate("Open")).not.toBe(caretRotate("Closed"));
+
+    // The compiled `data-starting-style:h-0` / `data-ending-style:h-0` selectors pin the
+    // entering and exiting panels at height 0.
+    for (const selector of ["[data-starting-style]", "[data-ending-style]"]) {
+      const panel = canvasElement.querySelector(selector);
+      if (!(panel instanceof HTMLElement)) {
+        throw new Error(`missing pinned ${selector} panel`);
+      }
+      await expect(getComputedStyle(panel).height).toBe("0px");
+    }
+  },
+};
diff --git a/packages/propel/src/elements/accordion/accordion.tsx b/packages/propel/src/elements/accordion/accordion.tsx
new file mode 100644
index 00000000..d675e578
--- /dev/null
+++ b/packages/propel/src/elements/accordion/accordion.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { accordionVariants } from "./variants";
+
+export type AccordionProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled accordion frame that groups a set of `AccordionItem`s. Base-UI-agnostic — graft the
+ * accordion behavior in `components` via `<BaseAccordion.Root render={<Accordion/>} />`.
+ */
+export function Accordion({ render, ...props }: AccordionProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: accordionVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/accordion/index.tsx b/packages/propel/src/elements/accordion/index.tsx
new file mode 100644
index 00000000..5717dfea
--- /dev/null
+++ b/packages/propel/src/elements/accordion/index.tsx
@@ -0,0 +1,7 @@
+export * from "./accordion";
+export * from "./accordion-header";
+export * from "./accordion-item";
+export * from "./accordion-panel";
+export * from "./accordion-panel-content";
+export * from "./accordion-trigger";
+export * from "./accordion-trigger-title";
diff --git a/packages/propel/src/elements/accordion/variants.ts b/packages/propel/src/elements/accordion/variants.ts
new file mode 100644
index 00000000..6654ae2f
--- /dev/null
+++ b/packages/propel/src/elements/accordion/variants.ts
@@ -0,0 +1,38 @@
+import { cva, cx } from "class-variance-authority";
+
+import {
+  disclosureTriggerClass,
+  disclosureTriggerTitleClass,
+} from "../../internal/disclosure-trigger";
+
+// 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(disclosureTriggerClass, "flex-1 bg-layer-transparent p-3 hover:bg-layer-transparent-hover"),
+);
+
+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",
+  ),
+);
+
+// The trigger's growing label. `flex-1` fills the row so the indicator sits at the
+// trailing edge; `min-w-0` lets long labels wrap/shrink instead of overflowing.
+export const accordionTriggerTitleVariants = cva(disclosureTriggerTitleClass);
+
+// The padded inner content of a panel. Padding lives here, never on the
+// height-animating `AccordionPanel` (padding there would jump the open/close height).
+export const accordionPanelContentVariants = cva("px-3 pb-3");
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-actions.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-actions.tsx
new file mode 100644
index 00000000..fc22e21a
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-actions.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { alertDialogActionsVariants } from "./variants";
+
+export type AlertDialogActionsProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * Right-aligns action buttons with consistent horizontal spacing. The placement and gap are always
+ * the same — baked in by the design system.
+ */
+export function AlertDialogActions({ render, ...props }: AlertDialogActionsProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: alertDialogActionsVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-close.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-close.tsx
new file mode 100644
index 00000000..8613bf06
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-close.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { alertDialogCloseVariants } from "./variants";
+
+export type AlertDialogCloseProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * A ghost button that closes the alert dialog. Base-UI-agnostic — graft the close behavior in
+ * `components` via `<BaseAlertDialog.Close render={<AlertDialogClose/>} />`.
+ */
+export function AlertDialogClose({ render, ...props }: AlertDialogCloseProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: alertDialogCloseVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-header.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-header.tsx
new file mode 100644
index 00000000..5261c3f4
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-header.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { alertDialogHeaderVariants } from "./variants";
+
+export type AlertDialogHeaderProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The top region of the popup: lays out the leading `AlertDialogIcon` at the inline-start of the
+ * `AlertDialogIntro` (icon left of title), per the design spec. The icon and intro are passed as
+ * children.
+ */
+export function AlertDialogHeader({ render, ...props }: AlertDialogHeaderProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: alertDialogHeaderVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-icon.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-icon.tsx
new file mode 100644
index 00000000..42cf5054
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-icon.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type AlertDialogIconVariantProps, alertDialogIconVariants } from "./variants";
+
+export type { AlertDialogIconTone } from "./variants";
+
+export type AlertDialogIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  AlertDialogIconVariantProps;
+
+/**
+ * The decorative leading glyph shown at the inline-start of the title. Sizes its single child to
+ * `--node-size`, so the caller passes a bare icon (warning, error, info, …). Decorative — the title
+ * carries the accessible name — so it is `aria-hidden`.
+ */
+export function AlertDialogIcon({ tone, render, ...props }: AlertDialogIconProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: alertDialogIconVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-intro.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-intro.tsx
new file mode 100644
index 00000000..36fd024f
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-intro.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { alertDialogIntroVariants } from "./variants";
+
+export type AlertDialogIntroProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * Groups the title and description with consistent vertical spacing. The gap between title and
+ * description is always the same — baked in by the design system.
+ */
+export function AlertDialogIntro({ render, ...props }: AlertDialogIntroProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: alertDialogIntroVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-popup.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-popup.tsx
new file mode 100644
index 00000000..4e30cb84
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-popup.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { alertDialogPopupVariants } from "./variants";
+
+export type AlertDialogPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The centered card that holds the alert content. Base-UI-agnostic — graft the popup behavior in
+ * `components` via `<BaseAlertDialog.Popup render={<AlertDialogPopup/>} />`.
+ */
+export function AlertDialogPopup({ render, ...props }: AlertDialogPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: alertDialogPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog-viewport.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog-viewport.tsx
new file mode 100644
index 00000000..e859f3a7
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog-viewport.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { alertDialogViewportVariants } from "./variants";
+
+export type AlertDialogViewportProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The full-screen container that centers the popup and provides a scrollable area for tall content.
+ * Base-UI-agnostic — graft the viewport behavior in `components` via `<BaseAlertDialog.Viewport
+ * render={<AlertDialogViewport/>} />`.
+ */
+export function AlertDialogViewport({ render, ...props }: AlertDialogViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: alertDialogViewportVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/elements/alert-dialog/alert-dialog.stories.tsx
new file mode 100644
index 00000000..10045aff
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/alert-dialog.stories.tsx
@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import type * as React from "react";
+import { expect } from "storybook/test";
+
+import { Backdrop } from "../../internal/backdrop";
+import { Icon } from "../../internal/icon";
+import { OverlayDescription } from "../../internal/overlay-description";
+import { OverlayTitle } from "../../internal/overlay-title";
+import { Button } from "../button";
+import {
+  AlertDialogActions,
+  AlertDialogClose,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  type AlertDialogIconTone,
+  AlertDialogIntro,
+  AlertDialogPopup,
+  AlertDialogViewport,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the `data-*`
+// attributes Base UI's alert dialog would set (`data-starting-style=""` / `data-ending-style=""`
+// on the popup). The backdrop, title, and description are shared `internal/` chrome (`Backdrop`,
+// `OverlayTitle`, `OverlayDescription`), rendered statically here the way the components tier
+// grafts them. The one variant axis in this family is the leading icon's `tone`
+// (destructive-vs-informational); everything else is static chrome. Opening, modality, and
+// aria wiring are demonstrated AND tested in the components-tier story (Components/AlertDialog).
+const meta = {
+  title: "Elements/AlertDialog",
+  component: AlertDialogPopup,
+  subcomponents: {
+    AlertDialogViewport,
+    AlertDialogHeader,
+    AlertDialogIcon,
+    AlertDialogIntro,
+    AlertDialogActions,
+    AlertDialogClose,
+  },
+} satisfies Meta<typeof AlertDialogPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// The `tone` axis of `AlertDialogIcon` — the destructive-vs-informational intent of the
+// confirmation. The glyph itself is whatever child the caller passes.
+const TONES: { tone: AlertDialogIconTone; title: string; glyph: React.ReactNode }[] = [
+  { tone: "danger", title: "Delete account?", glyph: <TriangleAlert /> },
+  { tone: "warning", title: "Discard draft?", glyph: <CircleAlert /> },
+  { tone: "info", title: "Switch workspace?", glyph: <Info /> },
+  { tone: "success", title: "Publish changes?", glyph: <CircleCheck /> },
+];
+
+/**
+ * The full overlay anatomy assembled statically: the shared internal `Backdrop` dims the stage,
+ * `AlertDialogViewport` centers, and `AlertDialogPopup` holds `AlertDialogHeader`
+ * (`AlertDialogIcon` at the inline-start of `AlertDialogIntro`, which stacks the shared
+ * `OverlayTitle`/`OverlayDescription`) above `AlertDialogActions`. The backdrop and viewport are
+ * `fixed inset-0`, so the stage uses `contain-layout` to scope them to the story canvas — in the
+ * real composition they cover the page.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="h-96 w-full contain-layout">
+      <Backdrop />
+      <AlertDialogViewport>
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogIcon tone="danger">
+              <TriangleAlert />
+            </AlertDialogIcon>
+            <AlertDialogIntro>
+              <OverlayTitle magnitude="lg">Delete account?</OverlayTitle>
+              <OverlayDescription magnitude="lg">
+                This permanently deletes your account and cannot be undone.
+              </OverlayDescription>
+            </AlertDialogIntro>
+          </AlertDialogHeader>
+          <AlertDialogActions>
+            <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+              Cancel
+            </Button>
+            <Button sizing="hug" prominence="primary" tone="danger" magnitude="xl">
+              Delete
+            </Button>
+          </AlertDialogActions>
+        </AlertDialogPopup>
+      </AlertDialogViewport>
+    </div>
+  ),
+};
+
+/**
+ * The family's one variant axis: `AlertDialogIcon`'s required `tone` tints the leading glyph by the
+ * confirmation's intent — `danger`, `warning`, `info`, or `success`. The glyph is the caller's
+ * child; the icon is decorative (`aria-hidden` baked in) since the title carries the name.
+ */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-80 flex-col gap-6">
+      {TONES.map(({ tone, title, glyph }) => (
+        <AlertDialogHeader key={tone}>
+          <AlertDialogIcon tone={tone}>{glyph}</AlertDialogIcon>
+          <AlertDialogIntro>
+            <OverlayTitle magnitude="lg">{title}</OverlayTitle>
+            <OverlayDescription magnitude="lg">The {tone} tone.</OverlayDescription>
+          </AlertDialogIntro>
+        </AlertDialogHeader>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state, statically:
+ *
+ * - **Resting** — the popup at its open resting pose (full opacity, natural scale).
+ * - **Entering** — `data-starting-style=""` pins the enter transition's start endpoint: scaled to 95%
+ *   and fully transparent, so the block below the caption is intentionally invisible.
+ * - **Exiting** — `data-ending-style=""` pins the exit transition's end endpoint (same transparent
+ *   pose).
+ * - **Close chrome** — the corner dismiss affordance `AlertDialogClose`; hover and focus-visible are
+ *   CSS pseudo-classes, forced here with the pseudo-states addon.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#alert-dialog-close-hover"],
+      focusVisible: ["#alert-dialog-close-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">Resting</OverlayDescription>
+        <AlertDialogPopup id="alert-dialog-popup-resting">
+          <AlertDialogHeader>
+            <AlertDialogIcon tone="danger">
+              <TriangleAlert />
+            </AlertDialogIcon>
+            <AlertDialogIntro>
+              <OverlayTitle magnitude="lg">Resting</OverlayTitle>
+              <OverlayDescription magnitude="lg">
+                The popup at its open resting pose.
+              </OverlayDescription>
+            </AlertDialogIntro>
+          </AlertDialogHeader>
+          <AlertDialogActions>
+            <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+              Cancel
+            </Button>
+            <Button sizing="hug" prominence="primary" tone="danger" magnitude="xl">
+              Delete
+            </Button>
+          </AlertDialogActions>
+        </AlertDialogPopup>
+      </div>
+      <div className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">
+          Entering — pinned at the transparent data-starting-style endpoint
+        </OverlayDescription>
+        <AlertDialogPopup data-starting-style="">
+          <AlertDialogHeader>
+            <AlertDialogIcon tone="danger">
+              <TriangleAlert />
+            </AlertDialogIcon>
+            <AlertDialogIntro>
+              <OverlayTitle magnitude="lg">Entering</OverlayTitle>
+              <OverlayDescription magnitude="lg">
+                Scaled to 95% and fully transparent.
+              </OverlayDescription>
+            </AlertDialogIntro>
+          </AlertDialogHeader>
+        </AlertDialogPopup>
+      </div>
+      <div className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">
+          Exiting — pinned at the transparent data-ending-style endpoint
+        </OverlayDescription>
+        <AlertDialogPopup data-ending-style="">
+          <AlertDialogHeader>
+            <AlertDialogIcon tone="danger">
+              <TriangleAlert />
+            </AlertDialogIcon>
+            <AlertDialogIntro>
+              <OverlayTitle magnitude="lg">Exiting</OverlayTitle>
+              <OverlayDescription magnitude="lg">
+                Scaled to 95% and fully transparent.
+              </OverlayDescription>
+            </AlertDialogIntro>
+          </AlertDialogHeader>
+        </AlertDialogPopup>
+      </div>
+      <div className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">
+          Close chrome — resting, hover, focus-visible
+        </OverlayDescription>
+        <div className="flex items-center gap-3">
+          <AlertDialogClose aria-label="Close">
+            <Icon magnitude="md">
+              <X />
+            </Icon>
+          </AlertDialogClose>
+          <AlertDialogClose id="alert-dialog-close-hover" aria-label="Close (hover)">
+            <Icon magnitude="md">
+              <X />
+            </Icon>
+          </AlertDialogClose>
+          <AlertDialogClose id="alert-dialog-close-focus" aria-label="Close (focus-visible)">
+            <Icon magnitude="md">
+              <X />
+            </Icon>
+          </AlertDialogClose>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-starting-style`/`data-ending-style` popups compute to opacity 0 while the resting popup
+ * stays fully opaque. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const popupOpacity = (selector: string) => {
+      const popup = canvasElement.querySelector(selector);
+      if (!(popup instanceof HTMLElement)) throw new Error(`missing popup for ${selector}`);
+      return getComputedStyle(popup).opacity;
+    };
+    // The compiled `data-starting-style:opacity-0` / `data-ending-style:opacity-0` selectors pin
+    // both transition endpoints transparent; the resting popup keeps full opacity.
+    await expect(popupOpacity("[data-starting-style]")).toBe("0");
+    await expect(popupOpacity("[data-ending-style]")).toBe("0");
+    await expect(popupOpacity("#alert-dialog-popup-resting")).toBe("1");
+  },
+};
diff --git a/packages/propel/src/elements/alert-dialog/index.tsx b/packages/propel/src/elements/alert-dialog/index.tsx
new file mode 100644
index 00000000..6ad64121
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/index.tsx
@@ -0,0 +1,7 @@
+export * from "./alert-dialog-actions";
+export * from "./alert-dialog-close";
+export * from "./alert-dialog-header";
+export * from "./alert-dialog-icon";
+export * from "./alert-dialog-intro";
+export * from "./alert-dialog-popup";
+export * from "./alert-dialog-viewport";
diff --git a/packages/propel/src/elements/alert-dialog/variants.ts b/packages/propel/src/elements/alert-dialog/variants.ts
new file mode 100644
index 00000000..29ecb8ab
--- /dev/null
+++ b/packages/propel/src/elements/alert-dialog/variants.ts
@@ -0,0 +1,68 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { nodeSlotClass } from "../../internal/node-slot";
+import {
+  modalViewportClass,
+  overlayActionsClass,
+  overlayHeadingClass,
+} from "../../internal/overlay-frame";
+import { overlayCloseClass } from "../../internal/overlay-frame";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// 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. The one design axis the
+// spec calls out is the leading icon's intent (destructive vs informational), which
+// the `AlertDialogIcon` exposes as a required `tone` — every other part is static
+// chrome held in a single cva so there is no `className` at the boundary. The
+// backdrop, title, and description reuse the shared `internal/` overlay primitives
+// (grafted in `components`), so they carry no per-family cva here.
+
+export const alertDialogViewportVariants = cva(modalViewportClass);
+
+export const alertDialogPopupVariants = cva(
+  cx(
+    // Fixed width and layout: the max-width constraint and internal spacing are
+    // always the same per spec — baked here, not left to the consumer.
+    "flex w-80 flex-col gap-4",
+    "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",
+  ),
+);
+
+// Header: the top region that places the leading icon at the inline-start of the
+// intro (icon left of title, per spec). Items align to the start so a multi-line
+// description keeps the icon level with the title.
+export const alertDialogHeaderVariants = cva("flex items-start gap-3");
+
+// Icon: the decorative leading glyph beside the title. Sizes its single child to
+// `--node-size` (via the shared node-slot class) and tints it by `tone` — the
+// destructive-vs-informational axis the spec marks as adjustable. The glyph itself
+// (warning/error/info) is whatever child the caller passes. No default tone: the
+// caller must state the intent.
+export const alertDialogIconVariants = cva(cx(nodeSlotClass, "mt-0.5 [--node-size:1.25rem]"), {
+  variants: {
+    tone: {
+      danger: "text-icon-danger",
+      warning: "text-icon-warning-primary",
+      info: "text-icon-info-primary",
+      success: "text-icon-success-primary",
+    },
+  },
+});
+
+// Intro: groups the title and description with consistent vertical spacing.
+// Always the same per spec (spacing between title and description). `min-w-0` lets
+// long copy wrap instead of pushing the icon out of the header row.
+export const alertDialogIntroVariants = cva(overlayHeadingClass);
+
+// Actions: right-aligns action buttons with consistent horizontal spacing.
+// Always the same per spec (action button placement, right-aligned in footer).
+export const alertDialogActionsVariants = cva(overlayActionsClass);
+
+export const alertDialogCloseVariants = cva(overlayCloseClass);
+
+export type AlertDialogIconTone = NonNullable<VariantProps<typeof alertDialogIconVariants>["tone"]>;
+export type AlertDialogIconVariantProps = StrictVariantProps<typeof alertDialogIconVariants>;
diff --git a/packages/propel/src/elements/anchor-button/anchor-button-label.tsx b/packages/propel/src/elements/anchor-button/anchor-button-label.tsx
new file mode 100644
index 00000000..a3c09a21
--- /dev/null
+++ b/packages/propel/src/elements/anchor-button/anchor-button-label.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { anchorButtonLabelVariants } from "./variants";
+
+export type AnchorButtonLabelProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The text label inside an `AnchorButton`. Dims while the parent is `aria-busy` (loading), reading
+ * the `group` class on the root — mirrors `ButtonLabel`.
+ */
+export function AnchorButtonLabel({ render, ...props }: AnchorButtonLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: anchorButtonLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/anchor-button/anchor-button.stories.tsx b/packages/propel/src/elements/anchor-button/anchor-button.stories.tsx
new file mode 100644
index 00000000..1fde2da9
--- /dev/null
+++ b/packages/propel/src/elements/anchor-button/anchor-button.stories.tsx
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AnchorButton, type AnchorButtonMagnitude, type AnchorButtonProminence } from "./index";
+
+const PROMINENCES: AnchorButtonProminence[] = ["primary", "secondary"];
+const MAGNITUDES: AnchorButtonMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase of the styled `<button>` wearing
+// the inline-link look, rendered directly. Its interaction states are CSS (`hover:`/
+// `focus-visible:`) plus the `disabled`/`aria-disabled` attributes Base UI's `Button` sets, so
+// `States` pins them statically (pseudo-states addon + the attributes). The Base UI `Button` graft
+// (clicks, `disabled`, keyboard) is demonstrated and tested in Components/AnchorButton. For a nav
+// `<a>` styled as a button see `AnchorButton`; for a real inline link, `Anchor`.
+const meta = {
+  title: "Elements/AnchorButton",
+  component: AnchorButton,
+  args: { children: "Show more", prominence: "primary", magnitude: "md" },
+} satisfies Meta<typeof AnchorButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** `prominence`: `primary` is the blue link; `secondary` is the muted gray inline link. */
+export const Prominences: Story = {
+  argTypes: { prominence: { control: false }, children: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-4">
+      {PROMINENCES.map((prominence) => (
+        <AnchorButton key={prominence} {...args} prominence={prominence}>
+          {prominence} action
+        </AnchorButton>
+      ))}
+    </div>
+  ),
+};
+
+/** Text 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-4">
+      {MAGNITUDES.map((magnitude) => (
+        <AnchorButton key={magnitude} {...args} magnitude={magnitude}>
+          {magnitude}
+        </AnchorButton>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every visual state of the link chrome, per prominence, pinned statically: hover recolors the text
+ * (forced via the pseudo-states addon), focus-visible draws the accent ring (also forced), native
+ * `disabled` — what Base UI's `Button` sets by default — and `aria-disabled="true"` — the
+ * soft-disabled state it sets under `focusableWhenDisabled` — both drop the underline and dim to
+ * the disabled text color with `cursor-not-allowed`.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: PROMINENCES.map((prominence) => `#button-anchor-${prominence}-hover`),
+      focusVisible: PROMINENCES.map((prominence) => `#button-anchor-${prominence}-focus`),
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {PROMINENCES.map((prominence) => (
+        <div key={prominence} className="flex items-center gap-4">
+          <AnchorButton prominence={prominence} magnitude="md">
+            Default
+          </AnchorButton>
+          <AnchorButton
+            id={`button-anchor-${prominence}-hover`}
+            prominence={prominence}
+            magnitude="md"
+          >
+            Hover
+          </AnchorButton>
+          <AnchorButton
+            id={`button-anchor-${prominence}-focus`}
+            prominence={prominence}
+            magnitude="md"
+          >
+            Focus visible
+          </AnchorButton>
+          <AnchorButton prominence={prominence} magnitude="md" disabled>
+            Disabled
+          </AnchorButton>
+          <AnchorButton prominence={prominence} magnitude="md" aria-disabled="true">
+            Soft-disabled
+          </AnchorButton>
+        </div>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/anchor-button/anchor-button.tsx b/packages/propel/src/elements/anchor-button/anchor-button.tsx
new file mode 100644
index 00000000..50691834
--- /dev/null
+++ b/packages/propel/src/elements/anchor-button/anchor-button.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type AnchorButtonVariantProps, anchorButtonVariants } from "./variants";
+
+export type { AnchorButtonMagnitude, AnchorButtonProminence } from "./variants";
+
+export type AnchorButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  AnchorButtonVariantProps;
+
+/**
+ * The styled `<button>` that reads as an inline text link — the "action that looks like a link" (a
+ * "Show more" toggle, an inline "Edit"). Base-UI-agnostic: pick the link palette (`prominence`,
+ * shared with `Anchor`) and text size (`magnitude`); the action behavior grafts in `components` via
+ * `<BaseButton render={<AnchorButton/>} />`. For a nav `<a>` styled as a button use `AnchorButton`;
+ * for a real inline link, `Anchor`.
+ */
+export function AnchorButton({ prominence, magnitude, render, ...props }: AnchorButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: anchorButtonVariants({ prominence, magnitude }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/anchor-button/index.tsx b/packages/propel/src/elements/anchor-button/index.tsx
new file mode 100644
index 00000000..7054f04f
--- /dev/null
+++ b/packages/propel/src/elements/anchor-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./anchor-button-label";
+export * from "./anchor-button";
diff --git a/packages/propel/src/elements/anchor-button/variants.ts b/packages/propel/src/elements/anchor-button/variants.ts
new file mode 100644
index 00000000..6510e1f2
--- /dev/null
+++ b/packages/propel/src/elements/anchor-button/variants.ts
@@ -0,0 +1,18 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { linkChromeVariants } from "../../internal/link-chrome";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// `AnchorButton` presents as a link (the shared link chrome) but is a `<button>` (an action). Same
+// look as `Anchor`, button behavior. For a navigation `<a>` that looks like a button, use `AnchorButton`.
+export const anchorButtonVariants = linkChromeVariants;
+
+type AnchorButtonVariantConfig = VariantProps<typeof anchorButtonVariants>;
+export type AnchorButtonProminence = NonNullable<AnchorButtonVariantConfig["prominence"]>;
+export type AnchorButtonMagnitude = NonNullable<AnchorButtonVariantConfig["magnitude"]>;
+
+export type AnchorButtonVariantProps = StrictVariantProps<typeof anchorButtonVariants>;
+
+// The text label inside an AnchorButton. When the parent is `aria-busy` (loading) it dims via the
+// `group-aria-busy:` sibling of the `group` class on the root (mirrors ButtonLabel).
+export const anchorButtonLabelVariants = cva("group-aria-busy:opacity-50");
diff --git a/packages/propel/src/elements/autocomplete/autocomplete-empty.tsx b/packages/propel/src/elements/autocomplete/autocomplete-empty.tsx
new file mode 100644
index 00000000..e8fe9a7a
--- /dev/null
+++ b/packages/propel/src/elements/autocomplete/autocomplete-empty.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { autocompleteEmptyVariants } from "./variants";
+
+export type AutocompleteEmptyProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled empty-state row. Graft in `components` via `<BaseAutocomplete.Empty
+ * render={<AutocompleteEmpty/>} />`.
+ */
+export function AutocompleteEmpty({ render, ...props }: AutocompleteEmptyProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: autocompleteEmptyVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/autocomplete/autocomplete-input-group.tsx b/packages/propel/src/elements/autocomplete/autocomplete-input-group.tsx
new file mode 100644
index 00000000..81967ed6
--- /dev/null
+++ b/packages/propel/src/elements/autocomplete/autocomplete-input-group.tsx
@@ -0,0 +1,30 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type AutocompleteInputGroupVariantProps,
+  autocompleteInputGroupVariants,
+} from "./variants";
+
+export type { AutocompleteMagnitude } from "./variants";
+
+export type AutocompleteInputGroupProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  AutocompleteInputGroupVariantProps;
+
+/**
+ * The styled bordered frame around the input + its adornments. Base-UI-agnostic — graft in
+ * `components` via `<BaseAutocomplete.InputGroup render={<AutocompleteInputGroup/>} />`.
+ */
+export function AutocompleteInputGroup({
+  magnitude,
+  render,
+  ...props
+}: AutocompleteInputGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: autocompleteInputGroupVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/autocomplete/autocomplete-input.tsx b/packages/propel/src/elements/autocomplete/autocomplete-input.tsx
new file mode 100644
index 00000000..510d183c
--- /dev/null
+++ b/packages/propel/src/elements/autocomplete/autocomplete-input.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type AutocompleteInputVariantProps, autocompleteInputVariants } from "./variants";
+
+export type AutocompleteInputProps = Omit<
+  useRender.ComponentProps<"input">,
+  "className" | "style"
+> &
+  AutocompleteInputVariantProps;
+
+/**
+ * The styled autocomplete text field. Base-UI-agnostic — graft the combobox behavior in
+ * `components` via `<BaseAutocomplete.Input render={<AutocompleteInput/>} />`.
+ */
+export function AutocompleteInput({ magnitude, render, ...props }: AutocompleteInputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = {
+    className: autocompleteInputVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/autocomplete/autocomplete.stories.tsx b/packages/propel/src/elements/autocomplete/autocomplete.stories.tsx
new file mode 100644
index 00000000..2c1181ca
--- /dev/null
+++ b/packages/propel/src/elements/autocomplete/autocomplete.stories.tsx
@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronsUpDown, Search as SearchGlyph, X } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { ControlIcon } from "../../internal/control-icon";
+import { Icon } from "../../internal/icon";
+import { ListboxItem } from "../../internal/listbox-item";
+import { ListboxPopup } from "../../internal/listbox-popup";
+import { IconButton } from "../icon-button";
+import {
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteInputGroup,
+  type AutocompleteMagnitude,
+} from "./index";
+
+const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
+const MAGNITUDES: AutocompleteMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the popup laid out inline (it is just a styled div; Base UI
+// only positions it) and every visual state pinned statically via the `data-*`/aria attributes
+// Base UI's autocomplete would set (`data-highlighted=""`, `data-disabled=""`, `data-invalid=""`)
+// or the native `disabled` attribute. Grafting, filtering, keyboard, and aria behavior are
+// demonstrated AND tested in the components-tier story (Components/Autocomplete).
+const meta = {
+  title: "Elements/Autocomplete",
+  component: AutocompleteInputGroup,
+  subcomponents: {
+    AutocompleteInput,
+    ListboxPopup,
+    ListboxItem,
+    AutocompleteEmpty,
+  },
+  args: { magnitude: "md" },
+} satisfies Meta<typeof AutocompleteInputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `AutocompleteInputGroup` (the bordered frame) holding a
+ * decorative leading `ControlIcon`, the `AutocompleteInput` text field, and the consumer-provided
+ * clear/trigger `IconButton` controls; below it, the internal `ListboxPopup` surface with
+ * `ListboxItem` rows (`layout="plain"` — the autocomplete draws no selection marker) and the
+ * `AutocompleteEmpty` live region, which Base UI keeps mounted but content-less while there are
+ * matches (its padding applies via `:not(:empty)`, so it takes no space here). The second row pins
+ * `data-highlighted=""` — the attribute Base UI sets on the active option. The popup's
+ * anchor-derived sizing vars (`--anchor-width`, `--available-height`) are supplied by the wrapper,
+ * standing in for Base UI's positioner.
+ */
+export const Default: Story = {
+  render: ({ magnitude }) => (
+    <div className="flex w-80 flex-col gap-2 [--anchor-width:20rem] [--available-height:18rem]">
+      <AutocompleteInputGroup magnitude={magnitude}>
+        <ControlIcon>
+          <SearchGlyph />
+        </ControlIcon>
+        <AutocompleteInput
+          magnitude={magnitude}
+          aria-label="Container image"
+          placeholder="e.g. docker.io/library/node:latest"
+        />
+        <IconButton
+          prominence="ghost"
+          tone="neutral"
+          magnitude="md"
+          aria-label="Clear container image"
+        >
+          <Icon>
+            <X />
+          </Icon>
+        </IconButton>
+        <IconButton
+          prominence="ghost"
+          tone="neutral"
+          magnitude="md"
+          aria-label="Open container image"
+        >
+          <Icon>
+            <ChevronsUpDown />
+          </Icon>
+        </IconButton>
+      </AutocompleteInputGroup>
+      <ListboxPopup>
+        <AutocompleteEmpty />
+        {IMAGES.map((image, index) => (
+          <ListboxItem
+            key={image}
+            layout="plain"
+            magnitude="md"
+            data-highlighted={index === 1 ? "" : undefined}
+          >
+            {image}
+          </ListboxItem>
+        ))}
+      </ListboxPopup>
+    </div>
+  ),
+};
+
+/**
+ * The shared control magnitude scale (sm 28px · md 32px · lg 36px · xl 44px): each step sets the
+ * frame height, the input's text size, and the leading glyph's `--node-size` together.
+ */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex w-80 flex-col gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <AutocompleteInputGroup key={magnitude} magnitude={magnitude}>
+          <ControlIcon>
+            <SearchGlyph />
+          </ControlIcon>
+          <AutocompleteInput
+            magnitude={magnitude}
+            aria-label={`Search images (${magnitude})`}
+            placeholder={magnitude}
+          />
+        </AutocompleteInputGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the input row:
+ *
+ * - **Rest** — the subtle border over the `layer-2` fill.
+ * - **Hover** / **Focused** — CSS pseudo-classes (`:hover`, `:focus-within`), forced by the
+ *   pseudo-states addon: the hover border/fill shift, and the accent border + soft ring while the
+ *   inner input has focus.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to the input; the frame recolors to danger via `:has([data-invalid])` — no `tone`
+ *   prop.
+ * - **Disabled** — the native `disabled` on the input plus the `data-disabled=""` Base UI mirrors
+ *   onto the group: not-allowed cursor, flattened fill, dimmed text — both selector forms the
+ *   shared chrome defines.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: "#autocomplete-group-hover",
+      focusWithin: "#autocomplete-group-focus",
+    },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex w-80 flex-col gap-3">
+      <AutocompleteInputGroup magnitude={magnitude} id="autocomplete-group-rest">
+        <AutocompleteInput magnitude={magnitude} aria-label="Rest" placeholder="Rest" />
+      </AutocompleteInputGroup>
+      <AutocompleteInputGroup magnitude={magnitude} id="autocomplete-group-hover">
+        <AutocompleteInput magnitude={magnitude} aria-label="Hover" placeholder="Hover" />
+      </AutocompleteInputGroup>
+      <AutocompleteInputGroup magnitude={magnitude} id="autocomplete-group-focus">
+        <AutocompleteInput magnitude={magnitude} aria-label="Focused" placeholder="Focused" />
+      </AutocompleteInputGroup>
+      <AutocompleteInputGroup magnitude={magnitude} id="autocomplete-group-invalid">
+        <AutocompleteInput
+          magnitude={magnitude}
+          aria-label="Invalid"
+          placeholder="Invalid"
+          aria-invalid
+          data-invalid=""
+        />
+      </AutocompleteInputGroup>
+      <AutocompleteInputGroup magnitude={magnitude} data-disabled="">
+        <AutocompleteInput
+          magnitude={magnitude}
+          aria-label="Disabled"
+          placeholder="Disabled"
+          disabled
+        />
+      </AutocompleteInputGroup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` input recolors its wrapping frame's border (`has-[[data-invalid]]:
+ * border-danger-strong`) away from the resting frame's. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const group = canvasElement.querySelector(`#${id}`);
+      if (!(group instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(group).borderColor;
+    };
+    await expect(borderColor("autocomplete-group-invalid")).not.toBe(
+      borderColor("autocomplete-group-rest"),
+    );
+  },
+};
+
+/**
+ * The listbox surface rendered statically (Base UI only positions it — the popup is a styled div):
+ * `ListboxItem` rows at `layout="plain"`, with the active-option `data-highlighted=""` and the
+ * `data-disabled=""` states pinned. The second popup pins the no-matches state: `AutocompleteEmpty`
+ * pads itself only via `:not(:empty)`, so the live region is invisible while the list has matches
+ * and shows the tertiary hint once the filter comes up empty.
+ */
+export const Popup: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // Pinning hover/disabled state attributes makes axe evaluate visuals it never sees live
+      // (it does not test :hover, and WCAG 1.4.3 exempts disabled controls). The tertiary-text-
+      // on-hover-fill contrast is a design-token question flagged for the design pass, not a
+      // story bug.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: () => (
+    <div className="flex w-80 flex-col gap-4 [--anchor-width:20rem] [--available-height:18rem]">
+      <ListboxPopup>
+        <AutocompleteEmpty />
+        <ListboxItem id="autocomplete-item-rest" layout="plain" magnitude="md">
+          nginx:1.29-alpine
+        </ListboxItem>
+        <ListboxItem
+          id="autocomplete-item-highlighted"
+          layout="plain"
+          magnitude="md"
+          data-highlighted=""
+        >
+          node:22-slim
+        </ListboxItem>
+        <ListboxItem layout="plain" magnitude="md" data-disabled="">
+          postgres:18
+        </ListboxItem>
+      </ListboxPopup>
+      <ListboxPopup>
+        <AutocompleteEmpty>No matches</AutocompleteEmpty>
+      </ListboxPopup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned `data-highlighted` selector actually compiled — the
+ * highlighted row's background (`data-highlighted:bg-layer-transparent-hover`) computes away from
+ * the resting row's. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const PopupCanary: Story = {
+  ...Popup,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const backgroundColor = (id: string) => {
+      const row = canvasElement.querySelector(`#${id}`);
+      if (!(row instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(row).backgroundColor;
+    };
+    await expect(backgroundColor("autocomplete-item-highlighted")).not.toBe(
+      backgroundColor("autocomplete-item-rest"),
+    );
+  },
+};
diff --git a/packages/propel/src/elements/autocomplete/index.tsx b/packages/propel/src/elements/autocomplete/index.tsx
new file mode 100644
index 00000000..d9a42484
--- /dev/null
+++ b/packages/propel/src/elements/autocomplete/index.tsx
@@ -0,0 +1,3 @@
+export * from "./autocomplete-empty";
+export * from "./autocomplete-input";
+export * from "./autocomplete-input-group";
diff --git a/packages/propel/src/elements/autocomplete/variants.ts b/packages/propel/src/elements/autocomplete/variants.ts
new file mode 100644
index 00000000..37ec2b30
--- /dev/null
+++ b/packages/propel/src/elements/autocomplete/variants.ts
@@ -0,0 +1,40 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { controlGroupClass, controlMagnitude } from "../../internal/control-group";
+import { controlInputClass } from "../../internal/control-input";
+import { listboxEmptyClass } from "../../internal/listbox-empty";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+export const autocompleteInputGroupVariants = cva(
+  cx(
+    // Wraps a separate focusable input → the shared `focus: within` group chrome.
+    controlGroupClass,
+    "w-full items-center gap-2 rounded-lg px-3",
+  ),
+  {
+    variants: {
+      // Height / padding / icon-size per step, matching the Search box (Figma 28/32/36px).
+      // `--node-size` sizes the leading icon slot (and any bare node-slot child).
+      magnitude: {
+        sm: controlMagnitude.sm,
+        md: controlMagnitude.md,
+        lg: controlMagnitude.lg,
+        xl: controlMagnitude.xl,
+      },
+    },
+  },
+);
+
+type AutocompleteInputGroupVariantConfig = VariantProps<typeof autocompleteInputGroupVariants>;
+export type AutocompleteMagnitude = NonNullable<AutocompleteInputGroupVariantConfig["magnitude"]>;
+export type AutocompleteInputGroupVariantProps = StrictVariantProps<
+  typeof autocompleteInputGroupVariants
+>;
+
+export const autocompleteInputVariants = cva(cx(controlInputClass, "flex-1"), {
+  variants: {
+    magnitude: { sm: "text-13", md: "text-14", lg: "text-14", xl: "text-16" },
+  },
+});
+export type AutocompleteInputVariantProps = StrictVariantProps<typeof autocompleteInputVariants>;
+export const autocompleteEmptyVariants = cva(listboxEmptyClass);
diff --git a/packages/propel/src/elements/avatar-group/avatar-group.stories.tsx b/packages/propel/src/elements/avatar-group/avatar-group.stories.tsx
new file mode 100644
index 00000000..d16910e0
--- /dev/null
+++ b/packages/propel/src/elements/avatar-group/avatar-group.stories.tsx
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Avatar, AvatarFallback, AvatarImage, type AvatarMagnitude } from "../avatar/index";
+import { AvatarGroup } from "./index";
+
+// Figma's "Avatar groups" defines three sizes (Small/Base/Large = 16/20/24px).
+const GROUP_MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The `AvatarGroup` elements
+// primitive is just the styled overlapping-stack container (a single `<div>` with the Figma -6px
+// overlap); each `Avatar` inside sets its own size and is pinned to its RESOLVED content state —
+// image OR initials, one child — since the image/fallback swap is Base UI behavior, demonstrated
+// and tested in the components-tier story (which also adds the shared-`magnitude` context).
+const meta = {
+  title: "Elements/AvatarGroup",
+  component: AvatarGroup,
+  subcomponents: { Avatar, AvatarImage, AvatarFallback },
+} satisfies Meta<typeof AvatarGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The overlapping stack; each avatar sets its own `magnitude`. */
+export const TwoMembers: Story = {
+  render: () => (
+    <AvatarGroup>
+      <Avatar magnitude="sm" role="img" aria-label="Ada">
+        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Grace">
+        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+      </Avatar>
+    </AvatarGroup>
+  ),
+};
+
+/** Three avatars, the last one pinned to the initials state (no image). */
+export const ThreeMembers: Story = {
+  render: () => (
+    <AvatarGroup>
+      <Avatar magnitude="sm" role="img" aria-label="Ada">
+        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Grace">
+        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Linus">
+        <AvatarFallback tone="emerald">LT</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+};
+
+/**
+ * The stack at every Figma group size (Small/Base/Large map to 2xs/xs/sm — 16/20/24px); at this
+ * tier each avatar carries its own `magnitude` (the components ready-made shares it via context).
+ */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      {GROUP_MAGNITUDES.map((magnitude) => (
+        <AvatarGroup key={magnitude}>
+          <Avatar magnitude={magnitude} role="img" aria-label="Ada">
+            <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+          </Avatar>
+          <Avatar magnitude={magnitude} role="img" aria-label="Grace">
+            <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+          </Avatar>
+          <Avatar magnitude={magnitude} role="img" aria-label="Linus">
+            <AvatarFallback tone="emerald">LT</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      ))}
+    </div>
+  ),
+};
+
+/** Overflow pattern: a few member images, then a final avatar whose initials show a "+N" count. */
+export const OverflowCount: Story = {
+  render: () => (
+    <AvatarGroup>
+      <Avatar magnitude="sm" role="img" aria-label="Ada Lovelace">
+        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Grace Hopper">
+        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Linus Torvalds">
+        <AvatarImage src="https://i.pravatar.cc/64?img=12" alt="" />
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="4 more members">
+        <AvatarFallback tone="purple">+4</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+};
+
+/**
+ * CSS canary for the group's own compiled styling: `-space-x-1.5` puts a -6px `margin-inline-end`
+ * (the Figma overlap) on every avatar but the last. Initials-only avatars keep it network-free.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const CssCheck: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <AvatarGroup>
+      <Avatar magnitude="sm" role="img" aria-label="Ada">
+        <AvatarFallback tone="orange">AL</AvatarFallback>
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Grace">
+        <AvatarFallback tone="indigo">GH</AvatarFallback>
+      </Avatar>
+      <Avatar magnitude="sm" role="img" aria-label="Linus">
+        <AvatarFallback tone="emerald">LT</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+  play: async ({ canvas }) => {
+    const avatars = canvas.getAllByRole("img");
+    // Non-last members overlap the next by 6px; the last one carries no overlap margin.
+    await expect(avatars[0]).toHaveStyle({ marginRight: "-6px" });
+    await expect(avatars[1]).toHaveStyle({ marginRight: "-6px" });
+    await expect(avatars[2]).toHaveStyle({ marginRight: "0px" });
+  },
+};
diff --git a/packages/propel/src/ui/avatar-group/avatar-group.tsx b/packages/propel/src/elements/avatar-group/avatar-group.tsx
similarity index 100%
rename from packages/propel/src/ui/avatar-group/avatar-group.tsx
rename to packages/propel/src/elements/avatar-group/avatar-group.tsx
diff --git a/packages/propel/src/ui/avatar-group/index.tsx b/packages/propel/src/elements/avatar-group/index.tsx
similarity index 100%
rename from packages/propel/src/ui/avatar-group/index.tsx
rename to packages/propel/src/elements/avatar-group/index.tsx
diff --git a/packages/propel/src/ui/avatar-group/variants.ts b/packages/propel/src/elements/avatar-group/variants.ts
similarity index 100%
rename from packages/propel/src/ui/avatar-group/variants.ts
rename to packages/propel/src/elements/avatar-group/variants.ts
diff --git a/packages/propel/src/elements/avatar/avatar-fallback.tsx b/packages/propel/src/elements/avatar/avatar-fallback.tsx
new file mode 100644
index 00000000..3b9b27df
--- /dev/null
+++ b/packages/propel/src/elements/avatar/avatar-fallback.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type AvatarFallbackVariantProps, avatarFallbackVariants } from "./variants";
+
+export type { AvatarFallbackTone } from "./variants";
+
+/** Props for {@link AvatarFallback}, plus a `tone`. */
+export type AvatarFallbackProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  AvatarFallbackVariantProps;
+
+/**
+ * The styled avatar fallback (colored initials, or the neutral anonymous-icon surface).
+ * Base-UI-agnostic — graft the Base UI `Avatar.Fallback` (shown while the image is
+ * absent/loading/failed) in `components` via `<BaseAvatar.Fallback render={<AvatarFallback/>} />`.
+ */
+export function AvatarFallback({ tone, render, ...props }: AvatarFallbackProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: avatarFallbackVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/avatar/avatar-icon.tsx b/packages/propel/src/elements/avatar/avatar-icon.tsx
similarity index 100%
rename from packages/propel/src/ui/avatar/avatar-icon.tsx
rename to packages/propel/src/elements/avatar/avatar-icon.tsx
diff --git a/packages/propel/src/elements/avatar/avatar-image.tsx b/packages/propel/src/elements/avatar/avatar-image.tsx
new file mode 100644
index 00000000..59d8c9e9
--- /dev/null
+++ b/packages/propel/src/elements/avatar/avatar-image.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { avatarImageVariants } from "./variants";
+
+/** Props for {@link AvatarImage}. */
+export type AvatarImageProps = Omit<useRender.ComponentProps<"img">, "className" | "style">;
+
+/**
+ * The styled avatar image. Base-UI-agnostic — graft the Base UI `Avatar.Image` load-status behavior
+ * in `components` via `<BaseAvatar.Image render={<AvatarImage/>} />`.
+ */
+export function AvatarImage({ render, ...props }: AvatarImageProps) {
+  const defaultProps: useRender.ElementProps<"img"> = { className: avatarImageVariants() };
+  return useRender({ defaultTagName: "img", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/avatar/avatar.stories.tsx b/packages/propel/src/elements/avatar/avatar.stories.tsx
new file mode 100644
index 00000000..5cba147f
--- /dev/null
+++ b/packages/propel/src/elements/avatar/avatar.stories.tsx
@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { User } from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  Avatar,
+  AVATAR_TONES,
+  AvatarFallback,
+  AvatarIcon,
+  AvatarImage,
+  type AvatarMagnitude,
+} from "./index";
+
+const MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+
+// An inline-SVG "photo" so the image state renders deterministically with no network.
+const PHOTO_SRC = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#7dd3fc"/><circle cx="44" cy="18" r="8" fill="#fde047"/><path d="M0 64 24 34l14 16 10-10 16 24Z" fill="#16a34a"/></svg>',
+)}`;
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase — the styled parts render
+// DIRECTLY, with no Base UI grafts. The avatar cvas key off no `data-*`/aria state, so each visual
+// state is simply which child renders (image / initials / icon). Image-load fallback and the
+// `delay` behavior are demonstrated AND tested in Components/Avatar. `meta.component` is the
+// no-variant `AvatarImage` so no props are forced into story args.
+const meta = {
+  title: "Elements/Avatar",
+  component: AvatarImage,
+  subcomponents: { Avatar, AvatarFallback, AvatarIcon },
+} satisfies Meta<typeof AvatarImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Root holding a loaded image. `role="img"` + `aria-label` give the avatar its accessible name. */
+export const Default: Story = {
+  render: () => (
+    <Avatar magnitude="md" role="img" aria-label="Ada Lovelace">
+      <AvatarImage src={PHOTO_SRC} alt="" />
+    </Avatar>
+  ),
+};
+
+/** Every avatar size (Figma 2xs 16px → 3xl 64px). */
+export const Magnitudes: Story = {
+  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 = {
+  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>
+  ),
+};
+
+/**
+ * `AvatarIcon` sizes the anonymous person glyph per magnitude — Figma's explicit icon px values,
+ * not a fixed fraction of the avatar.
+ */
+export const IconMagnitudes: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Avatar key={magnitude} magnitude={magnitude} role="img" aria-label={magnitude}>
+          <AvatarIcon magnitude={magnitude}>
+            <User />
+          </AvatarIcon>
+        </Avatar>
+      ))}
+    </div>
+  ),
+};
+
+/** The three content states: image, initials, and the anonymous person icon (the icon slot). */
+export const States: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Avatar magnitude="lg" role="img" aria-label="Image">
+        <AvatarImage src={PHOTO_SRC} alt="" />
+      </Avatar>
+      <Avatar magnitude="lg" role="img" aria-label="Initials">
+        <AvatarFallback tone="emerald">GH</AvatarFallback>
+      </Avatar>
+      <Avatar magnitude="lg" role="img" aria-label="Anonymous">
+        <AvatarIcon magnitude="lg">
+          <User />
+        </AvatarIcon>
+      </Avatar>
+    </div>
+  ),
+};
+
+/**
+ * The single project-wide CSS check (the allowed rule-2b canary): 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/elements/avatar/avatar.tsx b/packages/propel/src/elements/avatar/avatar.tsx
new file mode 100644
index 00000000..089b6299
--- /dev/null
+++ b/packages/propel/src/elements/avatar/avatar.tsx
@@ -0,0 +1,43 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { avatarToneBgClass, avatarVariants, type AvatarVariantProps } from "./variants";
+
+export type { AvatarMagnitude } from "./variants";
+
+// 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];
+
+// Re-exported for callers (e.g. `WorkspaceAvatar`) that style their own fallback surface.
+// The source of truth lives in `variants.ts`.
+export const initialsToneClass: Record<AvatarTone, string> = avatarToneBgClass;
+
+/**
+ * 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}, plus a `magnitude`. */
+export type AvatarProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  AvatarVariantProps;
+
+/**
+ * The styled avatar container — a single `<span>` holding an `AvatarImage` and/or `AvatarFallback`.
+ * Base-UI-agnostic; graft the Base UI `Avatar.Root` behavior/context in `components` via
+ * `<BaseAvatar.Root render={<Avatar/>} />`. For the ready-made image+initials+icon avatar, use the
+ * `Avatar` from `@plane/propel/components/avatar`.
+ */
+export function Avatar({ magnitude, render, ...props }: AvatarProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: avatarVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/avatar/index.tsx b/packages/propel/src/elements/avatar/index.tsx
similarity index 100%
rename from packages/propel/src/ui/avatar/index.tsx
rename to packages/propel/src/elements/avatar/index.tsx
diff --git a/packages/propel/src/elements/avatar/variants.ts b/packages/propel/src/elements/avatar/variants.ts
new file mode 100644
index 00000000..287c7ce9
--- /dev/null
+++ b/packages/propel/src/elements/avatar/variants.ts
@@ -0,0 +1,80 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { avatarFallbackClass, avatarImageClass, avatarTones } from "../../internal/avatar-shared";
+import { nodeSlotClass } from "../../internal/node-slot";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+export const avatarImageVariants = cva(avatarImageClass);
+
+// 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(avatarFallbackClass, {
+  variants: {
+    tone: avatarTones,
+  },
+});
+
+// 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",
+      },
+    },
+  },
+);
+
+// Initials background utility per tone — the same palette as `avatarFallbackVariants`
+// but exposed as a plain map for consumers (e.g. WorkspaceAvatar) that style their own
+// fallback surface without using `AvatarFallback`. All className decisions live here in
+// variants.ts, not scattered across component files.
+export const avatarToneBgClass = {
+  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",
+} as const;
+
+// The anonymous person-icon slot (the Figma "icon" content state). A node-slot: it
+// sizes whatever single child it's given to the inherited `--node-size`, never baking a
+// size onto the child. `--node-size` is set per magnitude from Figma's explicit "icon"
+// px values (not a fixed fraction of the avatar), and the glyph is tinted muted.
+export const avatarIconVariants = cva(cx(nodeSlotClass, "text-icon-placeholder"), {
+  variants: {
+    magnitude: {
+      "2xs": "[--node-size:0.875rem]", // 14px
+      xs: "[--node-size:0.875rem]", // 14px
+      sm: "[--node-size:1rem]", // 16px
+      md: "[--node-size:1.25rem]", // 20px
+      lg: "[--node-size:1.5rem]", // 24px
+      xl: "[--node-size:1.5rem]", // 24px
+      "2xl": "[--node-size:2rem]", // 32px
+      "3xl": "[--node-size:2rem]", // 32px
+    },
+  },
+});
+
+type AvatarVariantConfig = VariantProps<typeof avatarVariants>;
+export type AvatarMagnitude = NonNullable<AvatarVariantConfig["magnitude"]>;
+export type AvatarVariantProps = StrictVariantProps<typeof avatarVariants>;
+
+export type AvatarFallbackTone = NonNullable<VariantProps<typeof avatarFallbackVariants>["tone"]>;
+export type AvatarFallbackVariantProps = StrictVariantProps<typeof avatarFallbackVariants>;
+
+export type AvatarIconVariantProps = StrictVariantProps<typeof avatarIconVariants>;
diff --git a/packages/propel/src/ui/badge/badge-label.tsx b/packages/propel/src/elements/badge/badge-label.tsx
similarity index 100%
rename from packages/propel/src/ui/badge/badge-label.tsx
rename to packages/propel/src/elements/badge/badge-label.tsx
diff --git a/packages/propel/src/ui/badge/badge.stories.tsx b/packages/propel/src/elements/badge/badge.stories.tsx
similarity index 85%
rename from packages/propel/src/ui/badge/badge.stories.tsx
rename to packages/propel/src/elements/badge/badge.stories.tsx
index 30cf9669..f159850d 100644
--- a/packages/propel/src/ui/badge/badge.stories.tsx
+++ b/packages/propel/src/elements/badge/badge.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check } from "lucide-react";
 
-import { Badge, BadgeIcon, BadgeLabel, type BadgeMagnitude, type BadgeTone } from "./index";
+import { Icon } from "../../internal/icon";
+import { Badge, BadgeLabel, type BadgeMagnitude, type BadgeTone } from "./index";
 
 const TONES: BadgeTone[] = [
   "neutral",
@@ -29,13 +30,15 @@ const MAGNITUDES: BadgeMagnitude[] = ["sm", "md", "lg"];
 //      is static — it has no interaction-state styling — so it gets NO pseudo-states
 //      story; its variation is fully covered by Tones + Magnitudes.
 //
-// These ui stories show the atomic anatomy: each part (`Badge`, `BadgeIcon`,
-// `BadgeLabel`) is a single styled element, composed by hand. The ready-made
-// `Components/Badge` composition wraps the same parts behind convenience props.
+// elements-tier story (rule 2b): a pure UI-configuration showcase. Each part (`Badge`,
+// `BadgeLabel`) is a single styled element, composed by hand, with the internal `Icon`
+// filling the decorative glyph slot. The badge cva keys off no `data-*`/aria state, so
+// there are no pinned states to show. The ready-made `Components/Badge` composition
+// wraps the same parts behind convenience props.
 const meta = {
-  title: "UI/Badge",
+  title: "Elements/Badge",
   component: Badge,
-  subcomponents: { BadgeIcon, BadgeLabel },
+  subcomponents: { BadgeLabel },
   args: {
     tone: "neutral",
     magnitude: "md",
@@ -89,16 +92,19 @@ export const Magnitudes: Story = {
   ),
 };
 
-/** A leading `BadgeIcon`, sized to the magnitude and tinted to the tone. */
+/**
+ * A leading decorative glyph in the shared `Icon` slot, 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}>
-          <BadgeIcon>
+          <Icon>
             <Check />
-          </BadgeIcon>
+          </Icon>
           <BadgeLabel>Done</BadgeLabel>
         </Badge>
       ))}
diff --git a/packages/propel/src/ui/badge/badge.tsx b/packages/propel/src/elements/badge/badge.tsx
similarity index 100%
rename from packages/propel/src/ui/badge/badge.tsx
rename to packages/propel/src/elements/badge/badge.tsx
diff --git a/packages/propel/src/elements/badge/index.tsx b/packages/propel/src/elements/badge/index.tsx
new file mode 100644
index 00000000..9fcdd098
--- /dev/null
+++ b/packages/propel/src/elements/badge/index.tsx
@@ -0,0 +1,2 @@
+export * from "./badge";
+export * from "./badge-label";
diff --git a/packages/propel/src/elements/badge/variants.ts b/packages/propel/src/elements/badge/variants.ts
new file mode 100644
index 00000000..8acb90b9
--- /dev/null
+++ b/packages/propel/src/elements/badge/variants.ts
@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// Badge is the small rounded pill of inline text (a status tag, a "Paid"/"Free"
+// label). Per the designer spec on the Badge issue, every part's static chrome lives
+// in cva here so each part stays a single styled element with no `className` at the
+// boundary.
+//
+// "Always the same" (baked into the base of `badgeVariants`):
+//   pill shape (rounded-full), inline-flex with centered content, the gap between
+//   icon/label/dismiss, font-medium, single-line text (whitespace-nowrap), and the
+//   icon-to-text vertical alignment (leading-none).
+//
+// "Depends (adjustable)" — exposed as required cva variants:
+//   - magnitude: S / Base / Large (height, horizontal padding, text size, node size)
+//   - tone: color/sentiment (neutral, grey, brand, info, …)
+export const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full leading-none font-medium whitespace-nowrap",
+  {
+    variants: {
+      // Figma Size axis. Each step sets height, horizontal padding, text size, and the
+      // CSS custom property `--node-size` consumed by the node-slot children.
+      magnitude: {
+        // S: 18px tall, 4px x-padding, text/12, 14px nodes.
+        sm: "h-[18px] px-1 text-12 [--node-size:0.875rem]",
+        // Base: 20px tall, 6px x-padding, text/13, 14px nodes.
+        md: "h-5 px-1.5 text-13 [--node-size:0.875rem]",
+        // Large: 24px tall, 8px x-padding, text/14, 16px nodes.
+        lg: "h-6 px-2 text-14 [--node-size:1rem]",
+      },
+      // Figma Color/sentiment axis. Label-hue tones map to `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",
+      },
+    },
+  },
+);
+
+// The decorative leading icon at the badge's inline-start (the Figma badge icon). Sizes
+// its single child to the badge's `--node-size` (shared node-slot class) and inherits
+// the tone's text color so the icon tints to match — per the spec, "icon follows the
+// badge's size and color".
+type BadgeVariantConfig = VariantProps<typeof badgeVariants>;
+export type BadgeMagnitude = NonNullable<BadgeVariantConfig["magnitude"]>;
+export type BadgeTone = NonNullable<BadgeVariantConfig["tone"]>;
+export type BadgeVariantProps = StrictVariantProps<typeof badgeVariants>;
+
+// The badge's text label. Single-line (the base already sets `whitespace-nowrap`); kept
+// as its own region so the label and leading/trailing icons compose as siblings.
+export const badgeLabelVariants = cva("min-w-0");
diff --git a/packages/propel/src/ui/banner/banner-actions.tsx b/packages/propel/src/elements/banner/banner-actions.tsx
similarity index 100%
rename from packages/propel/src/ui/banner/banner-actions.tsx
rename to packages/propel/src/elements/banner/banner-actions.tsx
diff --git a/packages/propel/src/ui/banner/banner-body.tsx b/packages/propel/src/elements/banner/banner-body.tsx
similarity index 100%
rename from packages/propel/src/ui/banner/banner-body.tsx
rename to packages/propel/src/elements/banner/banner-body.tsx
diff --git a/packages/propel/src/elements/banner/banner-description.tsx b/packages/propel/src/elements/banner/banner-description.tsx
new file mode 100644
index 00000000..411db3e0
--- /dev/null
+++ b/packages/propel/src/elements/banner/banner-description.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { bannerDescriptionVariants } from "./variants";
+
+export type BannerDescriptionProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/** The banner's supporting message, stacked below the `BannerTitle` inside the `BannerBody`. */
+export function BannerDescription({ render, ...props }: BannerDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: bannerDescriptionVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/banner/banner-icon.tsx b/packages/propel/src/elements/banner/banner-icon.tsx
similarity index 100%
rename from packages/propel/src/ui/banner/banner-icon.tsx
rename to packages/propel/src/elements/banner/banner-icon.tsx
diff --git a/packages/propel/src/ui/banner/banner-title.tsx b/packages/propel/src/elements/banner/banner-title.tsx
similarity index 100%
rename from packages/propel/src/ui/banner/banner-title.tsx
rename to packages/propel/src/elements/banner/banner-title.tsx
diff --git a/packages/propel/src/elements/banner/banner.stories.tsx b/packages/propel/src/elements/banner/banner.stories.tsx
new file mode 100644
index 00000000..fb6c55b4
--- /dev/null
+++ b/packages/propel/src/elements/banner/banner.stories.tsx
@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Info, X } from "lucide-react";
+
+import { Icon } from "../../internal/icon";
+import { Button, ButtonLabel } from "../button/index";
+import { IconButton } from "../icon-button";
+import {
+  Banner,
+  BannerActions,
+  BannerBody,
+  BannerDescription,
+  BannerIcon,
+  type BannerTone,
+  BannerTitle,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase of the atomic banner parts,
+// rendered directly — the strip/card root, the leading icon, the message body (title +
+// description), and the trailing actions. The banner cvas key off no `data-*`/aria state
+// attributes, so `placement` × `tone` is the entire configuration space and nothing needs
+// pinning. Behavior (e.g. a dismiss action's click) is demonstrated and tested in
+// Components/Banner, which composes these parts behind convenience props.
+const TONES: BannerTone[] = ["neutral", "info", "accent", "warning", "danger"];
+
+const meta = {
+  title: "Elements/Banner",
+  component: Banner,
+  subcomponents: {
+    BannerIcon,
+    BannerBody,
+    BannerTitle,
+    BannerDescription,
+    BannerActions,
+  },
+  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>;
+
+/** Assemble the atomic parts: Root › Icon › Body (Title). */
+export const Default: Story = {
+  args: { placement: "page", tone: "neutral" },
+  render: (args) => (
+    <Banner {...args}>
+      <BannerIcon placement={args.placement} tone={args.tone}>
+        <Info />
+      </BannerIcon>
+      <BannerBody placement={args.placement} tone={args.tone}>
+        <BannerTitle>There is something that needs your attention</BannerTitle>
+      </BannerBody>
+    </Banner>
+  ),
+};
+
+/** Every intent (`tone`) side by side — the soft surface + foreground color per meaning. */
+export const Tones: Story = {
+  args: { placement: "inline", tone: "neutral" },
+  argTypes: { tone: { control: false }, placement: { control: false } },
+  render: () => (
+    <div className="flex w-160 flex-col gap-3">
+      {TONES.map((tone) => (
+        <Banner key={tone} placement="inline" tone={tone}>
+          <BannerIcon placement="inline" tone={tone}>
+            <Info />
+          </BannerIcon>
+          <BannerBody placement="inline" tone={tone}>
+            <BannerTitle>There is something that needs your attention</BannerTitle>
+          </BannerBody>
+        </Banner>
+      ))}
+    </div>
+  ),
+};
+
+/** The two scopes (`placement`): the full-width page strip vs the rounded inline card. */
+export const Placements: Story = {
+  args: { placement: "page", tone: "info" },
+  argTypes: { placement: { control: false }, tone: { control: false } },
+  render: () => (
+    <div className="flex w-160 flex-col gap-4">
+      {(["page", "inline"] as const).map((placement) => (
+        <Banner key={placement} placement={placement} tone="info">
+          <BannerIcon placement={placement} tone="info">
+            <Info />
+          </BannerIcon>
+          <BannerBody placement={placement} tone="info">
+            <BannerTitle>There is something that needs your attention</BannerTitle>
+          </BannerBody>
+        </Banner>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The full anatomy from Figma (see the meta's design link): Icon › Body (Title + Description) ›
+ * Actions. `BannerActions` takes any nodes, so the banner composes the styled `Button` and
+ * `IconButton` elements — a ghost, a secondary, and a primary, plus a ghost dismiss control. Pure
+ * chrome here; the dismiss click behavior lives in Components/Banner.
+ */
+export const Anatomy: Story = {
+  args: { placement: "page", tone: "neutral" },
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <Banner {...args}>
+      <BannerIcon placement={args.placement} tone={args.tone}>
+        <Info />
+      </BannerIcon>
+      <BannerBody placement={args.placement} tone={args.tone}>
+        <BannerTitle>There is something that needs your attention</BannerTitle>
+        <BannerDescription>Review the details and pick an action to continue.</BannerDescription>
+      </BannerBody>
+      <BannerActions>
+        <Button sizing="hug" prominence="ghost" tone="neutral" magnitude="sm">
+          <ButtonLabel>Remind me later</ButtonLabel>
+        </Button>
+        <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="sm">
+          <ButtonLabel>Learn more</ButtonLabel>
+        </Button>
+        <Button sizing="hug" prominence="primary" tone="neutral" magnitude="sm">
+          <ButtonLabel>Update now</ButtonLabel>
+        </Button>
+        <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Dismiss">
+          <Icon>
+            <X />
+          </Icon>
+        </IconButton>
+      </BannerActions>
+    </Banner>
+  ),
+};
diff --git a/packages/propel/src/ui/banner/banner.tsx b/packages/propel/src/elements/banner/banner.tsx
similarity index 100%
rename from packages/propel/src/ui/banner/banner.tsx
rename to packages/propel/src/elements/banner/banner.tsx
diff --git a/packages/propel/src/ui/banner/index.tsx b/packages/propel/src/elements/banner/index.tsx
similarity index 100%
rename from packages/propel/src/ui/banner/index.tsx
rename to packages/propel/src/elements/banner/index.tsx
diff --git a/packages/propel/src/ui/banner/variants.ts b/packages/propel/src/elements/banner/variants.ts
similarity index 100%
rename from packages/propel/src/ui/banner/variants.ts
rename to packages/propel/src/elements/banner/variants.ts
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-item.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb-item.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb-item.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb-item.tsx
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-link.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb-link.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb-link.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb-link.tsx
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-list.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb-list.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb-list.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb-list.tsx
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-page.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb-page.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb-page.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb-page.tsx
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-separator.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb-separator.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb-separator.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb-separator.tsx
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-trigger.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb-trigger.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb-trigger.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb-trigger.tsx
diff --git a/packages/propel/src/elements/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb.stories.tsx
new file mode 100644
index 00000000..b0c7466b
--- /dev/null
+++ b/packages/propel/src/elements/breadcrumb/breadcrumb.stories.tsx
@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, ChevronRight, Ellipsis, Layers } from "lucide-react";
+
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbTrigger,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase of the atomic breadcrumb parts
+// (each a Base-UI-agnostic `useRender` element rendering a single element). Nothing from Base UI is
+// wired here — the state Base UI would set is pinned statically (`data-popup-open=""` on the
+// trigger; `aria-current="page"` is baked into `BreadcrumbPage`) and hover is forced via the
+// pseudo-states addon. Menu grafting, keyboard, and aria behavior are demonstrated AND tested in
+// Components/Breadcrumb. `meta.component` is a no-variant, no-required-prop part so Storybook
+// forces nothing into `args`.
+const meta = {
+  title: "Elements/Breadcrumb",
+  component: BreadcrumbList,
+  subcomponents: {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbTrigger,
+  },
+} satisfies Meta<typeof BreadcrumbList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Root › List › Item › (Link | Page), with Separator between crumbs. The `elements` separator is a
+ * bare slot, so the divider glyph is passed as `children`; `BreadcrumbPage` bakes
+ * `aria-current="page"` onto the last, non-navigable crumb.
+ */
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb aria-label="Breadcrumb">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
+            Plane
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <ChevronRight />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
+            Projects
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <ChevronRight />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
+            Design
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <ChevronRight />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Work items</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+/**
+ * The menu-crumb chrome assembled from atoms: `BreadcrumbTrigger` (`group` adds the `group/trigger`
+ * marker) holding an internal `Icon`, the label, and a `DisclosureIndicator` chevron. In the app,
+ * Base UI's `Menu.Trigger` grafts onto it and sets `data-popup-open` while its menu is open — here
+ * that attribute is pinned statically, which both shifts the pill to the open palette and rotates
+ * the chevron down. The icon-only form (no `group`, no indicator) is the collapsed-crumbs ellipsis
+ * crumb; being icon-only it requires an `aria-label`.
+ */
+export const Trigger: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <BreadcrumbTrigger group>
+        <Icon tint="tertiary" magnitude="md">
+          <Layers />
+        </Icon>
+        Plane Design
+        <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
+          <ChevronDown />
+        </DisclosureIndicator>
+      </BreadcrumbTrigger>
+      <BreadcrumbTrigger group data-popup-open="">
+        <Icon tint="tertiary" magnitude="md">
+          <Layers />
+        </Icon>
+        Plane Design
+        <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
+          <ChevronDown />
+        </DisclosureIndicator>
+      </BreadcrumbTrigger>
+      <BreadcrumbTrigger aria-label="Show more breadcrumbs">
+        <Icon tint="tertiary" magnitude="md">
+          <Ellipsis />
+        </Icon>
+      </BreadcrumbTrigger>
+    </div>
+  ),
+};
+
+/**
+ * Every interaction state of the interactive crumbs, side by side. Hover on the link and trigger is
+ * forced via the pseudo-states addon; the trigger's open state is pinned with the
+ * `data-popup-open=""` attribute Base UI's `Menu.Trigger` would set; the current page is the static
+ * `BreadcrumbPage` (non-interactive, `aria-current="page"` baked in).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: ["#breadcrumb-link-hover", "#breadcrumb-trigger-hover"] },
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <div className="flex items-center gap-3">
+        <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
+          Link
+        </BreadcrumbLink>
+        <BreadcrumbLink
+          id="breadcrumb-link-hover"
+          href="#"
+          onClick={(event) => event.preventDefault()}
+        >
+          Link hover
+        </BreadcrumbLink>
+        <BreadcrumbPage>Current page</BreadcrumbPage>
+      </div>
+      <div className="flex items-center gap-3">
+        <BreadcrumbTrigger group>
+          Trigger
+          <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </BreadcrumbTrigger>
+        <BreadcrumbTrigger id="breadcrumb-trigger-hover" group>
+          Trigger hover
+          <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </BreadcrumbTrigger>
+        <BreadcrumbTrigger group data-popup-open="">
+          Trigger open
+          <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </BreadcrumbTrigger>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb.tsx b/packages/propel/src/elements/breadcrumb/breadcrumb.tsx
similarity index 100%
rename from packages/propel/src/ui/breadcrumb/breadcrumb.tsx
rename to packages/propel/src/elements/breadcrumb/breadcrumb.tsx
diff --git a/packages/propel/src/elements/breadcrumb/index.tsx b/packages/propel/src/elements/breadcrumb/index.tsx
new file mode 100644
index 00000000..b0430f99
--- /dev/null
+++ b/packages/propel/src/elements/breadcrumb/index.tsx
@@ -0,0 +1,7 @@
+export * from "./breadcrumb";
+export * from "./breadcrumb-item";
+export * from "./breadcrumb-link";
+export * from "./breadcrumb-list";
+export * from "./breadcrumb-page";
+export * from "./breadcrumb-separator";
+export * from "./breadcrumb-trigger";
diff --git a/packages/propel/src/elements/breadcrumb/variants.ts b/packages/propel/src/elements/breadcrumb/variants.ts
new file mode 100644
index 00000000..f6bbb7aa
--- /dev/null
+++ b/packages/propel/src/elements/breadcrumb/variants.ts
@@ -0,0 +1,45 @@
+import { cva, cx } from "class-variance-authority";
+
+import { nodeSlotClass } from "../../internal/node-slot";
+
+/** Chrome for `BreadcrumbLink` — a navigable (hoverable) crumb anchor. */
+export const breadcrumbLinkVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary transition-colors hover:bg-layer-transparent-hover hover:text-primary",
+);
+
+/** Chrome for `BreadcrumbPage` — the current page (non-interactive) crumb. */
+export const breadcrumbPageVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-primary",
+);
+
+/**
+ * All-in-one chrome for a menu-trigger crumb: base pill styles, hover/open-state shifts, cursor,
+ * and an optional `group/trigger` marker so descendant chevrons can react to the popup open state.
+ */
+export const breadcrumbTriggerVariants = cva(
+  "inline-flex cursor-default items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary transition-colors [--node-size:0.875rem] hover:bg-layer-transparent-hover hover:text-primary data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
+  {
+    variants: {
+      /** Adds `group/trigger` so descendant elements can use `group-data-popup-open/trigger:*`. */
+      group: {
+        true: "group group/trigger",
+        false: "",
+      },
+    },
+  },
+);
+
+/** The `<li>` wrapper for every crumb (link, page, trigger). */
+export const breadcrumbItemVariants = cva("inline-flex items-center");
+
+/**
+ * The visual divider between crumbs. Sizes any child icon to `--node-size` via the shared node-slot
+ * class, so callers pass raw SVGs without extra wrappers. Chevron icons are RTL-mirrored via
+ * `rtl:[&>svg]:-scale-x-100`.
+ */
+export const breadcrumbSeparatorVariants = cva(
+  cx(nodeSlotClass, "px-1 text-icon-tertiary [--node-size:0.875rem] rtl:[&>svg]:-scale-x-100"),
+);
+
+/** The `<ol>` that carries the ordered trail of crumbs. */
+export const breadcrumbListVariants = cva("flex items-center gap-0.5");
diff --git a/packages/propel/src/ui/button/button-label.tsx b/packages/propel/src/elements/button/button-label.tsx
similarity index 100%
rename from packages/propel/src/ui/button/button-label.tsx
rename to packages/propel/src/elements/button/button-label.tsx
diff --git a/packages/propel/src/elements/button/button.stories.tsx b/packages/propel/src/elements/button/button.stories.tsx
new file mode 100644
index 00000000..37a85f19
--- /dev/null
+++ b/packages/propel/src/elements/button/button.stories.tsx
@@ -0,0 +1,246 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LoaderCircle, Plus } from "lucide-react";
+
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
+import {
+  Button,
+  ButtonLabel,
+  type ButtonMagnitude,
+  type ButtonProminence,
+  type ButtonTone,
+} from "./index";
+
+const PROMINENCES: ButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
+const MAGNITUDES: ButtonMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// The prominence×tone pairings the control chrome defines a palette for (danger skips
+// tertiary/ghost).
+const PALETTES: { prominence: ButtonProminence; tone: ButtonTone }[] = [
+  { prominence: "primary", tone: "neutral" },
+  { prominence: "secondary", tone: "neutral" },
+  { prominence: "tertiary", tone: "neutral" },
+  { prominence: "ghost", tone: "neutral" },
+  { prominence: "primary", tone: "danger" },
+  { prominence: "secondary", tone: "danger" },
+];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `Button` is a Base-UI-agnostic
+// styled `<button>` rendered DIRECTLY — no Base UI graft — with every visual axis shown and every
+// visual state pinned statically via the attributes its cva keys off (`disabled`, `aria-busy`) or
+// forced by the pseudo-states addon (hover/active/focus-visible are CSS pseudo-classes). Grafting,
+// keyboard, and aria behavior are demonstrated AND tested in the ready-made Button
+// (Components/Button), which composes this primitive.
+const meta = {
+  title: "Elements/Button",
+  component: Button,
+  // The button's anatomy parts; the ready-made Button (Components/Button) composes them.
+  subcomponents: { ButtonLabel },
+  args: {
+    children: "Button",
+    prominence: "primary",
+    tone: "neutral",
+    magnitude: "md",
+    sizing: "hug",
+  },
+  render: ({ children, ...props }) => (
+    <Button {...props}>
+      <ButtonLabel>{children}</ButtonLabel>
+    </Button>
+  ),
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Every prominence (Figma "Type") side by side at the default magnitude. */
+export const Prominences: Story = {
+  argTypes: { prominence: { control: false }, children: { control: false } },
+  render: ({ tone, magnitude, sizing }) => (
+    <div className="flex items-center gap-3">
+      {PROMINENCES.map((prominence) => (
+        <Button
+          key={prominence}
+          prominence={prominence}
+          tone={tone}
+          magnitude={magnitude}
+          sizing={sizing}
+        >
+          <ButtonLabel>{prominence}</ButtonLabel>
+        </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: ({ magnitude, sizing }) => (
+    <div className="flex items-center gap-3">
+      <Button tone="neutral" prominence="primary" magnitude={magnitude} sizing={sizing}>
+        <ButtonLabel>Neutral</ButtonLabel>
+      </Button>
+      <Button tone="danger" prominence="primary" magnitude={magnitude} sizing={sizing}>
+        <ButtonLabel>Danger fill</ButtonLabel>
+      </Button>
+      <Button tone="danger" prominence="secondary" magnitude={magnitude} sizing={sizing}>
+        <ButtonLabel>Danger outline</ButtonLabel>
+      </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: ({ prominence, tone, sizing }) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Button
+          key={magnitude}
+          prominence={prominence}
+          tone={tone}
+          magnitude={magnitude}
+          sizing={sizing}
+        >
+          <ButtonLabel>{magnitude}</ButtonLabel>
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
+/** `sizing="fill"` fills the container (e.g. a form row or mobile CTA). */
+export const Stretch: Story = {
+  argTypes: { sizing: { control: false }, children: { control: false } },
+  render: ({ prominence, tone, magnitude }) => (
+    <div className="flex w-64 flex-col gap-2">
+      <Button prominence={prominence} tone={tone} magnitude={magnitude} sizing="hug">
+        <ButtonLabel>Auto width</ButtonLabel>
+      </Button>
+      <Button prominence={prominence} tone={tone} magnitude={magnitude} sizing="fill">
+        <ButtonLabel>Full width</ButtonLabel>
+      </Button>
+    </div>
+  ),
+};
+
+/**
+ * Every visual state of every palette, pinned statically — one row per prominence×tone pairing the
+ * chrome defines. Hover / active / focus-visible are CSS pseudo-classes, forced by the
+ * pseudo-states addon; `disabled` is the native attribute the `disabled:` palette keys off; busy
+ * pins the `aria-busy` the ready-made Button sets while `loading` (the `ButtonLabel` dims via
+ * `group-aria-busy:` and the spinner reads as the active affordance).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: PALETTES.map(({ prominence, tone }) => `#button-${prominence}-${tone}-hover`),
+      active: PALETTES.map(({ prominence, tone }) => `#button-${prominence}-${tone}-active`),
+      focusVisible: PALETTES.map(({ prominence, tone }) => `#button-${prominence}-${tone}-focus`),
+    },
+  },
+  render: ({ magnitude, sizing }) => (
+    <div className="flex flex-col gap-3">
+      {PALETTES.map(({ prominence, tone }) => (
+        <div key={`${prominence}-${tone}`} className="flex items-center gap-3">
+          <Button prominence={prominence} tone={tone} magnitude={magnitude} sizing={sizing}>
+            <ButtonLabel>Default</ButtonLabel>
+          </Button>
+          <Button
+            id={`button-${prominence}-${tone}-hover`}
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            sizing={sizing}
+          >
+            <ButtonLabel>Hover</ButtonLabel>
+          </Button>
+          <Button
+            id={`button-${prominence}-${tone}-active`}
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            sizing={sizing}
+          >
+            <ButtonLabel>Active</ButtonLabel>
+          </Button>
+          <Button
+            id={`button-${prominence}-${tone}-focus`}
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            sizing={sizing}
+          >
+            <ButtonLabel>Focus</ButtonLabel>
+          </Button>
+          <Button
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            sizing={sizing}
+            disabled
+          >
+            <ButtonLabel>Disabled</ButtonLabel>
+          </Button>
+          <Button
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            sizing={sizing}
+            aria-busy
+            aria-disabled
+          >
+            <Spinner>
+              <LoaderCircle />
+            </Spinner>
+            <ButtonLabel>Busy</ButtonLabel>
+          </Button>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The atomic button is composed from named parts: the internal `Icon` sizes a decorative
+ * leading/trailing node to the button's `--node-size`, `ButtonLabel` holds the text (and dims under
+ * `aria-busy`), and the internal `Spinner` is the loading indicator. The busy state is pinned here
+ * via the `aria-busy`/`aria-disabled` the ready-made Button (Components/Button) sets while
+ * `loading` — that ready-made also lays these parts out for you and adds the soft-disabled
+ * behavior.
+ */
+export const Anatomy: Story = {
+  args: { children: undefined },
+  argTypes: { children: { control: false } },
+  render: ({ prominence, tone, magnitude, sizing }) => (
+    <div className="flex items-center gap-3">
+      <Button prominence={prominence} tone={tone} magnitude={magnitude} sizing={sizing}>
+        <Icon>
+          <Plus />
+        </Icon>
+        <ButtonLabel>With icon</ButtonLabel>
+      </Button>
+      <Button
+        prominence={prominence}
+        tone={tone}
+        magnitude={magnitude}
+        sizing={sizing}
+        aria-busy
+        aria-disabled
+      >
+        <Spinner>
+          <LoaderCircle />
+        </Spinner>
+        <ButtonLabel>Loading</ButtonLabel>
+      </Button>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/button/button.tsx b/packages/propel/src/elements/button/button.tsx
new file mode 100644
index 00000000..72dd56fb
--- /dev/null
+++ b/packages/propel/src/elements/button/button.tsx
@@ -0,0 +1,25 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ButtonVariantProps, buttonVariants } from "./variants";
+
+export type { ButtonMagnitude, ButtonProminence, ButtonSizing, ButtonTone } from "./variants";
+
+export type ButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  ButtonVariantProps;
+
+/**
+ * The styled action button element: a `<button>` built on propel's design tokens. Pick its weight
+ * with `prominence` (Figma Type: primary·secondary·tertiary·ghost), the error palette with `tone`,
+ * the size with `magnitude`, and full-width with `sizing` — all required, so consumers choose
+ * explicitly. Base-UI-agnostic — graft Base UI's `Button` behavior in `components` via `<BaseButton
+ * render={<Button/>} />`. For a navigation link wearing this chrome, render it as an `<a>`
+ * (`nativeButton={false}` + `render={<a href=… />}` on the ready-made). `children` is passed
+ * through; it is not a variant.
+ */
+export function Button({ prominence, tone, magnitude, sizing, render, ...props }: ButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: buttonVariants({ prominence, tone, magnitude, sizing }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/button/index.tsx b/packages/propel/src/elements/button/index.tsx
new file mode 100644
index 00000000..198d3fd9
--- /dev/null
+++ b/packages/propel/src/elements/button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./button-label";
diff --git a/packages/propel/src/elements/button/variants.ts b/packages/propel/src/elements/button/variants.ts
new file mode 100644
index 00000000..96521ea5
--- /dev/null
+++ b/packages/propel/src/elements/button/variants.ts
@@ -0,0 +1,22 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { buttonGeometryVariants } from "../../internal/button-geometry";
+import { composeVariants } from "../../internal/compose-variants";
+import { controlChromeVariants } from "../../internal/control-chrome";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/** The full Button className: the shared control chrome composed with the label-button geometry. */
+export const buttonVariants = composeVariants(controlChromeVariants, buttonGeometryVariants);
+
+type ButtonVariantConfig = VariantProps<typeof buttonVariants>;
+export type ButtonProminence = NonNullable<ButtonVariantConfig["prominence"]>;
+export type ButtonTone = NonNullable<ButtonVariantConfig["tone"]>;
+export type ButtonMagnitude = NonNullable<ButtonVariantConfig["magnitude"]>;
+export type ButtonSizing = NonNullable<ButtonVariantConfig["sizing"]>;
+
+// No `defaultVariants` today, so every axis is required.
+export type ButtonVariantProps = StrictVariantProps<typeof buttonVariants>;
+
+// The text label inside a Button. When the parent button is `aria-busy` (loading) it dims via the
+// `group-aria-busy:` sibling of the `group` class on the root.
+export const buttonLabelVariants = cva("group-aria-busy:opacity-50");
diff --git a/packages/propel/src/elements/calendar/calendar.stories.tsx b/packages/propel/src/elements/calendar/calendar.stories.tsx
new file mode 100644
index 00000000..5a7f5dff
--- /dev/null
+++ b/packages/propel/src/elements/calendar/calendar.stories.tsx
@@ -0,0 +1,501 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cx } from "class-variance-authority";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { calendarClassNames } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. react-day-picker isn't
+// decomposable into `useRender` styled parts, so this family's styled contract is the
+// `calendarClassNames` map — and rendering the styled parts DIRECTLY means applying those classes
+// to the static DOM react-day-picker v10 emits (root › months › (nav, month › caption › month
+// grid)), with every visual state pinned via the modifier classes the picker would add to the
+// gridcell (`selected`, `range-start`, `range-middle`, `range-end`, `today`, `disabled`,
+// `outside`, `hidden`) and the `aria-selected`/`disabled` attributes it would set. No
+// react-day-picker import, no behavior: month navigation, selection, keyboard, and grid semantics
+// are demonstrated and tested in Components/Calendar. The map has no variant axes, so the state
+// matrix IS the whole configuration space.
+const meta = {
+  title: "Elements/Calendar",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1286-12844",
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// react-day-picker renders the weekday header row inside an `aria-hidden` <thead> (day buttons
+// carry their own full-date labels), so the header cells need no aria-labels of their own.
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+type GridDay = { label: number; iso: string; outside: boolean };
+
+// January 2025 laid out Sunday-first: January 1st falls on a Wednesday, so the grid leads with
+// three December days and trails with one February day — five fixed weeks, no reliance on "today".
+const JANUARY_2025_WEEKS = Array.from({ length: 5 }, (_, weekIndex) => ({
+  key: `week-${weekIndex + 1}`,
+  days: Array.from({ length: 7 }, (_, dayIndex): GridDay => {
+    // Offset from Wednesday, January 1st back to the grid's Sunday, December 29th start.
+    const date = new Date(2025, 0, weekIndex * 7 + dayIndex - 2);
+    const pad = (value: number) => String(value).padStart(2, "0");
+    return {
+      label: date.getDate(),
+      iso: `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,
+      outside: date.getMonth() !== 0,
+    };
+  }),
+}));
+
+/**
+ * The full month anatomy, statically pinned: the bordered/elevated `root` surface, the absolutely
+ * positioned `nav` icon buttons (16px `chevron` glyphs, RTL-mirrored), the `caption_label`, the
+ * `aria-hidden` weekday header row, and five `week` rows of 40px round `day` cells. January 24th is
+ * pinned selected (`selected` modifier class + `aria-selected` on the gridcell → solid accent
+ * button, inverse text), January 15th is pinned as today (`today` → accent semibold text), and the
+ * December/February days wear the dimmed `outside` look.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className={calendarClassNames.root}>
+      <div className={calendarClassNames.months}>
+        <nav className={calendarClassNames.nav}>
+          <button
+            type="button"
+            aria-label="Go to the Previous Month"
+            className={calendarClassNames.button_previous}
+          >
+            <ChevronLeft aria-hidden className={calendarClassNames.chevron} />
+          </button>
+          <button
+            type="button"
+            aria-label="Go to the Next Month"
+            className={calendarClassNames.button_next}
+          >
+            <ChevronRight aria-hidden className={calendarClassNames.chevron} />
+          </button>
+        </nav>
+        <div className={calendarClassNames.month}>
+          <div className={calendarClassNames.month_caption}>
+            <span className={calendarClassNames.caption_label}>January 2025</span>
+          </div>
+          <table role="grid" aria-label="January 2025" className={calendarClassNames.month_grid}>
+            <thead aria-hidden>
+              <tr className={calendarClassNames.weekdays}>
+                {WEEKDAYS.map((weekday) => (
+                  <th key={weekday} scope="col" className={calendarClassNames.weekday}>
+                    {weekday}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {JANUARY_2025_WEEKS.map((week) => (
+                <tr key={week.key} className={calendarClassNames.week}>
+                  {week.days.map((day) => {
+                    const selected = day.iso === "2025-01-24";
+                    const today = day.iso === "2025-01-15";
+                    return (
+                      <td
+                        key={day.iso}
+                        role="gridcell"
+                        data-day={day.iso}
+                        aria-selected={selected || undefined}
+                        className={cx(
+                          calendarClassNames.day,
+                          selected && calendarClassNames.selected,
+                          today && calendarClassNames.today,
+                          day.outside && calendarClassNames.outside,
+                        )}
+                      >
+                        <button type="button" className={calendarClassNames.day_button}>
+                          {day.label}
+                        </button>
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * The range look, statically pinned across January 13th–20th: every day in the range carries the
+ * `selected` modifier + `aria-selected` (react-day-picker sets both on all range cells), the
+ * endpoints add the `range-start`/`range-end` marker classes (solid accent button, outer corner of
+ * the cell rounded off), and the days between add `range-middle` (button reset to transparent so
+ * only the cell's soft in-range fill shows) — a continuous range reads as one pill. The grid pins
+ * `aria-multiselectable` the way react-day-picker does in range mode.
+ */
+export const RangeSelection: Story = {
+  render: () => (
+    <div className={calendarClassNames.root}>
+      <div className={calendarClassNames.months}>
+        <nav className={calendarClassNames.nav}>
+          <button
+            type="button"
+            aria-label="Go to the Previous Month"
+            className={calendarClassNames.button_previous}
+          >
+            <ChevronLeft aria-hidden className={calendarClassNames.chevron} />
+          </button>
+          <button
+            type="button"
+            aria-label="Go to the Next Month"
+            className={calendarClassNames.button_next}
+          >
+            <ChevronRight aria-hidden className={calendarClassNames.chevron} />
+          </button>
+        </nav>
+        <div className={calendarClassNames.month}>
+          <div className={calendarClassNames.month_caption}>
+            <span className={calendarClassNames.caption_label}>January 2025</span>
+          </div>
+          <table
+            role="grid"
+            aria-multiselectable
+            aria-label="January 2025"
+            className={calendarClassNames.month_grid}
+          >
+            <thead aria-hidden>
+              <tr className={calendarClassNames.weekdays}>
+                {WEEKDAYS.map((weekday) => (
+                  <th key={weekday} scope="col" className={calendarClassNames.weekday}>
+                    {weekday}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {JANUARY_2025_WEEKS.map((week) => (
+                <tr key={week.key} className={calendarClassNames.week}>
+                  {week.days.map((day) => {
+                    const rangeStart = day.iso === "2025-01-13";
+                    const rangeEnd = day.iso === "2025-01-20";
+                    const rangeMiddle = day.iso > "2025-01-13" && day.iso < "2025-01-20";
+                    const selected = rangeStart || rangeMiddle || rangeEnd;
+                    return (
+                      <td
+                        key={day.iso}
+                        role="gridcell"
+                        data-day={day.iso}
+                        aria-selected={selected || undefined}
+                        className={cx(
+                          calendarClassNames.day,
+                          selected && calendarClassNames.selected,
+                          rangeStart && calendarClassNames.range_start,
+                          rangeMiddle && calendarClassNames.range_middle,
+                          rangeEnd && calendarClassNames.range_end,
+                          day.outside && calendarClassNames.outside,
+                        )}
+                      >
+                        <button type="button" className={calendarClassNames.day_button}>
+                          {day.label}
+                        </button>
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable day-cell and nav state side by side, in one `root` frame:
+ *
+ * - **Resting / Hovered** — the transparent 40px round button; hover (forced via pseudo-states)
+ *   paints the transparent-layer wash.
+ * - **Today** — accent semibold text; **Selected** — solid accent button with inverse text;
+ *   **Selected today** — the solid accent button wins (`today`'s accent text is guarded behind
+ *   `:not([aria-selected])`), only the semibold weight survives.
+ * - **Disabled** — muted text, `pointer-events: none` (pinned with both the `disabled` modifier class
+ *   and the native `disabled` attribute react-day-picker sets on the button).
+ * - **Outside** — the dimmed adjacent-month look.
+ * - **Range start / middle / end** — the range pill: endpoints solid with the outer cell corner
+ *   rounded, middles transparent over the cell's soft fill.
+ * - **Hidden** — an `invisible` empty cell that keeps its grid slot (react-day-picker renders no
+ *   button in a hidden cell).
+ * - **Nav** — a natively `disabled` chevron button dims to 50% opacity next to a hovered one.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#elements-calendar-day-hover", "#elements-calendar-nav-hover"],
+    },
+  },
+  render: () => (
+    <div className={calendarClassNames.root}>
+      <div className={calendarClassNames.months}>
+        <nav className={calendarClassNames.nav}>
+          <button
+            type="button"
+            disabled
+            aria-label="Go to the Previous Month"
+            className={calendarClassNames.button_previous}
+          >
+            <ChevronLeft aria-hidden className={calendarClassNames.chevron} />
+          </button>
+          <button
+            id="elements-calendar-nav-hover"
+            type="button"
+            aria-label="Go to the Next Month"
+            className={calendarClassNames.button_next}
+          >
+            <ChevronRight aria-hidden className={calendarClassNames.chevron} />
+          </button>
+        </nav>
+        <div className={calendarClassNames.month}>
+          <div className={calendarClassNames.month_caption}>
+            <span className={calendarClassNames.caption_label}>Day states</span>
+          </div>
+          <table role="grid" aria-label="Day states" className={calendarClassNames.month_grid}>
+            <tbody>
+              <tr className={calendarClassNames.week}>
+                <td role="gridcell" className={calendarClassNames.day}>
+                  <button
+                    type="button"
+                    aria-label="Day 1"
+                    className={calendarClassNames.day_button}
+                  >
+                    1
+                  </button>
+                </td>
+                <td role="gridcell" className={calendarClassNames.day}>
+                  <button
+                    id="elements-calendar-day-hover"
+                    type="button"
+                    aria-label="Day 2, hovered"
+                    className={calendarClassNames.day_button}
+                  >
+                    2
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  className={cx(calendarClassNames.day, calendarClassNames.today)}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 3, today"
+                    className={calendarClassNames.day_button}
+                  >
+                    3
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  aria-selected
+                  className={cx(calendarClassNames.day, calendarClassNames.selected)}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 4, selected"
+                    className={calendarClassNames.day_button}
+                  >
+                    4
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  aria-selected
+                  className={cx(
+                    calendarClassNames.day,
+                    calendarClassNames.selected,
+                    calendarClassNames.today,
+                  )}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 5, selected today"
+                    className={calendarClassNames.day_button}
+                  >
+                    5
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  className={cx(calendarClassNames.day, calendarClassNames.disabled)}
+                >
+                  <button
+                    type="button"
+                    disabled
+                    aria-label="Day 6, disabled"
+                    className={calendarClassNames.day_button}
+                  >
+                    6
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  className={cx(calendarClassNames.day, calendarClassNames.outside)}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 7, outside month"
+                    className={calendarClassNames.day_button}
+                  >
+                    7
+                  </button>
+                </td>
+              </tr>
+              <tr className={calendarClassNames.week}>
+                <td role="gridcell" className={calendarClassNames.day}>
+                  <button
+                    type="button"
+                    aria-label="Day 8"
+                    className={calendarClassNames.day_button}
+                  >
+                    8
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  aria-selected
+                  className={cx(
+                    calendarClassNames.day,
+                    calendarClassNames.selected,
+                    calendarClassNames.range_start,
+                  )}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 9, range start"
+                    className={calendarClassNames.day_button}
+                  >
+                    9
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  aria-selected
+                  className={cx(
+                    calendarClassNames.day,
+                    calendarClassNames.selected,
+                    calendarClassNames.range_middle,
+                  )}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 10, in range"
+                    className={calendarClassNames.day_button}
+                  >
+                    10
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  aria-selected
+                  className={cx(
+                    calendarClassNames.day,
+                    calendarClassNames.selected,
+                    calendarClassNames.range_middle,
+                  )}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 11, in range"
+                    className={calendarClassNames.day_button}
+                  >
+                    11
+                  </button>
+                </td>
+                <td
+                  role="gridcell"
+                  aria-selected
+                  className={cx(
+                    calendarClassNames.day,
+                    calendarClassNames.selected,
+                    calendarClassNames.range_end,
+                  )}
+                >
+                  <button
+                    type="button"
+                    aria-label="Day 12, range end"
+                    className={calendarClassNames.day_button}
+                  >
+                    12
+                  </button>
+                </td>
+                <td role="gridcell" className={calendarClassNames.day}>
+                  <button
+                    type="button"
+                    aria-label="Day 13"
+                    className={calendarClassNames.day_button}
+                  >
+                    13
+                  </button>
+                </td>
+                <td
+                  id="elements-calendar-hidden-day"
+                  role="gridcell"
+                  className={cx(calendarClassNames.day, calendarClassNames.hidden)}
+                />
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Hidden CSS canary (rule 2b): asserts the pinned modifier classes compile to real styling — the
+ * selected button swaps to the solid accent fill, today's button recolors relative to resting, a
+ * disabled button computes `pointer-events: none`, a range-middle CELL paints the soft in-range
+ * fill while a plain cell stays transparent, and the hidden cell computes `visibility: hidden`.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement }) => {
+    const cellOf = (button: HTMLElement) => {
+      const cell = button.closest("td");
+      if (!cell) throw new Error("day button not inside a gridcell");
+      return cell;
+    };
+    const resting = canvas.getByRole("button", { name: "Day 1" });
+
+    // `selected` swaps the day button to the solid accent fill.
+    const selected = canvas.getByRole("button", { name: "Day 4, selected" });
+    await expect(getComputedStyle(selected).backgroundColor).not.toBe(
+      getComputedStyle(resting).backgroundColor,
+    );
+
+    // `today` recolors the (unselected) day's text to the accent tone.
+    const today = canvas.getByRole("button", { name: "Day 3, today" });
+    await expect(getComputedStyle(today).color).not.toBe(getComputedStyle(resting).color);
+
+    // `disabled` makes the day button non-interactive.
+    const disabled = canvas.getByRole("button", { name: "Day 6, disabled" });
+    await expect(getComputedStyle(disabled).pointerEvents).toBe("none");
+
+    // `range-middle` paints the soft in-range fill on the CELL, and its button reset beats
+    // `selected`'s accent fill (the cell carries both classes) so the button stays transparent.
+    const inRange = canvas.getByRole("button", { name: "Day 10, in range" });
+    await expect(getComputedStyle(cellOf(inRange)).backgroundColor).not.toBe(
+      getComputedStyle(cellOf(resting)).backgroundColor,
+    );
+    await expect(getComputedStyle(inRange).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+
+    // `hidden` keeps the grid slot but computes to `visibility: hidden`.
+    const hidden = canvasElement.querySelector("#elements-calendar-hidden-day");
+    if (!(hidden instanceof HTMLElement)) throw new Error("missing pinned hidden cell");
+    await expect(getComputedStyle(hidden).visibility).toBe("hidden");
+  },
+};
diff --git a/packages/propel/src/elements/calendar/index.tsx b/packages/propel/src/elements/calendar/index.tsx
new file mode 100644
index 00000000..522a9d3b
--- /dev/null
+++ b/packages/propel/src/elements/calendar/index.tsx
@@ -0,0 +1,5 @@
+// react-day-picker isn't decomposable into `useRender` styled parts — its styled anatomy is a
+// `classNames` map, so `calendarClassNames` is this family's styled contract. The `DayPicker`
+// behavior grafts onto it in `components/calendar` (`<DayPicker classNames={calendarClassNames} />`),
+// the react-day-picker analog of grafting Base UI behavior onto a styled `elements` element via `render`.
+export { calendarClassNames } from "./variants";
diff --git a/packages/propel/src/elements/calendar/variants.ts b/packages/propel/src/elements/calendar/variants.ts
new file mode 100644
index 00000000..c74464e7
--- /dev/null
+++ b/packages/propel/src/elements/calendar/variants.ts
@@ -0,0 +1,70 @@
+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 aria-disabled:opacity-50",
+  button_next:
+    "inline-flex size-7 items-center justify-center rounded-md text-icon-tertiary hover:bg-layer-transparent-hover aria-disabled:opacity-50",
+  // The nav chevron: 16px, mirrored in RTL. react-day-picker passes this class to its `Chevron`
+  // component (default or a custom one), so the icon needs no className of its own.
+  chevron: "size-4 rtl:-scale-x-100",
+  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/elements/checkbox-group/checkbox-group.stories.tsx b/packages/propel/src/elements/checkbox-group/checkbox-group.stories.tsx
new file mode 100644
index 00000000..86a530b3
--- /dev/null
+++ b/packages/propel/src/elements/checkbox-group/checkbox-group.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Checkbox, CheckboxIndicator } from "../checkbox/index";
+import { CheckboxGroup, type CheckboxGroupDensity } from "./index";
+
+const DENSITIES: CheckboxGroupDensity[] = ["comfortable", "compact"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled `CheckboxGroup` is a
+// plain flex-column `<div>` whose only axis is `density`; its cva keys off no `data-*`/aria state
+// of its own. Base UI's `CheckboxGroup` behavior (the `role="group"` semantics + the shared
+// selected-values array) grafts onto it in `components` — here that state is pinned statically via
+// the attributes Base UI would set (`role="group"`, and `data-checked`/`aria-checked` on each
+// pinned box). Group behavior is demonstrated AND tested in Components/CheckboxGroup.
+const meta = {
+  title: "Elements/CheckboxGroup",
+  component: CheckboxGroup,
+  args: { density: "comfortable" },
+  render: (args) => (
+    <CheckboxGroup {...args} role="group" aria-label="Allowed protocols">
+      <Checkbox role="checkbox" aria-checked="false" aria-label="HTTP" />
+      <Checkbox role="checkbox" aria-checked="true" aria-label="HTTPS" data-checked="">
+        <CheckboxIndicator>
+          <Check aria-hidden />
+        </CheckboxIndicator>
+      </Checkbox>
+      <Checkbox role="checkbox" aria-checked="false" aria-label="SSH" />
+    </CheckboxGroup>
+  ),
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A stacked column of atomic boxes; the second is pinned checked (`data-checked`). */
+export const Default: Story = {};
+
+/** The full `density` axis: `comfortable` keeps a gap between rows, `compact` removes it. */
+export const Densities: Story = {
+  argTypes: { density: { control: false } },
+  render: () => (
+    <div className="flex items-start gap-10">
+      {DENSITIES.map((density) => (
+        <CheckboxGroup key={density} density={density} role="group" aria-label={density}>
+          <Checkbox role="checkbox" aria-checked="true" aria-label="Daily" data-checked="">
+            <CheckboxIndicator>
+              <Check aria-hidden />
+            </CheckboxIndicator>
+          </Checkbox>
+          <Checkbox role="checkbox" aria-checked="false" aria-label="Weekly" />
+          <Checkbox role="checkbox" aria-checked="false" aria-label="Monthly" />
+        </CheckboxGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * CSS canary: the `density` cva compiled — `compact` collapses the row gap to zero while
+ * `comfortable` keeps one. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
+ */
+export const DensitiesCanary: Story = {
+  ...Densities,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const comfortable = canvas.getByRole("group", { name: "comfortable" });
+    const compact = canvas.getByRole("group", { name: "compact" });
+    await expect(getComputedStyle(compact).rowGap).toBe("0px");
+    await expect(getComputedStyle(comfortable).rowGap).not.toBe("0px");
+  },
+};
diff --git a/packages/propel/src/elements/checkbox-group/checkbox-group.tsx b/packages/propel/src/elements/checkbox-group/checkbox-group.tsx
new file mode 100644
index 00000000..0d2a9613
--- /dev/null
+++ b/packages/propel/src/elements/checkbox-group/checkbox-group.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type CheckboxGroupVariantProps, checkboxGroupVariants } from "./variants";
+
+export type { CheckboxGroupDensity } from "./variants";
+
+export type CheckboxGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  CheckboxGroupVariantProps;
+
+/**
+ * The styled checkbox-group container. Base-UI-agnostic — graft the group behavior (the shared
+ * selected-values state) in `components` via `<BaseCheckboxGroup render={<CheckboxGroup/>} />`.
+ */
+export function CheckboxGroup({ density, render, ...props }: CheckboxGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: checkboxGroupVariants({ density }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/checkbox-group/index.tsx b/packages/propel/src/elements/checkbox-group/index.tsx
similarity index 100%
rename from packages/propel/src/ui/checkbox-group/index.tsx
rename to packages/propel/src/elements/checkbox-group/index.tsx
diff --git a/packages/propel/src/elements/checkbox-group/variants.ts b/packages/propel/src/elements/checkbox-group/variants.ts
new file mode 100644
index 00000000..10c83bb2
--- /dev/null
+++ b/packages/propel/src/elements/checkbox-group/variants.ts
@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+
+import { optionGroupVariants } from "../../internal/option-group";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+export const checkboxGroupVariants = optionGroupVariants;
+
+export type CheckboxGroupDensity = NonNullable<
+  VariantProps<typeof checkboxGroupVariants>["density"]
+>;
+export type CheckboxGroupVariantProps = StrictVariantProps<typeof checkboxGroupVariants>;
diff --git a/packages/propel/src/elements/checkbox/checkbox-indeterminate-indicator.tsx b/packages/propel/src/elements/checkbox/checkbox-indeterminate-indicator.tsx
new file mode 100644
index 00000000..f78df367
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/checkbox-indeterminate-indicator.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { checkboxIndeterminateIndicatorVariants } from "./variants";
+
+export type CheckboxIndeterminateIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The dash shown while a `Checkbox` is indeterminate. Graft in `components` via a second
+ * `<BaseCheckbox.Indicator render={<CheckboxIndeterminateIndicator/>} />`; Base UI mounts it when
+ * checked or indeterminate and its cva keeps it hidden unless `data-indeterminate` is present, so
+ * only the dash (not the check) shows in the mixed state. Decorative — the box carries a11y.
+ * Children — typically a lucide `Minus` — pass through.
+ */
+export function CheckboxIndeterminateIndicator({
+  render,
+  ...props
+}: CheckboxIndeterminateIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: checkboxIndeterminateIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/checkbox/checkbox-indicator.tsx b/packages/propel/src/elements/checkbox/checkbox-indicator.tsx
new file mode 100644
index 00000000..eb78f841
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/checkbox-indicator.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { checkboxIndicatorVariants } from "./variants";
+
+export type CheckboxIndicatorProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The CHECK mark shown inside a checked `Checkbox`. Graft in `components` via
+ * `<BaseCheckbox.Indicator render={<CheckboxIndicator/>} />` — Base UI mounts it only while checked
+ * or indeterminate (no `keepMounted`), so the box is empty when unchecked; its cva hides it when
+ * `data-indeterminate` is present, so the check disappears in the mixed state (the dash takes
+ * over). Decorative — the box carries the a11y state. Children — typically a lucide `Check` — pass
+ * through.
+ */
+export function CheckboxIndicator({ render, ...props }: CheckboxIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: checkboxIndicatorVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/checkbox/checkbox-label.tsx b/packages/propel/src/elements/checkbox/checkbox-label.tsx
new file mode 100644
index 00000000..5edf6fc7
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/checkbox-label.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { checkboxLabelVariants } from "./variants";
+
+export type CheckboxLabelProps = Omit<useRender.ComponentProps<"label">, "className" | "style">;
+
+/**
+ * The clickable row chip that wraps a `Checkbox` box with an optional `CheckboxIcon` and the label
+ * text, matching the Figma "Checkbox with label" component. Associate it with the box via `htmlFor`
+ * so clicking anywhere in the row toggles the box. The row reads its disabled look off the wrapped
+ * `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled` prop.
+ */
+export function CheckboxLabel({ render, ...props }: CheckboxLabelProps) {
+  const defaultProps: useRender.ElementProps<"label"> = { className: checkboxLabelVariants() };
+  return useRender({ defaultTagName: "label", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/checkbox/checkbox.stories.tsx b/packages/propel/src/elements/checkbox/checkbox.stories.tsx
new file mode 100644
index 00000000..72062568
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/checkbox.stories.tsx
@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, Minus, Repeat } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import {
+  Checkbox,
+  CheckboxIndeterminateIndicator,
+  CheckboxIndicator,
+  CheckboxLabel,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI import, no graft — with every visual state pinned statically via the
+// `data-*`/aria attributes Base UI's Checkbox would set (`data-checked`, `data-indeterminate`,
+// `data-disabled`, `data-invalid`, `aria-checked`). `Checkbox` is the bare box (the styled
+// `Checkbox.Root` target); the tick and dash are the `CheckboxIndicator` (check, hidden while
+// `data-indeterminate`) and `CheckboxIndeterminateIndicator` (dash, shown only while
+// `data-indeterminate`); `CheckboxLabel` is the clickable row chip. Toggling, `Field` wiring,
+// keyboard, and label-click behavior are demonstrated and tested in Components/Checkbox.
+const meta = {
+  title: "Elements/Checkbox",
+  component: Checkbox,
+  subcomponents: {
+    CheckboxIndicator,
+    CheckboxIndeterminateIndicator,
+    CheckboxLabel,
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The box with both indicators, pinned checked via `data-checked` (Base UI mounts both indicator
+ * parts while checked; the dash keeps itself hidden until `data-indeterminate`). The pinned
+ * `role`/`aria-checked`/`aria-label` mirror what Base UI would set on the rendered box.
+ */
+export const Default: Story = {
+  render: () => (
+    <Checkbox role="checkbox" aria-checked="true" aria-label="Example" data-checked="">
+      <CheckboxIndicator data-checked="">
+        <Check aria-hidden />
+      </CheckboxIndicator>
+      <CheckboxIndeterminateIndicator data-checked="">
+        <Minus aria-hidden />
+      </CheckboxIndeterminateIndicator>
+    </Checkbox>
+  ),
+};
+
+/**
+ * Every visual state, pinned statically. Resting is the bare box (Base UI mounts no indicator while
+ * unchecked); `data-checked` fills the accent and shows the check; `data-indeterminate` hides the
+ * check and reveals the dash; focus-visible (forced via pseudo-states) draws the accent ring;
+ * `data-disabled` dims the border, fill, and glyph; `data-invalid` is the error look — a STATE, not
+ * a prop: inside an invalid `Field.Root` Base UI sets it on the box (any host can set it directly,
+ * as here) to recolor the resting border to danger. Once checked, the invalid box keeps the same
+ * accent fill as every other checked state.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { focusVisible: ["#elements-checkbox-focus-visible"] },
+  },
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Checkbox role="checkbox" aria-checked="false" aria-label="Unchecked" />
+      <Checkbox role="checkbox" aria-checked="true" aria-label="Checked" data-checked="">
+        <CheckboxIndicator data-checked="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-checked="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
+      <Checkbox
+        role="checkbox"
+        aria-checked="mixed"
+        aria-label="Indeterminate"
+        data-indeterminate=""
+      >
+        <CheckboxIndicator data-indeterminate="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-indeterminate="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
+      <Checkbox
+        id="elements-checkbox-focus-visible"
+        role="checkbox"
+        aria-checked="false"
+        aria-label="Focus-visible"
+      />
+      <Checkbox
+        role="checkbox"
+        aria-checked="false"
+        aria-disabled="true"
+        aria-label="Disabled"
+        data-disabled=""
+      />
+      <Checkbox
+        role="checkbox"
+        aria-checked="true"
+        aria-disabled="true"
+        aria-label="Disabled checked"
+        data-disabled=""
+        data-checked=""
+      >
+        <CheckboxIndicator data-disabled="" data-checked="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-disabled="" data-checked="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
+      <Checkbox
+        role="checkbox"
+        aria-checked="mixed"
+        aria-disabled="true"
+        aria-label="Disabled indeterminate"
+        data-disabled=""
+        data-indeterminate=""
+      >
+        <CheckboxIndicator data-disabled="" data-indeterminate="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-disabled="" data-indeterminate="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
+      <Checkbox role="checkbox" aria-checked="false" aria-label="Invalid" data-invalid="" />
+      <Checkbox
+        role="checkbox"
+        aria-checked="true"
+        aria-label="Invalid checked"
+        data-invalid=""
+        data-checked=""
+      >
+        <CheckboxIndicator data-invalid="" data-checked="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-invalid="" data-checked="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
+    </div>
+  ),
+};
+
+/**
+ * Hidden CSS canary: asserts the pinned `data-*` states compile to real styling — the
+ * `data-invalid` border and `data-checked` fill differ from resting, the invalid+checked box keeps
+ * the same accent fill as the plain checked box, and inside the indeterminate box the check
+ * computes `display: none` while the dash computes `inline-flex`. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCssCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const resting = canvas.getByRole("checkbox", { name: "Unchecked" });
+    const checked = canvas.getByRole("checkbox", { name: "Checked" });
+    const invalid = canvas.getByRole("checkbox", { name: "Invalid" });
+    // `data-invalid` recolors the resting border to danger.
+    await expect(getComputedStyle(invalid).borderColor).not.toBe(
+      getComputedStyle(resting).borderColor,
+    );
+    // `data-checked` swaps the bordered box for the accent fill.
+    await expect(getComputedStyle(checked).backgroundColor).not.toBe(
+      getComputedStyle(resting).backgroundColor,
+    );
+    // Once checked, the invalid box keeps the same accent fill as the plain checked box.
+    const invalidChecked = canvas.getByRole("checkbox", { name: "Invalid checked" });
+    await expect(getComputedStyle(invalidChecked).backgroundColor).toBe(
+      getComputedStyle(checked).backgroundColor,
+    );
+    // In the mixed state the check hides itself and the dash reveals itself off `data-indeterminate`.
+    const indeterminate = canvas.getByRole("checkbox", { name: "Indeterminate" });
+    const [check, dash] = Array.from(indeterminate.children) as HTMLElement[];
+    await expect(getComputedStyle(check).display).toBe("none");
+    await expect(getComputedStyle(dash).display).not.toBe("none");
+  },
+};
+
+/**
+ * The labeled row assembled from the atomic parts: a `CheckboxLabel` chip wrapping the box, an
+ * optional `Icon` slot, and the text. The hovered row (forced via pseudo-states) shows the row's
+ * hover wash; the disabled row shows the label reading its look off the wrapped box — `:has()` on
+ * the box's `data-disabled` cancels the hover wash and switches to the not-allowed cursor, no
+ * `disabled` prop needed. In the ready-made (Components/Checkbox) the row is associated via
+ * `htmlFor`/`id`, so clicking anywhere in it toggles the box.
+ */
+export const Labeled: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: ["#elements-checkbox-label-hover"] },
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-2">
+      <CheckboxLabel>
+        <Checkbox
+          role="checkbox"
+          aria-checked="true"
+          aria-label="Sync automatically"
+          data-checked=""
+        >
+          <CheckboxIndicator data-checked="">
+            <Check aria-hidden />
+          </CheckboxIndicator>
+        </Checkbox>
+        <Icon tint="secondary" magnitude="sm">
+          <Repeat aria-hidden />
+        </Icon>
+        Sync automatically
+      </CheckboxLabel>
+      <CheckboxLabel id="elements-checkbox-label-hover">
+        <Checkbox role="checkbox" aria-checked="false" aria-label="Hovered row" />
+        Hovered row
+      </CheckboxLabel>
+      <CheckboxLabel>
+        <Checkbox
+          role="checkbox"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-label="Disabled row"
+          data-disabled=""
+        />
+        Disabled row
+      </CheckboxLabel>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/checkbox/checkbox.tsx b/packages/propel/src/elements/checkbox/checkbox.tsx
new file mode 100644
index 00000000..4900b1a1
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/checkbox.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { checkboxVariants } from "./variants";
+
+export type CheckboxProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled checkbox box. Base-UI-agnostic — graft the checkbox behavior in `components` via
+ * `<BaseCheckbox.Root render={<Checkbox/>} />`. Base UI renders a `<span role="checkbox">` with
+ * `aria-checked` (including `mixed` for indeterminate); the check/dash indicators pass through as
+ * children. The danger look is a STATE, not a prop: inside an invalid `Field.Root`, Base UI
+ * propagates `data-invalid` here and the box recolors its border to `danger`.
+ */
+export function Checkbox({ render, ...props }: CheckboxProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: checkboxVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/checkbox/index.tsx b/packages/propel/src/elements/checkbox/index.tsx
new file mode 100644
index 00000000..9bd8871c
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/index.tsx
@@ -0,0 +1,4 @@
+export * from "./checkbox";
+export * from "./checkbox-indicator";
+export * from "./checkbox-indeterminate-indicator";
+export * from "./checkbox-label";
diff --git a/packages/propel/src/elements/checkbox/variants.ts b/packages/propel/src/elements/checkbox/variants.ts
new file mode 100644
index 00000000..a9a66a96
--- /dev/null
+++ b/packages/propel/src/elements/checkbox/variants.ts
@@ -0,0 +1,34 @@
+import { cva, cx } from "class-variance-authority";
+
+import { checkboxBoxVariants } from "../../internal/checkbox-box";
+import { nodeSlotClass } from "../../internal/node-slot";
+
+// The box look lives in `internal/checkbox-box` so it can be shared with the menu's checkbox
+// indicator (rule 4). `Checkbox` renders it directly — same signature, so delegate to it.
+export const checkboxVariants = checkboxBoxVariants;
+
+// the CHECK indicator: shown when checked, hidden when indeterminate
+export const checkboxIndicatorVariants = cva(
+  cx(nodeSlotClass, "text-current", "data-indeterminate:hidden"),
+);
+// the INDETERMINATE (dash) indicator: a second Checkbox.Indicator that shows ONLY when indeterminate.
+// NOTE: do NOT use nodeSlotClass here — its bare `inline-flex` would fight the default `hidden`.
+// Spell out the node sizing + center, default hidden, reveal on data-indeterminate:
+export const checkboxIndeterminateIndicatorVariants = cva(
+  cx(
+    "hidden items-center justify-center data-indeterminate:inline-flex [&>img]:size-(--node-size) [&>svg]:size-(--node-size)",
+    "text-current",
+  ),
+);
+
+// The clickable label row that wraps the box + optional icon + label text. The row reads its
+// disabled state off the wrapped `Checkbox` (Base UI — and `Field.Root` — set `data-disabled` on
+// it) via `:has()`, so it needs no `disabled` prop: it cancels the hover background and shows the
+// not-allowed cursor whenever a descendant is disabled.
+export const checkboxLabelVariants = cva(
+  cx(
+    "inline-flex items-center gap-2 rounded-sm px-2 py-1",
+    "text-13 text-secondary transition-colors",
+    "cursor-pointer not-has-[[data-disabled]]:hover:bg-layer-transparent-hover has-[[data-disabled]]:cursor-not-allowed",
+  ),
+);
diff --git a/packages/propel/src/elements/circular-progress/circular-progress-indicator.tsx b/packages/propel/src/elements/circular-progress/circular-progress-indicator.tsx
new file mode 100644
index 00000000..b926607e
--- /dev/null
+++ b/packages/propel/src/elements/circular-progress/circular-progress-indicator.tsx
@@ -0,0 +1,30 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type CircularProgressIndicatorVariantProps,
+  circularProgressIndicatorVariants,
+} from "./variants";
+
+/** Props for {@link CircularProgressIndicator}. */
+export type CircularProgressIndicatorProps = Omit<
+  useRender.ComponentProps<"circle">,
+  "className" | "style"
+> &
+  CircularProgressIndicatorVariantProps;
+
+/**
+ * The toned arc proportional to the value (the circular analogue of `ProgressIndicator`). `tone`
+ * drives the stroke color. Pass the geometry (`cx` / `cy` / `r` / `strokeWidth` / `strokeDasharray`
+ * / `strokeDashoffset` / `strokeLinecap`) as SVG attributes.
+ */
+export function CircularProgressIndicator({
+  tone,
+  render,
+  ...props
+}: CircularProgressIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"circle"> = {
+    className: circularProgressIndicatorVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "circle", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/circular-progress/circular-progress-svg.tsx b/packages/propel/src/elements/circular-progress/circular-progress-svg.tsx
new file mode 100644
index 00000000..c2133586
--- /dev/null
+++ b/packages/propel/src/elements/circular-progress/circular-progress-svg.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { circularProgressSvgVariants } from "./variants";
+
+/** Props for {@link CircularProgressSvg}. */
+export type CircularProgressSvgProps = Omit<useRender.ComponentProps<"svg">, "className" | "style">;
+
+/**
+ * The SVG viewport of the circular ring. Fills its `CircularProgress` box and holds the
+ * `CircularProgressTrack` + `CircularProgressIndicator` circles. Decorative (the `CircularProgress`
+ * root carries the `progressbar` a11y), so it is `aria-hidden`. Pass a `viewBox` matching the ring
+ * box so one SVG user unit equals one pixel.
+ */
+export function CircularProgressSvg({ render, ...props }: CircularProgressSvgProps) {
+  const defaultProps: useRender.ElementProps<"svg"> = {
+    "aria-hidden": "true",
+    fill: "none",
+    className: circularProgressSvgVariants(),
+  };
+  return useRender({ defaultTagName: "svg", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/circular-progress/circular-progress-track.tsx b/packages/propel/src/elements/circular-progress/circular-progress-track.tsx
new file mode 100644
index 00000000..894a76f1
--- /dev/null
+++ b/packages/propel/src/elements/circular-progress/circular-progress-track.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { circularProgressTrackVariants } from "./variants";
+
+/** Props for {@link CircularProgressTrack}. */
+export type CircularProgressTrackProps = Omit<
+  useRender.ComponentProps<"circle">,
+  "className" | "style"
+>;
+
+/**
+ * The full subtle ring behind the arc (the circular analogue of `ProgressTrack`). Pass the geometry
+ * (`cx` / `cy` / `r` / `strokeWidth`) as SVG attributes; the low-emphasis stroke color is baked
+ * in.
+ */
+export function CircularProgressTrack({ render, ...props }: CircularProgressTrackProps) {
+  const defaultProps: useRender.ElementProps<"circle"> = {
+    className: circularProgressTrackVariants(),
+  };
+  return useRender({ defaultTagName: "circle", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/circular-progress/circular-progress.stories.tsx b/packages/propel/src/elements/circular-progress/circular-progress.stories.tsx
new file mode 100644
index 00000000..587a587f
--- /dev/null
+++ b/packages/propel/src/elements/circular-progress/circular-progress.stories.tsx
@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  CircularProgress,
+  CircularProgressIndicator,
+  type CircularProgressIndicatorProps,
+  type CircularProgressProps,
+  CircularProgressSvg,
+  CircularProgressTrack,
+} from "./index";
+
+type CircularProgressMagnitude = NonNullable<CircularProgressProps["magnitude"]>;
+type CircularProgressIndicatorTone = NonNullable<CircularProgressIndicatorProps["tone"]>;
+
+const MAGNITUDES: CircularProgressMagnitude[] = ["sm", "md"];
+const TONES: CircularProgressIndicatorTone[] = ["brand", "success", "warning", "danger"];
+
+// Circle geometry per magnitude (mirrors the ready-made's Figma geometry): a 16px (sm) / 20px (md)
+// box holding a 2px-stroke ring; centerline radius = (diameter - stroke) / 2 -> 6 (sm) / 8 (md).
+const GEOMETRY: Record<CircularProgressMagnitude, { box: number; radius: number }> = {
+  sm: { box: 16, radius: 6 },
+  md: { box: 20, radius: 8 },
+};
+const STROKE = 2;
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The ring parts are
+// Base-UI-agnostic styled elements rendered DIRECTLY — no Base UI graft — with the `progressbar`
+// aria Base UI's `Progress.Root` would set (`role="progressbar"`, `aria-valuenow`/`-min`/`-max`,
+// the accessible name) pinned statically on the ring box. The arc is pure SVG geometry
+// (`strokeDasharray`/`strokeDashoffset`), so every visual state is a static configuration. The
+// live value model is demonstrated AND tested in the ready-made CircularProgress
+// (Components/CircularProgress), which composes these parts.
+const meta = {
+  title: "Elements/CircularProgress",
+  component: CircularProgress,
+  subcomponents: { CircularProgressSvg, CircularProgressTrack, CircularProgressIndicator },
+  args: { magnitude: "md" },
+  render: ({ magnitude, ...props }) => {
+    const { box, radius } = GEOMETRY[magnitude];
+    const circumference = 2 * Math.PI * radius;
+    return (
+      <CircularProgress
+        {...props}
+        magnitude={magnitude}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={60}
+        aria-label="Sync progress"
+      >
+        <CircularProgressSvg viewBox={`0 0 ${box} ${box}`}>
+          <CircularProgressTrack cx={box / 2} cy={box / 2} r={radius} strokeWidth={STROKE} />
+          <CircularProgressIndicator
+            tone="brand"
+            cx={box / 2}
+            cy={box / 2}
+            r={radius}
+            strokeWidth={STROKE}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={circumference * 0.4}
+          />
+        </CircularProgressSvg>
+      </CircularProgress>
+    );
+  },
+} satisfies Meta<typeof CircularProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Arc color by signal: `brand` accent, `success`/`warning`/`danger` outcome. */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: ({ magnitude }) => {
+    const { box, radius } = GEOMETRY[magnitude];
+    const circumference = 2 * Math.PI * radius;
+    return (
+      <div className="flex items-center gap-3">
+        {TONES.map((tone) => (
+          <CircularProgress
+            key={tone}
+            magnitude={magnitude}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={60}
+            aria-label={`${tone} ring`}
+          >
+            <CircularProgressSvg viewBox={`0 0 ${box} ${box}`}>
+              <CircularProgressTrack cx={box / 2} cy={box / 2} r={radius} strokeWidth={STROKE} />
+              <CircularProgressIndicator
+                tone={tone}
+                cx={box / 2}
+                cy={box / 2}
+                r={radius}
+                strokeWidth={STROKE}
+                strokeLinecap="round"
+                strokeDasharray={circumference}
+                strokeDashoffset={circumference * 0.4}
+              />
+            </CircularProgressSvg>
+          </CircularProgress>
+        ))}
+      </div>
+    );
+  },
+};
+
+/** Diameter: `sm` 16px / `md` 20px — the geometry attributes follow the box. */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => {
+        const { box, radius } = GEOMETRY[magnitude];
+        const circumference = 2 * Math.PI * radius;
+        return (
+          <CircularProgress
+            key={magnitude}
+            magnitude={magnitude}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={60}
+            aria-label={`${magnitude} ring`}
+          >
+            <CircularProgressSvg viewBox={`0 0 ${box} ${box}`}>
+              <CircularProgressTrack cx={box / 2} cy={box / 2} r={radius} strokeWidth={STROKE} />
+              <CircularProgressIndicator
+                tone="brand"
+                cx={box / 2}
+                cy={box / 2}
+                r={radius}
+                strokeWidth={STROKE}
+                strokeLinecap="round"
+                strokeDasharray={circumference}
+                strokeDashoffset={circumference * 0.4}
+              />
+            </CircularProgressSvg>
+          </CircularProgress>
+        );
+      })}
+    </div>
+  ),
+};
+
+/**
+ * The arc sweep is the value made visible: `strokeDashoffset = circumference × (1 − fraction)`,
+ * pinned here at fixed fractions from empty to complete (the ready-made computes this from
+ * `value`).
+ */
+export const Values: Story = {
+  parameters: { controls: { disable: true } },
+  render: ({ magnitude }) => {
+    const { box, radius } = GEOMETRY[magnitude];
+    const circumference = 2 * Math.PI * radius;
+    return (
+      <div className="flex items-center gap-3">
+        {[0, 25, 50, 75, 100].map((value) => (
+          <CircularProgress
+            key={value}
+            magnitude={magnitude}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={value}
+            aria-label={`${value}% ring`}
+          >
+            <CircularProgressSvg viewBox={`0 0 ${box} ${box}`}>
+              <CircularProgressTrack cx={box / 2} cy={box / 2} r={radius} strokeWidth={STROKE} />
+              <CircularProgressIndicator
+                tone="brand"
+                cx={box / 2}
+                cy={box / 2}
+                r={radius}
+                strokeWidth={STROKE}
+                strokeLinecap="round"
+                strokeDasharray={circumference}
+                strokeDashoffset={circumference * (1 - value / 100)}
+              />
+            </CircularProgressSvg>
+          </CircularProgress>
+        ))}
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/elements/circular-progress/circular-progress.tsx b/packages/propel/src/elements/circular-progress/circular-progress.tsx
new file mode 100644
index 00000000..62d69b52
--- /dev/null
+++ b/packages/propel/src/elements/circular-progress/circular-progress.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type CircularProgressVariantProps, circularProgressVariants } from "./variants";
+
+/** Props for {@link CircularProgress}. */
+export type CircularProgressProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  CircularProgressVariantProps;
+
+/**
+ * The styled circular ring box that sizes the ring (`magnitude` `sm` 16px / `md` 20px).
+ * Base-UI-agnostic — graft the progress behavior (the `progressbar` role + `aria-valuenow`) in
+ * `components` via `<BaseProgress.Root render={<CircularProgress/>} />`. Compose a
+ * `CircularProgressSvg` (holding `CircularProgressTrack` + `CircularProgressIndicator`) inside it.
+ */
+export function CircularProgress({ magnitude, render, ...props }: CircularProgressProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: circularProgressVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/circular-progress/index.tsx b/packages/propel/src/elements/circular-progress/index.tsx
similarity index 100%
rename from packages/propel/src/ui/circular-progress/index.tsx
rename to packages/propel/src/elements/circular-progress/index.tsx
diff --git a/packages/propel/src/elements/circular-progress/variants.ts b/packages/propel/src/elements/circular-progress/variants.ts
new file mode 100644
index 00000000..25878b51
--- /dev/null
+++ b/packages/propel/src/elements/circular-progress/variants.ts
@@ -0,0 +1,52 @@
+import { cva } from "class-variance-authority";
+
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/**
+ * Circular ring root variants. `magnitude` sets the diameter of the ring box. The arc and track
+ * circles fill the box; geometry (radius, dash) is passed to those parts as SVG attributes.
+ */
+export const circularProgressVariants = cva("group/ring shrink-0", {
+  variants: {
+    magnitude: { sm: "size-4", md: "size-5" },
+  },
+});
+
+/**
+ * The circular ring's SVG viewport. Fills its `CircularProgress` box; while the root (which carries
+ * `group/ring`) is `data-indeterminate`, the whole ring spins so the fixed partial arc reads as
+ * activity.
+ */
+export const circularProgressSvgVariants = cva(
+  "block size-full group-data-indeterminate/ring:animate-spin",
+);
+
+/**
+ * The full subtle ring behind the arc. Strokes with the same `layer-3-selected` surface token the
+ * linear track fills with, so both read as the same low-emphasis track and re-tint together.
+ */
+export const circularProgressTrackVariants = cva("[stroke:var(--bg-layer-3-selected)]");
+
+/**
+ * The toned arc proportional to the value, with rounded caps. `tone` drives the stroke color. The
+ * arc starts at 12 o'clock (`-rotate-90`, `origin-center` so the sweep stays clockwise in RTL). The
+ * dash offset (the value model) is passed as an SVG attribute.
+ */
+export const circularProgressIndicatorVariants = cva(
+  "origin-center -rotate-90 transition-[stroke-dashoffset] duration-300 ease-out",
+  {
+    variants: {
+      tone: {
+        brand: "[stroke:var(--bg-accent-primary)]",
+        success: "[stroke:var(--bg-success-primary)]",
+        warning: "[stroke:var(--bg-warning-primary)]",
+        danger: "[stroke:var(--bg-danger-primary)]",
+      },
+    },
+  },
+);
+
+export type CircularProgressVariantProps = StrictVariantProps<typeof circularProgressVariants>;
+export type CircularProgressIndicatorVariantProps = StrictVariantProps<
+  typeof circularProgressIndicatorVariants
+>;
diff --git a/packages/propel/src/elements/collapsible/collapsible-panel-content.tsx b/packages/propel/src/elements/collapsible/collapsible-panel-content.tsx
new file mode 100644
index 00000000..8beb860e
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/collapsible-panel-content.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { collapsiblePanelContentVariants } from "./variants";
+
+export type CollapsiblePanelContentProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The padded inner content of a `CollapsiblePanel`. The padding lives here rather than on the panel
+ * itself, because the panel animates its height open/closed and padding there would offset the
+ * measured height.
+ */
+export function CollapsiblePanelContent({ render, ...props }: CollapsiblePanelContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: collapsiblePanelContentVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/collapsible/collapsible-panel.tsx b/packages/propel/src/elements/collapsible/collapsible-panel.tsx
new file mode 100644
index 00000000..1453ea61
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/collapsible-panel.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { collapsiblePanelVariants } from "./variants";
+
+export type CollapsiblePanelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled collapsible content region. Animates open/closed using Base UI's
+ * `--collapsible-panel-height`. Base-UI-agnostic — graft the collapsible behavior in `components`
+ * via `<BaseCollapsible.Panel render={<CollapsiblePanel/>} />`.
+ */
+export function CollapsiblePanel({ render, ...props }: CollapsiblePanelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: collapsiblePanelVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/collapsible/collapsible-trigger-title.tsx b/packages/propel/src/elements/collapsible/collapsible-trigger-title.tsx
new file mode 100644
index 00000000..e76c8a37
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/collapsible-trigger-title.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { collapsibleTriggerTitleVariants } from "./variants";
+
+export type CollapsibleTriggerTitleProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trigger's label. Grows to fill the trigger row so a trailing `CollapsibleTriggerIndicator`
+ * sits at the inline-end edge.
+ */
+export function CollapsibleTriggerTitle({ render, ...props }: CollapsibleTriggerTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: collapsibleTriggerTitleVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/collapsible/collapsible-trigger.tsx b/packages/propel/src/elements/collapsible/collapsible-trigger.tsx
new file mode 100644
index 00000000..b2d2a331
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/collapsible-trigger.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { collapsibleTriggerVariants } from "./variants";
+
+export type CollapsibleTriggerProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * The styled disclosure trigger button. Base-UI-agnostic — graft the collapsible behavior in
+ * `components` via `<BaseCollapsible.Trigger render={<CollapsibleTrigger/>} />`, which sets
+ * `aria-expanded`/`aria-controls` and reflects open state as `[data-panel-open]`.
+ */
+export function CollapsibleTrigger({ render, ...props }: CollapsibleTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: collapsibleTriggerVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/collapsible/collapsible.stories.tsx b/packages/propel/src/elements/collapsible/collapsible.stories.tsx
new file mode 100644
index 00000000..287ff50c
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/collapsible.stories.tsx
@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import {
+  CollapsiblePanel,
+  CollapsiblePanelContent,
+  CollapsibleTrigger,
+  CollapsibleTriggerTitle,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the `data-*`/aria
+// attributes Base UI's collapsible would set (`data-panel-open=""` on the trigger,
+// `data-starting-style=""`/`data-ending-style=""` on the panel) or the native `disabled`
+// attribute. The collapsible is a structural disclosure primitive with no variant axes (see
+// variants.ts), so the state matrix IS the whole configuration space. The Root is behavior-only
+// (it renders no element), so it has no styled part here. Grafting, keyboard, and aria behavior
+// are demonstrated and tested in the components-tier story (Components/Collapsible).
+const meta = {
+  title: "Elements/Collapsible",
+  component: CollapsibleTrigger,
+  subcomponents: {
+    CollapsibleTriggerTitle,
+    CollapsiblePanel,
+    CollapsiblePanelContent,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CollapsibleTrigger>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `CollapsibleTrigger` (growing `CollapsibleTriggerTitle`,
+ * trailing internal `DisclosureIndicator`), plus `CollapsiblePanel` › `CollapsiblePanelContent`
+ * (the padding lives on the content so the panel's height animation measures cleanly). The
+ * disclosure is pinned open: `data-panel-open=""` on the trigger rotates the caret (the trigger
+ * carries `group`; the indicator reads `group-data-panel-open`) and the panel renders — a closed
+ * disclosure renders no panel, matching Base UI's unmount-while-closed default.
+ */
+export const Default: Story = {
+  render: () => (
+    <div>
+      <CollapsibleTrigger aria-expanded data-panel-open="">
+        <CollapsibleTriggerTitle>Recent activity</CollapsibleTriggerTitle>
+        <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
+          <ChevronDown />
+        </DisclosureIndicator>
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <CollapsiblePanelContent>3 work items updated in the last hour.</CollapsiblePanelContent>
+      </CollapsiblePanel>
+    </div>
+  ),
+};
+
+/** Without an indicator — the trigger content is adjustable; the disclosure caret is optional. */
+export const WithoutIndicator: Story = {
+  render: () => (
+    <div>
+      <CollapsibleTrigger aria-expanded data-panel-open="">
+        <CollapsibleTriggerTitle>Toggle section</CollapsibleTriggerTitle>
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <CollapsiblePanelContent>Content with no caret in the trigger.</CollapsiblePanelContent>
+      </CollapsiblePanel>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state side by side:
+ *
+ * - **Closed** — the resting row; the caret points inline-end (`-rotate-90`, RTL-mirrored) and no
+ *   panel renders.
+ * - **Open** — `data-panel-open=""` rotates the caret to point down and the panel shows at its
+ *   natural height.
+ * - **Panel entering** — `data-starting-style=""` pins the panel at the height-0 endpoint of its
+ *   open/close transition, so the row looks closed while the caret already points down.
+ * - **Panel exiting** — `data-ending-style=""` pins the same height-0 endpoint on the way closed;
+ *   Base UI has already dropped `data-panel-open`, so the caret rests inline-end again.
+ * - **Disabled** — the native `disabled` attribute dims the row and swaps the cursor.
+ *
+ * Hover and focus-visible are CSS pseudo-classes, not attributes, so they cannot be pinned here.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div>
+        <CollapsibleTrigger aria-expanded={false}>
+          <CollapsibleTriggerTitle>Closed</CollapsibleTriggerTitle>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </CollapsibleTrigger>
+      </div>
+      <div>
+        <CollapsibleTrigger aria-expanded data-panel-open="">
+          <CollapsibleTriggerTitle>Open</CollapsibleTriggerTitle>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </CollapsibleTrigger>
+        <CollapsiblePanel>
+          <CollapsiblePanelContent>
+            The expanded panel at its natural height.
+          </CollapsiblePanelContent>
+        </CollapsiblePanel>
+      </div>
+      <div>
+        <CollapsibleTrigger aria-expanded data-panel-open="">
+          <CollapsibleTriggerTitle>Panel entering</CollapsibleTriggerTitle>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </CollapsibleTrigger>
+        <CollapsiblePanel data-starting-style="">
+          <CollapsiblePanelContent>
+            Pinned at the height-0 transition endpoint.
+          </CollapsiblePanelContent>
+        </CollapsiblePanel>
+      </div>
+      <div>
+        <CollapsibleTrigger aria-expanded={false}>
+          <CollapsibleTriggerTitle>Panel exiting</CollapsibleTriggerTitle>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </CollapsibleTrigger>
+        <CollapsiblePanel data-ending-style="">
+          <CollapsiblePanelContent>
+            Pinned at the height-0 transition endpoint.
+          </CollapsiblePanelContent>
+        </CollapsiblePanel>
+      </div>
+      <div>
+        <CollapsibleTrigger disabled aria-expanded={false}>
+          <CollapsibleTriggerTitle>Disabled</CollapsibleTriggerTitle>
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </CollapsibleTrigger>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-panel-open` trigger rotates its caret relative to the closed one, and the
+ * `data-starting-style`/`data-ending-style` panels compute to height 0. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement }) => {
+    const caretRotate = (name: string) => {
+      const caret = canvas.getByRole("button", { name }).querySelector("[aria-hidden]");
+      if (!(caret instanceof HTMLElement)) throw new Error(`missing caret in "${name}" trigger`);
+      return getComputedStyle(caret).rotate;
+    };
+    // The compiled `group-data-panel-open:rotate-0` selector rotates the open caret away from the
+    // closed caret's resting `-rotate-90`.
+    await expect(caretRotate("Open")).not.toBe(caretRotate("Closed"));
+
+    // The compiled `data-starting-style:h-0` / `data-ending-style:h-0` selectors pin the
+    // entering and exiting panels at height 0.
+    for (const selector of ["[data-starting-style]", "[data-ending-style]"]) {
+      const panel = canvasElement.querySelector(selector);
+      if (!(panel instanceof HTMLElement)) {
+        throw new Error(`missing pinned ${selector} panel`);
+      }
+      await expect(getComputedStyle(panel).height).toBe("0px");
+    }
+  },
+};
diff --git a/packages/propel/src/elements/collapsible/index.tsx b/packages/propel/src/elements/collapsible/index.tsx
new file mode 100644
index 00000000..9103b3da
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/index.tsx
@@ -0,0 +1,4 @@
+export * from "./collapsible-panel";
+export * from "./collapsible-panel-content";
+export * from "./collapsible-trigger";
+export * from "./collapsible-trigger-title";
diff --git a/packages/propel/src/elements/collapsible/variants.ts b/packages/propel/src/elements/collapsible/variants.ts
new file mode 100644
index 00000000..92301c7d
--- /dev/null
+++ b/packages/propel/src/elements/collapsible/variants.ts
@@ -0,0 +1,35 @@
+import { cva, cx } from "class-variance-authority";
+
+import {
+  disclosureTriggerClass,
+  disclosureTriggerTitleClass,
+} from "../../internal/disclosure-trigger";
+
+// 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(disclosureTriggerClass, "w-full"));
+
+// The trigger's growing label. `flex-1` fills the row so a trailing
+// `CollapsibleTriggerIndicator` sits at the inline-end edge; `min-w-0` lets a long
+// label wrap/shrink instead of overflowing.
+export const collapsibleTriggerTitleVariants = cva(disclosureTriggerTitleClass);
+
+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",
+  ),
+);
+
+// The padded inner content of a panel. Padding lives here, never on the
+// height-animating `CollapsiblePanel` (padding there would offset the measured
+// open/close height and jump the transition).
+export const collapsiblePanelContentVariants = cva("pt-2");
diff --git a/packages/propel/src/elements/combobox/combobox-chip-remove.tsx b/packages/propel/src/elements/combobox/combobox-chip-remove.tsx
new file mode 100644
index 00000000..d66f7330
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-chip-remove.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { comboboxChipRemoveVariants } from "./variants";
+
+export type ComboboxChipRemoveProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * The remove affordance inside a `ComboboxChip`. Renders whatever X-style svg you pass, sized to
+ * the chip's scale. Give it an `aria-label` naming the value it removes. Base-UI-agnostic — graft
+ * in `components` via `<BaseCombobox.ChipRemove render={<ComboboxChipRemove/>} />`.
+ */
+export function ComboboxChipRemove({ render, ...props }: ComboboxChipRemoveProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    type: "button",
+    className: comboboxChipRemoveVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-chip.tsx b/packages/propel/src/elements/combobox/combobox-chip.tsx
new file mode 100644
index 00000000..be4067c7
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-chip.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { comboboxChipVariants } from "./variants";
+
+export type ComboboxChipProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * One selected value in the multiselect frame, shown as a removable tag: its label plus a
+ * `ComboboxChipRemove`. Arrow keys move focus across chips (Base UI's behavior), so it carries the
+ * standard focus ring. Base-UI-agnostic — graft in `components` via `<BaseCombobox.Chip
+ * render={<ComboboxChip/>} />`.
+ */
+export function ComboboxChip({ render, ...props }: ComboboxChipProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: comboboxChipVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-chips.tsx b/packages/propel/src/elements/combobox/combobox-chips.tsx
new file mode 100644
index 00000000..f861e119
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-chips.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ComboboxChipsVariantProps, comboboxChipsVariants } from "./variants";
+
+export type ComboboxChipsProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  ComboboxChipsVariantProps;
+
+/**
+ * The multiselect input frame: a wrapping row of `ComboboxChip`s ahead of the inline
+ * `ComboboxInput` (it replaces `ComboboxInputGroup` in the `multiple` anatomy). Base-UI-agnostic —
+ * graft in `components` via `<BaseCombobox.Chips render={<ComboboxChips/>} />`.
+ */
+export function ComboboxChips({ magnitude, render, ...props }: ComboboxChipsProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: comboboxChipsVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-empty.tsx b/packages/propel/src/elements/combobox/combobox-empty.tsx
new file mode 100644
index 00000000..41773396
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-empty.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { comboboxEmptyVariants } from "./variants";
+
+export type ComboboxEmptyProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled empty-state row. Graft in `components` via `<BaseCombobox.Empty
+ * render={<ComboboxEmpty/>} />`.
+ */
+export function ComboboxEmpty({ render, ...props }: ComboboxEmptyProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: comboboxEmptyVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-input-group.tsx b/packages/propel/src/elements/combobox/combobox-input-group.tsx
new file mode 100644
index 00000000..4c3f3658
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-input-group.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ComboboxInputGroupVariantProps, comboboxInputGroupVariants } from "./variants";
+
+export type { ComboboxMagnitude } from "./variants";
+
+export type ComboboxInputGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  ComboboxInputGroupVariantProps;
+
+/**
+ * The styled bordered frame around the input + its adornments. Base-UI-agnostic — graft in
+ * `components` via `<BaseCombobox.InputGroup render={<ComboboxInputGroup/>} />`.
+ */
+export function ComboboxInputGroup({ magnitude, render, ...props }: ComboboxInputGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: comboboxInputGroupVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-input.tsx b/packages/propel/src/elements/combobox/combobox-input.tsx
new file mode 100644
index 00000000..b51dd13a
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-input.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { comboboxInputVariants } from "./variants";
+
+export type ComboboxInputProps = Omit<useRender.ComponentProps<"input">, "className" | "style">;
+
+/**
+ * The styled combobox text field. Base-UI-agnostic — graft the combobox behavior in `components`
+ * via `<BaseCombobox.Input render={<ComboboxInput/>} />`.
+ */
+export function ComboboxInput({ render, ...props }: ComboboxInputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = { className: comboboxInputVariants() };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-item-indicator.tsx b/packages/propel/src/elements/combobox/combobox-item-indicator.tsx
new file mode 100644
index 00000000..63be2859
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-item-indicator.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { comboboxItemIndicatorVariants } from "./variants";
+
+export type ComboboxItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled selection-marker slot inside an item. Base-UI-agnostic — graft in `components` via
+ * `<BaseCombobox.ItemIndicator render={<ComboboxItemIndicator/>} />`.
+ */
+export function ComboboxItemIndicator({ render, ...props }: ComboboxItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: comboboxItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox-label.tsx b/packages/propel/src/elements/combobox/combobox-label.tsx
new file mode 100644
index 00000000..2abceb68
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox-label.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { comboboxLabelVariants } from "./variants";
+
+export type ComboboxLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled combobox label. Graft in `components` via `<BaseCombobox.Label
+ * render={<ComboboxLabel/>} />`.
+ */
+export function ComboboxLabel({ render, ...props }: ComboboxLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: comboboxLabelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/combobox/combobox.stories.tsx b/packages/propel/src/elements/combobox/combobox.stories.tsx
new file mode 100644
index 00000000..fd359761
--- /dev/null
+++ b/packages/propel/src/elements/combobox/combobox.stories.tsx
@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { ListboxItem } from "../../internal/listbox-item";
+import { ListboxPopup } from "../../internal/listbox-popup";
+import { IconButton } from "../icon-button";
+import {
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxChips,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  type ComboboxMagnitude,
+} from "./index";
+
+const MAGNITUDES: ComboboxMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// One popup row per pinnable option state: rest, `data-highlighted` (the active option), selected
+// (the indicator carries `data-selected`), and `data-disabled`.
+const REGION_OPTIONS: {
+  value: string;
+  highlighted?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+}[] = [
+  { value: "us-central-1" },
+  { value: "us-east-1", highlighted: true },
+  { value: "eu-central-1", selected: true },
+  { value: "ap-west-1", disabled: true },
+];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the popup laid out inline (it is just a styled div; Base UI
+// only positions it) and every visual state pinned statically via the `data-*`/aria attributes
+// Base UI's combobox and field would set (`data-highlighted=""`/`data-disabled=""` on a row,
+// `data-selected=""` on the item indicator, `data-invalid=""` on the input) or the native
+// `disabled` attribute. Hover/focus are CSS pseudo-classes, forced by the pseudo-states addon.
+// Grafting, filtering, keyboard, and aria behavior are demonstrated AND tested in the
+// components-tier story (Components/Combobox).
+const meta = {
+  title: "Elements/Combobox",
+  component: ComboboxInputGroup,
+  subcomponents: {
+    ComboboxLabel,
+    ComboboxInput,
+    ComboboxChips,
+    ComboboxChip,
+    ComboboxChipRemove,
+    ComboboxItemIndicator,
+    ComboboxEmpty,
+    ListboxPopup,
+    ListboxItem,
+  },
+  args: { magnitude: "md" },
+} satisfies Meta<typeof ComboboxInputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full single-select anatomy assembled statically: `ComboboxLabel`, then `ComboboxInputGroup`
+ * (the bordered frame) holding the `ComboboxInput` plus the consumer-provided clear/trigger
+ * `IconButton` controls; below it, the internal `ListboxPopup` surface with the `ComboboxEmpty`
+ * live region (mounted but content-less while there are matches — its padding applies via
+ * `:not(:empty)`) and one `ListboxItem` row per pinnable state. `layout="indicator"` reserves the
+ * leading 1rem column, so every row keeps a `ComboboxItemIndicator` — only the selected row's
+ * indicator carries `data-selected` and shows its check. The popup's anchor-derived sizing vars
+ * (`--anchor-width`, `--available-height`) are supplied by the wrapper, standing in for Base UI's
+ * positioner.
+ */
+export const Default: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // Pinning hover/disabled state attributes makes axe evaluate visuals it never sees live
+      // (it does not test :hover, and WCAG 1.4.3 exempts disabled controls). The tertiary-text-
+      // on-hover-fill contrast is a design-token question flagged for the design pass, not a
+      // story bug.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex w-72 flex-col gap-1.5 [--anchor-width:18rem] [--available-height:18rem]">
+      <ComboboxLabel id="combobox-region-label">Region</ComboboxLabel>
+      <ComboboxInputGroup magnitude={magnitude}>
+        <ComboboxInput aria-labelledby="combobox-region-label" placeholder="e.g. eu-central-1" />
+        <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear region">
+          <Icon>
+            <X />
+          </Icon>
+        </IconButton>
+        <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
+          <Icon>
+            <ChevronsUpDown />
+          </Icon>
+        </IconButton>
+      </ComboboxInputGroup>
+      <ListboxPopup>
+        <ComboboxEmpty />
+        {REGION_OPTIONS.map(({ value, highlighted, selected, disabled }) => (
+          <ListboxItem
+            key={value}
+            layout="indicator"
+            magnitude="md"
+            data-highlighted={highlighted ? "" : undefined}
+            data-disabled={disabled ? "" : undefined}
+          >
+            <ComboboxItemIndicator
+              id={selected ? "combobox-indicator-selected" : undefined}
+              data-selected={selected ? "" : undefined}
+            >
+              <Check aria-hidden />
+            </ComboboxItemIndicator>
+            <span>{value}</span>
+          </ListboxItem>
+        ))}
+      </ListboxPopup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the indicator's `not-data-selected:invisible` selector compiled —
+ * the selected row's pinned `data-selected` indicator computes visible while an unselected row's
+ * stays hidden (the reserved column holds either way). Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const DefaultCanary: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const visibility = (selector: string) => {
+      const indicator = canvasElement.querySelector(selector);
+      if (!(indicator instanceof HTMLElement)) throw new Error(`missing ${selector}`);
+      return getComputedStyle(indicator).visibility;
+    };
+    await expect(visibility("#combobox-indicator-selected")).toBe("visible");
+    await expect(visibility("[data-highlighted] > :first-child")).toBe("hidden");
+  },
+};
+
+/**
+ * The full `magnitude` axis of both input frames, one row per step: the single-select
+ * `ComboboxInputGroup` beside the multiselect `ComboboxChips` frame. A step sets the frame's
+ * min-height, text size, and glyph `--node-size` (the shared control scale: sm 28px · md 32px · lg
+ * 36px · xl 44px); the chips keep their fixed height and sit inset like text would.
+ */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <div key={magnitude} className="flex items-start gap-4">
+          <ComboboxInputGroup magnitude={magnitude}>
+            <ComboboxInput aria-label={`Region (${magnitude})`} placeholder={magnitude} />
+          </ComboboxInputGroup>
+          <ComboboxChips magnitude={magnitude}>
+            <ComboboxChip>
+              us-east-1
+              <ComboboxChipRemove aria-label={`Remove us-east-1 (${magnitude})`}>
+                <X aria-hidden />
+              </ComboboxChipRemove>
+            </ComboboxChip>
+            <ComboboxInput aria-label={`Regions (${magnitude})`} placeholder="Add a region" />
+          </ComboboxChips>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the input frame, one group per row:
+ *
+ * - **Rest** — the subtle border over the `layer-2` fill.
+ * - **Hover** / **Focused** — CSS pseudo-classes (`:hover`, `:focus-within`), forced by the
+ *   pseudo-states addon: the hover border/fill shift, and the accent border + soft ring while the
+ *   inner input has focus.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to the input; the frame recolors to danger via `:has([data-invalid])` — no `tone`
+ *   prop.
+ * - **Invalid focused** — danger wins on focus: the danger border stays and the soft ring turns
+ *   danger instead of accent.
+ * - **Disabled** — the native `disabled` on the input plus the `data-disabled=""` Base UI mirrors
+ *   onto the group: not-allowed cursor, flattened fill, dimmed text — both selector forms the
+ *   shared chrome defines.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: "#combobox-group-hover",
+      focusWithin: ["#combobox-group-focus", "#combobox-group-invalid-focus"],
+    },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex w-72 flex-col gap-3">
+      <ComboboxInputGroup magnitude={magnitude} id="combobox-group-rest">
+        <ComboboxInput aria-label="Rest" placeholder="Rest" />
+      </ComboboxInputGroup>
+      <ComboboxInputGroup magnitude={magnitude} id="combobox-group-hover">
+        <ComboboxInput aria-label="Hover" placeholder="Hover" />
+      </ComboboxInputGroup>
+      <ComboboxInputGroup magnitude={magnitude} id="combobox-group-focus">
+        <ComboboxInput aria-label="Focused" placeholder="Focused" />
+      </ComboboxInputGroup>
+      <ComboboxInputGroup magnitude={magnitude} id="combobox-group-invalid">
+        <ComboboxInput aria-label="Invalid" placeholder="Invalid" aria-invalid data-invalid="" />
+      </ComboboxInputGroup>
+      <ComboboxInputGroup magnitude={magnitude} id="combobox-group-invalid-focus">
+        <ComboboxInput
+          aria-label="Invalid focused"
+          placeholder="Invalid focused"
+          aria-invalid
+          data-invalid=""
+        />
+      </ComboboxInputGroup>
+      <ComboboxInputGroup magnitude={magnitude} data-disabled="">
+        <ComboboxInput aria-label="Disabled" placeholder="Disabled" disabled />
+      </ComboboxInputGroup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` input recolors its wrapping frame's border (`has-[[data-invalid]]:
+ * border-danger-strong`) away from the resting frame's. Tagged out of the sidebar/docs/manifest
+ * while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const group = canvasElement.querySelector(`#${id}`);
+      if (!(group instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(group).borderColor;
+    };
+    await expect(borderColor("combobox-group-invalid")).not.toBe(
+      borderColor("combobox-group-rest"),
+    );
+  },
+};
+
+/**
+ * The multiselect anatomy: `ComboboxChips` replaces the input frame, wrapping one `ComboboxChip`
+ * per selected value (its label plus a `ComboboxChipRemove` — pass an X-style svg and an
+ * `aria-label` naming the value) ahead of the inline `ComboboxInput`. Chip states pinned: the
+ * second chip wears the focus ring arrow-key navigation would give it (forced by the pseudo-states
+ * addon, as is the first chip's remove hover), and the third pins the `data-disabled` a disabled
+ * root would mirror onto it, with its remove natively disabled.
+ */
+export const Chips: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // Pinning hover/disabled state attributes makes axe evaluate visuals it never sees live
+      // (it does not test :hover, and WCAG 1.4.3 exempts disabled controls). The tertiary-text-
+      // on-hover-fill contrast is a design-token question flagged for the design pass, not a
+      // story bug.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: () => (
+    <div className="flex w-96 flex-col gap-1.5">
+      <ComboboxLabel id="combobox-regions-label">Regions</ComboboxLabel>
+      <ComboboxChips magnitude="md">
+        <ComboboxChip>
+          us-east-1
+          <ComboboxChipRemove id="combobox-chip-remove-hover" aria-label="Remove us-east-1">
+            <X aria-hidden />
+          </ComboboxChipRemove>
+        </ComboboxChip>
+        <ComboboxChip id="combobox-chip-focus">
+          eu-central-1
+          <ComboboxChipRemove aria-label="Remove eu-central-1">
+            <X aria-hidden />
+          </ComboboxChipRemove>
+        </ComboboxChip>
+        <ComboboxChip data-disabled="">
+          ap-west-1
+          <ComboboxChipRemove aria-label="Remove ap-west-1" disabled>
+            <X aria-hidden />
+          </ComboboxChipRemove>
+        </ComboboxChip>
+        <ComboboxInput aria-labelledby="combobox-regions-label" placeholder="Add a region" />
+      </ComboboxChips>
+    </div>
+  ),
+};
+
+/**
+ * The no-matches popup: `ComboboxEmpty` is the live region Base UI keeps mounted inside the popup,
+ * and its padding applies via `:not(:empty)` only once it holds the message — while there are
+ * matches it renders collapsed (see the Default story's popup), never a dead padded strip.
+ */
+export const Empty: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-72 flex-col [--anchor-width:18rem] [--available-height:18rem]">
+      <ListboxPopup>
+        <ComboboxEmpty>No matches</ComboboxEmpty>
+      </ListboxPopup>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/combobox/index.tsx b/packages/propel/src/elements/combobox/index.tsx
new file mode 100644
index 00000000..2ed23ebd
--- /dev/null
+++ b/packages/propel/src/elements/combobox/index.tsx
@@ -0,0 +1,8 @@
+export * from "./combobox-chip";
+export * from "./combobox-chip-remove";
+export * from "./combobox-chips";
+export * from "./combobox-empty";
+export * from "./combobox-input";
+export * from "./combobox-input-group";
+export * from "./combobox-item-indicator";
+export * from "./combobox-label";
diff --git a/packages/propel/src/elements/combobox/variants.ts b/packages/propel/src/elements/combobox/variants.ts
new file mode 100644
index 00000000..30307ff1
--- /dev/null
+++ b/packages/propel/src/elements/combobox/variants.ts
@@ -0,0 +1,74 @@
+import { cva, cx } from "class-variance-authority";
+
+import { controlGroupClass, controlMagnitude } from "../../internal/control-group";
+import { controlLabelClass } from "../../internal/control-group";
+import { controlInputClass } from "../../internal/control-input";
+import { itemIndicatorClass } from "../../internal/item-indicator";
+import { listboxEmptyClass } from "../../internal/listbox-empty";
+import { nodeSlotClass } from "../../internal/node-slot";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+export const comboboxLabelVariants = cva(controlLabelClass);
+export const comboboxInputGroupVariants = cva(
+  cx(
+    // Wraps a separate focusable input → the shared `focus: within` group chrome.
+    controlGroupClass,
+    "min-w-64 items-center gap-2 rounded-md px-3",
+  ),
+  {
+    variants: {
+      magnitude: {
+        sm: controlMagnitude.sm,
+        md: controlMagnitude.md,
+        lg: controlMagnitude.lg,
+        xl: controlMagnitude.xl,
+      },
+    },
+  },
+);
+export const comboboxInputVariants = cva(cx(controlInputClass, "flex-1"));
+export const comboboxItemIndicatorVariants = cva(cx(itemIndicatorClass, "size-4"));
+export const comboboxEmptyVariants = cva(listboxEmptyClass);
+
+// The multiselect variant of the input frame: chips wrap onto new rows ahead of the inline input.
+// Tighter padding than `ComboboxInputGroup` so the h-6 chips sit inset like text would.
+export const comboboxChipsVariants = cva(
+  cx(
+    // Wraps a separate focusable input → the shared `focus: within` group chrome.
+    controlGroupClass,
+    "min-w-64 flex-wrap items-center gap-1 rounded-md px-1.5 py-1",
+  ),
+  {
+    variants: {
+      magnitude: {
+        sm: controlMagnitude.sm,
+        md: controlMagnitude.md,
+        lg: controlMagnitude.lg,
+        xl: controlMagnitude.xl,
+      },
+    },
+  },
+);
+// One selected value, rendered as a removable tag (the neutral badge chrome). Arrow keys move
+// focus onto a chip, so it carries the standard focus ring.
+export const comboboxChipVariants = cva(
+  cx(
+    "flex h-6 shrink-0 cursor-default items-center gap-1 rounded-sm bg-layer-3 ps-1.5 pe-0.5 text-13 text-secondary",
+    "outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+// The chip's remove affordance; pass an X-style svg.
+export const comboboxChipRemoveVariants = cva(
+  cx(
+    nodeSlotClass,
+    "size-4 cursor-pointer rounded-sm text-icon-secondary [--node-size:0.75rem]",
+    "outline-none hover:bg-layer-transparent-hover focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "disabled:cursor-not-allowed disabled:text-icon-disabled",
+  ),
+);
+
+export type ComboboxInputGroupVariantProps = StrictVariantProps<typeof comboboxInputGroupVariants>;
+export type ComboboxChipsVariantProps = StrictVariantProps<typeof comboboxChipsVariants>;
+type ComboboxInputGroupVariantConfig = ComboboxInputGroupVariantProps;
+export type ComboboxMagnitude = ComboboxInputGroupVariantConfig["magnitude"];
diff --git a/packages/propel/src/elements/context-menu/context-menu-checkbox-item-indicator.tsx b/packages/propel/src/elements/context-menu/context-menu-checkbox-item-indicator.tsx
new file mode 100644
index 00000000..812c602f
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-checkbox-item-indicator.tsx
@@ -0,0 +1,24 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuCheckboxItemIndicatorVariants } from "./variants";
+
+export type ContextMenuCheckboxItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled tick region of a checkbox menu row. Sizes its single child (the tick icon) to the
+ * row's `--node-size`. Base-UI-agnostic — graft in `components` via
+ * `<BaseContextMenu.CheckboxItemIndicator render={<ContextMenuCheckboxItemIndicator/>} />`.
+ */
+export function ContextMenuCheckboxItemIndicator({
+  render,
+  ...props
+}: ContextMenuCheckboxItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: contextMenuCheckboxItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-checkbox-item.tsx b/packages/propel/src/elements/context-menu/context-menu-checkbox-item.tsx
new file mode 100644
index 00000000..f7f7d9a3
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-checkbox-item.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
+
+export type ContextMenuCheckboxItemProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  ContextMenuItemVariantProps;
+
+/**
+ * The styled checkbox menu row. Base-UI-agnostic — graft the checkbox-item behavior in `components`
+ * via `<BaseContextMenu.CheckboxItem render={<ContextMenuCheckboxItem tone="neutral"/>} />`.
+ */
+export function ContextMenuCheckboxItem({ tone, render, ...props }: ContextMenuCheckboxItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contextMenuItemVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-group-label.tsx b/packages/propel/src/elements/context-menu/context-menu-group-label.tsx
new file mode 100644
index 00000000..5b95fdbc
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-group-label.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuGroupLabelVariants } from "./variants";
+
+export type ContextMenuGroupLabelProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The styled non-interactive section heading. Base-UI-agnostic — graft in `components` via
+ * `<BaseContextMenu.GroupLabel render={<ContextMenuGroupLabel/>} />`.
+ */
+export function ContextMenuGroupLabel({ render, ...props }: ContextMenuGroupLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contextMenuGroupLabelVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-item-indicator.tsx b/packages/propel/src/elements/context-menu/context-menu-item-indicator.tsx
new file mode 100644
index 00000000..ca97686b
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-item-indicator.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuItemIndicatorVariants } from "./variants";
+
+export type ContextMenuItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trailing selection-check region of a single-select `ContextMenuItem`. Sizes its single child
+ * to the row's `--node-size` and tints it accent. Decorative (the row carries the selected state),
+ * so it is `aria-hidden`. Base-UI-agnostic.
+ */
+export function ContextMenuItemIndicator({ render, ...props }: ContextMenuItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: contextMenuItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-item-label.tsx b/packages/propel/src/elements/context-menu/context-menu-item-label.tsx
new file mode 100644
index 00000000..d86cb16d
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-item-label.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuItemLabelVariants } from "./variants";
+
+export type ContextMenuItemLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The label region of a menu row. Grows to fill the row so trailing regions (shortcut, indicator,
+ * submenu caret) sit at the inline-end; truncates rather than overflowing. Base-UI-agnostic.
+ */
+export function ContextMenuItemLabel({ render, ...props }: ContextMenuItemLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: contextMenuItemLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx b/packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx
new file mode 100644
index 00000000..d9f154f2
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuItemShortcutVariants } from "./variants";
+
+export type ContextMenuItemShortcutProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The keyboard-shortcut text region of a menu row, sitting at the row's inline-end. Decorative hint
+ * (the row's label carries the accessible name), so it is `aria-hidden`. Base-UI-agnostic.
+ */
+export function ContextMenuItemShortcut({ render, ...props }: ContextMenuItemShortcutProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: contextMenuItemShortcutVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-item.tsx b/packages/propel/src/elements/context-menu/context-menu-item.tsx
new file mode 100644
index 00000000..2fd6d48c
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-item.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
+
+export type { ContextMenuItemTone } from "./variants";
+
+export type ContextMenuItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  ContextMenuItemVariantProps;
+
+/**
+ * The styled interactive menu row. Base-UI-agnostic — graft the item behavior in `components` via
+ * `<BaseContextMenu.Item render={<ContextMenuItem tone="neutral"/>} />`.
+ */
+export function ContextMenuItem({ tone, render, ...props }: ContextMenuItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contextMenuItemVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-link-item.tsx b/packages/propel/src/elements/context-menu/context-menu-link-item.tsx
new file mode 100644
index 00000000..244952dd
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-link-item.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
+
+export type ContextMenuLinkItemProps = Omit<useRender.ComponentProps<"a">, "className" | "style"> &
+  ContextMenuItemVariantProps;
+
+/**
+ * The styled navigational `<a>` menu row. Base-UI-agnostic — graft the link-item behavior in
+ * `components` via `<BaseContextMenu.LinkItem render={<ContextMenuLinkItem tone="neutral"/>} />`.
+ */
+export function ContextMenuLinkItem({ tone, render, ...props }: ContextMenuLinkItemProps) {
+  const defaultProps: useRender.ElementProps<"a"> = {
+    className: contextMenuItemVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-popup.tsx b/packages/propel/src/elements/context-menu/context-menu-popup.tsx
new file mode 100644
index 00000000..96f9404c
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-popup.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuPopupVariants } from "./variants";
+
+export type ContextMenuPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled menu surface. Base-UI-agnostic — graft the popup behavior in `components` via
+ * `<BaseContextMenu.Popup render={<ContextMenuPopup/>} />`.
+ */
+export function ContextMenuPopup({ render, ...props }: ContextMenuPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: contextMenuPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-radio-item-indicator.tsx b/packages/propel/src/elements/context-menu/context-menu-radio-item-indicator.tsx
new file mode 100644
index 00000000..858f9fca
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-radio-item-indicator.tsx
@@ -0,0 +1,24 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuRadioItemIndicatorVariants } from "./variants";
+
+export type ContextMenuRadioItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled selection region of a radio menu row. Sizes its single child (the selection icon) to
+ * the row's `--node-size`. Base-UI-agnostic — graft in `components` via
+ * `<BaseContextMenu.RadioItemIndicator render={<ContextMenuRadioItemIndicator/>} />`.
+ */
+export function ContextMenuRadioItemIndicator({
+  render,
+  ...props
+}: ContextMenuRadioItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: contextMenuRadioItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-radio-item.tsx b/packages/propel/src/elements/context-menu/context-menu-radio-item.tsx
new file mode 100644
index 00000000..50424242
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-radio-item.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
+
+export type ContextMenuRadioItemProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  ContextMenuItemVariantProps;
+
+/**
+ * The styled radio menu row. Base-UI-agnostic — graft the radio-item behavior in `components` via
+ * `<BaseContextMenu.RadioItem render={<ContextMenuRadioItem tone="neutral"/>} />`.
+ */
+export function ContextMenuRadioItem({ tone, render, ...props }: ContextMenuRadioItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contextMenuItemVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-separator.tsx b/packages/propel/src/elements/context-menu/context-menu-separator.tsx
new file mode 100644
index 00000000..5d0a898d
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-separator.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { contextMenuSeparatorVariants } from "./variants";
+
+export type ContextMenuSeparatorProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The styled thin divider between groups of items. Base-UI-agnostic — graft in `components` via
+ * `<BaseContextMenu.Separator render={<ContextMenuSeparator/>} />`.
+ */
+export function ContextMenuSeparator({ render, ...props }: ContextMenuSeparatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contextMenuSeparatorVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu-submenu-trigger.tsx b/packages/propel/src/elements/context-menu/context-menu-submenu-trigger.tsx
new file mode 100644
index 00000000..c822f858
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu-submenu-trigger.tsx
@@ -0,0 +1,31 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type ContextMenuSubmenuTriggerVariantProps,
+  contextMenuSubmenuTriggerVariants,
+} from "./variants";
+
+export type { ContextMenuSubmenuTriggerTone } from "./variants";
+
+export type ContextMenuSubmenuTriggerProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  ContextMenuSubmenuTriggerVariantProps;
+
+/**
+ * The styled row that opens a submenu. Base-UI-agnostic — graft the submenu-trigger behavior in
+ * `components` via `<BaseContextMenu.SubmenuTrigger render={<ContextMenuSubmenuTrigger
+ * tone="neutral"/>} />`.
+ */
+export function ContextMenuSubmenuTrigger({
+  tone,
+  render,
+  ...props
+}: ContextMenuSubmenuTriggerProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contextMenuSubmenuTriggerVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/context-menu/context-menu.stories.tsx b/packages/propel/src/elements/context-menu/context-menu.stories.tsx
new file mode 100644
index 00000000..accd5083
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/context-menu.stories.tsx
@@ -0,0 +1,423 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Check,
+  ChevronDown,
+  ClipboardPaste,
+  Copy,
+  Dot,
+  ExternalLink,
+  FolderInput,
+  Link2,
+  Scissors,
+  Trash2,
+} from "lucide-react";
+import { expect } from "storybook/test";
+
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuCheckboxItemIndicator,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuItemIndicator,
+  ContextMenuItemLabel,
+  ContextMenuItemShortcut,
+  ContextMenuLinkItem,
+  ContextMenuPopup,
+  ContextMenuRadioItem,
+  ContextMenuRadioItemIndicator,
+  ContextMenuSeparator,
+  ContextMenuSubmenuTrigger,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the menu semantics (`role="menu"`, `role="menuitem"`,
+// `aria-checked`, …) and every visual state pinned statically via the `data-*` attributes Base UI's
+// context menu would set (`data-highlighted=""`, `data-disabled=""`, `data-popup-open=""`,
+// `data-selected=""` on indicators, `data-starting-style=""`/`data-ending-style=""` on the popup).
+// The popup is just a styled div here, rendered inline instead of portaled/positioned. Grafting,
+// keyboard, and aria behavior are demonstrated and tested in Components/ContextMenu.
+const meta = {
+  title: "Elements/ContextMenu",
+  component: ContextMenuPopup,
+  subcomponents: {
+    ContextMenuItem,
+    ContextMenuItemLabel,
+    ContextMenuItemShortcut,
+    ContextMenuItemIndicator,
+    ContextMenuCheckboxItem,
+    ContextMenuCheckboxItemIndicator,
+    ContextMenuRadioItem,
+    ContextMenuRadioItemIndicator,
+    ContextMenuLinkItem,
+    ContextMenuSubmenuTrigger,
+    ContextMenuSeparator,
+    ContextMenuGroupLabel,
+  },
+} satisfies Meta<typeof ContextMenuPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `ContextMenuPopup` › a labelled group
+ * (`ContextMenuGroupLabel` + `ContextMenuItem` rows of internal `Icon` + `ContextMenuItemLabel` +
+ * `ContextMenuItemShortcut`), a `ContextMenuSubmenuTrigger` row whose trailing caret is the
+ * internal `DisclosureIndicator` (`motion="pointEnd"`), `ContextMenuSeparator` dividers, a
+ * single-select row whose trailing check (`ContextMenuItemIndicator`) shows via the pinned
+ * `data-selected=""`, and a `tone="danger"` row. The "Copy" row pins `data-highlighted=""` — the
+ * state Base UI sets on the row under the pointer.
+ */
+export const Default: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // Pinning hover/disabled state attributes makes axe evaluate visuals it never sees live
+      // (it does not test :hover, and WCAG 1.4.3 exempts disabled controls). The tertiary-text-
+      // on-hover-fill contrast is a design-token question flagged for the design pass, not a
+      // story bug.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: () => (
+    <ContextMenuPopup role="menu">
+      <div role="group" aria-labelledby="context-menu-elements-default-actions">
+        <ContextMenuGroupLabel id="context-menu-elements-default-actions">
+          Actions
+        </ContextMenuGroupLabel>
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <Icon>
+            <Scissors />
+          </Icon>
+          <ContextMenuItemLabel>Cut</ContextMenuItemLabel>
+          <ContextMenuItemShortcut>⌘X</ContextMenuItemShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem role="menuitem" tone="neutral" data-highlighted="">
+          <Icon>
+            <Copy />
+          </Icon>
+          <ContextMenuItemLabel>Copy</ContextMenuItemLabel>
+          <ContextMenuItemShortcut>⌘C</ContextMenuItemShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <Icon>
+            <ClipboardPaste />
+          </Icon>
+          <ContextMenuItemLabel>Paste</ContextMenuItemLabel>
+          <ContextMenuItemShortcut>⌘V</ContextMenuItemShortcut>
+        </ContextMenuItem>
+      </div>
+      <ContextMenuSeparator role="separator" />
+      <ContextMenuSubmenuTrigger
+        role="menuitem"
+        tone="neutral"
+        aria-haspopup="menu"
+        aria-expanded={false}
+      >
+        <Icon>
+          <FolderInput />
+        </Icon>
+        <ContextMenuItemLabel>Move to</ContextMenuItemLabel>
+        <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+          <ChevronDown />
+        </DisclosureIndicator>
+      </ContextMenuSubmenuTrigger>
+      <ContextMenuItem role="menuitem" tone="neutral">
+        <ContextMenuItemLabel>Pinned</ContextMenuItemLabel>
+        <ContextMenuItemIndicator data-selected="">
+          <Check />
+        </ContextMenuItemIndicator>
+      </ContextMenuItem>
+      <ContextMenuSeparator role="separator" />
+      <ContextMenuItem role="menuitem" tone="danger">
+        <Icon>
+          <Trash2 />
+        </Icon>
+        <ContextMenuItemLabel>Delete</ContextMenuItemLabel>
+      </ContextMenuItem>
+    </ContextMenuPopup>
+  ),
+};
+
+const TONES = ["neutral", "danger"] as const;
+
+/**
+ * The only variant axis: `tone`, on both row parts (`ContextMenuItem` and
+ * `ContextMenuSubmenuTrigger`). `neutral` rows use the standard text hierarchy; `danger` rows use
+ * the error palette. Each popup pins the same three row states so the tones compare like for like:
+ * resting, `data-highlighted=""`, and `data-disabled=""` (which collapses both tones to the
+ * disabled color).
+ */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      {TONES.map((tone) => (
+        <ContextMenuPopup key={tone} role="menu" aria-label={`${tone} tone`}>
+          <ContextMenuItem role="menuitem" tone={tone}>
+            <ContextMenuItemLabel>Resting</ContextMenuItemLabel>
+          </ContextMenuItem>
+          <ContextMenuItem role="menuitem" tone={tone} data-highlighted="">
+            <ContextMenuItemLabel>Highlighted</ContextMenuItemLabel>
+          </ContextMenuItem>
+          <ContextMenuItem role="menuitem" tone={tone} data-disabled="" aria-disabled="true">
+            <ContextMenuItemLabel>Disabled</ContextMenuItemLabel>
+          </ContextMenuItem>
+          <ContextMenuSeparator role="separator" />
+          <ContextMenuSubmenuTrigger
+            role="menuitem"
+            tone={tone}
+            aria-haspopup="menu"
+            aria-expanded={false}
+          >
+            <ContextMenuItemLabel>Submenu trigger</ContextMenuItemLabel>
+            <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </ContextMenuSubmenuTrigger>
+        </ContextMenuPopup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state side by side:
+ *
+ * - **Row states** — resting; `data-highlighted=""` (the pointer/keyboard highlight);
+ *   `data-disabled=""` + `aria-disabled` (dimmed, pointer-events off); a `ContextMenuItemIndicator`
+ *   with `data-selected=""` (visible accent check) next to one without it (the check hides via
+ *   `not-data-selected:invisible` but the slot keeps the gutter, matching Base UI's
+ *   `keepMounted`).
+ * - **Submenu trigger states** — closed; `data-popup-open=""` (the row keeps the highlight chrome
+ *   while its submenu is open); disabled, where the trigger's `group/item` marker dims the caret
+ *   through `group-data-disabled/item`.
+ * - **Popup transition endpoints** — sibling popups pinned at `data-starting-style=""` and
+ *   `data-ending-style=""` sit at the scaled/faded endpoint of the open/close transition, so they
+ *   render invisible on purpose.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <ContextMenuPopup role="menu" aria-label="Row states">
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <ContextMenuItemLabel>Resting</ContextMenuItemLabel>
+        </ContextMenuItem>
+        <ContextMenuItem role="menuitem" tone="neutral" data-highlighted="">
+          <ContextMenuItemLabel>Highlighted</ContextMenuItemLabel>
+        </ContextMenuItem>
+        <ContextMenuItem role="menuitem" tone="neutral" data-disabled="" aria-disabled="true">
+          <ContextMenuItemLabel>Disabled</ContextMenuItemLabel>
+        </ContextMenuItem>
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <ContextMenuItemLabel>Selected</ContextMenuItemLabel>
+          <ContextMenuItemIndicator data-selected="">
+            <Check />
+          </ContextMenuItemIndicator>
+        </ContextMenuItem>
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <ContextMenuItemLabel>Unselected</ContextMenuItemLabel>
+          <ContextMenuItemIndicator>
+            <Check />
+          </ContextMenuItemIndicator>
+        </ContextMenuItem>
+        <ContextMenuSeparator role="separator" />
+        <ContextMenuSubmenuTrigger
+          role="menuitem"
+          tone="neutral"
+          aria-haspopup="menu"
+          aria-expanded={false}
+        >
+          <ContextMenuItemLabel>Submenu closed</ContextMenuItemLabel>
+          <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ContextMenuSubmenuTrigger>
+        <ContextMenuSubmenuTrigger
+          role="menuitem"
+          tone="neutral"
+          aria-haspopup="menu"
+          aria-expanded
+          data-popup-open=""
+        >
+          <ContextMenuItemLabel>Submenu open</ContextMenuItemLabel>
+          <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ContextMenuSubmenuTrigger>
+        <ContextMenuSubmenuTrigger
+          role="menuitem"
+          tone="neutral"
+          aria-haspopup="menu"
+          aria-expanded={false}
+          data-disabled=""
+          aria-disabled="true"
+        >
+          <ContextMenuItemLabel>Submenu disabled</ContextMenuItemLabel>
+          <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ContextMenuSubmenuTrigger>
+      </ContextMenuPopup>
+      <ContextMenuPopup role="menu" aria-label="Entering" data-starting-style="">
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <ContextMenuItemLabel>Entering</ContextMenuItemLabel>
+        </ContextMenuItem>
+      </ContextMenuPopup>
+      <ContextMenuPopup role="menu" aria-label="Exiting" data-ending-style="">
+        <ContextMenuItem role="menuitem" tone="neutral">
+          <ContextMenuItemLabel>Exiting</ContextMenuItemLabel>
+        </ContextMenuItem>
+      </ContextMenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * The selection row kinds: `ContextMenuCheckboxItem` (`role="menuitemcheckbox"` + `aria-checked`)
+ * with its `ContextMenuCheckboxItemIndicator`, and `ContextMenuRadioItem` (`role="menuitemradio"`)
+ * rows inside the plain `role="group"` Base UI's `RadioGroup` renders, with their
+ * `ContextMenuRadioItemIndicator`s. The indicators pin `data-selected=""` on the checked rows; the
+ * unchecked indicators stay mounted so the leading gutter column holds, exactly like the
+ * `keepMounted` grafts.
+ */
+export const SelectionItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ContextMenuPopup role="menu">
+      <div role="group" aria-labelledby="context-menu-elements-selection-display">
+        <ContextMenuGroupLabel id="context-menu-elements-selection-display">
+          Display
+        </ContextMenuGroupLabel>
+        <ContextMenuCheckboxItem role="menuitemcheckbox" aria-checked="true" tone="neutral">
+          <ContextMenuCheckboxItemIndicator data-selected="">
+            <Check />
+          </ContextMenuCheckboxItemIndicator>
+          <ContextMenuItemLabel>Show sub-issues</ContextMenuItemLabel>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem role="menuitemcheckbox" aria-checked="false" tone="neutral">
+          <ContextMenuCheckboxItemIndicator>
+            <Check />
+          </ContextMenuCheckboxItemIndicator>
+          <ContextMenuItemLabel>Show empty groups</ContextMenuItemLabel>
+        </ContextMenuCheckboxItem>
+      </div>
+      <ContextMenuSeparator role="separator" />
+      <div role="group" aria-labelledby="context-menu-elements-selection-order">
+        <ContextMenuGroupLabel id="context-menu-elements-selection-order">
+          Order by
+        </ContextMenuGroupLabel>
+        <ContextMenuRadioItem role="menuitemradio" aria-checked="true" tone="neutral">
+          <ContextMenuRadioItemIndicator data-selected="">
+            <Dot />
+          </ContextMenuRadioItemIndicator>
+          <ContextMenuItemLabel>Manual</ContextMenuItemLabel>
+        </ContextMenuRadioItem>
+        <ContextMenuRadioItem role="menuitemradio" aria-checked="false" tone="neutral">
+          <ContextMenuRadioItemIndicator>
+            <Dot />
+          </ContextMenuRadioItemIndicator>
+          <ContextMenuItemLabel>Created date</ContextMenuItemLabel>
+        </ContextMenuRadioItem>
+        <ContextMenuRadioItem role="menuitemradio" aria-checked="false" tone="neutral">
+          <ContextMenuRadioItemIndicator>
+            <Dot />
+          </ContextMenuRadioItemIndicator>
+          <ContextMenuItemLabel>Priority</ContextMenuItemLabel>
+        </ContextMenuRadioItem>
+      </div>
+    </ContextMenuPopup>
+  ),
+};
+
+/**
+ * Navigation rows: `ContextMenuLinkItem` renders a real `<a>` (href/target are native attributes)
+ * styled identically to `ContextMenuItem`, so destinations sit beside action rows. The second link
+ * pins `data-highlighted=""`.
+ */
+export const LinkItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ContextMenuPopup role="menu">
+      <ContextMenuLinkItem
+        role="menuitem"
+        tone="neutral"
+        href="#work-item"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Icon>
+          <ExternalLink />
+        </Icon>
+        <ContextMenuItemLabel>Open in new tab</ContextMenuItemLabel>
+      </ContextMenuLinkItem>
+      <ContextMenuLinkItem role="menuitem" tone="neutral" href="#activity" data-highlighted="">
+        <Icon>
+          <Link2 />
+        </Icon>
+        <ContextMenuItemLabel>Go to activity</ContextMenuItemLabel>
+      </ContextMenuLinkItem>
+      <ContextMenuSeparator role="separator" />
+      <ContextMenuItem role="menuitem" tone="neutral">
+        <Icon>
+          <Copy />
+        </Icon>
+        <ContextMenuItemLabel>Copy link</ContextMenuItemLabel>
+        <ContextMenuItemShortcut>⌘C</ContextMenuItemShortcut>
+      </ContextMenuItem>
+    </ContextMenuPopup>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-highlighted` row gains the hover fill, the `data-disabled` row swaps to the disabled text
+ * color, `data-popup-open` keeps the submenu trigger filled, the `not-data-selected:invisible`
+ * indicator hides only the unselected check, and the `data-starting-style`/`data-ending-style`
+ * popups compute to opacity 0. Tagged out of the sidebar/docs/manifest while still running under
+ * the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement }) => {
+    const rowStyle = (label: string) => {
+      const row = canvas.getByText(label).closest('[role="menuitem"]');
+      if (!(row instanceof HTMLElement)) throw new Error(`missing "${label}" row`);
+      return getComputedStyle(row);
+    };
+    const indicatorStyle = (label: string) => {
+      const indicator = canvas
+        .getByText(label)
+        .closest('[role="menuitem"]')
+        ?.querySelector("[aria-hidden]");
+      if (!(indicator instanceof HTMLElement)) throw new Error(`missing "${label}" indicator`);
+      return getComputedStyle(indicator);
+    };
+
+    // `data-highlighted:bg-layer-transparent-hover` fills the highlighted row (and the
+    // `data-popup-open` submenu trigger) away from the resting row's transparent background.
+    await expect(rowStyle("Highlighted").backgroundColor).not.toBe(
+      rowStyle("Resting").backgroundColor,
+    );
+    await expect(rowStyle("Submenu open").backgroundColor).not.toBe(
+      rowStyle("Submenu closed").backgroundColor,
+    );
+
+    // `data-disabled:text-disabled` swaps the row's text color.
+    await expect(rowStyle("Disabled").color).not.toBe(rowStyle("Resting").color);
+
+    // `not-data-selected:invisible` hides only the indicator without `data-selected`.
+    await expect(indicatorStyle("Selected").visibility).toBe("visible");
+    await expect(indicatorStyle("Unselected").visibility).toBe("hidden");
+
+    // `data-starting-style`/`data-ending-style` pin the popup at the faded transition endpoint.
+    for (const selector of ["[data-starting-style]", "[data-ending-style]"]) {
+      const popup = canvasElement.querySelector(selector);
+      if (!(popup instanceof HTMLElement)) throw new Error(`missing pinned ${selector} popup`);
+      await expect(getComputedStyle(popup).opacity).toBe("0");
+    }
+  },
+};
diff --git a/packages/propel/src/elements/context-menu/index.tsx b/packages/propel/src/elements/context-menu/index.tsx
new file mode 100644
index 00000000..1a20ffd9
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/index.tsx
@@ -0,0 +1,13 @@
+export * from "./context-menu-checkbox-item";
+export * from "./context-menu-checkbox-item-indicator";
+export * from "./context-menu-group-label";
+export * from "./context-menu-item";
+export * from "./context-menu-item-indicator";
+export * from "./context-menu-item-label";
+export * from "./context-menu-item-shortcut";
+export * from "./context-menu-link-item";
+export * from "./context-menu-popup";
+export * from "./context-menu-radio-item";
+export * from "./context-menu-radio-item-indicator";
+export * from "./context-menu-separator";
+export * from "./context-menu-submenu-trigger";
diff --git a/packages/propel/src/elements/context-menu/variants.ts b/packages/propel/src/elements/context-menu/variants.ts
new file mode 100644
index 00000000..83a981ec
--- /dev/null
+++ b/packages/propel/src/elements/context-menu/variants.ts
@@ -0,0 +1,111 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { itemIndicatorClass } from "../../internal/item-indicator";
+import { groupLabelClass } from "../../internal/listbox-group-label";
+import { menuSeparatorClass, rowMetaClass } from "../../internal/menu-row-parts";
+import { nodeSlotClass } from "../../internal/node-slot";
+import { popupSurfaceClass } from "../../internal/popup-surface";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/** Popup: the menu surface, animated from its pointer-anchored transform origin. */
+export const contextMenuPopupVariants = cva(cx(popupSurfaceClass, "min-w-40 p-1"));
+
+/**
+ * Item rows: shared styling for Item, LinkItem, CheckboxItem and RadioItem. `--node-size` sizes the
+ * row's icon regions (leading icon, selection indicator) to the 16px row glyph.
+ */
+export const contextMenuItemVariants = cva(
+  cx(
+    "flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
+    "data-highlighted:bg-layer-transparent-hover",
+    "data-disabled:pointer-events-none data-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+      tone: {
+        neutral: "text-secondary data-highlighted:text-primary",
+        danger:
+          "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary",
+      },
+    },
+  },
+);
+
+/**
+ * Submenu trigger row: extends item styles with the `group/item` marker and popup-open highlight.
+ * `group/item` lets the trailing submenu caret react to the trigger's disabled state.
+ */
+export const contextMenuSubmenuTriggerVariants = cva(
+  cx(
+    "group/item flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
+    "data-highlighted:bg-layer-transparent-hover",
+    "data-popup-open:bg-layer-transparent-hover",
+    "data-disabled:pointer-events-none data-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+      tone: {
+        neutral: "text-secondary data-highlighted:text-primary data-popup-open:text-primary",
+        danger:
+          "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary data-popup-open:text-danger-primary",
+      },
+    },
+  },
+);
+
+/** The growing label region of an item row; fills the row so trailing regions sit at the inline-end. */
+export const contextMenuItemLabelVariants = cva("min-w-0 flex-1 truncate");
+
+/** The trailing keyboard-shortcut text region, sitting at the row's inline-end. */
+export const contextMenuItemShortcutVariants = cva(rowMetaClass);
+
+/**
+ * Selection indicator region: the check inside checkbox/radio items and the trailing check of a
+ * single-select `ContextMenuItem`. Sizes its single child to the row's `--node-size` and tints it
+ * accent.
+ */
+export const contextMenuItemIndicatorVariants = cva(itemIndicatorClass);
+
+/**
+ * The tick region of a checkbox row. Kept mounted for a stable gutter; Base UI marks it
+ * `data-unchecked` while off, which hides the glyph (its own contract — `itemIndicatorClass` keys
+ * off `data-selected`, which checkbox/radio indicators never receive).
+ */
+export const contextMenuCheckboxItemIndicatorVariants = cva(
+  cx(nodeSlotClass, "text-icon-accent-primary [--node-size:1rem] data-unchecked:invisible"),
+);
+
+/** The dot region of a radio row: a small filled circle, hidden while `data-unchecked`. */
+export const contextMenuRadioItemIndicatorVariants = cva(
+  cx(
+    nodeSlotClass,
+    "text-icon-accent-primary [--node-size:1rem] data-unchecked:invisible",
+    "[&>svg]:size-2 [&>svg]:fill-current",
+  ),
+);
+
+/** Separator: a thin divider spanning the popup padding. */
+export const contextMenuSeparatorVariants = cva(menuSeparatorClass);
+
+/** GroupLabel: a non-interactive section heading. */
+export const contextMenuGroupLabelVariants = cva(groupLabelClass);
+
+type ContextMenuItemVariantConfig = VariantProps<typeof contextMenuItemVariants>;
+/** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+export type ContextMenuItemTone = NonNullable<ContextMenuItemVariantConfig["tone"]>;
+
+export type ContextMenuItemVariantProps = StrictVariantProps<typeof contextMenuItemVariants>;
+
+type ContextMenuSubmenuTriggerVariantConfig = VariantProps<
+  typeof contextMenuSubmenuTriggerVariants
+>;
+/** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+export type ContextMenuSubmenuTriggerTone = NonNullable<
+  ContextMenuSubmenuTriggerVariantConfig["tone"]
+>;
+
+export type ContextMenuSubmenuTriggerVariantProps = StrictVariantProps<
+  typeof contextMenuSubmenuTriggerVariants
+>;
diff --git a/packages/propel/src/elements/dialog/dialog-actions.tsx b/packages/propel/src/elements/dialog/dialog-actions.tsx
new file mode 100644
index 00000000..99b5355c
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog-actions.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { dialogActionsVariants } from "./variants";
+
+export type DialogActionsProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The footer row of the dialog popup. Right-aligns action buttons (cancel, confirm, etc.) with a
+ * gap between them. Padding is baked in to match the header and body gutters.
+ */
+export function DialogActions({ render, ...props }: DialogActionsProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: dialogActionsVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/dialog/dialog-body.tsx b/packages/propel/src/elements/dialog/dialog-body.tsx
new file mode 100644
index 00000000..4518c7a5
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog-body.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { dialogBodyVariants } from "./variants";
+
+export type DialogBodyProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The scrollable main content region of the dialog popup. Grows to fill available space and scrolls
+ * vertically when content exceeds the popup's max-height. Side padding is baked in. Pass any
+ * content — plain text, form fields, lists — as children.
+ */
+export function DialogBody({ render, ...props }: DialogBodyProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: dialogBodyVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/dialog/dialog-header.tsx b/packages/propel/src/elements/dialog/dialog-header.tsx
new file mode 100644
index 00000000..e4f88013
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog-header.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { dialogHeaderVariants } from "./variants";
+
+export type DialogHeaderProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The top region of the dialog popup. Lays out a `DialogHeading` (title + optional description) at
+ * the inline-start and an optional close `IconButton` at the inline-end. Padding is baked in; the
+ * spacing to the body/actions is provided by the parent `DialogPopup` via its `gap`.
+ */
+export function DialogHeader({ render, ...props }: DialogHeaderProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: dialogHeaderVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/dialog/dialog-heading.tsx b/packages/propel/src/elements/dialog/dialog-heading.tsx
new file mode 100644
index 00000000..145a1934
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog-heading.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { dialogHeadingVariants } from "./variants";
+
+export type DialogHeadingProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The heading block inside a `DialogHeader`: stacks the `DialogTitle` over an optional
+ * `DialogDescription` with a tight gap, sitting at the header's inline-start opposite the close
+ * button. Holding the title/description together as one block keeps them aligned to the start while
+ * the close stays pinned to the inline-end corner.
+ */
+export function DialogHeading({ render, ...props }: DialogHeadingProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: dialogHeadingVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/dialog/dialog-popup.tsx b/packages/propel/src/elements/dialog/dialog-popup.tsx
new file mode 100644
index 00000000..e33c2c11
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog-popup.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type DialogPopupVariantProps, dialogPopupVariants } from "./variants";
+
+export type { DialogPopupMagnitude } from "./variants";
+
+export type DialogPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  DialogPopupVariantProps;
+
+/**
+ * The centered card that holds the dialog content. Base-UI-agnostic — graft the dialog behavior in
+ * `components` via `<BaseDialog.Popup render={<DialogPopup magnitude="sm" />} />`.
+ *
+ * `magnitude` sets the popup width (`sm` = 320 px, `md` = 384 px, `lg` = 512 px) and is required so
+ * every call-site is explicit.
+ */
+export function DialogPopup({ magnitude, render, ...props }: DialogPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: dialogPopupVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/dialog/dialog-viewport.tsx b/packages/propel/src/elements/dialog/dialog-viewport.tsx
new file mode 100644
index 00000000..6f12b543
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog-viewport.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { dialogViewportVariants } from "./variants";
+
+export type DialogViewportProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The full-screen container that centers the popup and provides a scrollable area for tall content.
+ * Base-UI-agnostic — graft the dialog behavior in `components` via `<BaseDialog.Viewport
+ * render={<DialogViewport />} />`.
+ */
+export function DialogViewport({ render, ...props }: DialogViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: dialogViewportVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/dialog/dialog.stories.tsx b/packages/propel/src/elements/dialog/dialog.stories.tsx
new file mode 100644
index 00000000..cf0046fd
--- /dev/null
+++ b/packages/propel/src/elements/dialog/dialog.stories.tsx
@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { X } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Backdrop } from "../../internal/backdrop";
+import { Icon } from "../../internal/icon";
+import { OverlayDescription } from "../../internal/overlay-description";
+import { OverlayTitle } from "../../internal/overlay-title";
+import { Button, ButtonLabel } from "../button";
+import { IconButton } from "../icon-button";
+import {
+  DialogActions,
+  DialogBody,
+  DialogHeader,
+  DialogHeading,
+  DialogPopup,
+  type DialogPopupProps,
+  DialogViewport,
+} from "./index";
+
+const MAGNITUDES: DialogPopupProps["magnitude"][] = ["sm", "md", "lg"];
+const MAGNITUDE_WIDTHS = { sm: "320px", md: "384px", lg: "512px" } as const;
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the popup's transition poses pinned statically via the
+// `data-starting-style`/`data-ending-style` attributes Base UI's dialog would set. The Root,
+// Trigger, Portal, and Close are behavior-only roles (they live in `components`); the Backdrop,
+// Title, and Description are shared `internal/` chrome the dialog adopts, composed here directly
+// for fidelity. Opening, dismissal, focus, and aria behavior are demonstrated AND tested in the
+// components-tier story (Components/Dialog).
+const meta = {
+  title: "Elements/Dialog",
+  component: DialogPopup,
+  subcomponents: {
+    DialogViewport,
+    DialogHeader,
+    DialogHeading,
+    DialogBody,
+    DialogActions,
+  },
+  args: { magnitude: "sm" },
+} satisfies Meta<typeof DialogPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically, as Base UI would lay it out while open: the shared
+ * `Backdrop` dims the page, `DialogViewport` centers the popup, and `DialogPopup` stacks
+ * `DialogHeader` (a `DialogHeading` holding the shared `OverlayTitle`, opposite a close
+ * `IconButton`), the scrollable `DialogBody` (holding the shared `OverlayDescription`), and the
+ * trailing-aligned `DialogActions`. The backdrop and viewport are `fixed inset-0`, so the demo
+ * frame carries a `transform` to become their containing block — pinning the overlay inside the
+ * frame instead of over the whole page.
+ */
+export const Default: Story = {
+  render: ({ magnitude }) => (
+    <div className="relative h-120 w-full [transform:translateZ(0)] overflow-hidden rounded-lg border-sm border-subtle">
+      <Backdrop />
+      <DialogViewport>
+        <DialogPopup magnitude={magnitude}>
+          <DialogHeader>
+            <DialogHeading>
+              <OverlayTitle magnitude="lg">Delete project</OverlayTitle>
+            </DialogHeading>
+            <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
+              <Icon>
+                <X />
+              </Icon>
+            </IconButton>
+          </DialogHeader>
+          <DialogBody>
+            <OverlayDescription magnitude="lg">
+              This permanently removes the project and all of its work items.
+            </OverlayDescription>
+          </DialogBody>
+          <DialogActions>
+            <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+              <ButtonLabel>Cancel</ButtonLabel>
+            </Button>
+            <Button sizing="hug" prominence="primary" tone="danger" magnitude="xl">
+              <ButtonLabel>Delete</ButtonLabel>
+            </Button>
+          </DialogActions>
+        </DialogPopup>
+      </DialogViewport>
+    </div>
+  ),
+};
+
+/**
+ * The popup's width axis — `sm` = 320 px, `md` = 384 px, `lg` = 512 px — required at every call
+ * site. The popups render inline (they are just styled divs); the centering viewport and backdrop
+ * are omitted so the three widths read side by side.
+ */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex flex-col items-start gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <DialogPopup key={magnitude} magnitude={magnitude}>
+          <DialogHeader>
+            <DialogHeading>
+              <OverlayTitle magnitude="lg">
+                {magnitude} — {MAGNITUDE_WIDTHS[magnitude]}
+              </OverlayTitle>
+            </DialogHeading>
+            <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
+              <Icon>
+                <X />
+              </Icon>
+            </IconButton>
+          </DialogHeader>
+          <DialogBody>
+            <OverlayDescription magnitude="lg">
+              The header, body, and actions gutters stay constant across widths.
+            </OverlayDescription>
+          </DialogBody>
+          <DialogActions>
+            <Button sizing="hug" prominence="primary" tone="neutral" magnitude="xl">
+              <ButtonLabel>Confirm</ButtonLabel>
+            </Button>
+          </DialogActions>
+        </DialogPopup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The popup's transition poses, pinned statically:
+ *
+ * - **Resting** — the open pose: full opacity, natural scale.
+ * - **Entering** — `data-starting-style=""` pins the pre-open endpoint of the transition (`opacity-0
+ *   scale-95`), so the card is intentionally invisible while holding its layout.
+ * - **Exiting** — `data-ending-style=""` pins the same faded, scaled-down endpoint on the way closed.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: ({ magnitude }) => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Resting</p>
+        <DialogPopup id="dialog-popup-resting" magnitude={magnitude}>
+          <DialogHeader>
+            <DialogHeading>
+              <OverlayTitle magnitude="lg">Resting</OverlayTitle>
+            </DialogHeading>
+          </DialogHeader>
+          <DialogBody>
+            <OverlayDescription magnitude="lg">The open pose.</OverlayDescription>
+          </DialogBody>
+          <DialogActions>
+            <Button sizing="hug" prominence="primary" tone="neutral" magnitude="xl">
+              <ButtonLabel>Confirm</ButtonLabel>
+            </Button>
+          </DialogActions>
+        </DialogPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Entering (data-starting-style) — invisible</p>
+        <DialogPopup id="dialog-popup-entering" magnitude={magnitude} data-starting-style="">
+          <DialogHeader>
+            <DialogHeading>
+              <OverlayTitle magnitude="lg">Entering</OverlayTitle>
+            </DialogHeading>
+          </DialogHeader>
+          <DialogBody>
+            <OverlayDescription magnitude="lg">Pinned at opacity-0 scale-95.</OverlayDescription>
+          </DialogBody>
+          <DialogActions>
+            <Button sizing="hug" prominence="primary" tone="neutral" magnitude="xl">
+              <ButtonLabel>Confirm</ButtonLabel>
+            </Button>
+          </DialogActions>
+        </DialogPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Exiting (data-ending-style) — invisible</p>
+        <DialogPopup id="dialog-popup-exiting" magnitude={magnitude} data-ending-style="">
+          <DialogHeader>
+            <DialogHeading>
+              <OverlayTitle magnitude="lg">Exiting</OverlayTitle>
+            </DialogHeading>
+          </DialogHeader>
+          <DialogBody>
+            <OverlayDescription magnitude="lg">Pinned at opacity-0 scale-95.</OverlayDescription>
+          </DialogBody>
+          <DialogActions>
+            <Button sizing="hug" prominence="primary" tone="neutral" magnitude="xl">
+              <ButtonLabel>Confirm</ButtonLabel>
+            </Button>
+          </DialogActions>
+        </DialogPopup>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-starting-style`/`data-ending-style` popups compute to opacity 0 while the resting popup
+ * stays fully opaque. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const popup = (id: string) => {
+      const el = canvasElement.querySelector(`#${id}`);
+      if (!(el instanceof HTMLElement)) throw new Error(`missing #${id} popup`);
+      return el;
+    };
+    // The compiled `data-starting-style:opacity-0` / `data-ending-style:opacity-0` selectors pin
+    // the transition endpoints; the resting popup carries neither attribute.
+    await expect(getComputedStyle(popup("dialog-popup-resting")).opacity).toBe("1");
+    await expect(getComputedStyle(popup("dialog-popup-entering")).opacity).toBe("0");
+    await expect(getComputedStyle(popup("dialog-popup-exiting")).opacity).toBe("0");
+  },
+};
diff --git a/packages/propel/src/elements/dialog/index.tsx b/packages/propel/src/elements/dialog/index.tsx
new file mode 100644
index 00000000..5a5096cf
--- /dev/null
+++ b/packages/propel/src/elements/dialog/index.tsx
@@ -0,0 +1,6 @@
+export * from "./dialog-actions";
+export * from "./dialog-body";
+export * from "./dialog-header";
+export * from "./dialog-heading";
+export * from "./dialog-popup";
+export * from "./dialog-viewport";
diff --git a/packages/propel/src/elements/dialog/variants.ts b/packages/propel/src/elements/dialog/variants.ts
new file mode 100644
index 00000000..239e9a67
--- /dev/null
+++ b/packages/propel/src/elements/dialog/variants.ts
@@ -0,0 +1,71 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import {
+  modalViewportClass,
+  overlayActionsClass,
+  overlayHeadingClass,
+} from "../../internal/overlay-frame";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// Dialog is a structural overlay primitive. Base UI drives every interactive
+// state (open/closed, starting/ending transition styles) as data attributes.
+// Width (magnitude) is an adjustable axis per the design spec; every other
+// structural chrome is baked in. The cva pairings below hold all static
+// and variant-driven styling so each part is styled in one place, with no
+// `className` at the boundary. The Backdrop, Title, and Description are shared
+// overlay chrome adopted from `internal/` (rule 4a), so they carry no cva here.
+
+export const dialogViewportVariants = cva(modalViewportClass);
+
+export const dialogPopupVariants = cva(
+  cx(
+    // chrome — no padding; per-section parts (Header/Body/Actions) own their
+    // own padding so each region can scroll or space correctly.
+    "flex flex-col gap-4 rounded-lg border-sm border-subtle bg-layer-1 shadow-overlay-100 outline-none",
+    // max-height: cap the popup at the viewport (minus gutter) so the body scrolls
+    // rather than the whole dialog overflowing.
+    "max-h-[calc(100dvh-2rem)]",
+    // open/close animation
+    "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",
+  ),
+  {
+    variants: {
+      // Width axis — "always adjustable" per the design spec. sm/md/lg are
+      // the Figma widths; required so each call-site is explicit.
+      magnitude: {
+        sm: "w-80", // 320px
+        md: "w-96", // 384px
+        lg: "w-128",
+      },
+    },
+  },
+);
+
+// DialogHeader: the row that holds the heading block (title + optional
+// description) at the inline-start alongside the inline-end close button. Padding
+// matches the popup's top/side gutter; there is no bottom padding — the gap on the
+// popup provides spacing. `items-start` keeps the close aligned to the first line
+// of a multi-line title.
+export const dialogHeaderVariants = cva("flex items-start justify-between gap-4 px-4 pt-4");
+
+// DialogHeading: the title-over-description block at the header's inline-start.
+// Stacks the two with a tight gap so they read as one heading group opposite the
+// close button.
+export const dialogHeadingVariants = cva(overlayHeadingClass);
+
+// DialogBody: the scrollable main content region. `min-h-0 flex-1 overflow-y-auto`
+// lets it shrink inside the flex popup so the actions stay pinned at the bottom;
+// `overscroll-contain` prevents the page from scrolling when the body hits its limit.
+export const dialogBodyVariants = cva("min-h-0 flex-1 overflow-y-auto overscroll-contain px-4");
+
+// DialogActions: the right-aligned footer row for action buttons. Padding mirrors
+// the header gutter. Sticks to the bottom via the flex popup layout.
+export const dialogActionsVariants = cva(cx(overlayActionsClass, "px-4 pb-4"));
+
+export type DialogPopupVariantProps = StrictVariantProps<typeof dialogPopupVariants>;
+
+export type DialogPopupMagnitude = NonNullable<
+  VariantProps<typeof dialogPopupVariants>["magnitude"]
+>;
diff --git a/packages/propel/src/ui/drawer/drawer-body.tsx b/packages/propel/src/elements/drawer/drawer-body.tsx
similarity index 100%
rename from packages/propel/src/ui/drawer/drawer-body.tsx
rename to packages/propel/src/elements/drawer/drawer-body.tsx
diff --git a/packages/propel/src/elements/drawer/drawer-close.tsx b/packages/propel/src/elements/drawer/drawer-close.tsx
new file mode 100644
index 00000000..c7e21408
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-close.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { drawerCloseVariants } from "./variants";
+
+export type DrawerCloseProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * The styled bare close control. Place inside the content for a dismiss button. Base-UI-agnostic —
+ * graft the drawer behavior in `components` via `<BaseDrawer.Close render={<DrawerClose />} />`.
+ */
+export function DrawerClose({ render, ...props }: DrawerCloseProps) {
+  const defaultProps: useRender.ElementProps<"button"> = { className: drawerCloseVariants() };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer-content.tsx b/packages/propel/src/elements/drawer/drawer-content.tsx
new file mode 100644
index 00000000..893fc3f3
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-content.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { drawerContentVariants } from "./variants";
+
+export type DrawerContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled padded inner content region of the popup. Holds the title, description, body, and
+ * close affordances, and allows mouse text selection without triggering swipe-dismiss.
+ * Base-UI-agnostic — graft the drawer behavior in `components` via `<BaseDrawer.Content
+ * render={<DrawerContent />} />`.
+ */
+export function DrawerContent({ render, ...props }: DrawerContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: drawerContentVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer-footer.tsx b/packages/propel/src/elements/drawer/drawer-footer.tsx
new file mode 100644
index 00000000..098ab6bc
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-footer.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { drawerFooterVariants } from "./variants";
+
+export type DrawerFooterProps = Omit<useRender.ComponentProps<"footer">, "className" | "style">;
+
+/** The drawer's footer actions region (the Figma footer). Lays its actions at the inline-end. */
+export function DrawerFooter({ render, ...props }: DrawerFooterProps) {
+  const defaultProps: useRender.ElementProps<"footer"> = { className: drawerFooterVariants() };
+  return useRender({ defaultTagName: "footer", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer-header-content.tsx b/packages/propel/src/elements/drawer/drawer-header-content.tsx
new file mode 100644
index 00000000..ded58eab
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-header-content.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { drawerHeaderContentVariants } from "./variants";
+
+export type DrawerHeaderContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The stacked title + description inside a `DrawerHeader`. Groups them at the header's inline-start
+ * so a corner close can sit opposite at the inline-end; a long title wraps instead of pushing the
+ * close off the row.
+ */
+export function DrawerHeaderContent({ render, ...props }: DrawerHeaderContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: drawerHeaderContentVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer-header.tsx b/packages/propel/src/elements/drawer/drawer-header.tsx
new file mode 100644
index 00000000..92fb75e1
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-header.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { drawerHeaderVariants } from "./variants";
+
+export type DrawerHeaderProps = Omit<useRender.ComponentProps<"header">, "className" | "style">;
+
+/**
+ * The drawer's top region (the Figma header). Lays the title/description heading block at the
+ * inline-start and an optional corner close at the inline-end on one baseline. Compose a
+ * `DrawerHeaderContent` for the title/description stack.
+ */
+export function DrawerHeader({ render, ...props }: DrawerHeaderProps) {
+  const defaultProps: useRender.ElementProps<"header"> = { className: drawerHeaderVariants() };
+  return useRender({ defaultTagName: "header", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer-popup.tsx b/packages/propel/src/elements/drawer/drawer-popup.tsx
new file mode 100644
index 00000000..0795b7b2
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-popup.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type DrawerPopupVariantProps, drawerPopupVariants } from "./variants";
+
+export type { DrawerPopupSide } from "./variants";
+
+export type DrawerPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  DrawerPopupVariantProps;
+
+/**
+ * The styled sliding panel. Anchored to `side` ("start" or "end") and slides in/out using Base UI's
+ * `data-starting-style`/`data-ending-style` transforms; the leading-edge shadow border follows the
+ * same side. Base-UI-agnostic — graft the drawer behavior in `components` via `<BaseDrawer.Popup
+ * render={<DrawerPopup side={…} />} />`.
+ */
+export function DrawerPopup({ side, render, ...props }: DrawerPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: drawerPopupVariants({ side }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer-viewport.tsx b/packages/propel/src/elements/drawer/drawer-viewport.tsx
new file mode 100644
index 00000000..f8ad3eb4
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer-viewport.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { drawerViewportVariants } from "./variants";
+
+export type DrawerViewportProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled fixed, full-screen layer that positions the popup against a screen edge. Wraps the
+ * `DrawerPopup` and aligns it via layout. Base-UI-agnostic — graft the drawer behavior in
+ * `components` via `<BaseDrawer.Viewport render={<DrawerViewport />} />`.
+ */
+export function DrawerViewport({ render, ...props }: DrawerViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: drawerViewportVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/drawer/drawer.stories.tsx b/packages/propel/src/elements/drawer/drawer.stories.tsx
new file mode 100644
index 00000000..28ec4893
--- /dev/null
+++ b/packages/propel/src/elements/drawer/drawer.stories.tsx
@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { X } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Backdrop } from "../../internal/backdrop";
+import { Icon } from "../../internal/icon";
+import { OverlayDescription } from "../../internal/overlay-description";
+import { OverlayTitle } from "../../internal/overlay-title";
+import { Button } from "../button";
+import {
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerHeaderContent,
+  DrawerPopup,
+  type DrawerPopupSide,
+  DrawerViewport,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the `data-*`
+// attributes Base UI's drawer would set (`data-starting-style=""` / `data-ending-style=""` on the
+// popup, which slide it off its anchor edge). The dimmed backdrop and the title/description
+// heading pair are shared `internal/` chrome (`Backdrop`, `OverlayTitle`, `OverlayDescription`),
+// rendered statically here the way the components tier grafts them. The one variant axis in this
+// family is the popup's anchor `side`; everything else is static chrome. Opening, dismissal,
+// keyboard, and aria wiring are demonstrated AND tested in the components-tier story
+// (Components/Drawer).
+const meta = {
+  title: "Elements/Drawer",
+  component: DrawerPopup,
+  subcomponents: {
+    DrawerViewport,
+    DrawerContent,
+    DrawerHeader,
+    DrawerHeaderContent,
+    DrawerBody,
+    DrawerFooter,
+    DrawerClose,
+  },
+  args: { side: "end" },
+} satisfies Meta<typeof DrawerPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// The `side` axis of `DrawerPopup` — the viewport edge the panel anchors to. The leading-edge
+// shadow border and the slide direction both follow it.
+const SIDES: DrawerPopupSide[] = ["start", "end"];
+
+/**
+ * The full anatomy assembled statically: the shared internal `Backdrop` dims the stage,
+ * `DrawerViewport` is the full-screen positioning layer, and `DrawerPopup` (anchored to `side`)
+ * holds `DrawerContent` › `DrawerHeader` (`DrawerHeaderContent` stacking the shared
+ * `OverlayTitle`/`OverlayDescription`, with the bare `DrawerClose` affordance opposite),
+ * `DrawerBody`, and `DrawerFooter`. The backdrop, viewport, and popup are `fixed`, so the stage
+ * uses `contain-layout` to scope them to the story canvas — in the real composition they pin to the
+ * screen edges.
+ */
+export const Default: Story = {
+  render: ({ side }) => (
+    <div className="h-120 w-full overflow-hidden contain-layout">
+      <Backdrop />
+      <DrawerViewport>
+        <DrawerPopup side={side}>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerHeaderContent>
+                <OverlayTitle magnitude="lg">Work item details</OverlayTitle>
+                <OverlayDescription magnitude="lg">
+                  Edit the fields for this work item.
+                </OverlayDescription>
+              </DrawerHeaderContent>
+              <DrawerClose aria-label="Close">
+                <Icon magnitude="md">
+                  <X />
+                </Icon>
+              </DrawerClose>
+            </DrawerHeader>
+            <DrawerBody>Panel body content goes here.</DrawerBody>
+            <DrawerFooter>
+              <Button sizing="hug" prominence="ghost" tone="neutral" magnitude="lg">
+                Cancel
+              </Button>
+              <Button sizing="hug" prominence="primary" tone="neutral" magnitude="lg">
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </DrawerPopup>
+      </DrawerViewport>
+    </div>
+  ),
+};
+
+/**
+ * The family's one variant axis: `DrawerPopup`'s required `side` picks the anchor edge — `start`
+ * pins to the inline-start (left in LTR) with a trailing-edge shadow border, `end` pins to the
+ * inline-end with a leading-edge one. The slide transition endpoints follow the same edge.
+ */
+export const Sides: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {SIDES.map((side) => (
+        <section key={side} aria-label={`side ${side}`} className="flex flex-col gap-2">
+          <OverlayDescription magnitude="lg">side="{side}"</OverlayDescription>
+          <div className="h-64 w-full overflow-hidden contain-layout">
+            <DrawerPopup side={side}>
+              <DrawerContent>
+                <DrawerHeader>
+                  <DrawerHeaderContent>
+                    <OverlayTitle magnitude="lg">Anchored {side}</OverlayTitle>
+                    <OverlayDescription magnitude="lg">
+                      Pinned to the inline-{side} edge.
+                    </OverlayDescription>
+                  </DrawerHeaderContent>
+                </DrawerHeader>
+              </DrawerContent>
+            </DrawerPopup>
+          </div>
+        </section>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state, statically:
+ *
+ * - **Resting** — the popup at its open resting pose, flush against its anchor edge.
+ * - **Entering** — `data-starting-style=""` pins the enter transition's start endpoint: the popup is
+ *   translated fully off its anchor edge, so the stage below the caption is intentionally empty
+ *   (the panel sits just outside the clipped stage).
+ * - **Exiting** — `data-ending-style=""` pins the exit transition's end endpoint (the same off-edge
+ *   pose).
+ * - **Close chrome** — the bare corner dismiss affordance `DrawerClose`; hover and focus-visible are
+ *   CSS pseudo-classes, forced here with the pseudo-states addon.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#drawer-close-hover"],
+      focusVisible: ["#drawer-close-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <section aria-label="Resting" className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">Resting</OverlayDescription>
+        <div className="h-64 w-full overflow-hidden contain-layout">
+          <DrawerPopup id="drawer-popup-resting" side="end">
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerHeaderContent>
+                  <OverlayTitle magnitude="lg">Resting</OverlayTitle>
+                  <OverlayDescription magnitude="lg">
+                    The popup at its open resting pose.
+                  </OverlayDescription>
+                </DrawerHeaderContent>
+              </DrawerHeader>
+            </DrawerContent>
+          </DrawerPopup>
+        </div>
+      </section>
+      <section aria-label="Entering" className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">
+          Entering — pinned at the off-edge data-starting-style endpoint
+        </OverlayDescription>
+        <div className="h-64 w-full overflow-hidden contain-layout">
+          <DrawerPopup data-starting-style="" side="end">
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerHeaderContent>
+                  <OverlayTitle magnitude="lg">Entering</OverlayTitle>
+                  <OverlayDescription magnitude="lg">
+                    Translated fully off the anchor edge.
+                  </OverlayDescription>
+                </DrawerHeaderContent>
+              </DrawerHeader>
+            </DrawerContent>
+          </DrawerPopup>
+        </div>
+      </section>
+      <section aria-label="Exiting" className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">
+          Exiting — pinned at the off-edge data-ending-style endpoint
+        </OverlayDescription>
+        <div className="h-64 w-full overflow-hidden contain-layout">
+          <DrawerPopup data-ending-style="" side="end">
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerHeaderContent>
+                  <OverlayTitle magnitude="lg">Exiting</OverlayTitle>
+                  <OverlayDescription magnitude="lg">
+                    Translated fully off the anchor edge.
+                  </OverlayDescription>
+                </DrawerHeaderContent>
+              </DrawerHeader>
+            </DrawerContent>
+          </DrawerPopup>
+        </div>
+      </section>
+      <div className="flex flex-col gap-2">
+        <OverlayDescription magnitude="lg">
+          Close chrome — resting, hover, focus-visible
+        </OverlayDescription>
+        <div className="flex items-center gap-3">
+          <DrawerClose aria-label="Close">
+            <Icon magnitude="md">
+              <X />
+            </Icon>
+          </DrawerClose>
+          <DrawerClose id="drawer-close-hover" aria-label="Close (hover)">
+            <Icon magnitude="md">
+              <X />
+            </Icon>
+          </DrawerClose>
+          <DrawerClose id="drawer-close-focus" aria-label="Close (focus-visible)">
+            <Icon magnitude="md">
+              <X />
+            </Icon>
+          </DrawerClose>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-starting-style`/`data-ending-style` popups compute a translation off the anchor edge while
+ * the resting popup stays untranslated and flush against the inline-end edge. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const popupStyle = (selector: string) => {
+      const popup = canvasElement.querySelector(selector);
+      if (!(popup instanceof HTMLElement)) throw new Error(`missing popup for ${selector}`);
+      return getComputedStyle(popup);
+    };
+    // The `side="end"` placement compiled: the resting popup sits flush against the inline-end
+    // edge of its containing stage, with no translation.
+    await expect(popupStyle("#drawer-popup-resting").insetInlineEnd).toBe("0px");
+    await expect(popupStyle("#drawer-popup-resting").translate).toBe("none");
+    // The compiled `data-starting-style:translate-x-full` / `data-ending-style:translate-x-full`
+    // selectors pin both transition endpoints fully off the anchor edge.
+    await expect(popupStyle("[data-starting-style]").translate).not.toBe("none");
+    await expect(popupStyle("[data-ending-style]").translate).not.toBe("none");
+  },
+};
diff --git a/packages/propel/src/elements/drawer/index.tsx b/packages/propel/src/elements/drawer/index.tsx
new file mode 100644
index 00000000..410d8e1c
--- /dev/null
+++ b/packages/propel/src/elements/drawer/index.tsx
@@ -0,0 +1,8 @@
+export * from "./drawer-viewport";
+export * from "./drawer-popup";
+export * from "./drawer-content";
+export * from "./drawer-header";
+export * from "./drawer-header-content";
+export * from "./drawer-body";
+export * from "./drawer-footer";
+export * from "./drawer-close";
diff --git a/packages/propel/src/elements/drawer/variants.ts b/packages/propel/src/elements/drawer/variants.ts
new file mode 100644
index 00000000..181dd7b9
--- /dev/null
+++ b/packages/propel/src/elements/drawer/variants.ts
@@ -0,0 +1,68 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { overlayActionsClass, overlayCloseClass } from "../../internal/overlay-frame";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// Drawer styles its edge-anchored parts here, one place, with no `className` at
+// the boundary. Base UI drives open/closed and swipe state as data attributes, so
+// the only styling axis exposed is the popup's anchor `side` (an adjustable axis
+// per the spec). The shared overlay surfaces — the dimmed backdrop and the
+// title/description heading pair — are adopted from `internal/` (`Backdrop`,
+// `OverlayTitle`, `OverlayDescription`) and grafted in `components`, so they carry
+// no drawer-specific cva. Behavior-only roles (Root, Provider, Indent,
+// IndentBackground, SwipeArea, Portal, Trigger) render no styled element and carry
+// no styling.
+
+export const drawerViewportVariants = cva("fixed inset-0 z-50");
+
+// `side` is the anchor edge: "end" pins to the inline-end (right in LTR) and
+// "start" pins to the inline-start (left in LTR). The shadow border and slide
+// animation both follow the side — "end" has a leading-edge border-s and slides
+// right; "start" has a leading-edge border-e and slides left.
+export const drawerPopupVariants = cva(
+  cx(
+    "fixed inset-y-0 z-50 flex h-full w-80 max-w-[90vw] flex-col",
+    "border-subtle bg-layer-1 shadow-overlay-100 outline-none",
+    "transition-transform duration-200",
+  ),
+  {
+    variants: {
+      side: {
+        end: cx(
+          "inset-e-0 border-s-sm",
+          "data-ending-style:translate-x-full data-starting-style:translate-x-full",
+        ),
+        start: cx(
+          "inset-s-0 border-e-sm",
+          "data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+        ),
+      },
+    },
+  },
+);
+
+type DrawerPopupVariantConfig = VariantProps<typeof drawerPopupVariants>;
+export type DrawerPopupSide = NonNullable<DrawerPopupVariantConfig["side"]>;
+export type DrawerPopupVariantProps = StrictVariantProps<typeof drawerPopupVariants>;
+
+export const drawerContentVariants = cva("flex min-h-0 flex-1 flex-col gap-2 p-4");
+
+// The drawer's top region (Figma "header"): the title/description heading block at
+// the inline-start and an optional corner close at the inline-end, on one baseline.
+export const drawerHeaderVariants = cva("flex items-start justify-between gap-4");
+
+// The stacked title + description inside the header. `min-w-0` lets a long title
+// wrap instead of pushing the corner close off the row.
+export const drawerHeaderContentVariants = cva("flex min-w-0 flex-col gap-1");
+
+// The drawer's main content region (Figma "body"). Grows to fill the space between
+// the header and footer and scrolls its overflow; the secondary text tone is the
+// baked-in body style.
+export const drawerBodyVariants = cva(
+  "flex min-h-0 flex-1 flex-col gap-2 overflow-auto text-14 text-secondary",
+);
+
+// The drawer's footer actions region (Figma "footer"). Actions sit at the inline-end.
+export const drawerFooterVariants = cva(cx(overlayActionsClass, "items-center"));
+
+export const drawerCloseVariants = cva(overlayCloseClass);
diff --git a/packages/propel/src/ui/field/field-control-content.tsx b/packages/propel/src/elements/field/field-control-content.tsx
similarity index 100%
rename from packages/propel/src/ui/field/field-control-content.tsx
rename to packages/propel/src/elements/field/field-control-content.tsx
diff --git a/packages/propel/src/elements/field/field-description.tsx b/packages/propel/src/elements/field/field-description.tsx
new file mode 100644
index 00000000..6139728a
--- /dev/null
+++ b/packages/propel/src/elements/field/field-description.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type FieldDescriptionVariantProps, fieldDescriptionVariants } from "./variants";
+
+export type FieldDescriptionProps = Omit<useRender.ComponentProps<"p">, "className" | "style"> &
+  FieldDescriptionVariantProps;
+
+/**
+ * Supporting / helper text for a custom field. Base-UI-agnostic — graft the Base UI
+ * `Field.Description` behavior in `components` via `<BaseField.Description
+ * render={<FieldDescription/>} />`.
+ */
+export function FieldDescription({ magnitude, render, ...props }: FieldDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: fieldDescriptionVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "p", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/field/field-error.tsx b/packages/propel/src/elements/field/field-error.tsx
new file mode 100644
index 00000000..929ba74e
--- /dev/null
+++ b/packages/propel/src/elements/field/field-error.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type FieldErrorVariantProps, fieldErrorVariants } from "./variants";
+
+export type FieldErrorProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  FieldErrorVariantProps;
+
+/**
+ * Error text for a custom field. Base-UI-agnostic — graft the Base UI `Field.Error` validation
+ * behavior in `components` via `<BaseField.Error render={<FieldError/>} />`.
+ */
+export function FieldError({ magnitude, render, ...props }: FieldErrorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: fieldErrorVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/field/field-item-content.tsx b/packages/propel/src/elements/field/field-item-content.tsx
new file mode 100644
index 00000000..435c5a79
--- /dev/null
+++ b/packages/propel/src/elements/field/field-item-content.tsx
@@ -0,0 +1,14 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { fieldItemContentVariants } from "./variants";
+
+export type FieldItemContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/** The label + description column for a single choice option (checkbox/radio/switch row). */
+export function FieldItemContent({ render, ...props }: FieldItemContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: fieldItemContentVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/field/field-item.tsx b/packages/propel/src/elements/field/field-item.tsx
new file mode 100644
index 00000000..037a4201
--- /dev/null
+++ b/packages/propel/src/elements/field/field-item.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { fieldItemVariants } from "./variants";
+
+export type FieldItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * Groups one checkbox or radio option with its label and optional description. Base-UI-agnostic —
+ * graft the Base UI `Field.Item` behavior in `components` via `<BaseField.Item
+ * render={<FieldItem/>} />`.
+ */
+export function FieldItem({ render, ...props }: FieldItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: fieldItemVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/field/field-label-group.tsx b/packages/propel/src/elements/field/field-label-group.tsx
similarity index 100%
rename from packages/propel/src/ui/field/field-label-group.tsx
rename to packages/propel/src/elements/field/field-label-group.tsx
diff --git a/packages/propel/src/elements/field/field-label-required-marker.tsx b/packages/propel/src/elements/field/field-label-required-marker.tsx
new file mode 100644
index 00000000..d09ca4a7
--- /dev/null
+++ b/packages/propel/src/elements/field/field-label-required-marker.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { fieldLabelRequiredMarkerVariants } from "./variants";
+
+export type FieldLabelRequiredMarkerProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The required marker slot shown after a `FieldLabel`'s text. Decorative (the control's `required`
+ * attribute carries the semantics), so it is `aria-hidden`. Bakes no glyph: pass the marker (e.g.
+ * an asterisk) as `children`.
+ */
+export function FieldLabelRequiredMarker({ render, ...props }: FieldLabelRequiredMarkerProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: fieldLabelRequiredMarkerVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/field/field-label.tsx b/packages/propel/src/elements/field/field-label.tsx
new file mode 100644
index 00000000..679abb56
--- /dev/null
+++ b/packages/propel/src/elements/field/field-label.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { fieldLabelVariants, type FieldLabelVariantProps } from "./variants";
+
+export type { FieldMagnitude } from "./variants";
+
+export type FieldLabelProps = Omit<useRender.ComponentProps<"label">, "className" | "style"> &
+  FieldLabelVariantProps;
+
+/**
+ * The label naming a field's control. Base-UI-agnostic — graft the Base UI `Field.Label`
+ * association in `components` via `<BaseField.Label render={<FieldLabel/>} />`.
+ */
+export function FieldLabel({ magnitude, inset, render, ...props }: FieldLabelProps) {
+  const defaultProps: useRender.ElementProps<"label"> = {
+    className: fieldLabelVariants({ magnitude, inset }),
+  };
+  return useRender({ defaultTagName: "label", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/field/field.stories.tsx b/packages/propel/src/elements/field/field.stories.tsx
new file mode 100644
index 00000000..93755537
--- /dev/null
+++ b/packages/propel/src/elements/field/field.stories.tsx
@@ -0,0 +1,359 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Checkbox, CheckboxIndicator } from "../checkbox/index";
+import { Input, InputGroup } from "../input/index";
+import {
+  Field,
+  FieldControlContent,
+  FieldDescription,
+  FieldError,
+  FieldItem,
+  FieldItemContent,
+  FieldLabel,
+  FieldLabelGroup,
+  FieldLabelRequiredMarker,
+} from "./index";
+
+const MAGNITUDES = ["md", "lg", "xl"] as const;
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The field parts are
+// Base-UI-agnostic styled elements rendered DIRECTLY — no `Field.Root` graft — with the
+// label/description/error wiring pinned statically via the `htmlFor`/`id`/`aria-describedby`/
+// `aria-invalid` attributes Base UI's Field would set, and the state looks pinned via
+// `data-invalid` (danger control border) and `data-disabled` (muted choice row). Labeling,
+// validation, and announcement BEHAVIOR is demonstrated and tested in Components/Field and the
+// ready-made per-control fields (Components/InputField, …).
+const meta = {
+  title: "Elements/Field",
+  component: Field,
+  subcomponents: {
+    FieldLabel,
+    FieldLabelRequiredMarker,
+    FieldLabelGroup,
+    FieldControlContent,
+    FieldDescription,
+    FieldError,
+    FieldItem,
+    FieldItemContent,
+  },
+  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: the `Field` column,
+ * `FieldLabel` naming the control, the input family's bordered group as the control, and
+ * `FieldDescription` as the hint. The `htmlFor`/`id`/`aria-describedby` wiring is pinned statically
+ * — it is what Base UI's `Field.Root` generates for you in the ready-made.
+ */
+export const Default: Story = {
+  render: () => (
+    <Field>
+      <FieldLabel magnitude="md" inset={false} htmlFor="elements-field-default-control">
+        Display name
+      </FieldLabel>
+      <InputGroup magnitude="md">
+        <Input
+          magnitude="md"
+          id="elements-field-default-control"
+          placeholder="Ada Lovelace"
+          aria-describedby="elements-field-default-description"
+        />
+      </InputGroup>
+      <FieldDescription magnitude="md" id="elements-field-default-description">
+        Shown anywhere your profile is visible.
+      </FieldDescription>
+    </Field>
+  ),
+};
+
+/**
+ * The required marker is a bare `aria-hidden` slot that bakes no glyph: the consumer passes the
+ * marker (here, the conventional asterisk) as `children`; the control's own `required` attribute
+ * carries the semantics.
+ */
+export const RequiredMarker: Story = {
+  render: () => (
+    <Field>
+      <FieldLabel magnitude="md" inset={false} htmlFor="elements-field-required-control">
+        Display name
+        <FieldLabelRequiredMarker>*</FieldLabelRequiredMarker>
+      </FieldLabel>
+      <InputGroup magnitude="md">
+        <Input
+          magnitude="md"
+          id="elements-field-required-control"
+          required
+          placeholder="Ada Lovelace"
+        />
+      </InputGroup>
+    </Field>
+  ),
+};
+
+/**
+ * Every field text magnitude: the label, control, and description scale together (md/lg/xl). Pass
+ * the same `magnitude` to each part of a field.
+ */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <Field key={magnitude}>
+          <FieldLabel
+            magnitude={magnitude}
+            inset={false}
+            htmlFor={`elements-field-magnitude-${magnitude}`}
+          >
+            Display name ({magnitude})
+          </FieldLabel>
+          <InputGroup magnitude={magnitude}>
+            <Input
+              magnitude={magnitude}
+              id={`elements-field-magnitude-${magnitude}`}
+              placeholder="Ada Lovelace"
+              aria-describedby={`elements-field-magnitude-${magnitude}-description`}
+            />
+          </InputGroup>
+          <FieldDescription
+            magnitude={magnitude}
+            id={`elements-field-magnitude-${magnitude}-description`}
+          >
+            Shown anywhere your profile is visible.
+          </FieldDescription>
+        </Field>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The invalid look, pinned statically: `data-invalid` on the control (what Base UI's `Field.Root
+ * invalid` propagates) recolors the wrapping group's border off `:has([data-invalid])`, and
+ * `FieldError` shows the danger message. `aria-invalid`/`aria-describedby` mirror the wiring the
+ * ready-made generates.
+ */
+export const Invalid: Story = {
+  render: () => (
+    <Field>
+      <FieldLabel magnitude="md" inset={false} htmlFor="elements-field-invalid-control">
+        Workspace slug
+      </FieldLabel>
+      <InputGroup magnitude="md">
+        <Input
+          magnitude="md"
+          id="elements-field-invalid-control"
+          defaultValue="Already taken"
+          aria-invalid="true"
+          data-invalid=""
+          aria-describedby="elements-field-invalid-error"
+        />
+      </InputGroup>
+      <FieldError magnitude="md" id="elements-field-invalid-error">
+        Choose a different workspace slug.
+      </FieldError>
+    </Field>
+  ),
+};
+
+/**
+ * The layout columns: `FieldLabelGroup` (label + description) and `FieldControlContent` (control +
+ * helper text) each take an `orientation`. `vertical` stacks the columns full-width; `horizontal`
+ * puts them side by side, where `FieldLabel inset` pads the label's top per magnitude so its text
+ * lines up with the control beside it. (The ready-made fields lay these out for you.)
+ */
+export const Orientations: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Field>
+        <FieldLabelGroup orientation="vertical">
+          <FieldLabel magnitude="md" inset={false} htmlFor="elements-field-orientation-vertical">
+            Full name
+          </FieldLabel>
+          <FieldDescription magnitude="md" id="elements-field-orientation-vertical-description">
+            Visible on your profile.
+          </FieldDescription>
+        </FieldLabelGroup>
+        <FieldControlContent orientation="vertical">
+          <InputGroup magnitude="md">
+            <Input
+              magnitude="md"
+              id="elements-field-orientation-vertical"
+              placeholder="Ada Lovelace"
+              aria-describedby="elements-field-orientation-vertical-description"
+            />
+          </InputGroup>
+        </FieldControlContent>
+      </Field>
+      {MAGNITUDES.map((magnitude) => (
+        <div key={magnitude} className="flex gap-2">
+          <FieldLabelGroup orientation="horizontal">
+            <FieldLabel
+              magnitude={magnitude}
+              inset
+              htmlFor={`elements-field-orientation-${magnitude}`}
+            >
+              Full name ({magnitude})
+            </FieldLabel>
+          </FieldLabelGroup>
+          <FieldControlContent orientation="horizontal">
+            <InputGroup magnitude={magnitude}>
+              <Input
+                magnitude={magnitude}
+                id={`elements-field-orientation-${magnitude}`}
+                placeholder="Ada Lovelace"
+                aria-describedby={`elements-field-orientation-${magnitude}-description`}
+              />
+            </InputGroup>
+            <FieldDescription
+              magnitude={magnitude}
+              id={`elements-field-orientation-${magnitude}-description`}
+            >
+              Visible on your profile.
+            </FieldDescription>
+          </FieldControlContent>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The choice row: `FieldItem` groups one checkbox/radio control with its `FieldItemContent` (label
+ * + description) column. The hovered row (forced via pseudo-states) shows the row's hover wash;
+ * `data-disabled` — what Base UI sets on a disabled field's parts — mutes the row and cancels the
+ * wash. The box is a statically pinned `Checkbox` (its own showcase is Elements/Checkbox), named
+ * via `aria-labelledby` the way the ready-made wires it.
+ */
+export const Items: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // Pinning hover/disabled state attributes makes axe evaluate visuals it never sees live
+      // (it does not test :hover, and WCAG 1.4.3 exempts disabled controls). The tertiary-text-
+      // on-hover-fill contrast is a design-token question flagged for the design pass, not a
+      // story bug.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-1">
+      <FieldItem>
+        <Checkbox
+          role="checkbox"
+          aria-checked="true"
+          aria-labelledby="elements-field-item-updates-label"
+          data-checked=""
+        >
+          <CheckboxIndicator data-checked="">
+            <Check aria-hidden />
+          </CheckboxIndicator>
+        </Checkbox>
+        <FieldItemContent>
+          <FieldLabel magnitude="md" inset={false} id="elements-field-item-updates-label">
+            Product updates
+          </FieldLabel>
+          <FieldDescription magnitude="md">Release notes and roadmap news.</FieldDescription>
+        </FieldItemContent>
+      </FieldItem>
+      <FieldItem id="elements-field-item-hover">
+        <Checkbox
+          role="checkbox"
+          aria-checked="false"
+          aria-labelledby="elements-field-item-digest-label"
+        />
+        <FieldItemContent>
+          <FieldLabel magnitude="md" inset={false} id="elements-field-item-digest-label">
+            Weekly digest
+          </FieldLabel>
+          <FieldDescription magnitude="md">A summary every Monday morning.</FieldDescription>
+        </FieldItemContent>
+      </FieldItem>
+      <FieldItem data-disabled="">
+        <Checkbox
+          role="checkbox"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="elements-field-item-mentions-label"
+          data-disabled=""
+        />
+        <FieldItemContent>
+          <FieldLabel magnitude="md" inset={false} id="elements-field-item-mentions-label">
+            Mentions
+          </FieldLabel>
+          <FieldDescription magnitude="md">Managed by your workspace admin.</FieldDescription>
+        </FieldItemContent>
+      </FieldItem>
+    </div>
+  ),
+};
+
+/**
+ * Hidden CSS canary: asserts the pinned states compile to real field styling — `FieldError` and the
+ * `FieldLabelRequiredMarker` share the danger text color and differ from `FieldDescription`'s
+ * tertiary, and `data-disabled` on `FieldItem` computes the muted opacity + not-allowed cursor.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCssCanary: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  parameters: {
+    a11y: {
+      // The pinned data-disabled item shows the dimmed text axe never sees live (WCAG 1.4.3
+      // exempts disabled controls) — suppress just the contrast rule for this canary.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: () => (
+    <Field>
+      <FieldLabel magnitude="md" inset={false} htmlFor="elements-field-canary-control">
+        Label
+        <FieldLabelRequiredMarker data-testid="canary-marker">*</FieldLabelRequiredMarker>
+      </FieldLabel>
+      <InputGroup magnitude="md">
+        <Input
+          magnitude="md"
+          id="elements-field-canary-control"
+          aria-invalid="true"
+          data-invalid=""
+          aria-describedby="elements-field-canary-error"
+        />
+      </InputGroup>
+      <FieldDescription magnitude="md" data-testid="canary-description">
+        Description
+      </FieldDescription>
+      <FieldError magnitude="md" id="elements-field-canary-error" data-testid="canary-error">
+        Error
+      </FieldError>
+      <FieldItem data-disabled="" data-testid="canary-item">
+        <FieldItemContent>
+          <FieldDescription magnitude="md">Disabled item</FieldDescription>
+        </FieldItemContent>
+      </FieldItem>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const description = canvas.getByTestId("canary-description");
+    const error = canvas.getByTestId("canary-error");
+    const marker = canvas.getByTestId("canary-marker");
+    const item = canvas.getByTestId("canary-item");
+    // `FieldError` renders the danger text color, distinct from the description's tertiary.
+    await expect(getComputedStyle(error).color).not.toBe(getComputedStyle(description).color);
+    // The required marker shares the same danger tint.
+    await expect(getComputedStyle(marker).color).toBe(getComputedStyle(error).color);
+    // `data-disabled` mutes the choice row and switches to the not-allowed cursor.
+    await expect(getComputedStyle(item).opacity).toBe("0.6");
+    await expect(getComputedStyle(item).cursor).toBe("not-allowed");
+  },
+};
diff --git a/packages/propel/src/elements/field/field.tsx b/packages/propel/src/elements/field/field.tsx
new file mode 100644
index 00000000..2feb548a
--- /dev/null
+++ b/packages/propel/src/elements/field/field.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { fieldVariants } from "./variants";
+
+export type FieldProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The shared field chrome for custom controls. Base-UI-agnostic — graft the Base UI field
+ * labeling/validation behavior in `components` via `<BaseField.Root render={<Field/>} />`. Compose
+ * it with `FieldLabel`, a control, `FieldDescription`, and `FieldError`.
+ */
+export function Field({ render, ...props }: FieldProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: fieldVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/field/index.tsx b/packages/propel/src/elements/field/index.tsx
new file mode 100644
index 00000000..1e75e31d
--- /dev/null
+++ b/packages/propel/src/elements/field/index.tsx
@@ -0,0 +1,9 @@
+export * from "./field";
+export * from "./field-control-content";
+export * from "./field-description";
+export * from "./field-error";
+export * from "./field-item";
+export * from "./field-item-content";
+export * from "./field-label";
+export * from "./field-label-group";
+export * from "./field-label-required-marker";
diff --git a/packages/propel/src/ui/field/variants.ts b/packages/propel/src/elements/field/variants.ts
similarity index 100%
rename from packages/propel/src/ui/field/variants.ts
rename to packages/propel/src/elements/field/variants.ts
diff --git a/packages/propel/src/ui/fieldset/fieldset-body.tsx b/packages/propel/src/elements/fieldset/fieldset-body.tsx
similarity index 100%
rename from packages/propel/src/ui/fieldset/fieldset-body.tsx
rename to packages/propel/src/elements/fieldset/fieldset-body.tsx
diff --git a/packages/propel/src/elements/fieldset/fieldset-description.tsx b/packages/propel/src/elements/fieldset/fieldset-description.tsx
new file mode 100644
index 00000000..43a5c6da
--- /dev/null
+++ b/packages/propel/src/elements/fieldset/fieldset-description.tsx
@@ -0,0 +1,14 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { fieldsetDescriptionVariants } from "./variants";
+
+export type FieldsetDescriptionProps = Omit<useRender.ComponentProps<"p">, "className" | "style">;
+
+/** Supporting text shown below the fieldset legend. */
+export function FieldsetDescription({ render, ...props }: FieldsetDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: fieldsetDescriptionVariants(),
+  };
+  return useRender({ defaultTagName: "p", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/fieldset/fieldset-legend.tsx b/packages/propel/src/elements/fieldset/fieldset-legend.tsx
new file mode 100644
index 00000000..f8a71b20
--- /dev/null
+++ b/packages/propel/src/elements/fieldset/fieldset-legend.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type FieldsetLegendVariantProps, fieldsetLegendVariants } from "./variants";
+
+export type FieldsetLegendProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  FieldsetLegendVariantProps;
+
+/**
+ * The styled label for a `Fieldset`. Base-UI-agnostic — graft the legend behavior in `components`
+ * via `<BaseFieldset.Legend render={<FieldsetLegend/>} />`.
+ */
+export function FieldsetLegend({ magnitude, render, ...props }: FieldsetLegendProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: fieldsetLegendVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/fieldset/fieldset.stories.tsx b/packages/propel/src/elements/fieldset/fieldset.stories.tsx
new file mode 100644
index 00000000..43686487
--- /dev/null
+++ b/packages/propel/src/elements/fieldset/fieldset.stories.tsx
@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Field, FieldLabel } from "../field/index";
+import { Input, InputGroup } from "../input/index";
+import {
+  Fieldset,
+  FieldsetBody,
+  FieldsetDescription,
+  FieldsetLegend,
+  type FieldsetLegendProps,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the wiring Base UI's fieldset would add pinned statically
+// (`aria-labelledby` on the `<fieldset>` pointing at the legend's `id`; `htmlFor`/`id` pairs on
+// the filler fields). The fieldset cvas key off no `data-*`/aria state, so the configuration
+// space is exactly the two variant axes: `bordered` on the root and `magnitude` on the legend.
+// Grafting and aria behavior are demonstrated and tested in the components-tier story
+// (Components/Fieldset).
+const meta = {
+  title: "Elements/Fieldset",
+  component: Fieldset,
+  args: { bordered: false },
+  subcomponents: { FieldsetLegend, FieldsetDescription, FieldsetBody },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Fieldset>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LEGEND_MAGNITUDES: FieldsetLegendProps["magnitude"][] = ["md", "lg", "xl"];
+
+/**
+ * The full anatomy assembled statically: `Fieldset` › `FieldsetLegend`, then `FieldsetBody`
+ * stacking the grouped fields with the spec's consistent gap. `aria-labelledby` pins the group name
+ * Base UI's `Fieldset.Root` would wire to the legend.
+ */
+export const Default: Story = {
+  render: (args) => (
+    <Fieldset {...args} aria-labelledby="fieldset-default-legend">
+      <FieldsetLegend id="fieldset-default-legend" magnitude="md">
+        Billing details
+      </FieldsetLegend>
+      <FieldsetBody>
+        <Field>
+          <FieldLabel magnitude="md" inset={false} htmlFor="fieldset-default-company">
+            Company
+          </FieldLabel>
+          <InputGroup magnitude="md">
+            <Input magnitude="md" id="fieldset-default-company" placeholder="Acme Inc." />
+          </InputGroup>
+        </Field>
+        <Field>
+          <FieldLabel magnitude="md" inset={false} htmlFor="fieldset-default-tax-id">
+            Tax ID
+          </FieldLabel>
+          <InputGroup magnitude="md">
+            <Input magnitude="md" id="fieldset-default-tax-id" placeholder="US-123" />
+          </InputGroup>
+        </Field>
+      </FieldsetBody>
+    </Fieldset>
+  ),
+};
+
+/**
+ * `bordered` draws the subtle rounded boundary around the group, and `FieldsetDescription` slots
+ * between the legend and the body.
+ */
+export const Bordered: Story = {
+  args: { bordered: true },
+  render: (args) => (
+    <Fieldset {...args} aria-labelledby="fieldset-bordered-legend">
+      <FieldsetLegend id="fieldset-bordered-legend" magnitude="md">
+        Billing details
+      </FieldsetLegend>
+      <FieldsetDescription>Enter your billing information below.</FieldsetDescription>
+      <FieldsetBody>
+        <Field>
+          <FieldLabel magnitude="md" inset={false} htmlFor="fieldset-bordered-company">
+            Company
+          </FieldLabel>
+          <InputGroup magnitude="md">
+            <Input magnitude="md" id="fieldset-bordered-company" placeholder="Acme Inc." />
+          </InputGroup>
+        </Field>
+        <Field>
+          <FieldLabel magnitude="md" inset={false} htmlFor="fieldset-bordered-tax-id">
+            Tax ID
+          </FieldLabel>
+          <InputGroup magnitude="md">
+            <Input magnitude="md" id="fieldset-bordered-tax-id" placeholder="US-123" />
+          </InputGroup>
+        </Field>
+      </FieldsetBody>
+    </Fieldset>
+  ),
+};
+
+/** Every `FieldsetLegend` magnitude side by side. */
+export const LegendMagnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {LEGEND_MAGNITUDES.map((magnitude) => (
+        <FieldsetLegend key={magnitude} magnitude={magnitude}>
+          Billing details ({magnitude})
+        </FieldsetLegend>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/fieldset/fieldset.tsx b/packages/propel/src/elements/fieldset/fieldset.tsx
new file mode 100644
index 00000000..3e1a7318
--- /dev/null
+++ b/packages/propel/src/elements/fieldset/fieldset.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type FieldsetVariantProps, fieldsetVariants } from "./variants";
+
+export type FieldsetProps = Omit<useRender.ComponentProps<"fieldset">, "className" | "style"> &
+  FieldsetVariantProps;
+
+/**
+ * The styled `<fieldset>` container that groups a legend with related controls. Base-UI-agnostic —
+ * graft the fieldset behavior in `components` via `<BaseFieldset.Root render={<Fieldset/>} />`.
+ */
+export function Fieldset({ bordered, render, ...props }: FieldsetProps) {
+  const defaultProps: useRender.ElementProps<"fieldset"> = {
+    className: fieldsetVariants({ bordered }),
+  };
+  return useRender({ defaultTagName: "fieldset", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/fieldset/index.tsx b/packages/propel/src/elements/fieldset/index.tsx
similarity index 100%
rename from packages/propel/src/ui/fieldset/index.tsx
rename to packages/propel/src/elements/fieldset/index.tsx
diff --git a/packages/propel/src/ui/fieldset/variants.ts b/packages/propel/src/elements/fieldset/variants.ts
similarity index 100%
rename from packages/propel/src/ui/fieldset/variants.ts
rename to packages/propel/src/elements/fieldset/variants.ts
diff --git a/packages/propel/src/ui/form/form-actions.tsx b/packages/propel/src/elements/form/form-actions.tsx
similarity index 100%
rename from packages/propel/src/ui/form/form-actions.tsx
rename to packages/propel/src/elements/form/form-actions.tsx
diff --git a/packages/propel/src/ui/form/form-body.tsx b/packages/propel/src/elements/form/form-body.tsx
similarity index 100%
rename from packages/propel/src/ui/form/form-body.tsx
rename to packages/propel/src/elements/form/form-body.tsx
diff --git a/packages/propel/src/elements/form/form.stories.tsx b/packages/propel/src/elements/form/form.stories.tsx
new file mode 100644
index 00000000..aee35c19
--- /dev/null
+++ b/packages/propel/src/elements/form/form.stories.tsx
@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button, ButtonLabel } from "../button/index";
+import { Field, FieldLabel } from "../field/index";
+import { Input, InputGroup } from "../input/index";
+import { Form, FormActions, FormBody } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `Form`, `FormBody`, and
+// `FormActions` are Base-UI-agnostic styled elements rendered DIRECTLY — no Base UI graft. The
+// parts are pure layout (their cvas key off no state attributes), so the showcase covers the two
+// layout axes: `FormBody` single- vs multi-column field stacking and `FormActions` inline vs
+// stretch actions. Base UI's consolidated form behavior (submission, constraint validation, error
+// wiring) is grafted AND tested in the ready-made Form (Components/Form).
+const meta = {
+  title: "Elements/Form",
+  component: Form,
+  subcomponents: { FormBody, FormActions },
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A form assembled from `Form` › `FormBody layout="single"` (the one-column field stack) +
+ * `FormActions layout="inline"` (actions right-aligned at the inline end).
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="w-80">
+      <Form>
+        <FormBody layout="single">
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-default-name">
+              Name
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input id="form-default-name" magnitude="md" placeholder="Ada Lovelace" />
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-default-email">
+              Email
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input
+                id="form-default-email"
+                magnitude="md"
+                type="email"
+                placeholder="you@example.com"
+              />
+            </InputGroup>
+          </Field>
+        </FormBody>
+        <FormActions layout="inline">
+          <Button type="button" sizing="hug" prominence="ghost" tone="neutral" magnitude="md">
+            <ButtonLabel>Cancel</ButtonLabel>
+          </Button>
+          <Button type="button" sizing="hug" prominence="primary" tone="neutral" magnitude="md">
+            <ButtonLabel>Submit</ButtonLabel>
+          </Button>
+        </FormActions>
+      </Form>
+    </div>
+  ),
+};
+
+/** `FormBody layout="multi"`: a wrapping row that arranges side-by-side field pairs. */
+export const MultiColumnBody: Story = {
+  render: () => (
+    <div className="w-96">
+      <Form>
+        <FormBody layout="multi">
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-multi-first-name">
+              First name
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input id="form-multi-first-name" magnitude="md" placeholder="Ada" />
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-multi-last-name">
+              Last name
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input id="form-multi-last-name" magnitude="md" placeholder="Lovelace" />
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-multi-city">
+              City
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input id="form-multi-city" magnitude="md" placeholder="London" />
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-multi-postal-code">
+              Postal code
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input id="form-multi-postal-code" magnitude="md" placeholder="EC1A 1BB" />
+            </InputGroup>
+          </Field>
+        </FormBody>
+        <FormActions layout="inline">
+          <Button type="button" sizing="hug" prominence="primary" tone="neutral" magnitude="md">
+            <ButtonLabel>Submit</ButtonLabel>
+          </Button>
+        </FormActions>
+      </Form>
+    </div>
+  ),
+};
+
+/** `FormActions layout="stretch"`: the actions stack and stretch to fill the row (full-width). */
+export const StretchActions: Story = {
+  render: () => (
+    <div className="w-80">
+      <Form>
+        <FormBody layout="single">
+          <Field>
+            <FieldLabel magnitude="md" inset={false} htmlFor="form-stretch-email">
+              Email
+            </FieldLabel>
+            <InputGroup magnitude="md">
+              <Input
+                id="form-stretch-email"
+                magnitude="md"
+                type="email"
+                placeholder="you@example.com"
+              />
+            </InputGroup>
+          </Field>
+        </FormBody>
+        <FormActions layout="stretch">
+          <Button type="button" sizing="fill" prominence="primary" tone="neutral" magnitude="md">
+            <ButtonLabel>Create account</ButtonLabel>
+          </Button>
+          <Button type="button" sizing="fill" prominence="secondary" tone="neutral" magnitude="md">
+            <ButtonLabel>Cancel</ButtonLabel>
+          </Button>
+        </FormActions>
+      </Form>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/form/form.tsx b/packages/propel/src/elements/form/form.tsx
new file mode 100644
index 00000000..19ca9598
--- /dev/null
+++ b/packages/propel/src/elements/form/form.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { formVariants } from "./variants";
+
+export type FormProps = Omit<useRender.ComponentProps<"form">, "className" | "style">;
+
+/**
+ * The styled form frame: a native `<form>` that lays out its regions (`FormBody`, `FormActions`)
+ * with a consistent vertical rhythm; field spacing and the actions-bar treatment live on those
+ * parts. Base-UI-agnostic — graft Base UI's consolidated form behavior in `components` via
+ * `<BaseForm render={<Form/>} />`.
+ */
+export function Form({ render, ...props }: FormProps) {
+  const defaultProps: useRender.ElementProps<"form"> = { className: formVariants() };
+  return useRender({ defaultTagName: "form", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/form/index.tsx b/packages/propel/src/elements/form/index.tsx
similarity index 100%
rename from packages/propel/src/ui/form/index.tsx
rename to packages/propel/src/elements/form/index.tsx
diff --git a/packages/propel/src/ui/form/variants.ts b/packages/propel/src/elements/form/variants.ts
similarity index 100%
rename from packages/propel/src/ui/form/variants.ts
rename to packages/propel/src/elements/form/variants.ts
diff --git a/packages/propel/src/elements/icon-button/icon-button.stories.tsx b/packages/propel/src/elements/icon-button/icon-button.stories.tsx
new file mode 100644
index 00000000..4b434836
--- /dev/null
+++ b/packages/propel/src/elements/icon-button/icon-button.stories.tsx
@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LoaderCircle, Plus } from "lucide-react";
+
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
+import { iconControl } from "../../storybook/icon-control";
+import {
+  IconButton,
+  type IconButtonMagnitude,
+  type IconButtonProminence,
+  type IconButtonTone,
+} from "./index";
+
+const PROMINENCES: IconButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
+const MAGNITUDES: IconButtonMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// The prominence×tone pairings the control chrome defines a palette for (danger skips
+// tertiary/ghost).
+const PALETTES: { prominence: IconButtonProminence; tone: IconButtonTone }[] = [
+  { prominence: "primary", tone: "neutral" },
+  { prominence: "secondary", tone: "neutral" },
+  { prominence: "tertiary", tone: "neutral" },
+  { prominence: "ghost", tone: "neutral" },
+  { prominence: "primary", tone: "danger" },
+  { prominence: "secondary", tone: "danger" },
+];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `IconButton` is a Base-UI-agnostic
+// styled square `<button>` rendered DIRECTLY — no Base UI graft — wrapping the shared internal `Icon`
+// glyph slot, with every visual axis shown and every visual state pinned statically via the
+// attributes its cva keys off (`disabled`, `aria-busy`) or forced by the pseudo-states addon
+// (hover/active/focus-visible are CSS pseudo-classes). Grafting, keyboard, and aria behavior are
+// demonstrated AND tested in the ready-made IconButton (Components/IconButton), which composes this
+// primitive.
+const meta = {
+  title: "Elements/IconButton",
+  component: IconButton,
+  // Icon picker control for the single glyph rendered inside the slot.
+  argTypes: { children: iconControl },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1720-3036",
+    },
+  },
+  args: {
+    prominence: "primary",
+    tone: "neutral",
+    magnitude: "md",
+    children: <Plus />,
+    "aria-label": "Add item",
+  },
+  render: ({ children, ...props }) => (
+    <IconButton {...props}>
+      <Icon>{children}</Icon>
+    </IconButton>
+  ),
+} 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 Prominences: Story = {
+  argTypes: { prominence: { control: false }, "aria-label": { control: false } },
+  render: ({ children, tone, magnitude }) => (
+    <div className="flex items-center gap-3">
+      {PROMINENCES.map((prominence) => (
+        <IconButton
+          key={prominence}
+          prominence={prominence}
+          tone={tone}
+          magnitude={magnitude}
+          aria-label={`${prominence} action`}
+        >
+          <Icon>{children}</Icon>
+        </IconButton>
+      ))}
+    </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: ({ children, magnitude }) => (
+    <div className="flex items-center gap-3">
+      <IconButton prominence="primary" tone="neutral" magnitude={magnitude} aria-label="Neutral">
+        <Icon>{children}</Icon>
+      </IconButton>
+      <IconButton prominence="primary" tone="danger" magnitude={magnitude} aria-label="Danger fill">
+        <Icon>{children}</Icon>
+      </IconButton>
+      <IconButton
+        prominence="secondary"
+        tone="danger"
+        magnitude={magnitude}
+        aria-label="Danger outline"
+      >
+        <Icon>{children}</Icon>
+      </IconButton>
+    </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: ({ children, prominence, tone }) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <IconButton
+          key={magnitude}
+          prominence={prominence}
+          tone={tone}
+          magnitude={magnitude}
+          aria-label={`${magnitude} add`}
+        >
+          <Icon>{children}</Icon>
+        </IconButton>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every visual state of every palette, pinned statically — one row per prominence×tone pairing the
+ * chrome defines. Hover / active / focus-visible are CSS pseudo-classes, forced by the
+ * pseudo-states addon; `disabled` is the native attribute the `disabled:` palette keys off; busy
+ * pins the `aria-busy`/`aria-disabled` the ready-made IconButton sets while `loading` (the shared
+ * `Spinner` swaps in for the glyph slot).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: PALETTES.map(({ prominence, tone }) => `#icon-button-${prominence}-${tone}-hover`),
+      active: PALETTES.map(({ prominence, tone }) => `#icon-button-${prominence}-${tone}-active`),
+      focusVisible: PALETTES.map(
+        ({ prominence, tone }) => `#icon-button-${prominence}-${tone}-focus`,
+      ),
+    },
+  },
+  render: ({ children, magnitude }) => (
+    <div className="flex flex-col gap-3">
+      {PALETTES.map(({ prominence, tone }) => (
+        <div key={`${prominence}-${tone}`} className="flex items-center gap-3">
+          <IconButton
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            aria-label={`${prominence} ${tone} default`}
+          >
+            <Icon>{children}</Icon>
+          </IconButton>
+          <IconButton
+            id={`icon-button-${prominence}-${tone}-hover`}
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            aria-label={`${prominence} ${tone} hover`}
+          >
+            <Icon>{children}</Icon>
+          </IconButton>
+          <IconButton
+            id={`icon-button-${prominence}-${tone}-active`}
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            aria-label={`${prominence} ${tone} active`}
+          >
+            <Icon>{children}</Icon>
+          </IconButton>
+          <IconButton
+            id={`icon-button-${prominence}-${tone}-focus`}
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            aria-label={`${prominence} ${tone} focus`}
+          >
+            <Icon>{children}</Icon>
+          </IconButton>
+          <IconButton
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            aria-label={`${prominence} ${tone} disabled`}
+            disabled
+          >
+            <Icon>{children}</Icon>
+          </IconButton>
+          <IconButton
+            prominence={prominence}
+            tone={tone}
+            magnitude={magnitude}
+            aria-label={`${prominence} ${tone} busy`}
+            aria-busy
+            aria-disabled
+          >
+            <Spinner>
+              <LoaderCircle />
+            </Spinner>
+          </IconButton>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The icon button is composed from named parts: the square `IconButton` box holding ONE glyph slot
+ * — the internal `Icon` sizing the decorative glyph to the box's `--node-size`, or the internal
+ * `Spinner` swapped in while loading. The busy state is pinned here via the
+ * `aria-busy`/`aria-disabled` the ready-made IconButton (Components/IconButton) sets while
+ * `loading` — that ready-made also does the swap for you.
+ */
+export const Anatomy: Story = {
+  parameters: { controls: { disable: true } },
+  render: ({ children, prominence, tone, magnitude }) => (
+    <div className="flex items-center gap-3">
+      <IconButton prominence={prominence} tone={tone} magnitude={magnitude} aria-label="Add item">
+        <Icon>{children}</Icon>
+      </IconButton>
+      <IconButton
+        prominence={prominence}
+        tone={tone}
+        magnitude={magnitude}
+        aria-label="Saving"
+        aria-busy
+        aria-disabled
+      >
+        <Spinner>
+          <LoaderCircle />
+        </Spinner>
+      </IconButton>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/icon-button/icon-button.tsx b/packages/propel/src/elements/icon-button/icon-button.tsx
new file mode 100644
index 00000000..e37d1310
--- /dev/null
+++ b/packages/propel/src/elements/icon-button/icon-button.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { iconButtonVariants, type IconButtonVariantProps } from "./variants";
+
+export type IconButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  IconButtonVariantProps;
+
+/**
+ * The square button box of the icon-only button: a styled `<button>` with no baked content. It owns
+ * its chrome (`prominence`/`tone`) and geometry (`magnitude`'s square `size-N` box and
+ * `--node-size` glyph scale) through `iconButtonVariants`. Base-UI-agnostic — graft the `Button`
+ * behavior in `components` via `<BaseButton render={<IconButton/>} />`. There is no `link` icon
+ * button. Compose an `IconButtonIcon` (or `IconButtonSpinner`) inside it.
+ */
+export function IconButton({ prominence, tone, magnitude, render, ...props }: IconButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: iconButtonVariants({ prominence, tone, magnitude }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/icon-button/index.tsx b/packages/propel/src/elements/icon-button/index.tsx
new file mode 100644
index 00000000..ca4f1366
--- /dev/null
+++ b/packages/propel/src/elements/icon-button/index.tsx
@@ -0,0 +1,6 @@
+export * from "./icon-button";
+export {
+  type IconButtonMagnitude,
+  type IconButtonTone,
+  type IconButtonProminence,
+} from "./variants";
diff --git a/packages/propel/src/elements/icon-button/variants.ts b/packages/propel/src/elements/icon-button/variants.ts
new file mode 100644
index 00000000..960873fe
--- /dev/null
+++ b/packages/propel/src/elements/icon-button/variants.ts
@@ -0,0 +1,34 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { composeVariants } from "../../internal/compose-variants";
+import { controlChromeVariants } from "../../internal/control-chrome";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// IconButton's local styling: the square geometry only. The chrome (behavior base + neutral/danger
+// palette) comes from the shared `controlChromeVariants`. `prominence` is declared (color-less) to
+// constrain the composed props to the icon-button Types — no `link` icon button. Icon buttons are
+// square: a fixed `size-N` box per Figma's "Icon button" Size scale (S/Base/L/XL = 20/24/28/32px →
+// sm/md/lg/xl), each magnitude setting `--node-size` (14/16/16/20px) for the glyph slot and spinner.
+const iconButtonLocalVariants = cva("", {
+  variants: {
+    prominence: { primary: "", secondary: "", tertiary: "", ghost: "" },
+    tone: { neutral: "", danger: "" },
+    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
+    },
+  },
+});
+
+/** The full icon button className: the shared control chrome composed with the square geometry. */
+export const iconButtonVariants = composeVariants(controlChromeVariants, iconButtonLocalVariants);
+
+type IconButtonVariantConfig = VariantProps<typeof iconButtonLocalVariants>;
+export type IconButtonProminence = NonNullable<IconButtonVariantConfig["prominence"]>;
+export type IconButtonTone = NonNullable<IconButtonVariantConfig["tone"]>;
+export type IconButtonMagnitude = NonNullable<IconButtonVariantConfig["magnitude"]>;
+
+// No `defaultVariants` today, so every axis is required.
+export type IconButtonVariantProps = StrictVariantProps<typeof iconButtonVariants>;
diff --git a/packages/propel/src/ui/input-field/index.tsx b/packages/propel/src/elements/input-field/index.tsx
similarity index 100%
rename from packages/propel/src/ui/input-field/index.tsx
rename to packages/propel/src/elements/input-field/index.tsx
diff --git a/packages/propel/src/elements/input-field/input-field.stories.tsx b/packages/propel/src/elements/input-field/input-field.stories.tsx
new file mode 100644
index 00000000..29ca10ba
--- /dev/null
+++ b/packages/propel/src/elements/input-field/input-field.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FieldLabel } from "../field/index";
+import { Input, InputGroup } from "../input/index";
+import { InputField } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `InputField` is the
+// Base-UI-agnostic layout frame for a labeled control — rendered DIRECTLY with a label + boxed
+// input, no Base UI graft. The showcase covers its one axis: `orientation` (label above vs
+// beside). Field behavior (name registration, validation, error wiring) is grafted AND tested in
+// the ready-made `InputField` (Components/InputField).
+const meta = {
+  title: "Elements/InputField",
+  component: InputField,
+  args: { orientation: "vertical" },
+} satisfies Meta<typeof InputField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** `orientation="vertical"`: the label stacks above the control. */
+export const Default: Story = {
+  render: ({ orientation }) => (
+    <div className="w-80">
+      <InputField orientation={orientation}>
+        <FieldLabel magnitude="md" inset={false} htmlFor="input-field-vertical">
+          Display name
+        </FieldLabel>
+        <InputGroup magnitude="md">
+          <Input id="input-field-vertical" magnitude="md" placeholder="Ada Lovelace" />
+        </InputGroup>
+      </InputField>
+    </div>
+  ),
+};
+
+/** `orientation="horizontal"`: the label sits beside the control. */
+export const Horizontal: Story = {
+  args: { orientation: "horizontal" },
+  render: ({ orientation }) => (
+    <div className="w-96">
+      <InputField orientation={orientation}>
+        <FieldLabel magnitude="md" inset htmlFor="input-field-horizontal">
+          Display name
+        </FieldLabel>
+        <InputGroup magnitude="md">
+          <Input id="input-field-horizontal" magnitude="md" placeholder="Ada Lovelace" />
+        </InputGroup>
+      </InputField>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/input-field/input-field.tsx b/packages/propel/src/elements/input-field/input-field.tsx
new file mode 100644
index 00000000..919e9959
--- /dev/null
+++ b/packages/propel/src/elements/input-field/input-field.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type InputFieldVariantProps, inputFieldVariants } from "./variants";
+
+export type InputFieldProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  InputFieldVariantProps;
+
+/**
+ * The orientation-aware layout frame for an input field (label above or beside the control).
+ * Base-UI-agnostic — graft `Field.Root` in `components` via `<BaseField.Root render={<InputField/>}
+ * />`.
+ */
+export function InputField({ orientation, render, ...props }: InputFieldProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: inputFieldVariants({ orientation }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/input-field/variants.ts b/packages/propel/src/elements/input-field/variants.ts
similarity index 100%
rename from packages/propel/src/ui/input-field/variants.ts
rename to packages/propel/src/elements/input-field/variants.ts
diff --git a/packages/propel/src/elements/input/index.tsx b/packages/propel/src/elements/input/index.tsx
new file mode 100644
index 00000000..1be0f333
--- /dev/null
+++ b/packages/propel/src/elements/input/index.tsx
@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./input-group";
diff --git a/packages/propel/src/ui/input/input-group.tsx b/packages/propel/src/elements/input/input-group.tsx
similarity index 100%
rename from packages/propel/src/ui/input/input-group.tsx
rename to packages/propel/src/elements/input/input-group.tsx
diff --git a/packages/propel/src/elements/input/input.stories.tsx b/packages/propel/src/elements/input/input.stories.tsx
new file mode 100644
index 00000000..e2122f93
--- /dev/null
+++ b/packages/propel/src/elements/input/input.stories.tsx
@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Mail, Search } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { Input, InputGroup, type InputMagnitude } from "./index";
+
+const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `Input` (the bare text control)
+// and `InputGroup` (the bordered frame) are Base-UI-agnostic styled elements rendered DIRECTLY —
+// no Base UI grafts — with every visual state pinned statically via the attributes the chrome keys
+// off (`data-invalid=""`, the native `disabled`) or forced by the pseudo-states addon
+// (hover/focus-within are CSS pseudo-classes). Field composition, typing, and validation aria
+// behavior are demonstrated AND tested in the ready-made Input (Components/Input).
+const meta = {
+  title: "Elements/Input",
+  component: Input,
+  subcomponents: { InputGroup },
+  args: {
+    magnitude: "md",
+    "aria-label": "Name",
+    placeholder: "Ada Lovelace",
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The anatomy assembled statically: the `InputGroup` bordered frame holding the bare `Input`
+ * control. The frame owns the surface (border, fill, hover/focus chrome, magnitude geometry); the
+ * control is transparent primary text over it, with the accent caret and placeholder color of its
+ * own.
+ */
+export const Default: Story = {
+  render: ({ magnitude, ...args }) => (
+    <div className="w-72">
+      <InputGroup magnitude={magnitude}>
+        <Input magnitude={magnitude} {...args} />
+      </InputGroup>
+    </div>
+  ),
+};
+
+/**
+ * The shared control magnitude steps the input exposes (md 32px · lg 36px · xl 44px): each step
+ * sets the frame height, the control's text size, and the inline glyph `--node-size` together.
+ */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex w-72 flex-col gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <InputGroup key={magnitude} magnitude={magnitude}>
+          <Input magnitude={magnitude} aria-label={`Name (${magnitude})`} placeholder={magnitude} />
+        </InputGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Leading and trailing adornments are the shared internal `Icon` slot placed beside the control
+ * inside the frame; the glyph inherits the group's `--node-size`, so it tracks the magnitude step.
+ */
+export const WithIcons: Story = {
+  parameters: { controls: { disable: true } },
+  render: ({ magnitude }) => (
+    <div className="w-72">
+      <InputGroup magnitude={magnitude}>
+        <Icon tint="secondary">
+          <Search />
+        </Icon>
+        <Input magnitude={magnitude} aria-label="Search" placeholder="Search people" />
+        <Icon tint="secondary">
+          <Mail />
+        </Icon>
+      </InputGroup>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the input row:
+ *
+ * - **Rest** — the subtle border over the `layer-2` fill.
+ * - **Hover** / **Focused** — CSS pseudo-classes (`:hover`, `:focus-within`), forced by the
+ *   pseudo-states addon: the hover border/fill shift, and the accent border + soft ring while the
+ *   inner control has focus.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to the control; the frame recolors to danger via `:has([data-invalid])` — no `tone`
+ *   prop.
+ * - **Disabled** — the native `disabled` on the control: not-allowed cursor and dimmed text on the
+ *   control (`disabled:opacity-60`), while the frame's `:has(:disabled)` guard flattens the fill
+ *   and drops the ring (the plain input frame wraps a native control, so the native selector form
+ *   is the one that fires).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: "#input-group-hover",
+      focusWithin: "#input-group-focus",
+    },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex w-72 flex-col gap-3">
+      <InputGroup magnitude={magnitude} id="input-group-rest">
+        <Input magnitude={magnitude} aria-label="Rest" placeholder="Rest" />
+      </InputGroup>
+      <InputGroup magnitude={magnitude} id="input-group-hover">
+        <Input magnitude={magnitude} aria-label="Hover" placeholder="Hover" />
+      </InputGroup>
+      <InputGroup magnitude={magnitude} id="input-group-focus">
+        <Input magnitude={magnitude} aria-label="Focused" placeholder="Focused" />
+      </InputGroup>
+      <InputGroup magnitude={magnitude} id="input-group-invalid">
+        <Input
+          magnitude={magnitude}
+          aria-label="Invalid"
+          placeholder="Invalid"
+          aria-invalid
+          data-invalid=""
+        />
+      </InputGroup>
+      <InputGroup magnitude={magnitude}>
+        <Input magnitude={magnitude} aria-label="Disabled" placeholder="Disabled" disabled />
+      </InputGroup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` control recolors its wrapping frame's border
+ * (`has-[[data-invalid]]:border-danger-strong`) away from the resting frame's. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const group = canvasElement.querySelector(`#${id}`);
+      if (!(group instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(group).borderColor;
+    };
+    await expect(borderColor("input-group-invalid")).not.toBe(borderColor("input-group-rest"));
+  },
+};
diff --git a/packages/propel/src/elements/input/input.tsx b/packages/propel/src/elements/input/input.tsx
new file mode 100644
index 00000000..8d1959e7
--- /dev/null
+++ b/packages/propel/src/elements/input/input.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { inputVariants, type InputMagnitude, type InputVariantProps } from "./variants";
+
+export type { InputMagnitude };
+
+export type InputProps = Omit<useRender.ComponentProps<"input">, "className" | "style"> &
+  InputVariantProps;
+
+/**
+ * The styled single-line text field. Base-UI-agnostic — graft the Base UI `Input` control behavior
+ * in `components` via `<BaseInput render={<Input/>} />`.
+ */
+export function Input({ magnitude, render, ...props }: InputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = {
+    className: inputVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/input/variants.ts b/packages/propel/src/elements/input/variants.ts
new file mode 100644
index 00000000..0edc1525
--- /dev/null
+++ b/packages/propel/src/elements/input/variants.ts
@@ -0,0 +1,36 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { controlGroupClass, controlMagnitude } from "../../internal/control-group";
+import { controlInputClass } from "../../internal/control-input";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+export const inputVariants = cva(cx(controlInputClass, "flex-1 disabled:opacity-60"), {
+  variants: {
+    magnitude: {
+      md: "text-14",
+      lg: "text-14",
+      xl: "text-16",
+    },
+  },
+});
+
+type InputVariantConfig = VariantProps<typeof inputVariants>;
+
+export type InputMagnitude = NonNullable<InputVariantConfig["magnitude"]>;
+
+export type InputVariantProps = StrictVariantProps<typeof inputVariants>;
+
+// The bordered group that frames the input + its inline icon slots: the shared field-control
+// surface (`focus: within`) + input geometry (rounded-md, px, magnitude py), hover, transition,
+// and the descendant-`:disabled` muting (disabled lives on the inner `<input>`). Danger isn't a
+// prop — the surface recolors its border off the wrapped control's `data-invalid`.
+export const inputGroupVariants = cva(
+  cx(controlGroupClass, "w-full items-center gap-1.5 rounded-md px-3"),
+  {
+    variants: {
+      magnitude: { md: controlMagnitude.md, lg: controlMagnitude.lg, xl: controlMagnitude.xl },
+    },
+  },
+);
+
+export type InputGroupVariantProps = StrictVariantProps<typeof inputGroupVariants>;
diff --git a/packages/propel/src/ui/linear-progress/index.tsx b/packages/propel/src/elements/linear-progress/index.tsx
similarity index 100%
rename from packages/propel/src/ui/linear-progress/index.tsx
rename to packages/propel/src/elements/linear-progress/index.tsx
diff --git a/packages/propel/src/elements/linear-progress/linear-progress-indicator.tsx b/packages/propel/src/elements/linear-progress/linear-progress-indicator.tsx
new file mode 100644
index 00000000..7a6c392a
--- /dev/null
+++ b/packages/propel/src/elements/linear-progress/linear-progress-indicator.tsx
@@ -0,0 +1,24 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type LinearProgressIndicatorVariantProps,
+  linearProgressIndicatorVariants,
+} from "./variants";
+
+export type LinearProgressIndicatorProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  LinearProgressIndicatorVariantProps;
+
+/**
+ * The styled fill bar. `tone` drives the fill color. Base-UI-agnostic — graft in `components` via
+ * `<BaseProgress.Indicator render={<LinearProgressIndicator/>} />`.
+ */
+export function LinearProgressIndicator({ tone, render, ...props }: LinearProgressIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: linearProgressIndicatorVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/linear-progress/linear-progress-label.tsx b/packages/propel/src/elements/linear-progress/linear-progress-label.tsx
new file mode 100644
index 00000000..3c21ba12
--- /dev/null
+++ b/packages/propel/src/elements/linear-progress/linear-progress-label.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { linearProgressLabelVariants } from "./variants";
+
+export type LinearProgressLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled progress label. Base-UI-agnostic — graft in `components` via `<BaseProgress.Label
+ * render={<LinearProgressLabel/>} />`.
+ */
+export function LinearProgressLabel({ render, ...props }: LinearProgressLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: linearProgressLabelVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/linear-progress/linear-progress-track.tsx b/packages/propel/src/elements/linear-progress/linear-progress-track.tsx
new file mode 100644
index 00000000..5a544d9d
--- /dev/null
+++ b/packages/propel/src/elements/linear-progress/linear-progress-track.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type LinearProgressTrackVariantProps, linearProgressTrackVariants } from "./variants";
+
+export type LinearProgressTrackProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  LinearProgressTrackVariantProps;
+
+/**
+ * The styled track (the pill the fill sits inside). `magnitude` drives the thickness (`sm` 5px /
+ * `md` 8px). Base-UI-agnostic — graft in `components` via `<BaseProgress.Track
+ * render={<LinearProgressTrack/>} />`.
+ */
+export function LinearProgressTrack({ magnitude, render, ...props }: LinearProgressTrackProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: linearProgressTrackVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/linear-progress/linear-progress-value.tsx b/packages/propel/src/elements/linear-progress/linear-progress-value.tsx
new file mode 100644
index 00000000..ba9731ba
--- /dev/null
+++ b/packages/propel/src/elements/linear-progress/linear-progress-value.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { linearProgressValueVariants } from "./variants";
+
+export type LinearProgressValueProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled percentage readout — a neutral number (the semantic tone lives on the fill, not on the
+ * number). Base-UI-agnostic — graft in `components` via `<BaseProgress.Value
+ * render={<LinearProgressValue/>} />`.
+ */
+export function LinearProgressValue({ render, ...props }: LinearProgressValueProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: linearProgressValueVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/linear-progress/linear-progress.stories.tsx b/packages/propel/src/elements/linear-progress/linear-progress.stories.tsx
new file mode 100644
index 00000000..bc721ad0
--- /dev/null
+++ b/packages/propel/src/elements/linear-progress/linear-progress.stories.tsx
@@ -0,0 +1,281 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type * as React from "react";
+import { expect } from "storybook/test";
+
+import {
+  LinearProgress,
+  LinearProgressIndicator,
+  type LinearProgressIndicatorProps,
+  LinearProgressLabel,
+  LinearProgressTrack,
+  type LinearProgressTrackProps,
+  LinearProgressValue,
+} from "./index";
+
+type LinearProgressTrackMagnitude = NonNullable<LinearProgressTrackProps["magnitude"]>;
+type LinearProgressIndicatorTone = NonNullable<LinearProgressIndicatorProps["tone"]>;
+
+const MAGNITUDES: LinearProgressTrackMagnitude[] = ["sm", "md"];
+const TONES: LinearProgressIndicatorTone[] = ["brand", "success", "warning", "danger"];
+
+// Determinate fill geometry, exactly as Base UI's `Progress.Indicator` computes it from `value`
+// (`insetInlineStart: 0; height: inherit; width: <percent>%`). The fill width is value-derived
+// inline geometry — not a variant — so the showcase pins it statically through the part's own
+// `render` capability, the same way Base UI's inline style lands on the rendered element.
+const fillStyle = (percent: number): React.CSSProperties => ({
+  insetInlineStart: 0,
+  height: "inherit",
+  width: `${percent}%`,
+});
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI import, no graft — with the `progressbar` semantics Base UI's `Progress`
+// would set pinned statically: `role="progressbar"` + `aria-valuemin`/`-max`/`-now` on the frame,
+// and the status attribute (`data-progressing=""` / `data-complete=""` / `data-indeterminate=""`,
+// which Base UI mirrors onto every part) where the styling reads it. The live value model is
+// demonstrated AND tested in the ready-made (Components/LinearProgress), which composes these
+// parts.
+const meta = {
+  title: "Elements/LinearProgress",
+  component: LinearProgress,
+  subcomponents: {
+    LinearProgressLabel,
+    LinearProgressTrack,
+    LinearProgressIndicator,
+    LinearProgressValue,
+  },
+} satisfies Meta<typeof LinearProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy at 60%: the flex-row frame groups the label, the track with its fill, and the
+ * neutral `%` readout. The frame is pinned with the `progressbar` aria Base UI's `Progress.Root`
+ * would set, named by the label part via `aria-labelledby`.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="w-64">
+      <LinearProgress
+        role="progressbar"
+        aria-labelledby="elements-linear-progress-label"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={60}
+        data-progressing=""
+      >
+        <LinearProgressLabel id="elements-linear-progress-label">Uploading</LinearProgressLabel>
+        <LinearProgressTrack magnitude="md">
+          <LinearProgressIndicator
+            tone="brand"
+            data-progressing=""
+            render={<div style={fillStyle(60)} />}
+          />
+        </LinearProgressTrack>
+        <LinearProgressValue>60%</LinearProgressValue>
+      </LinearProgress>
+    </div>
+  ),
+};
+
+/** Fill color by signal: `brand` accent, `success`/`warning`/`danger` outcome. */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      {TONES.map((tone) => (
+        <LinearProgress
+          key={tone}
+          role="progressbar"
+          aria-label={`${tone} progress`}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={60}
+          data-progressing=""
+        >
+          <LinearProgressTrack magnitude="md">
+            <LinearProgressIndicator
+              tone={tone}
+              data-progressing=""
+              render={<div style={fillStyle(60)} />}
+            />
+          </LinearProgressTrack>
+          <LinearProgressValue>60%</LinearProgressValue>
+        </LinearProgress>
+      ))}
+    </div>
+  ),
+};
+
+/** Track thickness: `sm` 5px / `md` 8px. */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <LinearProgress
+          key={magnitude}
+          role="progressbar"
+          aria-label={`${magnitude} bar`}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={60}
+          data-progressing=""
+        >
+          <LinearProgressTrack magnitude={magnitude}>
+            <LinearProgressIndicator
+              tone="brand"
+              data-progressing=""
+              render={<div style={fillStyle(60)} />}
+            />
+          </LinearProgressTrack>
+          <LinearProgressValue>60%</LinearProgressValue>
+        </LinearProgress>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The fill is the value made visible — `width: <percent>%`, the inline geometry Base UI derives
+ * from `value`, pinned here from empty to complete. At `max` the status attribute flips from
+ * `data-progressing` to `data-complete`.
+ */
+export const Values: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      {[0, 25, 50, 75, 100].map((value) => {
+        const status = value === 100 ? { "data-complete": "" } : { "data-progressing": "" };
+        return (
+          <LinearProgress
+            key={value}
+            role="progressbar"
+            aria-label={`${value}% progress`}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={value}
+            {...status}
+          >
+            <LinearProgressTrack magnitude="md">
+              <LinearProgressIndicator
+                tone="brand"
+                {...status}
+                render={<div style={fillStyle(value)} />}
+              />
+            </LinearProgressTrack>
+            <LinearProgressValue>{value}%</LinearProgressValue>
+          </LinearProgress>
+        );
+      })}
+    </div>
+  ),
+};
+
+/**
+ * The unknown-duration state, pinned via `data-indeterminate` — the attribute Base UI sets when
+ * `value` is `null` (mirrored onto every part; the fill's cva is what reads it): the fill drops to
+ * a third of the track and slide-pulses (no inline width geometry), `aria-valuenow` is unset, and
+ * `aria-valuetext` reads "indeterminate progress".
+ */
+export const Indeterminate: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-64">
+      <LinearProgress
+        role="progressbar"
+        aria-label="Syncing"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuetext="indeterminate progress"
+        data-indeterminate=""
+      >
+        <LinearProgressTrack magnitude="md">
+          <LinearProgressIndicator tone="brand" data-indeterminate="" />
+        </LinearProgressTrack>
+      </LinearProgress>
+    </div>
+  ),
+};
+
+/**
+ * Hidden CSS canary (the allowed rule-2b play): asserts the pinned configurations compile to real
+ * styling — the `sm` track is thinner than the `md` track, `brand` and `danger` resolve to distinct
+ * fill colors, the pinned 60% geometry occupies 60% of the track, and `data-indeterminate` swaps
+ * the width transition for the slide-pulse animation. Tagged out of the sidebar/docs/manifest while
+ * still running under the default `test` tag.
+ */
+export const StatesCssCanary: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      <LinearProgress
+        role="progressbar"
+        aria-label="sm canary"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={60}
+        data-progressing=""
+      >
+        <LinearProgressTrack magnitude="sm">
+          <LinearProgressIndicator
+            tone="brand"
+            data-progressing=""
+            render={<div style={fillStyle(60)} />}
+          />
+        </LinearProgressTrack>
+      </LinearProgress>
+      <LinearProgress
+        role="progressbar"
+        aria-label="md canary"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={60}
+        data-progressing=""
+      >
+        <LinearProgressTrack magnitude="md">
+          <LinearProgressIndicator
+            tone="danger"
+            data-progressing=""
+            render={<div style={fillStyle(60)} />}
+          />
+        </LinearProgressTrack>
+      </LinearProgress>
+      <LinearProgress
+        role="progressbar"
+        aria-label="indeterminate canary"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuetext="indeterminate progress"
+        data-indeterminate=""
+      >
+        <LinearProgressTrack magnitude="md">
+          <LinearProgressIndicator tone="brand" data-indeterminate="" />
+        </LinearProgressTrack>
+      </LinearProgress>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    // Each canary bar holds exactly Track > Indicator, so structural traversal is deterministic.
+    const trackOf = (bar: HTMLElement) => bar.firstElementChild as HTMLElement;
+    const fillOf = (bar: HTMLElement) => trackOf(bar).firstElementChild as HTMLElement;
+    const smBar = canvas.getByRole("progressbar", { name: "sm canary" });
+    const mdBar = canvas.getByRole("progressbar", { name: "md canary" });
+    const indeterminateBar = canvas.getByRole("progressbar", { name: "indeterminate canary" });
+    // `magnitude` compiles to a real thickness difference (`sm` 5px < `md` 8px).
+    await expect(trackOf(smBar).getBoundingClientRect().height).toBeLessThan(
+      trackOf(mdBar).getBoundingClientRect().height,
+    );
+    // `tone` resolves to distinct fill colors.
+    await expect(getComputedStyle(fillOf(smBar)).backgroundColor).not.toBe(
+      getComputedStyle(fillOf(mdBar)).backgroundColor,
+    );
+    // The pinned `width: 60%` geometry occupies 60% of the track.
+    const mdTrackRect = trackOf(mdBar).getBoundingClientRect();
+    const mdFillRect = fillOf(mdBar).getBoundingClientRect();
+    await expect(mdFillRect.width / mdTrackRect.width).toBeCloseTo(0.6, 2);
+    // `data-indeterminate` runs the slide-pulse animation instead of a width transition.
+    await expect(getComputedStyle(fillOf(indeterminateBar)).animationName).not.toBe("none");
+  },
+};
diff --git a/packages/propel/src/elements/linear-progress/linear-progress.tsx b/packages/propel/src/elements/linear-progress/linear-progress.tsx
new file mode 100644
index 00000000..97d81e56
--- /dev/null
+++ b/packages/propel/src/elements/linear-progress/linear-progress.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { linearProgressVariants } from "./variants";
+
+export type LinearProgressProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled linear-progress frame — the flex row that groups the track and its label/value.
+ * Base-UI-agnostic; graft the `progressbar` value model in `components` via `<BaseProgress.Root
+ * render={<LinearProgress/>} />`.
+ */
+export function LinearProgress({ render, ...props }: LinearProgressProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: linearProgressVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/linear-progress/variants.ts b/packages/propel/src/elements/linear-progress/variants.ts
similarity index 100%
rename from packages/propel/src/ui/linear-progress/variants.ts
rename to packages/propel/src/elements/linear-progress/variants.ts
diff --git a/packages/propel/src/elements/list/index.tsx b/packages/propel/src/elements/list/index.tsx
new file mode 100644
index 00000000..b7b63fd8
--- /dev/null
+++ b/packages/propel/src/elements/list/index.tsx
@@ -0,0 +1,7 @@
+export * from "./list";
+export * from "./list-section-heading";
+export * from "./list-section-trigger";
+export * from "./list-item";
+export * from "./list-item-link";
+export * from "./list-item-button";
+export * from "./list-item-label";
diff --git a/packages/propel/src/elements/list/list-item-button.tsx b/packages/propel/src/elements/list/list-item-button.tsx
new file mode 100644
index 00000000..89172482
--- /dev/null
+++ b/packages/propel/src/elements/list/list-item-button.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { listItemButtonVariants } from "./variants";
+
+export type ListItemButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * The styled primary action of a list row — a `<button>`. Base-UI-agnostic — graft the roving
+ * `CompositeItem` behavior in `components` via `<CompositeItem tag="button"
+ * render={<ListItemButton/>} />`. Shares the row chrome with `ListItemLink`. Compose a
+ * `ListItemIcon` + `ListItemLabel` inside.
+ */
+export function ListItemButton({ render, ...props }: ListItemButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    type: "button",
+    className: listItemButtonVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/list/list-item-label.tsx b/packages/propel/src/elements/list/list-item-label.tsx
similarity index 100%
rename from packages/propel/src/ui/list/list-item-label.tsx
rename to packages/propel/src/elements/list/list-item-label.tsx
diff --git a/packages/propel/src/elements/list/list-item-link.tsx b/packages/propel/src/elements/list/list-item-link.tsx
new file mode 100644
index 00000000..8fb9822a
--- /dev/null
+++ b/packages/propel/src/elements/list/list-item-link.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { listItemLinkVariants } from "./variants";
+
+export type ListItemLinkProps = Omit<useRender.ComponentProps<"a">, "className" | "style">;
+
+/**
+ * The styled primary navigation target of a list row — an `<a>`. Base-UI-agnostic — graft the
+ * roving `CompositeItem` behavior in `components` via `<CompositeItem tag="a"
+ * render={<ListItemLink/>} />`. Mark the current page with `aria-current="page"` (the wrapping
+ * `ListItem` reads it for the selected look). Compose a `ListItemIcon` + `ListItemLabel` inside.
+ */
+export function ListItemLink({ render, ...props }: ListItemLinkProps) {
+  const defaultProps: useRender.ElementProps<"a"> = { className: listItemLinkVariants() };
+  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/list/list-item.tsx b/packages/propel/src/elements/list/list-item.tsx
similarity index 100%
rename from packages/propel/src/ui/list/list-item.tsx
rename to packages/propel/src/elements/list/list-item.tsx
diff --git a/packages/propel/src/ui/list/list-section-heading.tsx b/packages/propel/src/elements/list/list-section-heading.tsx
similarity index 100%
rename from packages/propel/src/ui/list/list-section-heading.tsx
rename to packages/propel/src/elements/list/list-section-heading.tsx
diff --git a/packages/propel/src/ui/list/list-section-trigger.tsx b/packages/propel/src/elements/list/list-section-trigger.tsx
similarity index 91%
rename from packages/propel/src/ui/list/list-section-trigger.tsx
rename to packages/propel/src/elements/list/list-section-trigger.tsx
index 45d101a1..6ecb3a4f 100644
--- a/packages/propel/src/ui/list/list-section-trigger.tsx
+++ b/packages/propel/src/elements/list/list-section-trigger.tsx
@@ -13,7 +13,7 @@ export type ListSectionTriggerProps = Omit<
  * A collapsible section's header — a small, muted heading with the chevron pushed to the
  * inline-end. Renders a `<button>` by default and carries the `group` so a
  * `ListSectionTriggerIndicator` inside rotates off `data-panel-open`. It does NOT embed any
- * disclosure behavior, keeping `ui/list` independent of the Collapsible primitive: a section
+ * disclosure behavior, keeping `elements/list` independent of the Collapsible primitive: a section
  * composition grafts the behavior on by rendering it as a trigger — `render={<Collapsible.Trigger
  * />}` (the styled button stays the outer element).
  */
diff --git a/packages/propel/src/elements/list/list.stories.tsx b/packages/propel/src/elements/list/list.stories.tsx
new file mode 100644
index 00000000..44c59b42
--- /dev/null
+++ b/packages/propel/src/elements/list/list.stories.tsx
@@ -0,0 +1,284 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, Ellipsis, Inbox, LayoutGrid, Settings } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemLabel,
+  ListItemLink,
+  ListSectionHeading,
+  ListSectionTrigger,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled list parts render
+// DIRECTLY — no Composite roving-tabindex graft, no Collapsible disclosure graft — with every
+// visual state pinned statically via the attributes the cvas key off: `aria-current="page"` on a
+// row's primary (the `ListItem` reads it via `:has` for the selected fill), `data-panel-open=""`
+// on a `ListSectionTrigger` (the internal `DisclosureIndicator` rotates off the trigger's `group`),
+// and the pseudo-states addon for hover/focus-visible. The parts carry no role of their own —
+// role/aria wiring (toolbar, roving tabindex) is settled by the ready-made List
+// (Components/List), where the grafting, keyboard, and aria behavior are demonstrated AND tested.
+const meta = {
+  title: "Elements/List",
+  component: List,
+  subcomponents: {
+    ListItem,
+    ListItemLink,
+    ListItemButton,
+    ListItemLabel,
+    ListSectionHeading,
+    ListSectionTrigger,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `List` › `ListItem` rows, each holding a primary
+ * `ListItemLink` (or `ListItemButton` for an action row — same chrome, different element) with an
+ * internal `Icon` and a truncating `ListItemLabel`. The current page is pinned via
+ * `aria-current="page"` on its link; the wrapping row reads it through `:has` for the selected
+ * fill.
+ */
+export const Default: Story = {
+  render: () => (
+    <List>
+      <ListItem>
+        <ListItemLink href="#inbox">
+          <Icon magnitude="md">
+            <Inbox />
+          </Icon>
+          <ListItemLabel>Inbox</ListItemLabel>
+        </ListItemLink>
+      </ListItem>
+      <ListItem>
+        <ListItemLink href="#projects" aria-current="page">
+          <Icon magnitude="md">
+            <LayoutGrid />
+          </Icon>
+          <ListItemLabel>Projects</ListItemLabel>
+        </ListItemLink>
+      </ListItem>
+      <ListItem>
+        <ListItemLink href="#settings">
+          <Icon magnitude="md">
+            <Settings />
+          </Icon>
+          <ListItemLabel>Settings</ListItemLabel>
+        </ListItemLink>
+      </ListItem>
+      <ListItem>
+        {/* An action row (not navigation) — a button that shares the row chrome. */}
+        <ListItemButton>
+          <Icon magnitude="md">
+            <Ellipsis />
+          </Icon>
+          <ListItemLabel>More</ListItemLabel>
+        </ListItemButton>
+      </ListItem>
+    </List>
+  ),
+};
+
+/**
+ * A collapsible section pinned open: `ListSectionTrigger` is a plain styled button carrying
+ * `group`; pinning `data-panel-open=""` (the attribute Base UI's `Collapsible.Trigger` would set)
+ * rotates the internal `DisclosureIndicator`'s chevron from inline-end to down. The rows below
+ * stand in for the expanded panel — a closed section renders no rows. The ready-made `ListSection`
+ * (Components/List) grafts the real disclosure behavior.
+ */
+export const Section: Story = {
+  render: () => (
+    <div>
+      <ListSectionTrigger aria-expanded data-panel-open="">
+        Workspace
+        <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+          <ChevronDown />
+        </DisclosureIndicator>
+      </ListSectionTrigger>
+      <List>
+        <ListItem>
+          <ListItemLink href="#projects" aria-current="page">
+            <Icon magnitude="md">
+              <LayoutGrid />
+            </Icon>
+            <ListItemLabel>Projects</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+        <ListItem>
+          <ListItemLink href="#settings">
+            <Icon magnitude="md">
+              <Settings />
+            </Icon>
+            <ListItemLabel>Settings</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+      </List>
+    </div>
+  ),
+};
+
+/**
+ * The static sibling of `ListSectionTrigger`: `ListSectionHeading` titles a group of rows with no
+ * button affordance (no hover/focus/cursor) — for settings-style sidebars whose sections don't
+ * collapse.
+ */
+export const SectionHeading: Story = {
+  render: () => (
+    <div>
+      <ListSectionHeading>Workspace</ListSectionHeading>
+      <List>
+        <ListItem>
+          <ListItemLink href="#members">
+            <Icon magnitude="md">
+              <Settings />
+            </Icon>
+            <ListItemLabel>Members</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+        <ListItem>
+          <ListItemLink href="#billing">
+            <Icon magnitude="md">
+              <LayoutGrid />
+            </Icon>
+            <ListItemLabel>Billing</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+      </List>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state side by side.
+ *
+ * Rows (`ListItem` owns the chrome and reads its primary's state via `:has`):
+ *
+ * - **Resting** — the plain row.
+ * - **Hover** — `hover:` fill on the row, forced by the pseudo-states addon.
+ * - **Selected** — `aria-current="page"` pinned on the link recolors and fills the row.
+ * - **Focus ring** — focus-visible forced on the link (the primary has no outline of its own; the row
+ *   shows the ring via `has-[:focus-visible]`).
+ *
+ * Section triggers (the caret reads the trigger's `group`):
+ *
+ * - **Closed** — the caret points inline-end (`-rotate-90`, RTL-mirrored).
+ * - **Open** — `data-panel-open=""` pinned on the trigger rotates the caret down.
+ * - **Hover / Focus** — pseudo-classes forced by the addon (text brightens; ring shows).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#list-item-hover", "#list-section-trigger-hover"],
+      focusVisible: ["#list-item-focus-primary", "#list-section-trigger-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <List>
+        <ListItem>
+          <ListItemLink href="#resting">
+            <Icon magnitude="md">
+              <Inbox />
+            </Icon>
+            <ListItemLabel>Resting</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+        <ListItem id="list-item-hover">
+          <ListItemLink href="#hover">
+            <Icon magnitude="md">
+              <Inbox />
+            </Icon>
+            <ListItemLabel>Hover</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+        <ListItem>
+          <ListItemLink href="#selected" aria-current="page">
+            <Icon magnitude="md">
+              <LayoutGrid />
+            </Icon>
+            <ListItemLabel>Selected</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+        <ListItem>
+          <ListItemLink id="list-item-focus-primary" href="#focus">
+            <Icon magnitude="md">
+              <Settings />
+            </Icon>
+            <ListItemLabel>Focus ring</ListItemLabel>
+          </ListItemLink>
+        </ListItem>
+      </List>
+      <div className="flex flex-col gap-1">
+        <ListSectionTrigger aria-expanded={false}>
+          Closed
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ListSectionTrigger>
+        <ListSectionTrigger aria-expanded data-panel-open="">
+          Open
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ListSectionTrigger>
+        <ListSectionTrigger id="list-section-trigger-hover" aria-expanded={false}>
+          Hover
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ListSectionTrigger>
+        <ListSectionTrigger id="list-section-trigger-focus" aria-expanded={false}>
+          Focus
+          <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </ListSectionTrigger>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the row holding
+ * the `aria-current="page"` link computes a different background from the resting row (the
+ * `has-[[aria-current=page]]` fill), and the `data-panel-open` trigger rotates its caret relative
+ * to the closed one. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    // The compiled `has-[[aria-current=page]]:bg-layer-transparent-selected` selector fills the
+    // selected row.
+    const selectedRow = canvas.getByRole("link", { name: "Selected" }).parentElement;
+    const restingRow = canvas.getByRole("link", { name: "Resting" }).parentElement;
+    if (!selectedRow || !restingRow) throw new Error("expected each link to sit in a ListItem row");
+    await expect(getComputedStyle(selectedRow).backgroundColor).not.toBe(
+      getComputedStyle(restingRow).backgroundColor,
+    );
+
+    // The compiled `group-data-panel-open:rotate-0` selector rotates the open trigger's caret away
+    // from the closed caret's resting `-rotate-90`.
+    const caretRotate = (name: string) => {
+      const caret = canvas.getByRole("button", { name }).querySelector("[aria-hidden]");
+      if (!(caret instanceof HTMLElement)) throw new Error(`missing caret in "${name}" trigger`);
+      return getComputedStyle(caret).rotate;
+    };
+    await expect(caretRotate("Open")).not.toBe(caretRotate("Closed"));
+  },
+};
diff --git a/packages/propel/src/elements/list/list.tsx b/packages/propel/src/elements/list/list.tsx
new file mode 100644
index 00000000..476efeee
--- /dev/null
+++ b/packages/propel/src/elements/list/list.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { listVariants } from "./variants";
+
+export type ListProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled vertical list frame. Base-UI-agnostic — graft the roving-tabindex `Composite` behavior
+ * in `components` via `<Composite render={<List/>} />`. Compose `ListItem` rows inside.
+ */
+export function List({ render, ...props }: ListProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: listVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/list/variants.ts b/packages/propel/src/elements/list/variants.ts
new file mode 100644
index 00000000..75e6a7f3
--- /dev/null
+++ b/packages/propel/src/elements/list/variants.ts
@@ -0,0 +1,62 @@
+import { cva, cx } from "class-variance-authority";
+
+import { listItemPrimaryVariants } from "../../internal/list-item-primary";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/** The list container — a vertical stack of rows. Role/aria are supplied by the consumer. */
+export const listVariants = cva("flex w-full flex-col gap-0.5");
+export type ListVariantProps = StrictVariantProps<typeof listVariants>;
+
+/**
+ * A row wrapper. It owns the chrome (hover + selected fill + focus ring) and the layout, but is not
+ * itself the focusable target — that's the `ListItemLink`/`ListItemButton` it wraps. Selected and
+ * focus are read off descendants via `:has`, so the whole row reacts to its primary's state.
+ */
+export const listItemVariants = cva(
+  cx(
+    "group/list-item relative flex h-8 w-full items-center gap-2 rounded-lg px-2",
+    "text-13 text-secondary transition-colors",
+    "hover:bg-layer-transparent-hover",
+    "has-[[aria-current=page]]:bg-layer-transparent-selected has-[[aria-current=page]]:text-primary",
+    "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-strong",
+  ),
+);
+export type ListItemVariantProps = StrictVariantProps<typeof listItemVariants>;
+
+// A row's primary — `ListItemLink` (`<a>`) and `ListItemButton` (`<button>`) — wears the shared
+// row-primary chrome from `internal/list-item-primary` (rule 4); they differ only in the element
+// they render (rule 6c).
+export const listItemLinkVariants = listItemPrimaryVariants;
+export type ListItemLinkVariantProps = StrictVariantProps<typeof listItemLinkVariants>;
+
+export const listItemButtonVariants = listItemPrimaryVariants;
+export type ListItemButtonVariantProps = StrictVariantProps<typeof listItemButtonVariants>;
+
+/** The row label — fills the remaining width and truncates. */
+export const listItemLabelVariants = cva("min-w-0 flex-1 truncate");
+export type ListItemLabelVariantProps = StrictVariantProps<typeof listItemLabelVariants>;
+
+/**
+ * A static section heading — a small, muted label that names a group of rows. The non-interactive
+ * sibling of `listSectionTrigger`: no button affordance (no hover/focus/cursor), it just titles a
+ * static section in a settings-style sidebar.
+ */
+export const listSectionHeadingVariants = cva(
+  cx("flex h-7 w-full items-center px-2 py-1", "text-13 font-semibold text-tertiary"),
+);
+export type ListSectionHeadingVariantProps = StrictVariantProps<typeof listSectionHeadingVariants>;
+
+/**
+ * A collapsible section's header — a small, muted heading that toggles the section, with the
+ * chevron pushed to the inline-end edge of the row. Styled `Collapsible.Trigger`; carries the
+ * `group` so a `CollapsibleTriggerIndicator` inside rotates off its `data-panel-open`.
+ */
+export const listSectionTriggerVariants = cva(
+  cx(
+    "group flex w-full items-center justify-between gap-1 rounded-md px-2 py-1 [--node-size:0.875rem]",
+    "text-12 font-medium text-tertiary transition-colors",
+    "cursor-pointer outline-none hover:text-secondary",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
+export type ListSectionTriggerVariantProps = StrictVariantProps<typeof listSectionTriggerVariants>;
diff --git a/packages/propel/src/elements/menu/index.tsx b/packages/propel/src/elements/menu/index.tsx
new file mode 100644
index 00000000..f0218664
--- /dev/null
+++ b/packages/propel/src/elements/menu/index.tsx
@@ -0,0 +1,25 @@
+export * from "./menu-checkbox-item";
+export * from "./menu-checkbox-item-indicator";
+export * from "./menu-footer";
+export * from "./menu-group-label";
+export * from "./menu-item";
+export * from "./menu-item-content";
+export * from "./menu-item-control";
+export * from "./menu-item-description";
+export * from "./menu-item-meta";
+export * from "./menu-item-secondary-text";
+export * from "./menu-item-indicator";
+export * from "./menu-item-title";
+export * from "./menu-item-title-row";
+export * from "./menu-item-trailing";
+export * from "./menu-label";
+export * from "./menu-label-meta";
+export * from "./menu-label-title";
+export * from "./menu-link-item";
+export * from "./menu-popup";
+export * from "./menu-radio-item";
+export * from "./menu-radio-item-indicator";
+export * from "./menu-search";
+export * from "./menu-search-input";
+export * from "./menu-separator";
+export * from "./menu-submenu-trigger";
diff --git a/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx b/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx
new file mode 100644
index 00000000..a0801a63
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuCheckboxItemIndicatorVariants } from "./variants";
+
+export type MenuCheckboxItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled checkbox BOX shown at the leading edge of a checkbox item (the 16px bordered square
+ * that fills the accent on `data-checked`; its glyph child stays hidden until checked). Base-UI-
+ * agnostic — graft the indicator behavior in `components` via `<BaseMenu.CheckboxItemIndicator
+ * keepMounted render={<MenuCheckboxItemIndicator />} />` (keeping it mounted shows the empty box
+ * when unchecked).
+ */
+export function MenuCheckboxItemIndicator({ render, ...props }: MenuCheckboxItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: menuCheckboxItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-checkbox-item.tsx b/packages/propel/src/elements/menu/menu-checkbox-item.tsx
new file mode 100644
index 00000000..b1ecfecb
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-checkbox-item.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuCheckboxItemVariants } from "./variants";
+
+export type MenuCheckboxItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A styled toggleable multi-select menu row. Base-UI-agnostic — graft the checkbox-item behavior in
+ * `components` via `<BaseMenu.CheckboxItem render={<MenuCheckboxItem />} />` (Base UI applies
+ * `role="menuitemcheckbox"` and the checked state).
+ */
+export function MenuCheckboxItem({ render, ...props }: MenuCheckboxItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: menuCheckboxItemVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/menu/menu-footer.tsx b/packages/propel/src/elements/menu/menu-footer.tsx
similarity index 100%
rename from packages/propel/src/ui/menu/menu-footer.tsx
rename to packages/propel/src/elements/menu/menu-footer.tsx
diff --git a/packages/propel/src/elements/menu/menu-group-label.tsx b/packages/propel/src/elements/menu/menu-group-label.tsx
new file mode 100644
index 00000000..5498c70d
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-group-label.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuGroupLabelVariants } from "./variants";
+
+export type MenuGroupLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A styled non-interactive heading for a group of menu items. Base-UI-agnostic — graft the
+ * group-label behavior in `components` via `<BaseMenu.GroupLabel render={<MenuGroupLabel />} />`.
+ */
+export function MenuGroupLabel({ render, ...props }: MenuGroupLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: menuGroupLabelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-content.tsx b/packages/propel/src/elements/menu/menu-item-content.tsx
new file mode 100644
index 00000000..7d250902
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-content.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemContentVariants } from "./variants";
+
+export type MenuItemContentProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The text column of a row. Grows to fill the row so trailing nodes/indicators sit at the
+ * inline-end, and stacks a `MenuItemTitleRow` over an optional `MenuItemDescription`.
+ */
+export function MenuItemContent({ render, ...props }: MenuItemContentProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemContentVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-control.tsx b/packages/propel/src/elements/menu/menu-item-control.tsx
new file mode 100644
index 00000000..52200236
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-control.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemControlVariants } from "./variants";
+
+export type MenuItemControlProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/** The leading control slot of a checkbox/radio row, holding its visual toggle. */
+export function MenuItemControl({ render, ...props }: MenuItemControlProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemControlVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-description.tsx b/packages/propel/src/elements/menu/menu-item-description.tsx
new file mode 100644
index 00000000..87e0ae09
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-description.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemDescriptionVariants } from "./variants";
+
+export type MenuItemDescriptionProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/** A muted second line beneath the title, holding the item's description. */
+export function MenuItemDescription({ render, ...props }: MenuItemDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemDescriptionVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-indicator.tsx b/packages/propel/src/elements/menu/menu-item-indicator.tsx
new file mode 100644
index 00000000..1b196a71
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-indicator.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemIndicatorVariants } from "./variants";
+
+export type MenuItemIndicatorProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The single-select check slot shown at a row's inline-end. Decorative (the row carries the
+ * selected state), so it is `aria-hidden`. Renders and sizes its single child; pass the glyph as
+ * `children`.
+ */
+export function MenuItemIndicator({ render, ...props }: MenuItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: menuItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/menu/menu-item-meta.tsx b/packages/propel/src/elements/menu/menu-item-meta.tsx
similarity index 100%
rename from packages/propel/src/ui/menu/menu-item-meta.tsx
rename to packages/propel/src/elements/menu/menu-item-meta.tsx
diff --git a/packages/propel/src/elements/menu/menu-item-secondary-text.tsx b/packages/propel/src/elements/menu/menu-item-secondary-text.tsx
new file mode 100644
index 00000000..b1bce501
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-secondary-text.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemSecondaryTextVariants } from "./variants";
+
+export type MenuItemSecondaryTextProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/** Muted text shown inline after the title (e.g. a translation or a hint). */
+export function MenuItemSecondaryText({ render, ...props }: MenuItemSecondaryTextProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: menuItemSecondaryTextVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-title-row.tsx b/packages/propel/src/elements/menu/menu-item-title-row.tsx
new file mode 100644
index 00000000..7b940e7f
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-title-row.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemTitleRowVariants } from "./variants";
+
+export type MenuItemTitleRowProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/** The baseline-aligned line holding a `MenuItemTitle` and any inline `MenuItemSecondaryText`. */
+export function MenuItemTitleRow({ render, ...props }: MenuItemTitleRowProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemTitleRowVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-title.tsx b/packages/propel/src/elements/menu/menu-item-title.tsx
new file mode 100644
index 00000000..6221eb5d
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-title.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemTitleVariants } from "./variants";
+
+export type MenuItemTitleProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/** A row's primary label. Truncates rather than wrapping. */
+export function MenuItemTitle({ render, ...props }: MenuItemTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemTitleVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-trailing.tsx b/packages/propel/src/elements/menu/menu-item-trailing.tsx
new file mode 100644
index 00000000..899454c6
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-trailing.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemTrailingVariants } from "./variants";
+
+export type MenuItemTrailingProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * A trailing slot at the row's inline-end for arbitrary content (a shortcut, a count, a chevron).
+ * Sizes any icon child to the row's `--node-size`; unlike `MenuItemIcon` it adds no tint, so passed
+ * content keeps its own color.
+ */
+export function MenuItemTrailing({ render, ...props }: MenuItemTrailingProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemTrailingVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item.tsx b/packages/propel/src/elements/menu/menu-item.tsx
new file mode 100644
index 00000000..b6b18f79
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type MenuRowVariantProps, menuRowVariants } from "./variants";
+
+export type MenuItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  MenuRowVariantProps;
+
+/**
+ * A styled selectable menu row. Base-UI-agnostic — graft the menu-item behavior in `components` via
+ * `<BaseMenu.Item render={<MenuItem layout="…" />} />`.
+ */
+export function MenuItem({ layout, render, ...props }: MenuItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: menuRowVariants({ layout }) };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-label-meta.tsx b/packages/propel/src/elements/menu/menu-label-meta.tsx
new file mode 100644
index 00000000..99b6df24
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-label-meta.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuLabelMetaVariants } from "./variants";
+
+export type MenuLabelMetaProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/** Trailing metadata pinned at the inline-end of a `MenuLabel`. */
+export function MenuLabelMeta({ render, ...props }: MenuLabelMetaProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuLabelMetaVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-label-title.tsx b/packages/propel/src/elements/menu/menu-label-title.tsx
new file mode 100644
index 00000000..91d75e70
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-label-title.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuLabelTitleVariants } from "./variants";
+
+export type MenuLabelTitleProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/** The growing title within a `MenuLabel`. Grows so a trailing `MenuLabelMeta` sits at the edge. */
+export function MenuLabelTitle({ render, ...props }: MenuLabelTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuLabelTitleVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-label.tsx b/packages/propel/src/elements/menu/menu-label.tsx
new file mode 100644
index 00000000..072b2000
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-label.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuLabelVariants } from "./variants";
+
+export type MenuLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A styled non-interactive section heading row that can carry inline-end metadata. Base-UI-agnostic
+ * — graft the group-label behavior in `components` via `<BaseMenu.GroupLabel render={<MenuLabel />}
+ * />`.
+ */
+export function MenuLabel({ render, ...props }: MenuLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: menuLabelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-link-item.tsx b/packages/propel/src/elements/menu/menu-link-item.tsx
new file mode 100644
index 00000000..17ef356e
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-link-item.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuRowVariants } from "./variants";
+
+export type MenuLinkItemProps = Omit<useRender.ComponentProps<"a">, "className" | "style">;
+
+/**
+ * A styled navigational `<a>` menu row. Base-UI-agnostic — graft the link-item behavior in
+ * `components` via `<BaseMenu.LinkItem render={<MenuLinkItem />} />`.
+ */
+export function MenuLinkItem({ render, ...props }: MenuLinkItemProps) {
+  const defaultProps: useRender.ElementProps<"a"> = {
+    className: menuRowVariants({ layout: "default" }),
+  };
+  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-popup.tsx b/packages/propel/src/elements/menu/menu-popup.tsx
new file mode 100644
index 00000000..7ffa9f1f
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-popup.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type MenuPopupVariantProps, menuPopupVariants } from "./variants";
+
+export type MenuPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  MenuPopupVariantProps;
+
+/**
+ * The styled menu surface that contains the items. Base-UI-agnostic — graft the menu behavior in
+ * `components` via `<BaseMenu.Popup render={<MenuPopup elevation="…" />} />`.
+ */
+export function MenuPopup({ elevation, render, ...props }: MenuPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: menuPopupVariants({ elevation }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-radio-item-indicator.tsx b/packages/propel/src/elements/menu/menu-radio-item-indicator.tsx
new file mode 100644
index 00000000..9577f0f8
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-radio-item-indicator.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuRadioItemIndicatorVariants } from "./variants";
+
+export type MenuRadioItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The styled accent dot shown when a radio item is selected. Base-UI-agnostic — graft the indicator
+ * behavior in `components` via `<BaseMenu.RadioItemIndicator render={<MenuRadioItemIndicator />}
+ * />`.
+ */
+export function MenuRadioItemIndicator({ render, ...props }: MenuRadioItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: menuRadioItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-radio-item.tsx b/packages/propel/src/elements/menu/menu-radio-item.tsx
new file mode 100644
index 00000000..1ce8fdc4
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-radio-item.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuRowVariants } from "./variants";
+
+export type MenuRadioItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A styled menu row that behaves like a radio button. Base-UI-agnostic — graft the radio-item
+ * behavior in `components` via `<BaseMenu.RadioItem render={<MenuRadioItem />} />`.
+ */
+export function MenuRadioItem({ render, ...props }: MenuRadioItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: menuRowVariants({ layout: "default" }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-search-input.tsx b/packages/propel/src/elements/menu/menu-search-input.tsx
new file mode 100644
index 00000000..d832f7fc
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-search-input.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuSearchInputVariants } from "./variants";
+
+export type MenuSearchInputProps = Omit<useRender.ComponentProps<"input">, "className" | "style">;
+
+/**
+ * The styled borderless text field inside `MenuSearch`. Base-UI-agnostic — the ready-made
+ * `MenuSearch` (`components`) stops keydown from bubbling so typing does not trigger the menu's own
+ * type-ahead navigation.
+ */
+export function MenuSearchInput({ render, ...props }: MenuSearchInputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = { className: menuSearchInputVariants() };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/menu/menu-search.tsx b/packages/propel/src/elements/menu/menu-search.tsx
similarity index 100%
rename from packages/propel/src/ui/menu/menu-search.tsx
rename to packages/propel/src/elements/menu/menu-search.tsx
diff --git a/packages/propel/src/elements/menu/menu-separator.tsx b/packages/propel/src/elements/menu/menu-separator.tsx
new file mode 100644
index 00000000..01c7ad60
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-separator.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuSeparatorVariants } from "./variants";
+
+export type MenuSeparatorProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A styled thin divider between groups of items. Base-UI-agnostic — graft the separator behavior in
+ * `components` via `<BaseMenu.Separator render={<MenuSeparator />} />`.
+ */
+export function MenuSeparator({ render, ...props }: MenuSeparatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: menuSeparatorVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-submenu-trigger.tsx b/packages/propel/src/elements/menu/menu-submenu-trigger.tsx
new file mode 100644
index 00000000..dc493f93
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-submenu-trigger.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuSubmenuTriggerVariants } from "./variants";
+
+export type MenuSubmenuTriggerProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled row that opens a submenu. Base-UI-agnostic — graft the submenu-trigger behavior in
+ * `components` via `<BaseMenu.SubmenuTrigger render={<MenuSubmenuTrigger />} />`.
+ */
+export function MenuSubmenuTrigger({ render, ...props }: MenuSubmenuTriggerProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: menuSubmenuTriggerVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu.stories.tsx b/packages/propel/src/elements/menu/menu.stories.tsx
new file mode 100644
index 00000000..17b7e474
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu.stories.tsx
@@ -0,0 +1,722 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Check,
+  ChevronDown,
+  Circle,
+  Copy,
+  ExternalLink,
+  FolderInput,
+  Globe,
+  Link2,
+  Lock,
+  Pencil,
+  Search,
+  Trash2,
+} from "lucide-react";
+import { expect } from "storybook/test";
+
+import { DisclosureIndicator } from "../../internal/disclosure-indicator";
+import { Icon } from "../../internal/icon";
+import {
+  MenuCheckboxItem,
+  MenuCheckboxItemIndicator,
+  MenuFooter,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemContent,
+  MenuItemControl,
+  MenuItemDescription,
+  MenuItemIndicator,
+  MenuItemMeta,
+  MenuItemSecondaryText,
+  MenuItemTitle,
+  MenuItemTitleRow,
+  MenuItemTrailing,
+  MenuLabel,
+  MenuLabelMeta,
+  MenuLabelTitle,
+  MenuLinkItem,
+  MenuPopup,
+  MenuRadioItem,
+  MenuRadioItemIndicator,
+  MenuSearch,
+  MenuSearchInput,
+  MenuSeparator,
+  MenuSubmenuTrigger,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the menu semantics (`role="menu"`, `role="menuitem"`,
+// `aria-checked`, …) and every visual state pinned statically via the `data-*` attributes Base UI's
+// menu would set (`data-highlighted=""`, `data-disabled=""`, `data-popup-open=""`,
+// `data-checked=""`/`data-unchecked=""` on the checkbox box, `data-selected=""` on the check
+// indicator, `data-starting-style=""`/`data-ending-style=""` on the popup). The popup is just a
+// styled div here, rendered inline instead of portaled/positioned. Grafting, keyboard, and aria
+// behavior are demonstrated and tested in Components/Menu.
+const meta = {
+  title: "Elements/Menu",
+  component: MenuPopup,
+  subcomponents: {
+    MenuItem,
+    MenuItemContent,
+    MenuItemTitleRow,
+    MenuItemTitle,
+    MenuItemSecondaryText,
+    MenuItemDescription,
+    MenuItemMeta,
+    MenuItemTrailing,
+    MenuItemIndicator,
+    MenuItemControl,
+    MenuCheckboxItem,
+    MenuCheckboxItemIndicator,
+    MenuRadioItem,
+    MenuRadioItemIndicator,
+    MenuLinkItem,
+    MenuSubmenuTrigger,
+    MenuSeparator,
+    MenuGroupLabel,
+    MenuLabel,
+    MenuLabelTitle,
+    MenuLabelMeta,
+    MenuSearch,
+    MenuSearchInput,
+    MenuFooter,
+  },
+  args: { elevation: "raised" },
+} satisfies Meta<typeof MenuPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `MenuPopup` › a labelled group (`MenuGroupLabel` +
+ * `MenuItem` rows of internal `Icon` + `MenuItemContent` › `MenuItemTitleRow` › `MenuItemTitle`), a
+ * trailing `MenuItemMeta` shortcut, a `MenuSubmenuTrigger` row whose caret is the internal
+ * `DisclosureIndicator` (`motion="pointEnd"`), `MenuSeparator` dividers, and a single-select row
+ * whose inline-end check (`MenuItemIndicator`) shows via the pinned `data-selected=""`. The
+ * "Duplicate" row pins `data-highlighted=""` — the state Base UI sets on the active row.
+ */
+export const Default: Story = {
+  render: ({ elevation }) => (
+    <div className="w-56">
+      <MenuPopup elevation={elevation} role="menu">
+        <div role="group" aria-labelledby="menu-elements-default-actions">
+          <MenuGroupLabel id="menu-elements-default-actions">Actions</MenuGroupLabel>
+          <MenuItem role="menuitem" layout="default">
+            <Icon tint="secondary">
+              <Pencil />
+            </Icon>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Edit</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+            <MenuItemMeta>⌘E</MenuItemMeta>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default" data-highlighted="">
+            <Icon tint="secondary">
+              <Copy />
+            </Icon>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Duplicate</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+        </div>
+        <MenuSeparator role="separator" />
+        <MenuSubmenuTrigger role="menuitem" aria-haspopup="menu" aria-expanded={false}>
+          <Icon tint="secondary">
+            <FolderInput />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Move to</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+          <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+            <ChevronDown />
+          </DisclosureIndicator>
+        </MenuSubmenuTrigger>
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Pinned</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+          <MenuItemIndicator data-selected="">
+            <Check />
+          </MenuItemIndicator>
+        </MenuItem>
+        <MenuSeparator role="separator" />
+        <MenuItem role="menuitem" layout="default">
+          <Icon tint="secondary">
+            <Trash2 />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Delete</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * The popup's only variant axis — `elevation`. `raised` is the standalone surface: the shared
+ * anchored-popup chrome (border, radius, `layer-1` fill, overlay shadow, animated transform origin)
+ * plus the list padding and a minimum width. `flat` contributes only the padding — the variant the
+ * components-tier `MenuContent` grafts inside its `OverlayPanel` shell, which already draws the
+ * elevated, scrollable chrome; the bordered card here stands in for that shell.
+ */
+export const Elevations: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <MenuPopup elevation="raised" role="menu" aria-label="Raised elevation">
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Raised</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Standalone surface</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+      </MenuPopup>
+      <div className="w-40 overflow-hidden rounded-lg border-sm border-subtle bg-layer-1 shadow-overlay-100">
+        <MenuPopup elevation="flat" role="menu" aria-label="Flat elevation">
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Flat</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Padding only</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+        </MenuPopup>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * `MenuItem`'s `layout` axis and the row's text anatomy. `default` is the 34px single-line row:
+ * `MenuItemTitleRow` baseline-aligns the `MenuItemTitle` with optional inline
+ * `MenuItemSecondaryText`, and the inline-end holds a muted `MenuItemMeta` shortcut or a free-form
+ * `MenuItemTrailing` slot. `with-description` is the taller, top-aligned row that stacks a
+ * `MenuItemDescription` beneath the title (the components-tier ready-made derives this layout from
+ * its `description` prop rather than exposing it).
+ */
+export const ItemLayouts: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-72">
+      <MenuPopup elevation="raised" role="menu" aria-label="Row layouts">
+        <MenuItem role="menuitem" layout="default">
+          <Icon tint="secondary">
+            <Link2 />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Copy link</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+          <MenuItemMeta>⌘L</MenuItemMeta>
+        </MenuItem>
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Español</MenuItemTitle>
+              <MenuItemSecondaryText>Spanish</MenuItemSecondaryText>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Assignees</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+          <MenuItemTrailing>
+            <span className="text-12 text-tertiary">5</span>
+          </MenuItemTrailing>
+        </MenuItem>
+        <MenuSeparator role="separator" />
+        <MenuItem role="menuitem" layout="with-description">
+          <Icon tint="secondary">
+            <Lock />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Private</MenuItemTitle>
+            </MenuItemTitleRow>
+            <MenuItemDescription>Accessible only by invite</MenuItemDescription>
+          </MenuItemContent>
+          <MenuItemIndicator data-selected="">
+            <Check />
+          </MenuItemIndicator>
+        </MenuItem>
+        <MenuItem role="menuitem" layout="with-description">
+          <Icon tint="secondary">
+            <Globe />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Public</MenuItemTitle>
+            </MenuItemTitleRow>
+            <MenuItemDescription>
+              Anyone in the workspace except Guests can join
+            </MenuItemDescription>
+          </MenuItemContent>
+        </MenuItem>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state side by side:
+ *
+ * - **Row states** — resting; `data-highlighted=""` (the pointer/keyboard highlight);
+ *   `data-disabled=""` + `aria-disabled` (dimmed, pointer-events off — the row's `group/item`
+ *   marker also dims its `MenuItemSecondaryText` through `group-data-disabled/item`); a
+ *   `MenuItemIndicator` with `data-selected=""` (the visible accent check) next to one without it
+ *   (the check hides via `not-data-selected:invisible` but the slot keeps the gutter, matching Base
+ *   UI's `keepMounted` graft).
+ * - **Submenu trigger states** — closed; `data-popup-open=""` (the row keeps the hover fill while its
+ *   submenu is open); disabled, where the `group/item` marker dims the caret.
+ * - **Popup transition endpoints** — sibling popups pinned at `data-starting-style=""` and
+ *   `data-ending-style=""` sit at the scaled/faded endpoint of the raised surface's open/close
+ *   transition, so they render invisible on purpose.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="w-56">
+        <MenuPopup elevation="raised" role="menu" aria-label="Row states">
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Resting</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default" data-highlighted="">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Highlighted</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default" data-disabled="" aria-disabled="true">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Disabled</MenuItemTitle>
+                <MenuItemSecondaryText>Admins only</MenuItemSecondaryText>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Selected</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+            <MenuItemIndicator data-selected="">
+              <Check />
+            </MenuItemIndicator>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Unselected</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+            <MenuItemIndicator>
+              <Check />
+            </MenuItemIndicator>
+          </MenuItem>
+          <MenuSeparator role="separator" />
+          <MenuSubmenuTrigger role="menuitem" aria-haspopup="menu" aria-expanded={false}>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Submenu closed</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+            <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </MenuSubmenuTrigger>
+          <MenuSubmenuTrigger role="menuitem" aria-haspopup="menu" aria-expanded data-popup-open="">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Submenu open</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+            <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </MenuSubmenuTrigger>
+          <MenuSubmenuTrigger
+            role="menuitem"
+            aria-haspopup="menu"
+            aria-expanded={false}
+            data-disabled=""
+            aria-disabled="true"
+          >
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Submenu disabled</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+            <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
+              <ChevronDown />
+            </DisclosureIndicator>
+          </MenuSubmenuTrigger>
+        </MenuPopup>
+      </div>
+      <MenuPopup elevation="raised" role="menu" aria-label="Entering" data-starting-style="">
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Entering</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+      </MenuPopup>
+      <MenuPopup elevation="raised" role="menu" aria-label="Exiting" data-ending-style="">
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Exiting</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * The selection row kinds. `MenuCheckboxItem` (`role="menuitemcheckbox"` + `aria-checked`) leads
+ * with a `MenuItemControl` gutter holding the kept-mounted `MenuCheckboxItemIndicator` — the shared
+ * 16px checkbox box: pinned `data-unchecked=""` it stays an empty bordered square (its glyph hides
+ * via `data-unchecked:[&>*]:invisible`), pinned `data-checked=""` it fills with the accent, and
+ * `data-disabled=""` (on the row and the box) flattens the fill. `MenuRadioItem` rows
+ * (`role="menuitemradio"`, inside the plain `role="group"` Base UI's `RadioGroup` renders) show the
+ * accent `MenuRadioItemIndicator` dot only while selected — Base UI unmounts the indicator
+ * otherwise, so the unselected row renders the bare control slot.
+ */
+export const SelectionItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-56">
+      <MenuPopup elevation="raised" role="menu">
+        <div role="group" aria-labelledby="menu-elements-selection-notify">
+          <MenuGroupLabel id="menu-elements-selection-notify">Notify me about</MenuGroupLabel>
+          <MenuCheckboxItem role="menuitemcheckbox" aria-checked="true">
+            <MenuItemControl>
+              <MenuCheckboxItemIndicator data-checked="">
+                <Check aria-hidden />
+              </MenuCheckboxItemIndicator>
+            </MenuItemControl>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Comments</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuCheckboxItem>
+          <MenuCheckboxItem role="menuitemcheckbox" aria-checked="false" data-highlighted="">
+            <MenuItemControl>
+              <MenuCheckboxItemIndicator data-unchecked="">
+                <Check aria-hidden />
+              </MenuCheckboxItemIndicator>
+            </MenuItemControl>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Mentions</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuCheckboxItem>
+          <MenuCheckboxItem
+            role="menuitemcheckbox"
+            aria-checked="true"
+            data-disabled=""
+            aria-disabled="true"
+          >
+            <MenuItemControl>
+              <MenuCheckboxItemIndicator data-checked="" data-disabled="">
+                <Check aria-hidden />
+              </MenuCheckboxItemIndicator>
+            </MenuItemControl>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Updates</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuCheckboxItem>
+        </div>
+        <MenuSeparator role="separator" />
+        <div role="group" aria-labelledby="menu-elements-selection-layout">
+          <MenuGroupLabel id="menu-elements-selection-layout">Layout</MenuGroupLabel>
+          <MenuRadioItem role="menuitemradio" aria-checked="true">
+            <MenuItemControl>
+              <MenuRadioItemIndicator>
+                <Circle className="size-2 fill-current" aria-hidden />
+              </MenuRadioItemIndicator>
+            </MenuItemControl>
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>List</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuRadioItem>
+          <MenuRadioItem role="menuitemradio" aria-checked="false">
+            <MenuItemControl />
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Board</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuRadioItem>
+        </div>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * Navigation rows: `MenuLinkItem` renders a real `<a>` (`href`/`target` are native attributes)
+ * wearing the same single-line row chrome as `MenuItem`, so destinations sit beside action rows.
+ * The second link pins `data-highlighted=""`.
+ */
+export const LinkItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-56">
+      <MenuPopup elevation="raised" role="menu">
+        <MenuLinkItem role="menuitem" href="#work-item" target="_blank" rel="noopener noreferrer">
+          <Icon tint="secondary">
+            <ExternalLink />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Open in new tab</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuLinkItem>
+        <MenuLinkItem role="menuitem" href="#activity" data-highlighted="">
+          <Icon tint="secondary">
+            <Link2 />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Go to activity</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuLinkItem>
+        <MenuSeparator role="separator" />
+        <MenuItem role="menuitem" layout="default">
+          <Icon tint="secondary">
+            <Copy />
+          </Icon>
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Copy link</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+          <MenuItemMeta>⌘C</MenuItemMeta>
+        </MenuItem>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * The two heading kinds plus the divider. `MenuGroupLabel` is the plain muted heading Base UI's
+ * `GroupLabel` grafts onto; `MenuLabel` is the richer heading row laying a growing `MenuLabelTitle`
+ * against an inline-end `MenuLabelMeta` (the components-tier `MenuLabel` fills it from its `meta`
+ * prop). `MenuSeparator` spans the popup padding between the sections.
+ */
+export const Sections: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-56">
+      <MenuPopup elevation="raised" role="menu">
+        <div role="group" aria-labelledby="menu-elements-sections-sort">
+          <MenuGroupLabel id="menu-elements-sections-sort">Sort</MenuGroupLabel>
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Date created</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Name</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+        </div>
+        <MenuSeparator role="separator" />
+        <div role="group" aria-labelledby="menu-elements-sections-recent">
+          <MenuLabel id="menu-elements-sections-recent">
+            <MenuLabelTitle>Recently viewed</MenuLabelTitle>
+            <MenuLabelMeta>3</MenuLabelMeta>
+          </MenuLabel>
+          <MenuItem role="menuitem" layout="default">
+            <MenuItemContent>
+              <MenuItemTitleRow>
+                <MenuItemTitle>Mobile app rollout</MenuItemTitle>
+              </MenuItemTitleRow>
+            </MenuItemContent>
+          </MenuItem>
+        </div>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * The sticky chrome around the list: `MenuSearch` (the bordered search row — an internal `Icon`
+ * glyph + the borderless `MenuSearchInput`) pins above the popup and `MenuFooter` below it. Both
+ * sit OUTSIDE the `role="menu"` list, exactly as the components-tier `MenuContent` mounts them as
+ * its shell's header/footer around a `flat` popup; the bordered card here stands in for that
+ * `OverlayPanel` shell.
+ */
+export const SearchAndFooter: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-56 flex-col overflow-hidden rounded-lg border-sm border-subtle bg-layer-1 shadow-overlay-100">
+      <MenuSearch>
+        <Icon tint="tertiary" magnitude="md">
+          <Search />
+        </Icon>
+        <MenuSearchInput type="text" aria-label="Search" placeholder="Search" />
+      </MenuSearch>
+      <MenuPopup elevation="flat" role="menu" aria-label="Statuses">
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Backlog</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+        <MenuItem role="menuitem" layout="default" data-highlighted="">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>Todo</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+        <MenuItem role="menuitem" layout="default">
+          <MenuItemContent>
+            <MenuItemTitleRow>
+              <MenuItemTitle>In Progress</MenuItemTitle>
+            </MenuItemTitleRow>
+          </MenuItemContent>
+        </MenuItem>
+      </MenuPopup>
+      <MenuFooter>Type to add another item.</MenuFooter>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-highlighted` row gains the hover fill, the `data-disabled` row swaps to the disabled text
+ * color, `data-popup-open` keeps the submenu trigger filled, the `not-data-selected:invisible`
+ * indicator hides only the unselected check, and the `data-starting-style`/`data-ending-style`
+ * popups compute to opacity 0. Tagged out of the sidebar/docs/manifest while still running under
+ * the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, canvasElement }) => {
+    const rowStyle = (label: string) => {
+      const row = canvas.getByText(label).closest('[role="menuitem"]');
+      if (!(row instanceof HTMLElement)) throw new Error(`missing "${label}" row`);
+      return getComputedStyle(row);
+    };
+    const indicatorStyle = (label: string) => {
+      const indicator = canvas
+        .getByText(label)
+        .closest('[role="menuitem"]')
+        ?.querySelector("[aria-hidden]");
+      if (!(indicator instanceof HTMLElement)) throw new Error(`missing "${label}" indicator`);
+      return getComputedStyle(indicator);
+    };
+
+    // `data-highlighted:bg-layer-transparent-hover` fills the highlighted row (and the
+    // `data-popup-open` submenu trigger) away from the resting row's transparent background.
+    await expect(rowStyle("Highlighted").backgroundColor).not.toBe(
+      rowStyle("Resting").backgroundColor,
+    );
+    await expect(rowStyle("Submenu open").backgroundColor).not.toBe(
+      rowStyle("Submenu closed").backgroundColor,
+    );
+
+    // `data-disabled:text-disabled` swaps the row's text color.
+    await expect(rowStyle("Disabled").color).not.toBe(rowStyle("Resting").color);
+
+    // `not-data-selected:invisible` hides only the indicator without `data-selected`.
+    await expect(indicatorStyle("Selected").visibility).toBe("visible");
+    await expect(indicatorStyle("Unselected").visibility).toBe("hidden");
+
+    // `data-starting-style`/`data-ending-style` pin the popup at the faded transition endpoint.
+    for (const selector of ["[data-starting-style]", "[data-ending-style]"]) {
+      const popup = canvasElement.querySelector(selector);
+      if (!(popup instanceof HTMLElement)) throw new Error(`missing pinned ${selector} popup`);
+      await expect(getComputedStyle(popup).opacity).toBe("0");
+    }
+  },
+};
+
+/**
+ * CSS canary (rule 2b): asserts the checkbox-box state selectors compiled — the `data-checked=""`
+ * box paints the accent fill away from the `data-unchecked=""` box's transparent square, and the
+ * unchecked box hides its glyph (`data-unchecked:[&>*]:invisible`). Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const SelectionItemsCanary: Story = {
+  ...SelectionItems,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const box = (label: string) => {
+      const el = canvas
+        .getByText(label)
+        .closest('[role="menuitemcheckbox"]')
+        ?.querySelector("[data-checked], [data-unchecked]");
+      if (!(el instanceof HTMLElement)) throw new Error(`missing "${label}" checkbox box`);
+      return el;
+    };
+
+    // `data-checked:bg-accent-primary` fills the checked box away from the unchecked one.
+    await expect(getComputedStyle(box("Comments")).backgroundColor).not.toBe(
+      getComputedStyle(box("Mentions")).backgroundColor,
+    );
+
+    // `data-unchecked:[&>*]:invisible` hides the unchecked box's glyph.
+    const glyph = box("Mentions").firstElementChild;
+    if (glyph == null) throw new Error("missing unchecked glyph");
+    await expect(getComputedStyle(glyph).visibility).toBe("hidden");
+  },
+};
diff --git a/packages/propel/src/elements/menu/variants.ts b/packages/propel/src/elements/menu/variants.ts
new file mode 100644
index 00000000..49a2723a
--- /dev/null
+++ b/packages/propel/src/elements/menu/variants.ts
@@ -0,0 +1,164 @@
+import { cva, cx } from "class-variance-authority";
+
+import { checkboxBoxVariants } from "../../internal/checkbox-box";
+import { itemIndicatorClass } from "../../internal/item-indicator";
+import { groupLabelClass } from "../../internal/listbox-group-label";
+import { menuSeparatorClass, rowMetaClass } from "../../internal/menu-row-parts";
+import { nodeSlotClass } from "../../internal/node-slot";
+import { popupSurfaceClass } from "../../internal/popup-surface";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/**
+ * Popup: the menu surface.
+ *
+ * - `surface="raised"` is the standalone surface — its own elevation, radius, border and animated
+ *   transform origin (used when the popup is the menu's outer chrome, e.g. the elements-tier
+ *   story).
+ * - `surface="inset"` is the padded list that sits _inside_ an `OverlayPanel` (the components-tier
+ *   `MenuContent` provides the elevated, scrollable shell), so the popup only contributes padding.
+ */
+export const menuPopupVariants = cva("outline-none", {
+  variants: {
+    elevation: {
+      raised: cx(popupSurfaceClass, "min-w-40 p-1"),
+      flat: "p-1",
+    },
+  },
+});
+
+// All interactive rows (item, link, radio, checkbox, submenu trigger) share one row base:
+// the same height, padding, radius, gap, text + disabled treatment. `variant` switches between
+// a single-line row and a taller top-aligned row that fits a description; `emphasis` switches
+// the hover/cursor affordance.
+const menuRowBase = 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",
+);
+
+/** Standalone `MenuItem` row: `layout` (single vs with-description) + `emphasis`. */
+export const menuRowVariants = cva(cx(menuRowBase, "data-highlighted:bg-layer-transparent-hover"), {
+  variants: {
+    layout: {
+      default: "h-[34px] items-center",
+      "with-description": "min-h-[34px] items-start py-1.5",
+    },
+  },
+});
+
+/**
+ * CheckboxItem row: the shared row base, fixed to the single-line/default-emphasis pairing (a
+ * checkbox row never carries a description).
+ */
+export const menuCheckboxItemVariants = cva(
+  cx(
+    menuRowBase,
+    "h-[34px] cursor-default items-center data-highlighted:bg-layer-transparent-hover",
+  ),
+);
+
+/**
+ * SubmenuTrigger row: the shared row base; also highlights while its submenu popup is open
+ * (`data-popup-open`).
+ */
+export const menuSubmenuTriggerVariants = cva(
+  cx(
+    menuRowBase,
+    "h-[34px] cursor-default items-center",
+    "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
+  ),
+);
+
+/**
+ * The text column of a row. Grows to fill the row (so trailing nodes/indicators sit at the
+ * inline-end), stacks the title row over an optional description, and clips overflow.
+ */
+export const menuItemContentVariants = cva("flex min-w-0 flex-1 flex-col");
+
+/** The baseline-aligned row holding the title and any inline secondary text. */
+export const menuItemTitleRowVariants = cva("flex min-w-0 items-baseline gap-1.5");
+
+/** The row's primary label. Truncates rather than wrapping. */
+export const menuItemTitleVariants = cva("truncate");
+
+/** Muted text shown inline after the title (e.g. a translation, a hint). */
+export const menuItemSecondaryTextVariants = cva(
+  "shrink-0 truncate text-12 text-tertiary group-data-disabled/item:text-disabled",
+);
+
+/** A muted second line beneath the title (the item description). */
+export const menuItemDescriptionVariants = cva(
+  "truncate text-12 text-tertiary group-data-disabled/item:text-disabled",
+);
+
+/** Trailing muted metadata shown after the title column (e.g. a keyboard shortcut). */
+export const menuItemMetaVariants = cva(rowMetaClass);
+
+/** A trailing slot for arbitrary content. Sizes an icon child to `--node-size`; adds no tint. */
+export const menuItemTrailingVariants = cva(nodeSlotClass);
+
+/**
+ * The single-select check shown at a row's inline-end. Sizes its single child to `--node-size` and
+ * tints it with the accent. Decorative — the row carries the selected state.
+ */
+export const menuItemIndicatorVariants = cva(cx(itemIndicatorClass, "h-5 w-4"));
+
+/** The leading control slot of a checkbox/radio row, holding the visual toggle. */
+export const menuItemControlVariants = cva("flex shrink-0 items-center");
+
+/** Indicator slot inside a radio item: the accent dot shown when the row is selected. */
+export const menuRadioItemIndicatorVariants = cva(
+  cx(
+    "flex size-4 items-center justify-center text-icon-accent-primary",
+    // Kept mounted for a stable gutter; the dot (a small filled circle glyph) hides while
+    // Base UI marks the indicator data-unchecked.
+    "data-unchecked:invisible [&>svg]:size-2 [&>svg]:fill-current",
+  ),
+);
+
+/**
+ * CheckboxItem indicator: the leading checkbox BOX. Composes the shared `checkboxBoxVariants` (the
+ * 16px bordered square that fills the accent on `data-checked`) with the node-slot that sizes its
+ * inner glyph. Kept mounted by `MenuCheckboxItemIndicator`, so the empty box shows when unchecked;
+ * the glyph stays hidden until the box is checked (`data-unchecked:[&>*]:invisible`).
+ */
+export const menuCheckboxItemIndicatorVariants = cva(
+  cx(checkboxBoxVariants(), nodeSlotClass, "data-unchecked:[&>*]:invisible"),
+);
+
+/** Separator: a thin divider spanning the popup padding. */
+export const menuSeparatorVariants = cva(menuSeparatorClass);
+
+/** GroupLabel: a non-interactive section heading. */
+export const menuGroupLabelVariants = cva(groupLabelClass);
+
+/**
+ * Label: a non-interactive section heading row that can carry inline-end metadata. Lays out a
+ * growing `MenuLabelTitle` and an optional `MenuLabelMeta`.
+ */
+export const menuLabelVariants = cva("flex items-center gap-1.5 px-2 py-1.5 text-12 text-tertiary");
+
+/** The growing title within a `MenuLabel`. */
+export const menuLabelTitleVariants = cva("min-w-0 flex-1 truncate");
+
+/** Trailing metadata pinned at the inline-end of a `MenuLabel`. */
+export const menuLabelMetaVariants = cva("shrink-0");
+
+/** Search: the sticky search row pinned above the popup list. */
+export const menuSearchVariants = cva(
+  "flex shrink-0 items-center gap-1.5 border-b border-subtle bg-surface-1 px-3 py-2",
+);
+
+/** Search input: the borderless text field in `MenuSearch`. */
+export const menuSearchInputVariants = cva(
+  "min-w-0 flex-1 bg-transparent text-13 text-secondary outline-none placeholder:text-placeholder",
+);
+
+/** Footer: a non-interactive footer pinned below the popup list. */
+export const menuFooterVariants = cva(
+  "shrink-0 border-t border-subtle bg-layer-2 px-3 py-2 text-12 text-tertiary",
+);
+
+export type MenuPopupVariantProps = StrictVariantProps<typeof menuPopupVariants>;
+
+export type MenuRowVariantProps = StrictVariantProps<typeof menuRowVariants>;
diff --git a/packages/propel/src/elements/menubar/index.tsx b/packages/propel/src/elements/menubar/index.tsx
new file mode 100644
index 00000000..f12ca7f7
--- /dev/null
+++ b/packages/propel/src/elements/menubar/index.tsx
@@ -0,0 +1,3 @@
+export * from "./menubar";
+export * from "./menubar-trigger";
+export * from "./menubar-trigger-label";
diff --git a/packages/propel/src/elements/menubar/menubar-trigger-label.tsx b/packages/propel/src/elements/menubar/menubar-trigger-label.tsx
new file mode 100644
index 00000000..3bc68820
--- /dev/null
+++ b/packages/propel/src/elements/menubar/menubar-trigger-label.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menubarTriggerLabelVariants } from "./variants";
+
+export type MenubarTriggerLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/** The label of a menu bar trigger. Truncates instead of overflowing the bar. */
+export function MenubarTriggerLabel({ render, ...props }: MenubarTriggerLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: menubarTriggerLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menubar/menubar-trigger.tsx b/packages/propel/src/elements/menubar/menubar-trigger.tsx
new file mode 100644
index 00000000..0cd5c049
--- /dev/null
+++ b/packages/propel/src/elements/menubar/menubar-trigger.tsx
@@ -0,0 +1,25 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menubarTriggerVariants } from "./variants";
+
+export type MenubarTriggerProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * The styled trigger for a top-level menu item in the menu bar. A flex row that lays out its
+ * anatomy parts — an optional leading `MenubarTriggerIcon` and a `MenubarTriggerLabel`. Bakes in
+ * all the "always the same" chrome from the designer's spec: height, inline padding, font style,
+ * focus ring, and the active/hover highlight when the popup is open. Renders a `<button>` by
+ * default and stays icon-agnostic. It embeds no menu behavior, keeping `elements/menubar`
+ * independent of the Menu primitive: a menubar composition grafts the disclosure/open behavior on
+ * by rendering it as a menu trigger — `render={<Menu.Trigger />}` (the styled button stays the
+ * outer element) — inside a `Menu` root within an enclosing `Menubar` that drives keyboard
+ * navigation.
+ */
+export function MenubarTrigger({ render, ...props }: MenubarTriggerProps) {
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps({ className: menubarTriggerVariants(), type: "button" }, props),
+  });
+}
diff --git a/packages/propel/src/elements/menubar/menubar.stories.tsx b/packages/propel/src/elements/menubar/menubar.stories.tsx
new file mode 100644
index 00000000..9a573f39
--- /dev/null
+++ b/packages/propel/src/elements/menubar/menubar.stories.tsx
@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FilePen, Pencil } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { MenuItem, MenuPopup, MenuSeparator } from "../menu/index";
+import { Menubar, MenubarTrigger, MenubarTriggerLabel } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the menu popup laid out inline (it is just a styled div;
+// Base UI only positions it) and every visual state pinned statically via the `data-*` attributes
+// Base UI's menubar/menu would set (`data-popup-open=""`, `data-highlighted=""`,
+// `data-disabled=""`). The family exposes no cva axes (per the designer's spec the bar chrome is
+// "always the same"); its configuration surface is composition — whether a trigger carries a
+// leading glyph. Menu-bar behavior (arrow-key navigation, single-open, click-to-open, whole-menu
+// disabling) is demonstrated AND tested in the components-tier story (Components/Menubar).
+const meta = {
+  title: "Elements/Menubar",
+  component: Menubar,
+  subcomponents: {
+    MenubarTrigger,
+    MenubarTriggerLabel,
+    MenuPopup,
+    MenuItem,
+    MenuSeparator,
+  },
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: the `Menubar` container laying out its `MenubarTrigger`s,
+ * each composing an optional leading glyph (the internal `Icon` — the designer's "whether items
+ * have icons" axis is served by composing or omitting it) and a `MenubarTriggerLabel`. The File
+ * trigger pins `data-popup-open=""` — the attribute Base UI sets while its menu is open — and its
+ * `MenuPopup` renders inline below the bar (a styled div; Base UI only positions it) with the
+ * active row pinning `data-highlighted=""`.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-1">
+      <Menubar>
+        <MenubarTrigger data-popup-open="" aria-expanded>
+          <Icon tint="secondary">
+            <FilePen />
+          </Icon>
+          <MenubarTriggerLabel>File</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenubarTrigger aria-expanded={false}>
+          <Icon tint="secondary">
+            <Pencil />
+          </Icon>
+          <MenubarTriggerLabel>Edit</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenubarTrigger aria-expanded={false}>
+          <MenubarTriggerLabel>Help</MenubarTriggerLabel>
+        </MenubarTrigger>
+      </Menubar>
+      <MenuPopup elevation="raised">
+        <MenuItem layout="default" data-highlighted="">
+          New file
+        </MenuItem>
+        <MenuItem layout="default">Open…</MenuItem>
+        <MenuSeparator />
+        <MenuItem layout="default">Save</MenuItem>
+      </MenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of a trigger in the bar:
+ *
+ * - **Rest** — the quiet secondary-text row.
+ * - **Focused** — the accent focus ring (`:focus-visible`, forced by the pseudo-states addon).
+ * - **Open** — pins the `data-popup-open=""` Base UI sets while the trigger's menu is open: the
+ *   hover-layer highlight plus primary text.
+ * - **Disabled** — pins the `data-disabled=""` Base UI mirrors from a disabled `Menu` root (plus the
+ *   native `disabled`): inert and dimmed, while the trigger keeps its slot in the bar.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { focusVisible: ["#menubar-trigger-focus"] },
+  },
+  render: () => (
+    <Menubar>
+      <MenubarTrigger id="menubar-trigger-rest">
+        <MenubarTriggerLabel>Rest</MenubarTriggerLabel>
+      </MenubarTrigger>
+      <MenubarTrigger id="menubar-trigger-focus">
+        <MenubarTriggerLabel>Focused</MenubarTriggerLabel>
+      </MenubarTrigger>
+      <MenubarTrigger id="menubar-trigger-open" data-popup-open="">
+        <MenubarTriggerLabel>Open</MenubarTriggerLabel>
+      </MenubarTrigger>
+      <MenubarTrigger data-disabled="" disabled>
+        <MenubarTriggerLabel>Disabled</MenubarTriggerLabel>
+      </MenubarTrigger>
+    </Menubar>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-popup-open` trigger's background (`data-popup-open:bg-layer-transparent-hover`) computes
+ * away from the resting trigger's. Tagged out of the sidebar/docs/manifest while still running
+ * under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const backgroundColor = (id: string) => {
+      const trigger = canvasElement.querySelector(`#${id}`);
+      if (!(trigger instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(trigger).backgroundColor;
+    };
+    await expect(backgroundColor("menubar-trigger-open")).not.toBe(
+      backgroundColor("menubar-trigger-rest"),
+    );
+  },
+};
+
+/**
+ * `MenubarTriggerLabel` is a `min-w-0 truncate` text element: when the bar is constrained, a long
+ * label truncates with an ellipsis instead of overflowing the bar.
+ */
+export const LabelTruncation: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-56">
+      <Menubar>
+        <MenubarTrigger>
+          <MenubarTriggerLabel>A very long menu that would overflow the bar</MenubarTriggerLabel>
+        </MenubarTrigger>
+        <MenubarTrigger>
+          <MenubarTriggerLabel>Edit</MenubarTriggerLabel>
+        </MenubarTrigger>
+      </Menubar>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/menubar/menubar.tsx b/packages/propel/src/elements/menubar/menubar.tsx
new file mode 100644
index 00000000..a18d92aa
--- /dev/null
+++ b/packages/propel/src/elements/menubar/menubar.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menubarVariants } from "./variants";
+
+export type MenubarProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled menu-bar container: a horizontal row that lays out its top-level `MenubarTrigger`s.
+ * Base-UI-agnostic — graft the menu-bar behavior (arrow-key navigation, single-open) in
+ * `components` via `<BaseMenubar render={<Menubar/>} />`.
+ */
+export function Menubar({ render, ...props }: MenubarProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: menubarVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menubar/variants.ts b/packages/propel/src/elements/menubar/variants.ts
new file mode 100644
index 00000000..de0b4599
--- /dev/null
+++ b/packages/propel/src/elements/menubar/variants.ts
@@ -0,0 +1,36 @@
+import { cva, cx } 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",
+);
+
+// MenubarTrigger: the styled button for each top-level menu in the bar.
+// Per the designer's spec (issue #133), all of the following are "always the same":
+//   – horizontal layout + height
+//   – item padding (horizontal and vertical)
+//   – font style
+//   – active/hover background highlight (`data-popup-open`)
+//   – focus ring style
+// The trigger is a flex row that lays out its anatomy parts (an optional leading
+// `MenubarTriggerIcon`, then the `MenubarTriggerLabel`); the spec's adjustable
+// "whether items have icons" axis is served by composing — or omitting — the icon
+// part, not by a cva variant. `--node-size` sizes any leading icon to 1rem.
+export const menubarTriggerVariants = cva(
+  cx(
+    "group inline-flex h-7 items-center gap-1.5 rounded-sm px-2.5 [--node-size:1rem]",
+    "text-13 text-secondary",
+    "cursor-default outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
+    "data-disabled:pointer-events-none data-disabled:text-disabled",
+  ),
+);
+
+// The trigger's label. A single text element; `min-w-0` lets long labels truncate
+// instead of overflowing the bar.
+export const menubarTriggerLabelVariants = cva("min-w-0 truncate");
diff --git a/packages/propel/src/ui/meter/index.tsx b/packages/propel/src/elements/meter/index.tsx
similarity index 100%
rename from packages/propel/src/ui/meter/index.tsx
rename to packages/propel/src/elements/meter/index.tsx
diff --git a/packages/propel/src/ui/meter/meter-header.tsx b/packages/propel/src/elements/meter/meter-header.tsx
similarity index 100%
rename from packages/propel/src/ui/meter/meter-header.tsx
rename to packages/propel/src/elements/meter/meter-header.tsx
diff --git a/packages/propel/src/elements/meter/meter-indicator.tsx b/packages/propel/src/elements/meter/meter-indicator.tsx
new file mode 100644
index 00000000..156b9201
--- /dev/null
+++ b/packages/propel/src/elements/meter/meter-indicator.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type MeterIndicatorVariantProps, meterIndicatorVariants } from "./variants";
+
+export type { MeterIndicatorLevel } from "./variants";
+
+export type MeterIndicatorProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  MeterIndicatorVariantProps;
+
+/**
+ * The styled filled portion of the track, colored by `level`. Base UI sets its `width` inline from
+ * the meter value; we own only the fill color and the width transition. Base-UI-agnostic — graft in
+ * `components` via `<BaseMeter.Indicator render={<MeterIndicator level={…}/>} />`.
+ */
+export function MeterIndicator({ level, render, ...props }: MeterIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: meterIndicatorVariants({ level }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/meter/meter-label.tsx b/packages/propel/src/elements/meter/meter-label.tsx
new file mode 100644
index 00000000..89ff2b63
--- /dev/null
+++ b/packages/propel/src/elements/meter/meter-label.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { meterLabelVariants } from "./variants";
+
+export type MeterLabelProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled meter label text. Base-UI-agnostic — graft in `components` via `<BaseMeter.Label
+ * render={<MeterLabel/>} />`.
+ */
+export function MeterLabel({ render, ...props }: MeterLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: meterLabelVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/meter/meter-track.tsx b/packages/propel/src/elements/meter/meter-track.tsx
new file mode 100644
index 00000000..6ea2bbc5
--- /dev/null
+++ b/packages/propel/src/elements/meter/meter-track.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { meterTrackVariants } from "./variants";
+
+export type MeterTrackProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled range rail that contains the indicator. Base-UI-agnostic — graft in `components` via
+ * `<BaseMeter.Track render={<MeterTrack/>} />`.
+ */
+export function MeterTrack({ render, ...props }: MeterTrackProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: meterTrackVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/meter/meter-value.tsx b/packages/propel/src/elements/meter/meter-value.tsx
new file mode 100644
index 00000000..93e93408
--- /dev/null
+++ b/packages/propel/src/elements/meter/meter-value.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { meterValueVariants } from "./variants";
+
+export type MeterValueProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled text element for the formatted current value. Base-UI-agnostic — graft in `components`
+ * via `<BaseMeter.Value render={<MeterValue/>} />`.
+ */
+export function MeterValue({ render, ...props }: MeterValueProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: meterValueVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/meter/meter.stories.tsx b/packages/propel/src/elements/meter/meter.stories.tsx
new file mode 100644
index 00000000..46b4ed35
--- /dev/null
+++ b/packages/propel/src/elements/meter/meter.stories.tsx
@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import {
+  Meter,
+  MeterHeader,
+  MeterIndicator,
+  type MeterIndicatorLevel,
+  MeterLabel,
+  MeterTrack,
+  MeterValue,
+} from "./index";
+
+const LEVELS: { level: MeterIndicatorLevel; value: number }[] = [
+  { level: "low", value: 15 },
+  { level: "medium", value: 50 },
+  { level: "high", value: 90 },
+];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts. The indicator's inline `width` stands in (via the part's `render`
+// capability) for the one Base UI's `Meter.Indicator` computes from `value`; the `meter` role,
+// `aria-valuenow`, and the value formatting come from Base UI's `Meter.Root`/`Meter.Value` in the
+// components tier, where they are demonstrated AND tested (Components/Meter).
+const meta = {
+  title: "Elements/Meter",
+  component: Meter,
+  subcomponents: { MeterHeader, MeterLabel, MeterTrack, MeterIndicator, MeterValue },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Meter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `Meter` › (`MeterHeader` › `MeterLabel` + `MeterValue`) +
+ * (`MeterTrack` › `MeterIndicator`). The indicator's `width` is pinned inline — standing in for the
+ * value-derived width Base UI's `Meter.Indicator` sets — and the readout text is authored, standing
+ * in for `Meter.Value`'s formatted output.
+ */
+export const Default: Story = {
+  render: () => (
+    <Meter>
+      <MeterHeader>
+        <MeterLabel>Disk usage</MeterLabel>
+        <MeterValue>64%</MeterValue>
+      </MeterHeader>
+      <MeterTrack>
+        <MeterIndicator level="medium" render={<div style={{ width: "64%" }} />} />
+      </MeterTrack>
+    </Meter>
+  ),
+};
+
+/**
+ * The indicator's `level` axis — the family's only variant axis, encoding the spec's color
+ * breakpoints: `low` fills with the warning color, `medium` with the brand/accent color, and `high`
+ * with the success color. The components-tier ready-made derives the level from
+ * `low`/`high`/`optimum`; here each value is pinned directly, with a matching inline width.
+ */
+export const Levels: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {LEVELS.map(({ level, value }) => (
+        <Meter key={level}>
+          <MeterHeader>
+            <MeterLabel>Storage ({level})</MeterLabel>
+            <MeterValue>{value}%</MeterValue>
+          </MeterHeader>
+          <MeterTrack>
+            <MeterIndicator
+              id={`meter-indicator-${level}`}
+              level={level}
+              render={<div style={{ width: `${value}%` }} />}
+            />
+          </MeterTrack>
+        </Meter>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the `level` variant classes actually compiled — the three fills
+ * compute three distinct background colors (warning · accent · success). Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const LevelsCanary: Story = {
+  ...Levels,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const backgroundColor = (level: MeterIndicatorLevel) => {
+      const indicator = canvasElement.querySelector(`#meter-indicator-${level}`);
+      if (!(indicator instanceof HTMLElement)) throw new Error(`missing #meter-indicator-${level}`);
+      return getComputedStyle(indicator).backgroundColor;
+    };
+    const colors = LEVELS.map(({ level }) => backgroundColor(level));
+    await expect(new Set(colors).size).toBe(LEVELS.length);
+  },
+};
diff --git a/packages/propel/src/elements/meter/meter.tsx b/packages/propel/src/elements/meter/meter.tsx
new file mode 100644
index 00000000..22cab414
--- /dev/null
+++ b/packages/propel/src/elements/meter/meter.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { meterVariants } from "./variants";
+
+export type MeterProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled meter root: a vertical stack holding the header row and the track. Base-UI-agnostic —
+ * graft the meter behavior in `components` via `<BaseMeter.Root render={<Meter/>} value={…} />` (it
+ * owns the `meter` role + `aria-valuenow`).
+ */
+export function Meter({ render, ...props }: MeterProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: meterVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/meter/variants.ts b/packages/propel/src/elements/meter/variants.ts
new file mode 100644
index 00000000..eda4af6c
--- /dev/null
+++ b/packages/propel/src/elements/meter/variants.ts
@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/** Root: a vertical stack holding the header row and the track. */
+export const meterVariants = cva("flex w-full flex-col gap-1");
+
+/**
+ * Header: the row above the track that pairs the label and value. Per the spec the label sits at
+ * the inline-start and the value text at the inline-end (`justify-between`), both vertically
+ * centered — an anatomy extension beyond Base UI's parts so the components tier holds no raw
+ * layout.
+ */
+export const meterHeaderVariants = cva("flex items-center justify-between gap-2");
+
+/** 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 at the header's inline-end. */
+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.
+ *
+ * The `level` variant encodes the spec's color breakpoints: - `low` → value is in the suboptimal
+ * low range → warning color - `medium` → value is in the optimal / default range → brand/accent
+ * color - `high` → value is in the suboptimal high range → success color
+ *
+ * No `defaultVariants` — callers must supply `level` explicitly.
+ */
+export const meterIndicatorVariants = cva("h-full rounded-full transition-[width] duration-200", {
+  variants: {
+    level: {
+      low: "bg-warning-primary",
+      medium: "bg-accent-primary",
+      high: "bg-success-primary",
+    },
+  },
+});
+
+// Per-axis type (for consumers), named for the axis — never re-exported from the index directly;
+// the part file re-exports it.
+type MeterIndicatorVariantConfig = VariantProps<typeof meterIndicatorVariants>;
+export type MeterIndicatorLevel = NonNullable<MeterIndicatorVariantConfig["level"]>;
+
+// No `defaultVariants` today, so every axis is required.
+export type MeterIndicatorVariantProps = StrictVariantProps<typeof meterIndicatorVariants>;
diff --git a/packages/propel/src/elements/navigation-menu/index.tsx b/packages/propel/src/elements/navigation-menu/index.tsx
new file mode 100644
index 00000000..ebd945cc
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/index.tsx
@@ -0,0 +1,10 @@
+export * from "./navigation-menu-content-list";
+export * from "./navigation-menu-icon";
+export * from "./navigation-menu-link";
+export * from "./navigation-menu-link-description";
+export * from "./navigation-menu-link-title";
+export * from "./navigation-menu-list";
+export * from "./navigation-menu-popup";
+export * from "./navigation-menu-trigger";
+export * from "./navigation-menu-trigger-label";
+export * from "./navigation-menu-viewport";
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-content-list.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-content-list.tsx
new file mode 100644
index 00000000..2ec870fe
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-content-list.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuContentListVariants } from "./variants";
+
+export type NavigationMenuContentListProps = Omit<
+  useRender.ComponentProps<"ul">,
+  "className" | "style"
+>;
+
+/**
+ * The styled vertical list of links inside a `NavigationMenuContent` panel. Stacks its items with a
+ * consistent gap; the surrounding `NavigationMenuPopup` owns the padding. Renders a `<ul>`, so each
+ * child link belongs in its own `<li>`.
+ */
+export function NavigationMenuContentList({ render, ...props }: NavigationMenuContentListProps) {
+  const defaultProps: useRender.ElementProps<"ul"> = {
+    className: navigationMenuContentListVariants(),
+  };
+  return useRender({ defaultTagName: "ul", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-icon.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-icon.tsx
new file mode 100644
index 00000000..d6da1821
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-icon.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuIconVariants } from "./variants";
+
+export type NavigationMenuIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled disclosure caret rendered inside a `NavigationMenuTrigger`; rotates while the popup is
+ * open, reading the parent trigger's `group-data-popup-open` state. Base-UI-agnostic — graft in
+ * `components` via `<BaseNavigationMenu.Icon render={<NavigationMenuIcon />} />`.
+ */
+export function NavigationMenuIcon({ render, ...props }: NavigationMenuIconProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: navigationMenuIconVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-link-description.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-link-description.tsx
new file mode 100644
index 00000000..dc730329
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-link-description.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuLinkDescriptionVariants } from "./variants";
+
+export type NavigationMenuLinkDescriptionProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The optional secondary line of a `presentation="card"` `NavigationMenuLink`: a muted description
+ * shown below the `NavigationMenuLinkTitle`.
+ */
+export function NavigationMenuLinkDescription({
+  render,
+  ...props
+}: NavigationMenuLinkDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: navigationMenuLinkDescriptionVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-link-title.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-link-title.tsx
new file mode 100644
index 00000000..8b18f659
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-link-title.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuLinkTitleVariants } from "./variants";
+
+export type NavigationMenuLinkTitleProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The primary line of a `presentation="card"` `NavigationMenuLink`: the navigable label. Pairs with
+ * an optional `NavigationMenuLinkDescription` below it.
+ */
+export function NavigationMenuLinkTitle({ render, ...props }: NavigationMenuLinkTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: navigationMenuLinkTitleVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-link.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-link.tsx
new file mode 100644
index 00000000..8298657e
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-link.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type NavigationMenuLinkVariantProps, navigationMenuLinkVariants } from "./variants";
+
+export type NavigationMenuLinkProps = Omit<useRender.ComponentProps<"a">, "className" | "style"> &
+  NavigationMenuLinkVariantProps;
+
+/**
+ * A styled navigable link. `presentation="item"` is a top-level pill that shares its chrome with
+ * `NavigationMenuTrigger`; `presentation="card"` is a stacked entry inside `Content`, pairing a
+ * `NavigationMenuLinkTitle` with an optional `NavigationMenuLinkDescription`. Base-UI-agnostic —
+ * graft in `components` via `<BaseNavigationMenu.Link render={<NavigationMenuLink presentation="…"
+ * />} />`.
+ */
+export function NavigationMenuLink({ presentation, render, ...props }: NavigationMenuLinkProps) {
+  const defaultProps: useRender.ElementProps<"a"> = {
+    className: navigationMenuLinkVariants({ presentation }),
+  };
+  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-list.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-list.tsx
new file mode 100644
index 00000000..206fce79
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-list.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuListVariants } from "./variants";
+
+export type NavigationMenuListProps = Omit<useRender.ComponentProps<"ul">, "className" | "style">;
+
+/**
+ * The styled horizontal row of top-level menu items. Base-UI-agnostic — graft the menu behavior in
+ * `components` via `<BaseNavigationMenu.List render={<NavigationMenuList />} />`.
+ */
+export function NavigationMenuList({ render, ...props }: NavigationMenuListProps) {
+  const defaultProps: useRender.ElementProps<"ul"> = { className: navigationMenuListVariants() };
+  return useRender({ defaultTagName: "ul", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-popup.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-popup.tsx
new file mode 100644
index 00000000..3d4b7d88
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-popup.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuPopupVariants } from "./variants";
+
+export type NavigationMenuPopupProps = Omit<useRender.ComponentProps<"nav">, "className" | "style">;
+
+/**
+ * The styled anchored surface that houses the active item's `Content`. Base-UI-agnostic — graft in
+ * `components` via `<BaseNavigationMenu.Popup render={<NavigationMenuPopup />} />`.
+ */
+export function NavigationMenuPopup({ render, ...props }: NavigationMenuPopupProps) {
+  const defaultProps: useRender.ElementProps<"nav"> = { className: navigationMenuPopupVariants() };
+  return useRender({ defaultTagName: "nav", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-trigger-label.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-trigger-label.tsx
new file mode 100644
index 00000000..7a926cce
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-trigger-label.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuTriggerLabelVariants } from "./variants";
+
+export type NavigationMenuTriggerLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trigger's text label, sitting beside the disclosure `NavigationMenuIcon`. Splitting the label
+ * into its own styled part keeps `NavigationMenuTrigger` a single styled element that composes
+ * parts rather than baking in raw text.
+ */
+export function NavigationMenuTriggerLabel({ render, ...props }: NavigationMenuTriggerLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: navigationMenuTriggerLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-trigger.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-trigger.tsx
new file mode 100644
index 00000000..92b8234a
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-trigger.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuTriggerVariants } from "./variants";
+
+export type NavigationMenuTriggerProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * The styled button that opens an item's `Content`. Base-UI-agnostic — graft the trigger behavior
+ * in `components` via `<BaseNavigationMenu.Trigger render={<NavigationMenuTrigger />} />`; Base UI
+ * reflects open state as `[data-popup-open]`.
+ */
+export function NavigationMenuTrigger({ render, ...props }: NavigationMenuTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: navigationMenuTriggerVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu-viewport.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu-viewport.tsx
new file mode 100644
index 00000000..732f266a
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu-viewport.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { navigationMenuViewportVariants } from "./variants";
+
+export type NavigationMenuViewportProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The styled morph container that resizes between items' `Content`, reading Base UI's
+ * `--popup-width`/`--popup-height`. Base-UI-agnostic — graft in `components` via
+ * `<BaseNavigationMenu.Viewport render={<NavigationMenuViewport />} />`.
+ */
+export function NavigationMenuViewport({ render, ...props }: NavigationMenuViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: navigationMenuViewportVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/navigation-menu/navigation-menu.stories.tsx b/packages/propel/src/elements/navigation-menu/navigation-menu.stories.tsx
new file mode 100644
index 00000000..5ad21a67
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/navigation-menu.stories.tsx
@@ -0,0 +1,337 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+import type * as React from "react";
+import { expect } from "storybook/test";
+
+import {
+  NavigationMenuContentList,
+  NavigationMenuIcon,
+  NavigationMenuLink,
+  NavigationMenuLinkDescription,
+  NavigationMenuLinkTitle,
+  NavigationMenuList,
+  NavigationMenuPopup,
+  NavigationMenuTrigger,
+  NavigationMenuTriggerLabel,
+  NavigationMenuViewport,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the anchored popup laid out inline (Base UI only portals and
+// positions it; the surface is just a styled <nav>) and every visual state pinned statically via
+// the `data-*`/aria attributes Base UI's navigation menu would set (`data-popup-open=""` +
+// `aria-expanded` on a trigger, `data-starting-style=""`/`data-ending-style=""` on the popup).
+// Hover/focus are CSS pseudo-classes, forced by the pseudo-states addon. The Root, Item, Portal,
+// Positioner, and Content are behavior/structural roles with no styled element, so they have no
+// part here — grafting, keyboard, and aria behavior are demonstrated AND tested in
+// Components/NavigationMenu. `meta.component` is a no-variant, no-required-prop part so Storybook
+// forces nothing into `args`.
+const meta = {
+  title: "Elements/NavigationMenu",
+  component: NavigationMenuList,
+  subcomponents: {
+    NavigationMenuTrigger,
+    NavigationMenuTriggerLabel,
+    NavigationMenuIcon,
+    NavigationMenuLink,
+    NavigationMenuLinkTitle,
+    NavigationMenuLinkDescription,
+    NavigationMenuContentList,
+    NavigationMenuPopup,
+    NavigationMenuViewport,
+  },
+} satisfies Meta<typeof NavigationMenuList>;
+
+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.",
+  },
+];
+
+// The demo links carry real hrefs for correct anchor semantics, but cancel navigation:
+// the Vitest browser runner shares one page across story files, so an activated link
+// navigates the page, tears down the iframe, and fails unrelated stories.
+const cancelNavigation = (event: React.MouseEvent) => event.preventDefault();
+
+/**
+ * The full anatomy assembled statically: the `NavigationMenuList` row of top-level entries — two
+ * triggers (each a `NavigationMenuTriggerLabel` beside the `NavigationMenuIcon` caret slot) and an
+ * `item`-presentation link — above the `NavigationMenuPopup` surface rendered inline (Base UI would
+ * portal and anchor it). The first trigger pins the `data-popup-open=""` + `aria-expanded` Base UI
+ * sets while its content shows, which swaps the pill to the selected fill and rotates the caret via
+ * the trigger's `group` state. Inside the popup, the `NavigationMenuViewport` morph container holds
+ * a `NavigationMenuContentList` of `card` links; Base UI measures the active content into
+ * `--popup-width`/`--popup-height`, stood in for by the wrapper's pinned width and an `auto` height
+ * so the static content sizes itself.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="flex w-max flex-col items-start gap-2 [--popup-height:auto] [--popup-width:18rem]">
+      <NavigationMenuList>
+        <li>
+          <NavigationMenuTrigger aria-expanded data-popup-open="">
+            <NavigationMenuTriggerLabel>Product</NavigationMenuTriggerLabel>
+            <NavigationMenuIcon>
+              <ChevronDown aria-hidden />
+            </NavigationMenuIcon>
+          </NavigationMenuTrigger>
+        </li>
+        <li>
+          <NavigationMenuTrigger aria-expanded={false}>
+            <NavigationMenuTriggerLabel>Resources</NavigationMenuTriggerLabel>
+            <NavigationMenuIcon>
+              <ChevronDown aria-hidden />
+            </NavigationMenuIcon>
+          </NavigationMenuTrigger>
+        </li>
+        <li>
+          <NavigationMenuLink href="#pricing" presentation="item" onClick={cancelNavigation}>
+            Pricing
+          </NavigationMenuLink>
+        </li>
+      </NavigationMenuList>
+
+      <NavigationMenuPopup>
+        <NavigationMenuViewport>
+          <NavigationMenuContentList>
+            {PRODUCT_LINKS.map((item) => (
+              <li key={item.href}>
+                <NavigationMenuLink href={item.href} presentation="card" onClick={cancelNavigation}>
+                  <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
+                  <NavigationMenuLinkDescription>{item.description}</NavigationMenuLinkDescription>
+                </NavigationMenuLink>
+              </li>
+            ))}
+          </NavigationMenuContentList>
+        </NavigationMenuViewport>
+      </NavigationMenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * The link's `presentation` axis — its only variant: `item` is a top-level pill sharing the
+ * trigger's chrome, and `card` stacks a `NavigationMenuLinkTitle` over an optional
+ * `NavigationMenuLinkDescription` inside a content panel. The description-less card keeps the same
+ * padding and simply hugs its title.
+ */
+export const Presentations: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <NavigationMenuLink href="#pricing" presentation="item" onClick={cancelNavigation}>
+        Pricing
+      </NavigationMenuLink>
+      <NavigationMenuLink href="#docs" presentation="card" onClick={cancelNavigation}>
+        <NavigationMenuLinkTitle>Documentation</NavigationMenuLinkTitle>
+        <NavigationMenuLinkDescription>Guides and API references.</NavigationMenuLinkDescription>
+      </NavigationMenuLink>
+      <NavigationMenuLink href="#changelog" presentation="card" onClick={cancelNavigation}>
+        <NavigationMenuLinkTitle>Changelog</NavigationMenuLinkTitle>
+      </NavigationMenuLink>
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the interactive parts. Trigger row: rest, hover and focus-visible (CSS
+ * pseudo-classes forced by the pseudo-states addon), and open — the `data-popup-open=""` +
+ * `aria-expanded` Base UI sets while the item's content shows, shifting the pill to the selected
+ * fill and rotating the caret through the trigger's `group` state. Link row: the shared pill chrome
+ * on the `item` presentation — rest, hover, and the focus-visible accent ring (`card` links carry
+ * the identical selectors).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#navigation-menu-trigger-hover", "#navigation-menu-link-hover"],
+      focusVisible: ["#navigation-menu-trigger-focus", "#navigation-menu-link-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <div className="flex items-center gap-3">
+        <NavigationMenuTrigger id="navigation-menu-trigger-rest" aria-expanded={false}>
+          <NavigationMenuTriggerLabel>Rest</NavigationMenuTriggerLabel>
+          <NavigationMenuIcon>
+            <ChevronDown aria-hidden />
+          </NavigationMenuIcon>
+        </NavigationMenuTrigger>
+        <NavigationMenuTrigger id="navigation-menu-trigger-hover" aria-expanded={false}>
+          <NavigationMenuTriggerLabel>Hover</NavigationMenuTriggerLabel>
+          <NavigationMenuIcon>
+            <ChevronDown aria-hidden />
+          </NavigationMenuIcon>
+        </NavigationMenuTrigger>
+        <NavigationMenuTrigger id="navigation-menu-trigger-focus" aria-expanded={false}>
+          <NavigationMenuTriggerLabel>Focus-visible</NavigationMenuTriggerLabel>
+          <NavigationMenuIcon>
+            <ChevronDown aria-hidden />
+          </NavigationMenuIcon>
+        </NavigationMenuTrigger>
+        <NavigationMenuTrigger id="navigation-menu-trigger-open" aria-expanded data-popup-open="">
+          <NavigationMenuTriggerLabel>Open</NavigationMenuTriggerLabel>
+          <NavigationMenuIcon>
+            <ChevronDown aria-hidden />
+          </NavigationMenuIcon>
+        </NavigationMenuTrigger>
+      </div>
+      <div className="flex items-center gap-3">
+        <NavigationMenuLink href="#rest" presentation="item" onClick={cancelNavigation}>
+          Rest
+        </NavigationMenuLink>
+        <NavigationMenuLink
+          id="navigation-menu-link-hover"
+          href="#hover"
+          presentation="item"
+          onClick={cancelNavigation}
+        >
+          Hover
+        </NavigationMenuLink>
+        <NavigationMenuLink
+          id="navigation-menu-link-focus"
+          href="#focus"
+          presentation="item"
+          onClick={cancelNavigation}
+        >
+          Focus-visible
+        </NavigationMenuLink>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned `data-popup-open` selectors actually compiled — the open
+ * trigger's background computes away from the resting trigger's, and its caret picks up the
+ * `group-data-popup-open` 180° rotation the resting caret lacks. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const triggerBackground = (id: string) => {
+      const trigger = canvasElement.querySelector(`#${id}`);
+      if (!(trigger instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(trigger).backgroundColor;
+    };
+    const caretTransform = (id: string) => {
+      const caret = canvasElement.querySelector(`#${id} [aria-hidden="true"]`);
+      if (!(caret instanceof HTMLElement)) throw new Error(`missing caret in #${id}`);
+      // Tailwind v4's rotate-* compiles to the standalone CSS `rotate` property.
+      return getComputedStyle(caret).rotate;
+    };
+    await expect(triggerBackground("navigation-menu-trigger-open")).not.toBe(
+      triggerBackground("navigation-menu-trigger-rest"),
+    );
+    await expect(caretTransform("navigation-menu-trigger-open")).not.toBe(
+      caretTransform("navigation-menu-trigger-rest"),
+    );
+  },
+};
+
+/**
+ * The popup surface's transition poses, rendered inline (Base UI would portal and anchor it):
+ *
+ * - **Resting** — the open pose: the shared raised popup card with the navigation menu's `p-2`
+ *   padding, holding the `NavigationMenuViewport` and a `NavigationMenuContentList` of `card`
+ *   links.
+ * - **Entering** — `data-starting-style=""` pins the pre-open endpoint of the transition (`opacity-0
+ *   scale-95`), so the card is intentionally invisible while holding its layout
+ *   (`data-ending-style` mirrors it on the way closed).
+ *
+ * The popups render `<nav>` landmarks, so each carries an `aria-label` to keep the two distinct.
+ */
+export const Popup: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-start gap-6 [--popup-height:auto] [--popup-width:18rem]">
+      <NavigationMenuPopup id="navigation-menu-popup-resting" aria-label="Resources">
+        <NavigationMenuViewport>
+          <NavigationMenuContentList>
+            {RESOURCE_LINKS.map((item) => (
+              <li key={item.href}>
+                <NavigationMenuLink href={item.href} presentation="card" onClick={cancelNavigation}>
+                  <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
+                  <NavigationMenuLinkDescription>{item.description}</NavigationMenuLinkDescription>
+                </NavigationMenuLink>
+              </li>
+            ))}
+          </NavigationMenuContentList>
+        </NavigationMenuViewport>
+      </NavigationMenuPopup>
+
+      <NavigationMenuPopup
+        id="navigation-menu-popup-entering"
+        aria-label="Resources entering"
+        data-starting-style=""
+      >
+        <NavigationMenuViewport>
+          <NavigationMenuContentList>
+            {RESOURCE_LINKS.map((item) => (
+              <li key={item.href}>
+                <NavigationMenuLink href={item.href} presentation="card" onClick={cancelNavigation}>
+                  <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
+                  <NavigationMenuLinkDescription>{item.description}</NavigationMenuLinkDescription>
+                </NavigationMenuLink>
+              </li>
+            ))}
+          </NavigationMenuContentList>
+        </NavigationMenuViewport>
+      </NavigationMenuPopup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned transition-endpoint selector actually compiled — the
+ * `data-starting-style` popup computes to opacity 0 while the resting popup stays fully opaque.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const PopupCanary: Story = {
+  ...Popup,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const popupOpacity = (id: string) => {
+      const popup = canvasElement.querySelector(`#${id}`);
+      if (!(popup instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(popup).opacity;
+    };
+    await expect(popupOpacity("navigation-menu-popup-resting")).toBe("1");
+    await expect(popupOpacity("navigation-menu-popup-entering")).toBe("0");
+  },
+};
diff --git a/packages/propel/src/elements/navigation-menu/variants.ts b/packages/propel/src/elements/navigation-menu/variants.ts
new file mode 100644
index 00000000..ca0ea582
--- /dev/null
+++ b/packages/propel/src/elements/navigation-menu/variants.ts
@@ -0,0 +1,81 @@
+import { cva, cx } from "class-variance-authority";
+
+import { nodeSlotClass } from "../../internal/node-slot";
+import { popupSurfaceClass } from "../../internal/popup-surface";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// Navigation Menu wraps Base UI's parts and extends the anatomy with the styled regions
+// inside a menu item (TriggerLabel, ContentList, LinkTitle, LinkDescription). Base UI drives
+// open/active state through `data-*` attributes, so the only authored styling axis is the
+// `Link`'s `presentation` (an inline `item` pill vs a stacked content `card`). 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 a pill chrome: 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",
+  ),
+);
+
+// The trigger's text label, sitting beside the disclosure `Icon`. Mirrors the
+// `Title`/`Icon` split used by other triggers so the trigger renders parts, not raw text.
+export const navigationMenuTriggerLabelVariants = cva("min-w-0 truncate");
+
+// A `Link` is used two ways, so its arrangement is a required `presentation`: an `item`
+// pill (a top-level nav entry beside the triggers) or a stacked `card` (a rich entry
+// inside a `Content` panel, pairing a `Title` with an optional `Description`). The
+// shared chrome — radius, highlight, focus ring — is baked in for both.
+export const navigationMenuLinkVariants = cva(
+  cx(
+    "rounded-md 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",
+  ),
+  {
+    variants: {
+      presentation: {
+        item: "inline-flex h-8 items-center gap-1 px-3",
+        card: "flex flex-col gap-0.5 px-3 py-2 text-start",
+      },
+    },
+  },
+);
+
+// The link's primary line: the navigable label. Bold, primary-tinted, single line.
+export const navigationMenuLinkTitleVariants = cva(
+  "block truncate text-14 font-medium text-primary",
+);
+
+// The link's optional secondary line: a muted one- or two-line description below the title.
+export const navigationMenuLinkDescriptionVariants = cva("font-normal block text-12 text-tertiary");
+
+// The vertical stack of links inside a `Content` panel. Per the spec, nav items stack
+// vertically with a consistent gap; the surrounding `Popup` owns the padding.
+export const navigationMenuContentListVariants = cva("flex w-72 flex-col gap-1");
+
+// The disclosure caret slot inside a Trigger. Sizes its child SVG to `--node-size`
+// (default 1rem, matching the trigger's line-height) and rotates while the popup is
+// open; reads the parent Trigger's `group-data-popup-open` state.
+export const navigationMenuIconVariants = cva(
+  cx(
+    nodeSlotClass,
+    "[--node-size:1rem]",
+    "text-icon-secondary transition-transform group-data-popup-open:rotate-180",
+  ),
+);
+
+export const navigationMenuPopupVariants = cva(cx(popupSurfaceClass, "p-2"));
+
+// 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 type NavigationMenuLinkVariantProps = StrictVariantProps<typeof navigationMenuLinkVariants>;
diff --git a/packages/propel/src/elements/number-field/index.tsx b/packages/propel/src/elements/number-field/index.tsx
new file mode 100644
index 00000000..92024603
--- /dev/null
+++ b/packages/propel/src/elements/number-field/index.tsx
@@ -0,0 +1,3 @@
+export * from "./number-field";
+export * from "./number-field-group";
+export * from "./number-field-input";
diff --git a/packages/propel/src/elements/number-field/number-field-group.tsx b/packages/propel/src/elements/number-field/number-field-group.tsx
new file mode 100644
index 00000000..5d3ab695
--- /dev/null
+++ b/packages/propel/src/elements/number-field/number-field-group.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { numberFieldGroupVariants } from "./variants";
+
+export type NumberFieldGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled bordered group wrapping the decrement / input / increment controls. Base-UI-agnostic —
+ * graft in `components` via `<BaseNumberField.Group render={<NumberFieldGroup/>} />`.
+ */
+export function NumberFieldGroup({ render, ...props }: NumberFieldGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: numberFieldGroupVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/number-field/number-field-input.tsx b/packages/propel/src/elements/number-field/number-field-input.tsx
new file mode 100644
index 00000000..68b71ecd
--- /dev/null
+++ b/packages/propel/src/elements/number-field/number-field-input.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type NumberFieldInputVariantProps, numberFieldInputVariants } from "./variants";
+
+export type { NumberFieldMagnitude } from "./variants";
+
+export type NumberFieldInputProps = Omit<useRender.ComponentProps<"input">, "className" | "style"> &
+  NumberFieldInputVariantProps;
+
+/**
+ * The styled numeric input. Base-UI-agnostic — graft the number field behavior in `components` via
+ * `<BaseNumberField.Input render={<NumberFieldInput/>} />`.
+ */
+export function NumberFieldInput({ magnitude, render, ...props }: NumberFieldInputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = {
+    className: numberFieldInputVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/number-field/number-field.stories.tsx b/packages/propel/src/elements/number-field/number-field.stories.tsx
new file mode 100644
index 00000000..b9579fdb
--- /dev/null
+++ b/packages/propel/src/elements/number-field/number-field.stories.tsx
@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Minus, Plus } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { IconButton } from "../icon-button";
+import {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  type NumberFieldMagnitude,
+} from "./index";
+
+const MAGNITUDES: NumberFieldMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `NumberField` (the frame),
+// `NumberFieldGroup` (the bordered group), and `NumberFieldInput` (the numeric control) are
+// Base-UI-agnostic styled elements rendered DIRECTLY — no Base UI grafts — with the −/+ steppers
+// as plain ghost `IconButton`s and every visual state pinned statically via the attributes the
+// chrome keys off (`data-invalid=""`, `data-disabled=""`, the native `disabled`) or forced by the
+// pseudo-states addon (hover/focus-within are CSS pseudo-classes). Grafting, stepping, and aria
+// behavior are demonstrated AND tested in the ready-made NumberField (Components/NumberField).
+const meta = {
+  title: "Elements/NumberField",
+  component: NumberField,
+  subcomponents: {
+    NumberFieldGroup,
+    NumberFieldInput,
+  },
+} satisfies Meta<typeof NumberField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The anatomy assembled statically: the `NumberField` frame stacking the `NumberFieldGroup`
+ * bordered group, which holds a decrement `IconButton`, the fixed-width centered
+ * `NumberFieldInput`, and an increment `IconButton`. The input's `magnitude` matches the stepper
+ * buttons' square (`xl` = 32px) so the group container stays flush.
+ */
+export const Default: Story = {
+  render: () => (
+    <NumberField>
+      <NumberFieldGroup>
+        <IconButton
+          prominence="ghost"
+          tone="neutral"
+          magnitude="xl"
+          aria-label="Decrease instances"
+        >
+          <Icon>
+            <Minus />
+          </Icon>
+        </IconButton>
+        <NumberFieldInput magnitude="xl" defaultValue="2" aria-label="Number of instances" />
+        <IconButton
+          prominence="ghost"
+          tone="neutral"
+          magnitude="xl"
+          aria-label="Increase instances"
+        >
+          <Icon>
+            <Plus />
+          </Icon>
+        </IconButton>
+      </NumberFieldGroup>
+    </NumberField>
+  ),
+};
+
+/**
+ * All input sizes (sm/md/lg/xl → 20/24/28/32px input heights) side by side. Each step matches the
+ * stepper `IconButton` square of the same `magnitude`, which is what keeps the group container
+ * flush — so the two props always change together.
+ */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <NumberField key={magnitude}>
+          <NumberFieldGroup>
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude={magnitude}
+              aria-label={`Decrease (${magnitude})`}
+            >
+              <Icon>
+                <Minus />
+              </Icon>
+            </IconButton>
+            <NumberFieldInput
+              magnitude={magnitude}
+              defaultValue="2"
+              aria-label={`Number of instances (${magnitude})`}
+            />
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude={magnitude}
+              aria-label={`Increase (${magnitude})`}
+            >
+              <Icon>
+                <Plus />
+              </Icon>
+            </IconButton>
+          </NumberFieldGroup>
+        </NumberField>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the group:
+ *
+ * - **Rest** — the subtle border over the `layer-2` fill.
+ * - **Hover** / **Focused** — CSS pseudo-classes (`:hover`, `:focus-within`), forced by the
+ *   pseudo-states addon: the hover border/fill shift, and the accent border + soft ring while the
+ *   inner input has focus.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to the input; the frame recolors to danger via `:has([data-invalid])` — no `tone`
+ *   prop.
+ * - **Disabled** — the native `disabled` on the input and steppers plus the `data-disabled=""` Base
+ *   UI mirrors onto the group: not-allowed cursor, flattened fill, dimmed text — both selector
+ *   forms the shared chrome defines.
+ */
+export const States: Story = {
+  parameters: {
+    pseudo: {
+      hover: "#number-field-group-hover",
+      focusWithin: "#number-field-group-focus",
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {(
+        [
+          { label: "Rest", id: "number-field-group-rest" },
+          { label: "Hover", id: "number-field-group-hover" },
+          { label: "Focused", id: "number-field-group-focus" },
+        ] as const
+      ).map(({ label, id }) => (
+        <NumberField key={id}>
+          <NumberFieldGroup id={id}>
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label={`Decrease (${label})`}
+            >
+              <Icon>
+                <Minus />
+              </Icon>
+            </IconButton>
+            <NumberFieldInput magnitude="md" defaultValue="2" aria-label={label} />
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label={`Increase (${label})`}
+            >
+              <Icon>
+                <Plus />
+              </Icon>
+            </IconButton>
+          </NumberFieldGroup>
+        </NumberField>
+      ))}
+      <NumberField>
+        <NumberFieldGroup id="number-field-group-invalid">
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="md"
+            aria-label="Decrease (Invalid)"
+          >
+            <Icon>
+              <Minus />
+            </Icon>
+          </IconButton>
+          <NumberFieldInput
+            magnitude="md"
+            defaultValue="99"
+            aria-label="Invalid"
+            aria-invalid
+            data-invalid=""
+          />
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="md"
+            aria-label="Increase (Invalid)"
+          >
+            <Icon>
+              <Plus />
+            </Icon>
+          </IconButton>
+        </NumberFieldGroup>
+      </NumberField>
+      <NumberField>
+        <NumberFieldGroup data-disabled="">
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="md"
+            aria-label="Decrease (Disabled)"
+            disabled
+          >
+            <Icon>
+              <Minus />
+            </Icon>
+          </IconButton>
+          <NumberFieldInput magnitude="md" defaultValue="2" aria-label="Disabled" disabled />
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="md"
+            aria-label="Increase (Disabled)"
+            disabled
+          >
+            <Icon>
+              <Plus />
+            </Icon>
+          </IconButton>
+        </NumberFieldGroup>
+      </NumberField>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` input recolors its wrapping group's border
+ * (`has-[[data-invalid]]:border-danger-strong`) away from the resting group's. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const group = canvasElement.querySelector(`#${id}`);
+      if (!(group instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(group).borderColor;
+    };
+    await expect(borderColor("number-field-group-invalid")).not.toBe(
+      borderColor("number-field-group-rest"),
+    );
+  },
+};
diff --git a/packages/propel/src/elements/number-field/number-field.tsx b/packages/propel/src/elements/number-field/number-field.tsx
new file mode 100644
index 00000000..573de802
--- /dev/null
+++ b/packages/propel/src/elements/number-field/number-field.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { numberFieldVariants } from "./variants";
+
+export type NumberFieldProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled number field frame — stacks the label, group, and messages. Base-UI-agnostic — graft
+ * the number field behavior in `components` via `<BaseNumberField.Root render={<NumberField/>}
+ * />`.
+ */
+export function NumberField({ render, ...props }: NumberFieldProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: numberFieldVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/number-field/variants.ts b/packages/propel/src/elements/number-field/variants.ts
new file mode 100644
index 00000000..33294b2e
--- /dev/null
+++ b/packages/propel/src/elements/number-field/variants.ts
@@ -0,0 +1,35 @@
+import { type VariantProps, cva, cx } from "class-variance-authority";
+
+import { controlGroupClass } from "../../internal/control-group";
+import { controlInputClass } from "../../internal/control-input";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+export const numberFieldVariants = cva("flex min-w-0 flex-col gap-1.5");
+export const numberFieldGroupVariants = cva(
+  cx(
+    // Wraps a separate focusable input → the shared `focus: within` group chrome.
+    controlGroupClass,
+    "w-fit items-center overflow-hidden rounded-md",
+  ),
+);
+
+// Input geometry per magnitude. Heights match the stepper button square (the steppers render as
+// IconButtons whose `magnitude` matches) so the group container stays flush. The width is fixed to
+// accommodate up to ~4 digits.
+export const numberFieldInputVariants = cva(cx(controlInputClass, "w-14 text-center text-14"), {
+  variants: {
+    magnitude: {
+      sm: "h-5",
+      md: "h-6",
+      lg: "h-7",
+      xl: "h-8",
+    },
+  },
+});
+
+export type NumberFieldInputVariantProps = StrictVariantProps<typeof numberFieldInputVariants>;
+
+// Shared magnitude type so all parts (input + the IconButton steppers) stay in sync.
+export type NumberFieldMagnitude = NonNullable<
+  VariantProps<typeof numberFieldInputVariants>["magnitude"]
+>;
diff --git a/packages/propel/src/ui/otp-field/index.tsx b/packages/propel/src/elements/otp-field/index.tsx
similarity index 100%
rename from packages/propel/src/ui/otp-field/index.tsx
rename to packages/propel/src/elements/otp-field/index.tsx
diff --git a/packages/propel/src/elements/otp-field/otp-field-input.tsx b/packages/propel/src/elements/otp-field/otp-field-input.tsx
new file mode 100644
index 00000000..aa3a282b
--- /dev/null
+++ b/packages/propel/src/elements/otp-field/otp-field-input.tsx
@@ -0,0 +1,24 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  otpFieldInputVariants,
+  type OTPFieldInputMagnitude,
+  type OTPFieldInputVariantProps,
+} from "./variants";
+
+export type { OTPFieldInputMagnitude };
+
+export type OTPFieldInputProps = Omit<useRender.ComponentProps<"input">, "className" | "style"> &
+  OTPFieldInputVariantProps;
+
+/**
+ * A single styled OTP character cell. Base-UI-agnostic; graft the slot behavior in `components` via
+ * `<BaseOTPField.Input render={<OTPFieldInput/>} />`.
+ */
+export function OTPFieldInput({ magnitude, render, ...props }: OTPFieldInputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = {
+    className: otpFieldInputVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/otp-field/otp-field-label.tsx b/packages/propel/src/elements/otp-field/otp-field-label.tsx
new file mode 100644
index 00000000..7831a1f1
--- /dev/null
+++ b/packages/propel/src/elements/otp-field/otp-field-label.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { otpFieldLabelVariants } from "./variants";
+
+export type OTPFieldLabelProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The visually-hidden accessible name for the field's first slot. Base UI ignores `aria-label` on
+ * the first input and names it from `aria-labelledby` instead, so render this with an `id` and
+ * point the first `OTPFieldInput`'s `aria-labelledby` at it. Without it the slot inputs fail axe's
+ * "Form elements must have labels". Hidden via `sr-only`, so it stays available to assistive tech.
+ */
+export function OTPFieldLabel({ render, ...props }: OTPFieldLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: otpFieldLabelVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/otp-field/otp-field-separator.tsx b/packages/propel/src/elements/otp-field/otp-field-separator.tsx
new file mode 100644
index 00000000..03f9f39b
--- /dev/null
+++ b/packages/propel/src/elements/otp-field/otp-field-separator.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { otpFieldSeparatorVariants } from "./variants";
+
+export type OTPFieldSeparatorProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A styled divider between groups of slots, e.g. `123-456`. Base-UI-agnostic; graft in `components`
+ * via `<BaseOTPField.Separator render={<OTPFieldSeparator/>} />`.
+ */
+export function OTPFieldSeparator({ render, ...props }: OTPFieldSeparatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: otpFieldSeparatorVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/otp-field/otp-field.stories.tsx b/packages/propel/src/elements/otp-field/otp-field.stories.tsx
new file mode 100644
index 00000000..e3b3e2fb
--- /dev/null
+++ b/packages/propel/src/elements/otp-field/otp-field.stories.tsx
@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import {
+  OTPField,
+  OTPFieldInput,
+  type OTPFieldInputMagnitude,
+  OTPFieldLabel,
+  OTPFieldSeparator,
+} from "./index";
+
+const MAGNITUDES: OTPFieldInputMagnitude[] = ["md", "lg", "xl"];
+const CODE = "731428";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the `data-*`/aria
+// attributes Base UI's OTP field would set (`data-invalid=""`, `data-disabled=""`) or the native
+// `disabled`/`defaultValue` attributes. Grafting, focus movement, paste, and completion behavior
+// are demonstrated AND tested in the components-tier story (Components/OTPField).
+const meta = {
+  title: "Elements/OTPField",
+  component: OTPField,
+  subcomponents: { OTPFieldInput, OTPFieldLabel, OTPFieldSeparator },
+} satisfies Meta<typeof OTPField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: the `OTPField` row holding six `OTPFieldInput` character
+ * cells, a half-entered code pinning the filled and empty looks side by side. The visually-hidden
+ * `OTPFieldLabel` names the first slot via `aria-labelledby` — mirroring the graft, where Base UI
+ * ignores `aria-label` on the first slot — while the rest carry an `aria-label`.
+ */
+export const Default: Story = {
+  render: () => (
+    <OTPField>
+      <OTPFieldLabel id="otp-first-slot-label">Character 1</OTPFieldLabel>
+      {Array.from({ length: 6 }, (_, index) =>
+        index === 0 ? (
+          <OTPFieldInput
+            key={index}
+            magnitude="lg"
+            defaultValue={CODE[index]}
+            aria-labelledby="otp-first-slot-label"
+          />
+        ) : (
+          <OTPFieldInput
+            key={index}
+            magnitude="lg"
+            defaultValue={index < 3 ? CODE[index] : undefined}
+            aria-label={`Character ${index + 1}`}
+          />
+        ),
+      )}
+    </OTPField>
+  ),
+};
+
+/**
+ * The slot box scale — square cells stepping md (32px) · lg (36px) · xl (44px) on the shared
+ * control heights, each with a matching width and text size.
+ */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <OTPField key={magnitude}>
+          {Array.from({ length: 6 }, (_, index) => (
+            <OTPFieldInput
+              key={index}
+              magnitude={magnitude}
+              defaultValue={CODE[index]}
+              aria-label={`Character ${index + 1} (${magnitude})`}
+            />
+          ))}
+        </OTPField>
+      ))}
+    </div>
+  ),
+};
+
+/** An `OTPFieldSeparator` splits the slots into groups, e.g. `123-456`. */
+export const Grouped: Story = {
+  render: () => (
+    <OTPField>
+      <OTPFieldInput magnitude="lg" defaultValue="1" aria-label="Character 1" />
+      <OTPFieldInput magnitude="lg" defaultValue="2" aria-label="Character 2" />
+      <OTPFieldInput magnitude="lg" defaultValue="3" aria-label="Character 3" />
+      <OTPFieldSeparator>-</OTPFieldSeparator>
+      <OTPFieldInput magnitude="lg" defaultValue="4" aria-label="Character 4" />
+      <OTPFieldInput magnitude="lg" defaultValue="5" aria-label="Character 5" />
+      <OTPFieldInput magnitude="lg" defaultValue="6" aria-label="Character 6" />
+    </OTPField>
+  ),
+};
+
+/** Native `placeholder` hints (e.g. `•`) mark the empty slots until characters fill them. */
+export const Placeholders: Story = {
+  render: () => (
+    <OTPField>
+      {Array.from({ length: 6 }, (_, index) => (
+        <OTPFieldInput
+          key={index}
+          magnitude="lg"
+          placeholder="•"
+          aria-label={`Character ${index + 1}`}
+        />
+      ))}
+    </OTPField>
+  ),
+};
+
+/**
+ * Every pinnable slot state:
+ *
+ * - **Rest / Filled / Focused** — the subtle border over the `layer-2` fill; the focused cell (a CSS
+ *   `:focus`, forced by the pseudo-states addon) lights to the accent border + soft ring.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to every slot; the cell recolors its border to danger — no `tone` prop.
+ * - **Disabled** — the native `disabled` plus the `data-disabled=""` Base UI mirrors onto the slot:
+ *   not-allowed cursor and dimmed text.
+ */
+export const States: Story = {
+  parameters: {
+    pseudo: { focus: "#otp-slot-focus" },
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <OTPField>
+        <OTPFieldInput id="otp-slot-rest" magnitude="lg" aria-label="Rest slot" />
+        <OTPFieldInput magnitude="lg" defaultValue="7" aria-label="Filled slot" />
+        <OTPFieldInput id="otp-slot-focus" magnitude="lg" aria-label="Focused slot" />
+      </OTPField>
+      <OTPField>
+        {Array.from({ length: 3 }, (_, index) => (
+          <OTPFieldInput
+            key={index}
+            id={index === 0 ? "otp-slot-invalid" : undefined}
+            magnitude="lg"
+            defaultValue={CODE[index]}
+            aria-invalid
+            data-invalid=""
+            aria-label={`Invalid character ${index + 1}`}
+          />
+        ))}
+      </OTPField>
+      <OTPField>
+        {Array.from({ length: 3 }, (_, index) => (
+          <OTPFieldInput
+            key={index}
+            magnitude="lg"
+            defaultValue={CODE[index]}
+            disabled
+            data-disabled=""
+            aria-label={`Disabled character ${index + 1}`}
+          />
+        ))}
+      </OTPField>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` slot recolors its border (`data-invalid:border-danger-strong`) away from the
+ * resting slot's. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const slot = canvasElement.querySelector(`#${id}`);
+      if (!(slot instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(slot).borderColor;
+    };
+    await expect(borderColor("otp-slot-invalid")).not.toBe(borderColor("otp-slot-rest"));
+  },
+};
diff --git a/packages/propel/src/elements/otp-field/otp-field.tsx b/packages/propel/src/elements/otp-field/otp-field.tsx
new file mode 100644
index 00000000..ee1dc1a0
--- /dev/null
+++ b/packages/propel/src/elements/otp-field/otp-field.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { otpFieldVariants } from "./variants";
+
+export type OTPFieldProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled OTP field container — a horizontal row of character slots (and optional separators).
+ * Base-UI-agnostic; graft the field behavior in `components` via `<BaseOTPField.Root
+ * render={<OTPField/>} />`.
+ */
+export function OTPField({ render, ...props }: OTPFieldProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: otpFieldVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/otp-field/variants.ts b/packages/propel/src/elements/otp-field/variants.ts
new file mode 100644
index 00000000..d0f9feaf
--- /dev/null
+++ b/packages/propel/src/elements/otp-field/variants.ts
@@ -0,0 +1,51 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { controlMagnitude } from "../../internal/control-group";
+import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+/** Root: a horizontal row of character slots (and optional separators). */
+export const otpFieldVariants = cva("flex items-center gap-2");
+
+/**
+ * Input: a single character cell with the shared field-control surface.
+ *
+ * Magnitude — controls the box size (sm/md/lg); required, no default. The error look isn't a prop:
+ * the cell rests at the `subtle` border and recolors to `danger` off Base UI's `data-invalid` (set
+ * on the digit when the field is wrapped in a `Field.Root invalid`), including the danger focus
+ * ring — so there's no hand-rolled danger ring here.
+ */
+export const otpFieldInputVariants = cva(
+  cx(
+    // Each digit cell is itself the focusable element → `focus: self`.
+    fieldControlSurfaceVariants({ focus: "self" }),
+    "rounded-md text-center text-primary outline-none data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      // One step relabeled onto the shared control scale: the old sm/md/lg pixels were the
+      // scale's md/lg/(near-)xl. Square cells: shared height + a matching width.
+      magnitude: {
+        md: cx(controlMagnitude.md, "w-8"),
+        lg: cx(controlMagnitude.lg, "w-9"),
+        xl: cx(controlMagnitude.xl, "w-11"),
+      },
+    },
+  },
+);
+
+type OTPFieldInputVariantConfig = VariantProps<typeof otpFieldInputVariants>;
+
+export type OTPFieldInputMagnitude = NonNullable<OTPFieldInputVariantConfig["magnitude"]>;
+export type OTPFieldInputVariantProps = StrictVariantProps<typeof otpFieldInputVariants>;
+
+/** Separator: a visual divider between groups of slots (e.g. `123-456`). */
+export const otpFieldSeparatorVariants = cva("text-tertiary");
+
+/**
+ * Label: the visually-hidden accessible name backing the first slot. Base UI ignores `aria-label`
+ * on the first input and names it from `aria-labelledby` instead, so the field needs a real
+ * (hidden) label element. Its `sr-only` styling lives here so neither the components tier nor a
+ * direct composition carries a raw `className`.
+ */
+export const otpFieldLabelVariants = cva("sr-only");
diff --git a/packages/propel/src/ui/pagination/index.tsx b/packages/propel/src/elements/pagination/index.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/index.tsx
rename to packages/propel/src/elements/pagination/index.tsx
diff --git a/packages/propel/src/elements/pagination/pagination-arrow-button.tsx b/packages/propel/src/elements/pagination/pagination-arrow-button.tsx
new file mode 100644
index 00000000..b9b29df6
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-arrow-button.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationArrowButtonVariants } from "./variants";
+
+export type PaginationArrowButtonProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * A styled prev/next arrow button. Applies `paginationArrowButtonVariants()`; pass the
+ * (directional, RTL-mirrored) arrow icon as `children` and wire `aria-label`/`disabled`/`onClick`
+ * through props.
+ */
+export function PaginationArrowButton({ render, ...props }: PaginationArrowButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    ...(render == null ? { type: "button" } : null),
+    className: paginationArrowButtonVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/pagination/pagination-ellipsis.tsx b/packages/propel/src/elements/pagination/pagination-ellipsis.tsx
new file mode 100644
index 00000000..bf371cdf
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-ellipsis.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationEllipsisVariants } from "./variants";
+
+export type PaginationEllipsisProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * A non-interactive gap marker between distant page numbers. Renders whatever icon you pass (sized
+ * to the slot's `--node-size`, 14px) — never baking a specific glyph in. Decorative, so
+ * `aria-hidden`.
+ */
+export function PaginationEllipsis({ render, ...props }: PaginationEllipsisProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: paginationEllipsisVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/pagination/pagination-item.tsx b/packages/propel/src/elements/pagination/pagination-item.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/pagination-item.tsx
rename to packages/propel/src/elements/pagination/pagination-item.tsx
diff --git a/packages/propel/src/ui/pagination/pagination-list.tsx b/packages/propel/src/elements/pagination/pagination-list.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/pagination-list.tsx
rename to packages/propel/src/elements/pagination/pagination-list.tsx
diff --git a/packages/propel/src/elements/pagination/pagination-page-button.tsx b/packages/propel/src/elements/pagination/pagination-page-button.tsx
new file mode 100644
index 00000000..51d1bb41
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-page-button.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationPageButtonVariants } from "./variants";
+
+export type PaginationPageButtonProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * A styled page-number button. The current page is marked `aria-current="page"`, which the cva keys
+ * the pressed/selected fill off of; pass the page number (or a loading spinner) as `children` and
+ * wire `aria-current`/`onClick` through props.
+ */
+export function PaginationPageButton({ render, ...props }: PaginationPageButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    ...(render == null ? { type: "button" } : null),
+    className: paginationPageButtonVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/pagination/pagination-per-page-indicator.tsx b/packages/propel/src/elements/pagination/pagination-per-page-indicator.tsx
new file mode 100644
index 00000000..ecaa9df1
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-per-page-indicator.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationPerPageIndicatorVariants } from "./variants";
+
+export type PaginationPerPageIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The chevron inside the per-page trigger. Renders whatever icon you pass (sized to `--node-size`,
+ * 14px) and rotates a half-turn while the menu is open. Decorative — the trigger carries the
+ * accessible name and state — so `aria-hidden`.
+ */
+export function PaginationPerPageIndicator({ render, ...props }: PaginationPerPageIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: paginationPerPageIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/pagination/pagination-per-page-label.tsx b/packages/propel/src/elements/pagination/pagination-per-page-label.tsx
new file mode 100644
index 00000000..51dd6e4c
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-per-page-label.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationPerPageLabelVariants } from "./variants";
+
+export type PaginationPerPageLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trailing "per page" text after the selector pill (Figma `50 v per page`). Decorative, so
+ * `aria-hidden`.
+ */
+export function PaginationPerPageLabel({ render, ...props }: PaginationPerPageLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: paginationPerPageLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx b/packages/propel/src/elements/pagination/pagination-per-page-trigger.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx
rename to packages/propel/src/elements/pagination/pagination-per-page-trigger.tsx
diff --git a/packages/propel/src/ui/pagination/pagination-per-page.tsx b/packages/propel/src/elements/pagination/pagination-per-page.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/pagination-per-page.tsx
rename to packages/propel/src/elements/pagination/pagination-per-page.tsx
diff --git a/packages/propel/src/elements/pagination/pagination-range-current.tsx b/packages/propel/src/elements/pagination/pagination-range-current.tsx
new file mode 100644
index 00000000..0b48ec43
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-range-current.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationRangeCurrentVariants } from "./variants";
+
+export type PaginationRangeCurrentProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The emphasized current-range portion (e.g. `1-50`) inside `PaginationRange`, in the primary text
+ * color.
+ */
+export function PaginationRangeCurrent({ render, ...props }: PaginationRangeCurrentProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: paginationRangeCurrentVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/pagination/pagination-range.tsx b/packages/propel/src/elements/pagination/pagination-range.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/pagination-range.tsx
rename to packages/propel/src/elements/pagination/pagination-range.tsx
diff --git a/packages/propel/src/elements/pagination/pagination-spinner.tsx b/packages/propel/src/elements/pagination/pagination-spinner.tsx
new file mode 100644
index 00000000..9a37d85e
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination-spinner.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { paginationSpinnerVariants } from "./variants";
+
+export type PaginationSpinnerProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The in-flight indicator a page button shows in place of its number while navigating to it. Spins
+ * whatever icon you pass, sized to `--node-size` (14px) and tinted the placeholder color.
+ * Decorative, so `aria-hidden`.
+ */
+export function PaginationSpinner({ render, ...props }: PaginationSpinnerProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: paginationSpinnerVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/pagination/pagination.stories.tsx b/packages/propel/src/elements/pagination/pagination.stories.tsx
new file mode 100644
index 00000000..eec1fbd1
--- /dev/null
+++ b/packages/propel/src/elements/pagination/pagination.stories.tsx
@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle, MoreHorizontal } from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  Pagination,
+  PaginationArrowButton,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationList,
+  PaginationPageButton,
+  PaginationPerPage,
+  PaginationPerPageIndicator,
+  PaginationPerPageLabel,
+  PaginationPerPageTrigger,
+  PaginationRange,
+  PaginationRangeCurrent,
+  PaginationSpinner,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts, no components-tier import — with every visual state pinned
+// statically via the attributes the ready-made / Base UI would set (`aria-current="page"` drives
+// the selected fill, `disabled` the dimming, `data-popup-open=""` the per-page chevron rotation,
+// `dir="rtl"` the arrow mirroring). The parts carry no variant axes — the Figma "variant" frames
+// (all pages visible / near start / middle / near end) are a function of where the current page
+// sits, owned by the components tier. Truncation, navigation, keyboard, and Menu behavior are
+// demonstrated AND tested in the components-tier story (Components/Pagination).
+const meta = {
+  title: "Elements/Pagination",
+  component: PaginationPageButton,
+  subcomponents: {
+    Pagination,
+    PaginationList,
+    PaginationItem,
+    PaginationArrowButton,
+    PaginationEllipsis,
+    PaginationSpinner,
+    PaginationPerPage,
+    PaginationPerPageTrigger,
+    PaginationPerPageIndicator,
+    PaginationPerPageLabel,
+    PaginationRange,
+    PaginationRangeCurrent,
+  },
+  args: { children: "1" },
+} satisfies Meta<typeof PaginationPageButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically (the Figma frame): the `Pagination` nav landmark holding
+ * the per-page region (the `layer-3` selector pill with its chevron indicator, followed by the "per
+ * page" text), the `1-50 of 250` range label with its emphasized current portion, and the
+ * `PaginationList` of controls — prev/next arrows around a truncated near-start run (`1 2 3 … 100`)
+ * with the non-interactive `PaginationEllipsis` gap marker. Page 1 pins `aria-current="page"`
+ * (which drives the selected fill) plus `disabled`, and the prev arrow is `disabled` at the start —
+ * exactly the attributes the ready-made sets.
+ */
+export const Default: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Pagination aria-label="Pagination">
+      <PaginationPerPage>
+        <PaginationPerPageTrigger aria-label="50 per page" aria-haspopup="menu">
+          50
+          <PaginationPerPageIndicator>
+            <ChevronDown />
+          </PaginationPerPageIndicator>
+        </PaginationPerPageTrigger>
+        <PaginationPerPageLabel>per page</PaginationPerPageLabel>
+      </PaginationPerPage>
+      <PaginationRange>
+        <PaginationRangeCurrent>1-50</PaginationRangeCurrent>
+        {" of "}
+        250
+      </PaginationRange>
+      <PaginationList>
+        <PaginationItem>
+          <PaginationArrowButton aria-label="Go to previous page" disabled>
+            <ArrowLeft aria-hidden />
+          </PaginationArrowButton>
+        </PaginationItem>
+        {[1, 2, 3].map((n) => (
+          <PaginationItem key={n}>
+            <PaginationPageButton
+              aria-current={n === 1 ? "page" : undefined}
+              aria-label={`Go to page ${n}`}
+              disabled={n === 1}
+            >
+              {n}
+            </PaginationPageButton>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationEllipsis>
+            <MoreHorizontal />
+          </PaginationEllipsis>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationPageButton aria-label="Go to page 100">100</PaginationPageButton>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationArrowButton aria-label="Go to next page">
+            <ArrowRight aria-hidden />
+          </PaginationArrowButton>
+        </PaginationItem>
+      </PaginationList>
+    </Pagination>
+  ),
+};
+
+/**
+ * The standalone page-number button. Its selected fill keys off `aria-current="page"` — the current
+ * page is marked `aria-current` (and `disabled` to block re-navigation), so toggling that attribute
+ * toggles the fill. The 24px slot keeps a square minimum for single digits and grows with padding
+ * for wider content.
+ */
+export const PageButton: Story = {
+  render: (args) => <PaginationPageButton {...args} aria-label="Go to page 1" />,
+};
+
+/**
+ * Every pinnable state of the three interactive slots:
+ *
+ * - **Page button** — rest; hover / focus-visible (CSS pseudo-classes, forced by the pseudo-states
+ *   addon); current (`aria-current="page"` + `disabled` — the `transparent-active` fill that keeps
+ *   `text/primary` over the plain disabled dim); disabled.
+ * - **Arrow button** — rest, hover, disabled; the second run pins `dir="rtl"`, mirroring the
+ *   directional glyphs so "previous" still points toward the start.
+ * - **Per-page trigger** — rest, hover, and open: `data-popup-open=""` (with the
+ *   `aria-expanded`/`aria-haspopup` Base UI's Menu trigger sets) rotates the chevron indicator a
+ *   half-turn via the trigger's `group`.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#pagination-page-hover", "#pagination-arrow-hover", "#pagination-per-page-hover"],
+      focusVisible: "#pagination-page-focus",
+    },
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <div className="flex items-center gap-3">
+        <PaginationPageButton id="pagination-page-rest" aria-label="Go to page 1">
+          1
+        </PaginationPageButton>
+        <PaginationPageButton id="pagination-page-hover" aria-label="Go to page 2">
+          2
+        </PaginationPageButton>
+        <PaginationPageButton id="pagination-page-focus" aria-label="Go to page 3">
+          3
+        </PaginationPageButton>
+        <PaginationPageButton
+          id="pagination-page-current"
+          aria-label="Go to page 4"
+          aria-current="page"
+          disabled
+        >
+          4
+        </PaginationPageButton>
+        <PaginationPageButton aria-label="Go to page 5" disabled>
+          5
+        </PaginationPageButton>
+      </div>
+      <div className="flex items-center gap-3">
+        <PaginationArrowButton aria-label="Go to previous page">
+          <ArrowLeft aria-hidden />
+        </PaginationArrowButton>
+        <PaginationArrowButton id="pagination-arrow-hover" aria-label="Go to next page">
+          <ArrowRight aria-hidden />
+        </PaginationArrowButton>
+        <PaginationArrowButton aria-label="Go to previous page (disabled)" disabled>
+          <ArrowLeft aria-hidden />
+        </PaginationArrowButton>
+        <div dir="rtl" className="flex items-center gap-3">
+          <PaginationArrowButton aria-label="Go to previous page (RTL)">
+            <ArrowLeft aria-hidden />
+          </PaginationArrowButton>
+          <PaginationArrowButton aria-label="Go to next page (RTL)">
+            <ArrowRight aria-hidden />
+          </PaginationArrowButton>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <PaginationPerPageTrigger aria-label="25 per page" aria-haspopup="menu">
+          25
+          <PaginationPerPageIndicator id="pagination-per-page-rest-indicator">
+            <ChevronDown />
+          </PaginationPerPageIndicator>
+        </PaginationPerPageTrigger>
+        <PaginationPerPageTrigger
+          id="pagination-per-page-hover"
+          aria-label="50 per page"
+          aria-haspopup="menu"
+        >
+          50
+          <PaginationPerPageIndicator>
+            <ChevronDown />
+          </PaginationPerPageIndicator>
+        </PaginationPerPageTrigger>
+        <PaginationPerPageTrigger
+          aria-label="100 per page"
+          aria-haspopup="menu"
+          aria-expanded
+          data-popup-open=""
+        >
+          100
+          <PaginationPerPageIndicator id="pagination-per-page-open-indicator">
+            <ChevronDown />
+          </PaginationPerPageIndicator>
+        </PaginationPerPageTrigger>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `aria-current="page"` button's selected fill (`aria-[current=page]:bg-layer-transparent-active`)
+ * computes away from the resting button's, and the open trigger's chevron rotates
+ * (`group-data-popup-open:rotate-180`) away from the resting chevron's identity transform. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const style = (id: string) => {
+      const node = canvasElement.querySelector(`#${id}`);
+      if (!(node instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(node);
+    };
+    await expect(style("pagination-page-current").backgroundColor).not.toBe(
+      style("pagination-page-rest").backgroundColor,
+    );
+    // Tailwind v4's rotate-* compiles to the standalone CSS `rotate` property.
+    await expect(style("pagination-per-page-open-indicator").rotate).not.toBe(
+      style("pagination-per-page-rest-indicator").rotate,
+    );
+  },
+};
+
+/**
+ * The in-flight state: while navigating to the current page, it renders the `PaginationSpinner`
+ * (spinning whatever glyph you pass, 14px, placeholder tint) in place of its number — pinned here
+ * on page 2 alongside its `aria-current="page"` + `disabled` markers.
+ */
+export const Loading: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <PaginationList>
+      <PaginationItem>
+        <PaginationArrowButton aria-label="Go to previous page">
+          <ArrowLeft aria-hidden />
+        </PaginationArrowButton>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationPageButton aria-label="Go to page 1">1</PaginationPageButton>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationPageButton aria-label="Go to page 2" aria-current="page" disabled>
+          <PaginationSpinner>
+            <LoaderCircle />
+          </PaginationSpinner>
+        </PaginationPageButton>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationPageButton aria-label="Go to page 3">3</PaginationPageButton>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationArrowButton aria-label="Go to next page">
+          <ArrowRight aria-hidden />
+        </PaginationArrowButton>
+      </PaginationItem>
+    </PaginationList>
+  ),
+};
diff --git a/packages/propel/src/ui/pagination/pagination.tsx b/packages/propel/src/elements/pagination/pagination.tsx
similarity index 100%
rename from packages/propel/src/ui/pagination/pagination.tsx
rename to packages/propel/src/elements/pagination/pagination.tsx
diff --git a/packages/propel/src/ui/pagination/variants.ts b/packages/propel/src/elements/pagination/variants.ts
similarity index 100%
rename from packages/propel/src/ui/pagination/variants.ts
rename to packages/propel/src/elements/pagination/variants.ts
diff --git a/packages/propel/src/elements/pill/icon-pill.tsx b/packages/propel/src/elements/pill/icon-pill.tsx
new file mode 100644
index 00000000..86e29936
--- /dev/null
+++ b/packages/propel/src/elements/pill/icon-pill.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { iconPillVariants, type IconPillVariantProps } from "./variants";
+
+export type IconPillProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  IconPillVariantProps;
+
+/**
+ * The icon-only square pill container: a styled `<button>` with no baked content. Compose a
+ * `PillIcon` (or `PillSpinner`) inside it. Base-UI-agnostic — graft the Base UI `Button` behavior
+ * in `components` via `<BaseButton render={<IconPill/>} />` (which also supplies the required
+ * `aria-label`).
+ */
+export function IconPill({ magnitude, render, ...props }: IconPillProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: iconPillVariants({ magnitude }),
+    type: "button",
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/pill/index.tsx b/packages/propel/src/elements/pill/index.tsx
new file mode 100644
index 00000000..c8298e02
--- /dev/null
+++ b/packages/propel/src/elements/pill/index.tsx
@@ -0,0 +1,4 @@
+export * from "./icon-pill";
+export * from "./pill";
+export * from "./pill-label";
+export * from "./pill-switch";
diff --git a/packages/propel/src/ui/pill/pill-label.tsx b/packages/propel/src/elements/pill/pill-label.tsx
similarity index 100%
rename from packages/propel/src/ui/pill/pill-label.tsx
rename to packages/propel/src/elements/pill/pill-label.tsx
diff --git a/packages/propel/src/ui/pill/pill-switch.tsx b/packages/propel/src/elements/pill/pill-switch.tsx
similarity index 76%
rename from packages/propel/src/ui/pill/pill-switch.tsx
rename to packages/propel/src/elements/pill/pill-switch.tsx
index ce074dce..2708f9c8 100644
--- a/packages/propel/src/ui/pill/pill-switch.tsx
+++ b/packages/propel/src/elements/pill/pill-switch.tsx
@@ -9,9 +9,10 @@ export type PillSwitchProps = Omit<useRender.ComponentProps<"button">, "classNam
 /**
  * The toggle pill container. Renders a `<button>` by default carrying the selected look as its
  * pressed state (the cva styles `data-pressed`); compose a `PillLabel` and optional
- * leading/trailing `PillIcon` inside it. It does NOT embed any toggle behavior, keeping `ui/pill`
- * independent of the Toggle primitive: a switch composition grafts the behavior on by rendering it
- * as a toggle — `render={<Toggle />}` (the styled button stays the outer element).
+ * leading/trailing `PillIcon` inside it. It does NOT embed any toggle behavior, keeping
+ * `elements/pill` independent of the Toggle primitive: a switch composition grafts the behavior on
+ * in `components` by rendering the styled button as the `Toggle`'s render target — `<Toggle
+ * render={<PillSwitch/>} />`.
  */
 export function PillSwitch({ magnitude, render, ...props }: PillSwitchProps) {
   return useRender({
diff --git a/packages/propel/src/elements/pill/pill.stories.tsx b/packages/propel/src/elements/pill/pill.stories.tsx
new file mode 100644
index 00000000..af8b8f0b
--- /dev/null
+++ b/packages/propel/src/elements/pill/pill.stories.tsx
@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, LoaderCircle, Plus, Tag, X } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { Spinner } from "../../internal/spinner";
+import { IconPill, PillButton, PillLabel, type PillMagnitude, PillSwitch } from "./index";
+
+const MAGNITUDES: PillMagnitude[] = ["sm", "md", "lg"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled pill containers
+// (PillButton / PillSwitch / IconPill) and inline parts (PillLabel, internal Icon/Spinner slots)
+// render DIRECTLY — no Base UI grafts — with every visual axis (`magnitude`) shown and every
+// visual state pinned statically via the attributes the cvas key off: `disabled` is the native
+// attribute, busy pins the `aria-busy` (+ `aria-disabled`) the ready-made pills set while
+// `loading`, and the switch's selected look pins the `data-pressed=""`/`aria-pressed` Base UI's
+// `Toggle` would set. Hover / active / focus-visible are CSS pseudo-classes, forced by the
+// pseudo-states addon. Grafting, keyboard, and aria behavior are demonstrated AND tested in the
+// ready-made pills (Components/Pill), which compose these parts.
+const meta = {
+  title: "Elements/Pill",
+  component: PillButton,
+  subcomponents: { PillSwitch, IconPill, PillLabel },
+  args: { magnitude: "md", children: "Add label" },
+  render: ({ children, ...props }) => (
+    <PillButton {...props}>
+      <Icon>
+        <Tag />
+      </Icon>
+      <PillLabel>{children}</PillLabel>
+    </PillButton>
+  ),
+  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>;
+
+/**
+ * The atomic parts assembled: `PillButton` container › internal `Icon` slot › `PillLabel`. The
+ * ready-made `PillButton` (Components/Pill) lays these out for you and adds the loading state.
+ */
+export const Button: Story = {};
+
+/** Every magnitude (`sm` / `md` / `lg`) of the `PillButton` container. */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <PillButton key={magnitude} magnitude={magnitude}>
+          <Icon>
+            <Tag />
+          </Icon>
+          <PillLabel>{magnitude}</PillLabel>
+        </PillButton>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every visual state of `PillButton`, pinned statically. Hover / active / focus-visible are CSS
+ * pseudo-classes forced by the pseudo-states addon; `disabled` is the native attribute the
+ * `disabled:` palette keys off; busy pins the `aria-busy` (+ `aria-disabled`) the ready-made pill
+ * sets while `loading` — it swaps the leading node for the internal `Spinner` slot and keeps the
+ * button focusable instead of natively disabling it.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#pill-button-hover"],
+      active: ["#pill-button-active"],
+      focusVisible: ["#pill-button-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <PillButton magnitude="md">
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Default</PillLabel>
+      </PillButton>
+      <PillButton id="pill-button-hover" magnitude="md">
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Hover</PillLabel>
+      </PillButton>
+      <PillButton id="pill-button-active" magnitude="md">
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Active</PillLabel>
+      </PillButton>
+      <PillButton id="pill-button-focus" magnitude="md">
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Focus</PillLabel>
+      </PillButton>
+      <PillButton magnitude="md" disabled>
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Disabled</PillLabel>
+      </PillButton>
+      <PillButton magnitude="md" aria-busy aria-disabled>
+        <Spinner>
+          <LoaderCircle />
+        </Spinner>
+        <PillLabel>Busy</PillLabel>
+      </PillButton>
+    </div>
+  ),
+};
+
+/**
+ * The `PillSwitch` container: the selected look is its pressed state, pinned here via the
+ * `data-pressed=""` / `aria-pressed` Base UI's `Toggle` sets on its rendered button. The toggle
+ * behavior itself is grafted in the ready-made `PillSwitch` (Components/Pill) via `<Toggle
+ * render={<PillSwitch/>} />`.
+ */
+export const Switch: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: ["#pill-switch-hover"] },
+  },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <PillSwitch magnitude="md" aria-pressed={false}>
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Off</PillLabel>
+      </PillSwitch>
+      <PillSwitch magnitude="md" data-pressed="" aria-pressed>
+        <Icon>
+          <Check />
+        </Icon>
+        <PillLabel>On</PillLabel>
+      </PillSwitch>
+      <PillSwitch id="pill-switch-hover" magnitude="md" aria-pressed={false}>
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Hover</PillLabel>
+      </PillSwitch>
+      <PillSwitch magnitude="md" aria-pressed={false} disabled>
+        <Icon>
+          <Tag />
+        </Icon>
+        <PillLabel>Disabled</PillLabel>
+      </PillSwitch>
+    </div>
+  ),
+};
+
+/**
+ * Icon-only `IconPill` containers. Require an `aria-label`. Second row pins the states: hover /
+ * active / focus-visible via the pseudo-states addon, native `disabled`, and busy (`aria-busy` +
+ * `aria-disabled` with the internal `Spinner` slot replacing the icon).
+ */
+export const Icons: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#icon-pill-hover"],
+      active: ["#icon-pill-active"],
+      focusVisible: ["#icon-pill-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        {MAGNITUDES.map((magnitude) => (
+          <IconPill key={magnitude} magnitude={magnitude} aria-label={`Close ${magnitude}`}>
+            <Icon>
+              <X />
+            </Icon>
+          </IconPill>
+        ))}
+      </div>
+      <div className="flex items-center gap-3">
+        <IconPill id="icon-pill-hover" magnitude="md" aria-label="Add (hover)">
+          <Icon>
+            <Plus />
+          </Icon>
+        </IconPill>
+        <IconPill id="icon-pill-active" magnitude="md" aria-label="Add (active)">
+          <Icon>
+            <Plus />
+          </Icon>
+        </IconPill>
+        <IconPill id="icon-pill-focus" magnitude="md" aria-label="Add (focus)">
+          <Icon>
+            <Plus />
+          </Icon>
+        </IconPill>
+        <IconPill magnitude="md" aria-label="Add (disabled)" disabled>
+          <Icon>
+            <Plus />
+          </Icon>
+        </IconPill>
+        <IconPill magnitude="md" aria-label="Add (busy)" aria-busy aria-disabled>
+          <Spinner>
+            <LoaderCircle />
+          </Spinner>
+        </IconPill>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned `data-pressed` selector actually compiled — the pressed
+ * switch's fill (`data-pressed:bg-layer-2-selected`) computes differently from the resting fill
+ * (`bg-layer-2`). Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const SwitchCanary: Story = {
+  ...Switch,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const fill = (name: string) =>
+      getComputedStyle(canvas.getByRole("button", { name })).backgroundColor;
+    await expect(fill("On")).not.toBe(fill("Off"));
+  },
+};
diff --git a/packages/propel/src/elements/pill/pill.tsx b/packages/propel/src/elements/pill/pill.tsx
new file mode 100644
index 00000000..6d3d5e02
--- /dev/null
+++ b/packages/propel/src/elements/pill/pill.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { pillButtonVariants, type PillButtonVariantProps } from "./variants";
+
+export type { PillMagnitude } from "./variants";
+
+export type PillButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  PillButtonVariantProps;
+
+/**
+ * The pill-shaped button container: a styled `<button>` with no baked content. Compose a
+ * `PillLabel` and optional leading/trailing `PillIcon` (or `PillSpinner`) inside it.
+ * Base-UI-agnostic — graft the Base UI `Button` behavior in `components` via `<BaseButton
+ * render={<PillButton/>} />`.
+ */
+export function PillButton({ magnitude, render, ...props }: PillButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: pillButtonVariants({ magnitude }),
+    type: "button",
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/pill/variants.ts b/packages/propel/src/elements/pill/variants.ts
new file mode 100644
index 00000000..2ac05288
--- /dev/null
+++ b/packages/propel/src/elements/pill/variants.ts
@@ -0,0 +1,99 @@
+import { cva, cx } from "class-variance-authority";
+
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// "Always the same" per Figma design spec (issue #142):
+// - Pill-shaped border-radius (fully rounded ends)
+// - Inline-flex layout with centered content
+// - Height, horizontal padding, font size per size step
+// - Font weight
+// - Single-line text (no wrapping)
+// - Hover/press/disabled/loading visual treatment
+// - Leading/trailing node position (inline-start / inline-end), sized per size step
+//
+// "Depends (adjustable)" → props: label (children), leading/trailing node, magnitude,
+// selected/unselected (PillSwitch pressed state), disabled, and which interactive part
+// (PillButton vs PillSwitch vs IconPill). magnitude has no sensible default, so it is a
+// required prop on every container part — no cva `defaultVariants`.
+
+// Shared structural base baked into every pill container cva below.
+const pillBase =
+  "inline-flex shrink-0 items-center justify-center rounded-full border-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent-strong";
+
+// Shared label-pill base (PillButton + PillSwitch): a 14px node scale, capped width, and
+// per-magnitude height/padding/font.
+const labelPillBase = cx(pillBase, "max-w-[120px] gap-1 py-1 [--node-size:0.875rem]");
+
+const labelPillMagnitude = {
+  sm: "h-5 px-1.5 text-12",
+  md: "h-6 px-1.5 text-13",
+  lg: "h-7 px-2 text-body-sm-regular",
+} as const;
+
+// ─── Containers (one styled element each) ────────────────────────────────────
+
+export const pillButtonVariants = cva(
+  [
+    labelPillBase,
+    "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",
+  ],
+  {
+    variants: { magnitude: labelPillMagnitude },
+  },
+);
+
+// No `defaultVariants` today, so every axis is required.
+export type PillButtonVariantProps = StrictVariantProps<typeof pillButtonVariants>;
+
+export const pillSwitchVariants = cva(
+  [
+    labelPillBase,
+    "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",
+  ],
+  {
+    variants: { magnitude: labelPillMagnitude },
+  },
+);
+
+// No `defaultVariants` today, so every axis is required.
+export type PillSwitchVariantProps = StrictVariantProps<typeof pillSwitchVariants>;
+
+export const iconPillVariants = cva(
+  [
+    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]",
+      },
+    },
+  },
+);
+
+// No `defaultVariants` today, so every axis is required.
+export type IconPillVariantProps = StrictVariantProps<typeof iconPillVariants>;
+
+// ─── Inline parts (one element each) ─────────────────────────────────────────
+
+// The single-line label inside a label pill. `min-w-0` lets it shrink and `truncate`
+// keeps it on one line per the Figma spec.
+export const pillLabelVariants = cva("min-w-0 truncate");
+
+export type PillMagnitude = NonNullable<
+  NonNullable<Parameters<typeof pillButtonVariants>[0]>["magnitude"]
+>;
diff --git a/packages/propel/src/elements/popover/index.tsx b/packages/propel/src/elements/popover/index.tsx
new file mode 100644
index 00000000..c17e32fa
--- /dev/null
+++ b/packages/propel/src/elements/popover/index.tsx
@@ -0,0 +1,7 @@
+export * from "./popover-actions";
+export * from "./popover-arrow";
+export * from "./popover-body";
+export * from "./popover-close";
+export * from "./popover-intro";
+export * from "./popover-panel-popup";
+export * from "./popover-popup";
diff --git a/packages/propel/src/elements/popover/popover-actions.tsx b/packages/propel/src/elements/popover/popover-actions.tsx
new file mode 100644
index 00000000..406efce8
--- /dev/null
+++ b/packages/propel/src/elements/popover/popover-actions.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { popoverActionsVariants } from "./variants";
+
+/** Props for {@link PopoverActions}. */
+export type PopoverActionsProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The popup's trailing controls row (e.g. a `PopoverClose` styled as a `Button`). Pushes its
+ * children to the inline-end and spaces them by a gap. Sits as a child of `PopoverBody`.
+ */
+export function PopoverActions({ render, ...props }: PopoverActionsProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: popoverActionsVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/popover/popover-arrow.tsx b/packages/propel/src/elements/popover/popover-arrow.tsx
new file mode 100644
index 00000000..55e9e36a
--- /dev/null
+++ b/packages/propel/src/elements/popover/popover-arrow.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { popoverArrowVariants } from "./variants";
+
+/** Props for {@link PopoverArrow}. */
+export type PopoverArrowProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The popover's caret — a small rotated square clipped to a triangle that points back at the
+ * trigger, its offset and clip switching per `data-[side]`. Base-UI-agnostic — graft in
+ * `components` via `<BasePopover.Arrow render={<PopoverArrow/>} />`.
+ */
+export function PopoverArrow({ render, ...props }: PopoverArrowProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: popoverArrowVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/popover/popover-body.tsx b/packages/propel/src/elements/popover/popover-body.tsx
similarity index 100%
rename from packages/propel/src/ui/popover/popover-body.tsx
rename to packages/propel/src/elements/popover/popover-body.tsx
diff --git a/packages/propel/src/elements/popover/popover-close.tsx b/packages/propel/src/elements/popover/popover-close.tsx
new file mode 100644
index 00000000..6296ab1b
--- /dev/null
+++ b/packages/propel/src/elements/popover/popover-close.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { popoverCloseVariants } from "./variants";
+
+/** Props for {@link PopoverClose}. */
+export type PopoverCloseProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * The bare button that dismisses the popover — no icon-button chrome baked in, just a focus ring.
+ * Base-UI-agnostic — graft in `components` via `<BasePopover.Close render={<PopoverClose/>} />`; to
+ * give it a fuller look, graft the close behavior onto a `Button` instead (`<BasePopover.Close
+ * render={<Button…/>} />`).
+ */
+export function PopoverClose({ render, ...props }: PopoverCloseProps) {
+  const defaultProps: useRender.ElementProps<"button"> = { className: popoverCloseVariants() };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/popover/popover-intro.tsx b/packages/propel/src/elements/popover/popover-intro.tsx
similarity index 78%
rename from packages/propel/src/ui/popover/popover-intro.tsx
rename to packages/propel/src/elements/popover/popover-intro.tsx
index b21f668a..41aa3c63 100644
--- a/packages/propel/src/ui/popover/popover-intro.tsx
+++ b/packages/propel/src/elements/popover/popover-intro.tsx
@@ -7,8 +7,8 @@ import { popoverIntroVariants } from "./variants";
 export type PopoverIntroProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
 
 /**
- * The popup's leading text group — a `PopoverTitle` stacked over a `PopoverDescription`, spaced by
- * a tight gap. Sits as a child of `PopoverBody`.
+ * The popup's leading text group — an `OverlayTitle` stacked over an `OverlayDescription`, spaced
+ * by a tight gap. Sits as a child of `PopoverBody`.
  */
 export function PopoverIntro({ render, ...props }: PopoverIntroProps) {
   const defaultProps: useRender.ElementProps<"div"> = { className: popoverIntroVariants() };
diff --git a/packages/propel/src/elements/popover/popover-panel-popup.tsx b/packages/propel/src/elements/popover/popover-panel-popup.tsx
new file mode 100644
index 00000000..9ff72e4f
--- /dev/null
+++ b/packages/propel/src/elements/popover/popover-panel-popup.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { popoverPanelPopupVariants } from "./variants";
+
+/** Props for {@link PopoverPanelPopup}. */
+export type PopoverPanelPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The popup as the scroll body of an elevated panel surface. Carries only the inner padding +
+ * focus-outline reset — the surrounding panel supplies the surface chrome (border, background,
+ * shadow, radius), so this never doubles it up. Base-UI-agnostic — graft in `components` via
+ * `<BasePopover.Popup render={<PopoverPanelPopup/>} />`. Use {@link PopoverPopup} for a
+ * self-contained popup that is its own surface.
+ */
+export function PopoverPanelPopup({ render, ...props }: PopoverPanelPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: popoverPanelPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/popover/popover-popup.tsx b/packages/propel/src/elements/popover/popover-popup.tsx
new file mode 100644
index 00000000..17d5ccde
--- /dev/null
+++ b/packages/propel/src/elements/popover/popover-popup.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { popoverPopupVariants } from "./variants";
+
+/** Props for {@link PopoverPopup}. */
+export type PopoverPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The self-contained popup surface — an elevated card carrying its own border, background, shadow,
+ * radius, and the open/close scale-fade. Base-UI-agnostic — graft in `components` via
+ * `<BasePopover.Popup render={<PopoverPopup/>} />`. Use {@link PopoverPanelPopup} for a bare scroll
+ * body inside an elevated panel that supplies the surface chrome.
+ */
+export function PopoverPopup({ render, ...props }: PopoverPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: popoverPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/popover/popover.stories.tsx b/packages/propel/src/elements/popover/popover.stories.tsx
new file mode 100644
index 00000000..4692daa3
--- /dev/null
+++ b/packages/propel/src/elements/popover/popover.stories.tsx
@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { OverlayDescription } from "../../internal/overlay-description";
+import { OverlayTitle } from "../../internal/overlay-title";
+import { Button, ButtonLabel } from "../button";
+import {
+  PopoverActions,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverIntro,
+  PopoverPanelPopup,
+  PopoverPopup,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — inline instead of portaled/positioned, with every visual state
+// pinned statically via the `data-*` attributes Base UI's popover would set (`data-side` on the
+// arrow, `data-starting-style=""`/`data-ending-style=""` on the popup). The Root, Trigger, Portal,
+// Positioner, Backdrop, and Viewport are behavior-only or shared `internal` roles (they live in
+// `components`/`internal`); the title and description use the shared `internal/overlay-*` recipes
+// at the popover's `md` size. Opening, dismissal, focus, and aria behavior are demonstrated AND
+// tested in Components/Popover.
+const meta = {
+  title: "Elements/Popover",
+  component: PopoverPopup,
+  subcomponents: {
+    PopoverPanelPopup,
+    PopoverBody,
+    PopoverIntro,
+    PopoverActions,
+    PopoverArrow,
+    PopoverClose,
+  },
+} satisfies Meta<typeof PopoverPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically, as Base UI would lay it out open below its trigger:
+ * `PopoverPopup` (the self-contained elevated surface) holds a `PopoverBody` stacking a
+ * `PopoverIntro` (the shared `OverlayTitle` + `OverlayDescription` at the popover's `md` size) over
+ * a `PopoverActions` row, and the `PopoverArrow` — pinned `data-side="bottom"` and parked at the
+ * top edge by a demo wrapper (Base UI's positioner owns the real placement) — points back at the
+ * would-be trigger.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="relative w-fit pt-2">
+      <PopoverPopup>
+        <PopoverBody>
+          <PopoverIntro>
+            <OverlayTitle magnitude="md">Keyboard shortcuts</OverlayTitle>
+            <OverlayDescription magnitude="md">
+              Press <kbd>?</kbd> anywhere to see the full list.
+            </OverlayDescription>
+          </PopoverIntro>
+          <PopoverActions>
+            <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+              <ButtonLabel>Got it</ButtonLabel>
+            </Button>
+          </PopoverActions>
+        </PopoverBody>
+      </PopoverPopup>
+      <div className="absolute inset-s-8 top-1" aria-hidden="true">
+        <PopoverArrow data-side="bottom" />
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * The two popup surfaces:
+ *
+ * - **`PopoverPopup`** — self-contained: the shared popup surface chrome (subtle border, `layer-1`
+ *   fill, overlay shadow, `rounded-lg`, the open/close scale-fade) plus the `max-w-xs`
+ *   readable-column cap.
+ * - **`PopoverPanelPopup`** — the bare scroll body used when an elevated panel supplies the surface
+ *   (the components-tier `PopoverContent` wraps it in the shared overlay panel): only the inner
+ *   padding + focus-outline reset, never border/bg/shadow/radius, which would double up with the
+ *   panel. The demo frame stands in for that panel chrome so the two read side by side.
+ */
+export const Surfaces: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">PopoverPopup — self-contained surface</p>
+        <PopoverPopup>
+          <PopoverBody>
+            <PopoverIntro>
+              <OverlayTitle magnitude="md">Self-contained</OverlayTitle>
+              <OverlayDescription magnitude="md">
+                Carries its own border, fill, shadow, and radius.
+              </OverlayDescription>
+            </PopoverIntro>
+          </PopoverBody>
+        </PopoverPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">PopoverPanelPopup — bare body, chrome from panel</p>
+        <div className="w-72 rounded-lg border-sm border-subtle bg-layer-1 shadow-overlay-100">
+          <PopoverPanelPopup>
+            <PopoverBody>
+              <PopoverIntro>
+                <OverlayTitle magnitude="md">Panel body</OverlayTitle>
+                <OverlayDescription magnitude="md">
+                  Padding only — the surrounding panel owns the surface.
+                </OverlayDescription>
+              </PopoverIntro>
+            </PopoverBody>
+          </PopoverPanelPopup>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+const ARROW_SIDES = ["top", "bottom", "left", "right", "inline-start", "inline-end"] as const;
+
+/**
+ * The caret's placement axis: `data-side` — the attribute Base UI's positioner sets to report which
+ * side of the trigger the popup resolved to — switches the rotated square's clip-path (and, under
+ * the positioner's absolute placement, its `-3px` edge offset) so the visible triangle always
+ * points back at the trigger. The logical `inline-start`/`inline-end` values flip their clip under
+ * RTL.
+ */
+export const ArrowSides: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-start gap-4">
+      {ARROW_SIDES.map((side) => (
+        <div key={side} className="flex flex-col items-center gap-2">
+          <p className="text-12 text-tertiary">{side}</p>
+          <div
+            className="flex size-10 items-center justify-center rounded-md border-sm border-subtle"
+            aria-hidden="true"
+          >
+            <PopoverArrow data-side={side} />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * `PopoverClose` is deliberately bare at the elements tier — a plain `<button>` carrying only the
+ * focus-visible ring, for inline dismiss affordances inside arbitrary popover content. For a fuller
+ * look, the components tier grafts the close behavior onto a `Button` instead; both render targets
+ * sit side by side here.
+ */
+export const Close: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Bare PopoverClose</p>
+        <PopoverClose>Dismiss</PopoverClose>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Close grafted onto a Button</p>
+        <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
+          <ButtonLabel>Close</ButtonLabel>
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * The popup's transition poses, pinned statically:
+ *
+ * - **Resting** — the open pose: full opacity, natural scale.
+ * - **Entering** — `data-starting-style=""` pins the pre-open endpoint of the transition (`opacity-0
+ *   scale-95`), so the card is intentionally invisible while holding its layout.
+ * - **Exiting** — `data-ending-style=""` pins the same faded, scaled-down endpoint on the way closed.
+ */
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Resting</p>
+        <PopoverPopup id="popover-popup-resting">
+          <PopoverBody>
+            <PopoverIntro>
+              <OverlayTitle magnitude="md">Resting</OverlayTitle>
+              <OverlayDescription magnitude="md">The open pose.</OverlayDescription>
+            </PopoverIntro>
+          </PopoverBody>
+        </PopoverPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Entering (data-starting-style) — invisible</p>
+        <PopoverPopup id="popover-popup-entering" data-starting-style="">
+          <PopoverBody>
+            <PopoverIntro>
+              <OverlayTitle magnitude="md">Entering</OverlayTitle>
+              <OverlayDescription magnitude="md">Pinned at opacity-0 scale-95.</OverlayDescription>
+            </PopoverIntro>
+          </PopoverBody>
+        </PopoverPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Exiting (data-ending-style) — invisible</p>
+        <PopoverPopup id="popover-popup-exiting" data-ending-style="">
+          <PopoverBody>
+            <PopoverIntro>
+              <OverlayTitle magnitude="md">Exiting</OverlayTitle>
+              <OverlayDescription magnitude="md">Pinned at opacity-0 scale-95.</OverlayDescription>
+            </PopoverIntro>
+          </PopoverBody>
+        </PopoverPopup>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-starting-style`/`data-ending-style` popups compute to opacity 0 while the resting popup
+ * stays fully opaque. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const popup = (id: string) => {
+      const el = canvasElement.querySelector(`#${id}`);
+      if (!(el instanceof HTMLElement)) throw new Error(`missing #${id} popup`);
+      return el;
+    };
+    // The compiled `data-starting-style:opacity-0` / `data-ending-style:opacity-0` selectors pin
+    // the transition endpoints; the resting popup carries neither attribute.
+    await expect(getComputedStyle(popup("popover-popup-resting")).opacity).toBe("1");
+    await expect(getComputedStyle(popup("popover-popup-entering")).opacity).toBe("0");
+    await expect(getComputedStyle(popup("popover-popup-exiting")).opacity).toBe("0");
+  },
+};
diff --git a/packages/propel/src/elements/popover/variants.ts b/packages/propel/src/elements/popover/variants.ts
new file mode 100644
index 00000000..d70c7f2a
--- /dev/null
+++ b/packages/propel/src/elements/popover/variants.ts
@@ -0,0 +1,42 @@
+import { cva, cx } from "class-variance-authority";
+
+import { overlayActionsClass } from "../../internal/overlay-frame";
+import { popupSurfaceClass } from "../../internal/popup-surface";
+
+// Spec "always the same": shadow/elevation, border-radius, max-width constraint, and
+// the open/close scale-fade. `max-w-xs` caps the popup at a readable column width.
+export const popoverPopupVariants = cva(cx(popupSurfaceClass, "max-w-xs p-1"));
+// The padded content column inside the popup: stacks its children vertically and
+// supplies the internal padding (the bare popup carries only the surface chrome).
+// The gap spaces sibling layout regions — e.g. an intro from an actions row — so
+// regions are separated by the parent's gap, never a margin on a child.
+export const popoverBodyVariants = cva("flex flex-col gap-2 p-2");
+// The popup's leading text group: an `OverlayTitle` stacked over an
+// `OverlayDescription`, spaced by a tight gap.
+export const popoverIntroVariants = cva("flex flex-col gap-1");
+// The popup's trailing controls row (e.g. a `PopoverClose` styled as a button):
+// pushes its children to the inline-end and spaces them by a gap.
+export const popoverActionsVariants = cva(overlayActionsClass);
+// The bare scroll-body popup used inside an elevated panel surface (see the
+// components-tier `PopoverContent`, which supplies the surface chrome via the shared
+// overlay panel). Carries only the inner padding + focus outline reset — never the
+// border / bg / shadow / radius, which would double up with the panel surface. The
+// standalone `popoverPopupVariants` (above) is the self-contained surface used when
+// the popup is NOT wrapped in a panel.
+export const popoverPanelPopupVariants = cva("p-1 outline-none");
+export const popoverArrowVariants = cva(
+  "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%)]",
+);
+// PopoverClose is a bare button at the elements tier — no icon-button styles baked in.
+// Graft the close behavior onto it via `BasePopover.Close render={<PopoverClose />}`;
+// to give it a fuller look, graft the behavior onto a `Button` instead
+// (`BasePopover.Close render={<Button … />}`). See the Modal story for the pattern.
+export const popoverCloseVariants = cva(
+  "outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
+);
diff --git a/packages/propel/src/elements/preview-card/index.tsx b/packages/propel/src/elements/preview-card/index.tsx
new file mode 100644
index 00000000..138f35e4
--- /dev/null
+++ b/packages/propel/src/elements/preview-card/index.tsx
@@ -0,0 +1,3 @@
+export * from "./preview-card-body";
+export * from "./preview-card-image";
+export * from "./preview-card-popup";
diff --git a/packages/propel/src/elements/preview-card/preview-card-body.tsx b/packages/propel/src/elements/preview-card/preview-card-body.tsx
new file mode 100644
index 00000000..3a69705a
--- /dev/null
+++ b/packages/propel/src/elements/preview-card/preview-card-body.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { previewCardBodyVariants } from "./variants";
+
+export type PreviewCardBodyProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The text content area of the card — typically holds a `PreviewCardTitle` and
+ * `PreviewCardDescription` stacked in a column. Owns the padding so a full-bleed `PreviewCardImage`
+ * can sit edge-to-edge above it; both the column layout and the padding are "always the same" per
+ * the design spec.
+ */
+export function PreviewCardBody({ render, ...props }: PreviewCardBodyProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: previewCardBodyVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/preview-card/preview-card-image.tsx b/packages/propel/src/elements/preview-card/preview-card-image.tsx
new file mode 100644
index 00000000..b8956f72
--- /dev/null
+++ b/packages/propel/src/elements/preview-card/preview-card-image.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { previewCardImageVariants } from "./variants";
+
+export type PreviewCardImageProps = Omit<useRender.ComponentProps<"img">, "className" | "style">;
+
+/**
+ * The thumbnail image shown inside the popup. Bakes in overflow-hidden and object-cover so the
+ * thumbnail always clips and fills its container — these are "always the same" per the design spec.
+ * Width and height are set by the consumer's layout.
+ */
+export function PreviewCardImage({ render, ...props }: PreviewCardImageProps) {
+  const defaultProps: useRender.ElementProps<"img"> = { className: previewCardImageVariants() };
+  return useRender({ defaultTagName: "img", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/preview-card/preview-card-popup.tsx b/packages/propel/src/elements/preview-card/preview-card-popup.tsx
new file mode 100644
index 00000000..1cc1470b
--- /dev/null
+++ b/packages/propel/src/elements/preview-card/preview-card-popup.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { previewCardPopupVariants } from "./variants";
+
+export type PreviewCardPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled card surface that holds the rich link preview. Graft in `components` via
+ * `<BasePreviewCard.Popup render={<PreviewCardPopup />} />`.
+ */
+export function PreviewCardPopup({ render, ...props }: PreviewCardPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: previewCardPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/preview-card/preview-card.stories.tsx b/packages/propel/src/elements/preview-card/preview-card.stories.tsx
new file mode 100644
index 00000000..4e2a1297
--- /dev/null
+++ b/packages/propel/src/elements/preview-card/preview-card.stories.tsx
@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { OverlayDescription } from "../../internal/overlay-description";
+import { OverlayTitle } from "../../internal/overlay-title";
+import { PreviewCardBody, PreviewCardImage, PreviewCardPopup } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the popup laid out inline (it is just a styled div; Base UI
+// only positions it) and its transition poses pinned statically via the `data-starting-style`/
+// `data-ending-style` attributes Base UI's preview card would set. The Root, Trigger, and Portal
+// are behavior-only roles (they live in `components`); the positioner, backdrop, and arrow are
+// shared `internal/` chrome grafted there too. The title and description compose the shared
+// `internal/overlay-*` recipes at the preview card's `md` size. Hover-open, dismissal, and aria
+// behavior are demonstrated AND tested in the components-tier story (Components/PreviewCard).
+
+const meta = {
+  title: "Elements/PreviewCard",
+  component: PreviewCardPopup,
+  subcomponents: {
+    PreviewCardBody,
+    PreviewCardImage,
+  },
+} satisfies Meta<typeof PreviewCardPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically, as Base UI would lay it out while open: the
+ * `PreviewCardPopup` card surface (a bare `max-w-80` popup surface — the padding lives on the body
+ * so a full-bleed image could sit edge-to-edge) holding a `PreviewCardBody` that stacks the shared
+ * `OverlayTitle` above the shared `OverlayDescription`, both at the preview card's `md` size.
+ */
+export const Default: Story = {
+  render: () => (
+    <PreviewCardPopup>
+      <PreviewCardBody>
+        <OverlayTitle magnitude="md">Plane</OverlayTitle>
+        <OverlayDescription magnitude="md">
+          Open-source project management for issues, sprints, and roadmaps.
+        </OverlayDescription>
+      </PreviewCardBody>
+    </PreviewCardPopup>
+  ),
+};
+
+/**
+ * The thumbnail configuration: `PreviewCardImage` sits above the text body and bakes in the clip +
+ * cover-fit treatment (`overflow-hidden`, `object-cover`, self-rounding so the popup needs no
+ * `overflow-hidden` that would clip an arrow); the consumer supplies only `src`/`alt` and the
+ * intrinsic dimensions.
+ */
+export const WithImage: Story = {
+  render: () => (
+    <PreviewCardPopup>
+      <PreviewCardImage
+        src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
+        alt="Station signage set in large, high-contrast lettering"
+        width={320}
+        height={214}
+      />
+      <PreviewCardBody>
+        <OverlayTitle magnitude="md">Brand guidelines</OverlayTitle>
+        <OverlayDescription magnitude="md">
+          Typography, color, and logo usage for everything Plane ships.
+        </OverlayDescription>
+      </PreviewCardBody>
+    </PreviewCardPopup>
+  ),
+};
+
+/**
+ * The popup's transition poses, pinned statically:
+ *
+ * - **Resting** — the open pose: full opacity, natural scale.
+ * - **Entering** — `data-starting-style=""` pins the pre-open endpoint of the transition (`opacity-0
+ *   scale-95`), so the card is intentionally invisible while holding its layout.
+ * - **Exiting** — `data-ending-style=""` pins the same faded, scaled-down endpoint on the way closed.
+ */
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Resting</p>
+        <PreviewCardPopup id="preview-card-popup-resting">
+          <PreviewCardBody>
+            <OverlayTitle magnitude="md">Resting</OverlayTitle>
+            <OverlayDescription magnitude="md">The open pose.</OverlayDescription>
+          </PreviewCardBody>
+        </PreviewCardPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Entering (data-starting-style) — invisible</p>
+        <PreviewCardPopup id="preview-card-popup-entering" data-starting-style="">
+          <PreviewCardBody>
+            <OverlayTitle magnitude="md">Entering</OverlayTitle>
+            <OverlayDescription magnitude="md">Pinned at opacity-0 scale-95.</OverlayDescription>
+          </PreviewCardBody>
+        </PreviewCardPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Exiting (data-ending-style) — invisible</p>
+        <PreviewCardPopup id="preview-card-popup-exiting" data-ending-style="">
+          <PreviewCardBody>
+            <OverlayTitle magnitude="md">Exiting</OverlayTitle>
+            <OverlayDescription magnitude="md">Pinned at opacity-0 scale-95.</OverlayDescription>
+          </PreviewCardBody>
+        </PreviewCardPopup>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-starting-style`/`data-ending-style` popups compute to opacity 0 while the resting popup
+ * stays fully opaque. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const popup = (id: string) => {
+      const el = canvasElement.querySelector(`#${id}`);
+      if (!(el instanceof HTMLElement)) throw new Error(`missing #${id} popup`);
+      return el;
+    };
+    // The compiled `data-starting-style:opacity-0` / `data-ending-style:opacity-0` selectors pin
+    // the transition endpoints; the resting popup carries neither attribute.
+    await expect(getComputedStyle(popup("preview-card-popup-resting")).opacity).toBe("1");
+    await expect(getComputedStyle(popup("preview-card-popup-entering")).opacity).toBe("0");
+    await expect(getComputedStyle(popup("preview-card-popup-exiting")).opacity).toBe("0");
+  },
+};
diff --git a/packages/propel/src/elements/preview-card/variants.ts b/packages/propel/src/elements/preview-card/variants.ts
new file mode 100644
index 00000000..73075ac9
--- /dev/null
+++ b/packages/propel/src/elements/preview-card/variants.ts
@@ -0,0 +1,33 @@
+import { cva, cx } from "class-variance-authority";
+
+import { popupSurfaceClass } from "../../internal/popup-surface";
+
+// Preview Card wraps 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 the styled parts that are UNIQUE to
+// this family — Popup, Body, and Image. The shared overlay chrome (positioner,
+// backdrop, arrow, title, description) is adopted from `internal/` (rule 4a) and no
+// longer lives here.
+//
+// Body and Image are propel extensions with no Base UI counterpart; their styles
+// encode the "always the same" items from the design spec: the text content area's
+// layout + padding (Body) and the image overflow/cover-fit (Image).
+
+// The card surface. Padding lives on `PreviewCardBody` (per the spec, padding is
+// "within the text content area") rather than here, so the popup is the bare
+// surface: a `PreviewCardImage` clips itself (it carries its own overflow-hidden +
+// rounding) and the body supplies its own padding. The popup keeps no inner padding
+// so the arrow is never clipped. `max-w-80` keeps the link-preview content to a
+// comfortable width.
+export const previewCardPopupVariants = cva(cx(popupSurfaceClass, "max-w-80"));
+
+// Body: the text content area. Per the spec, the content layout (a column with the
+// title above the description) and the padding around it are "always the same", so
+// they live here rather than in the consumer's composition.
+export const previewCardBodyVariants = cva("flex flex-col gap-1 p-3");
+
+// Image: overflow-hidden + object-cover bake in the "always the same" thumbnail
+// treatment from the design spec (clip + cover-fit); the image rounds itself so it
+// can sit inside the popup without the popup needing overflow-hidden (which would
+// clip the arrow). Width/height are set by the consumer's layout.
+export const previewCardImageVariants = cva("overflow-hidden rounded-md object-cover");
diff --git a/packages/propel/src/ui/radio/index.tsx b/packages/propel/src/elements/radio/index.tsx
similarity index 100%
rename from packages/propel/src/ui/radio/index.tsx
rename to packages/propel/src/elements/radio/index.tsx
diff --git a/packages/propel/src/elements/radio/radio-group.tsx b/packages/propel/src/elements/radio/radio-group.tsx
new file mode 100644
index 00000000..cc9d2c29
--- /dev/null
+++ b/packages/propel/src/elements/radio/radio-group.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type RadioGroupVariantProps, radioGroupVariants } from "./variants";
+
+export type { RadioGroupDensity } from "./variants";
+
+export type RadioGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  RadioGroupVariantProps;
+
+/**
+ * The styled radio group frame. It carries the row-spacing axis (`density`). Base-UI-agnostic —
+ * graft the group behavior in `components` via `<BaseRadioGroup render={<RadioGroup
+ * density="comfortable" />}>` (single-select state + roving focus). Renders a `radiogroup` once
+ * grafted.
+ */
+export function RadioGroup({ density, render, ...props }: RadioGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: radioGroupVariants({ density }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/radio/radio-indicator.tsx b/packages/propel/src/elements/radio/radio-indicator.tsx
new file mode 100644
index 00000000..9938e115
--- /dev/null
+++ b/packages/propel/src/elements/radio/radio-indicator.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { radioIndicatorVariants } from "./variants";
+
+export type RadioIndicatorProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled selected dot: an 8px circle filled with the ring's `currentColor`, rendered inside a
+ * `Radio`. Base-UI-agnostic — graft `<BaseRadio.Indicator render={<RadioIndicator />} />` in
+ * `components`; the primitive mounts it only while the option is checked.
+ */
+export function RadioIndicator({ render, ...props }: RadioIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: radioIndicatorVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/radio/radio.stories.tsx b/packages/propel/src/elements/radio/radio.stories.tsx
new file mode 100644
index 00000000..f2f8f009
--- /dev/null
+++ b/packages/propel/src/elements/radio/radio.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Radio, RadioGroup, type RadioGroupDensity, RadioIndicator } from "./index";
+
+const DENSITIES: RadioGroupDensity[] = ["comfortable", "compact"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI import, no graft — with every visual state pinned statically via the
+// `data-*`/aria attributes Base UI's Radio would set (`data-checked`, `data-disabled`,
+// `aria-checked`). `Radio` is the 16px ring (the styled `Radio.Root` target); the selected dot is
+// the `RadioIndicator`, which Base UI mounts only while checked, so only pinned-checked rings
+// render it here; `RadioGroup` is the stacked column frame carrying the `density` axis. Selection,
+// roving focus, keyboard, and `Field`/`Form` wiring are demonstrated and tested in
+// Components/Radio.
+const meta = {
+  title: "Elements/Radio",
+  component: Radio,
+  subcomponents: { RadioGroup, RadioIndicator },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: the `RadioGroup` column frame (Base UI would set
+ * `role="radiogroup"`, pinned here) stacking three rings, the first pinned selected via
+ * `data-checked` with its `RadioIndicator` dot mounted — the dot fills with the ring's
+ * `currentColor` (`bg-current`), so it picks up the accent the checked ring switches to.
+ */
+export const Default: Story = {
+  render: () => (
+    <RadioGroup density="comfortable" role="radiogroup" aria-label="Priority">
+      <Radio role="radio" aria-checked="true" aria-label="Low" data-checked="">
+        <RadioIndicator />
+      </Radio>
+      <Radio role="radio" aria-checked="false" aria-label="Medium" />
+      <Radio role="radio" aria-checked="false" aria-label="High" />
+    </RadioGroup>
+  ),
+};
+
+/**
+ * Every visual state, pinned statically. Unselected is the bare tertiary ring (Base UI mounts no
+ * indicator while unchecked); `data-checked` recolors the ring to the accent and the dot inherits
+ * it; focus-visible (forced via pseudo-states) draws the accent ring + offset; `data-disabled`
+ * (with the `aria-disabled` Base UI mirrors) switches to the not-allowed cursor, the disabled icon
+ * tint, and 60% opacity — selected or not.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { focusVisible: ["#elements-radio-focus-visible"] },
+  },
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Radio role="radio" aria-checked="false" aria-label="Unselected" />
+      <Radio role="radio" aria-checked="true" aria-label="Selected" data-checked="">
+        <RadioIndicator />
+      </Radio>
+      <Radio
+        id="elements-radio-focus-visible"
+        role="radio"
+        aria-checked="false"
+        aria-label="Focus-visible"
+      />
+      <Radio
+        role="radio"
+        aria-checked="false"
+        aria-disabled="true"
+        aria-label="Disabled"
+        data-disabled=""
+      />
+      <Radio
+        role="radio"
+        aria-checked="true"
+        aria-disabled="true"
+        aria-label="Disabled selected"
+        data-disabled=""
+        data-checked=""
+      >
+        <RadioIndicator />
+      </Radio>
+    </div>
+  ),
+};
+
+/**
+ * Hidden CSS canary (rule 2b): asserts the pinned `data-*` states compile to real styling — the
+ * `data-checked` ring recolors its `currentColor` away from the resting tertiary, the dot's
+ * `bg-current` fill computes to that same accent, and `data-disabled` dims the control to 60%
+ * opacity. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const StatesCssCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const resting = canvas.getByRole("radio", { name: "Unselected" });
+    const selected = canvas.getByRole("radio", { name: "Selected" });
+    const disabled = canvas.getByRole("radio", { name: "Disabled" });
+    // `data-checked` recolors the ring's `currentColor` from tertiary to the accent.
+    await expect(getComputedStyle(selected).color).not.toBe(getComputedStyle(resting).color);
+    // The dot fills via `bg-current`, so its background equals the checked ring's color.
+    const dot = selected.firstElementChild;
+    if (!(dot instanceof HTMLElement)) throw new Error("expected the selected ring's dot");
+    await expect(getComputedStyle(dot).backgroundColor).toBe(getComputedStyle(selected).color);
+    // `data-disabled` dims the whole control.
+    await expect(getComputedStyle(disabled).opacity).toBe("0.6");
+  },
+};
+
+/**
+ * The group frame's row-spacing axis — the only variant axis in the family: `comfortable` stacks
+ * the rows with an 8px gap, `compact` sets them flush (e.g. a settings panel where options read
+ * like menu items).
+ */
+export const Density: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-start gap-10">
+      {DENSITIES.map((density) => (
+        <RadioGroup
+          key={density}
+          density={density}
+          role="radiogroup"
+          aria-label={`${density} density`}
+        >
+          <Radio
+            role="radio"
+            aria-checked="true"
+            aria-label={`${density} selected`}
+            data-checked=""
+          >
+            <RadioIndicator />
+          </Radio>
+          <Radio role="radio" aria-checked="false" aria-label={`${density} unselected`} />
+        </RadioGroup>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/radio/radio.tsx b/packages/propel/src/elements/radio/radio.tsx
new file mode 100644
index 00000000..2dba464f
--- /dev/null
+++ b/packages/propel/src/elements/radio/radio.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { radioVariants } from "./variants";
+
+export type RadioProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled radio ring (16px, Figma node 2159-4535). Base-UI-agnostic — graft the radio behavior
+ * in `components` via `<BaseRadio.Root render={<Radio />}>` (it supplies `role="radio"`, the
+ * selected/disabled state, and keyboard/form support). Render a `RadioIndicator` as its child for
+ * the selected dot.
+ */
+export function Radio({ render, ...props }: RadioProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: radioVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/radio/variants.ts b/packages/propel/src/elements/radio/variants.ts
new file mode 100644
index 00000000..2bdd1339
--- /dev/null
+++ b/packages/propel/src/elements/radio/variants.ts
@@ -0,0 +1,24 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { optionGroupVariants } from "../../internal/option-group";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+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 = optionGroupVariants;
+
+export type RadioGroupDensity = NonNullable<VariantProps<typeof radioGroupVariants>["density"]>;
+
+export type RadioGroupVariantProps = StrictVariantProps<typeof radioGroupVariants>;
diff --git a/packages/propel/src/ui/scroll-area/index.tsx b/packages/propel/src/elements/scroll-area/index.tsx
similarity index 100%
rename from packages/propel/src/ui/scroll-area/index.tsx
rename to packages/propel/src/elements/scroll-area/index.tsx
diff --git a/packages/propel/src/elements/scroll-area/scroll-area-content.tsx b/packages/propel/src/elements/scroll-area/scroll-area-content.tsx
new file mode 100644
index 00000000..f3cb65a3
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area-content.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { scrollAreaContentVariants } from "./variants";
+
+export type ScrollAreaContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled content wrapper inside the viewport. Base-UI-agnostic — graft in `components` via
+ * `<BaseScrollArea.Content render={<ScrollAreaContent/>} />`.
+ */
+export function ScrollAreaContent({ render, ...props }: ScrollAreaContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: scrollAreaContentVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/scroll-area/scroll-area-corner.tsx b/packages/propel/src/elements/scroll-area/scroll-area-corner.tsx
new file mode 100644
index 00000000..941a00b0
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area-corner.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { scrollAreaCornerVariants } from "./variants";
+
+export type ScrollAreaCornerProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled corner that fills the gap where the vertical and horizontal scrollbars meet.
+ * Base-UI-agnostic — graft in `components` via `<BaseScrollArea.Corner render={<ScrollAreaCorner/>}
+ * />`.
+ */
+export function ScrollAreaCorner({ render, ...props }: ScrollAreaCornerProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: scrollAreaCornerVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/scroll-area/scroll-area-scrollbar.tsx b/packages/propel/src/elements/scroll-area/scroll-area-scrollbar.tsx
new file mode 100644
index 00000000..7acd0a0f
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area-scrollbar.tsx
@@ -0,0 +1,33 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { scrollAreaScrollbarVariants, type ScrollAreaScrollbarVariantProps } from "./variants";
+
+/** Controls when the scrollbar track is visible. */
+export type ScrollAreaScrollbarVisibility = "auto" | "always";
+
+/** Controls the width (vertical) or height (horizontal) of the scrollbar gutter. */
+export type ScrollAreaScrollbarMagnitude = "thin" | "standard";
+
+export type ScrollAreaScrollbarProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+> &
+  ScrollAreaScrollbarVariantProps;
+
+/**
+ * The styled scrollbar track. Base-UI-agnostic — graft in `components` via
+ * `<BaseScrollArea.Scrollbar render={<ScrollAreaScrollbar/>} />` (the Base UI Scrollbar sets the
+ * `data-orientation`/`data-hovering`/`data-scrolling` state the cva reads).
+ */
+export function ScrollAreaScrollbar({
+  visibility,
+  magnitude,
+  render,
+  ...props
+}: ScrollAreaScrollbarProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: scrollAreaScrollbarVariants({ visibility, magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/scroll-area/scroll-area-thumb.tsx b/packages/propel/src/elements/scroll-area/scroll-area-thumb.tsx
new file mode 100644
index 00000000..8e738db8
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area-thumb.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { scrollAreaThumbVariants } from "./variants";
+
+export type ScrollAreaThumbProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled draggable scrollbar thumb. Base-UI-agnostic — graft in `components` via
+ * `<BaseScrollArea.Thumb render={<ScrollAreaThumb/>} />`.
+ */
+export function ScrollAreaThumb({ render, ...props }: ScrollAreaThumbProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: scrollAreaThumbVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/scroll-area/scroll-area-viewport.tsx b/packages/propel/src/elements/scroll-area/scroll-area-viewport.tsx
new file mode 100644
index 00000000..f5e5a522
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area-viewport.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { scrollAreaViewportVariants } from "./variants";
+
+export type ScrollAreaViewportProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled scrollable viewport. Base-UI-agnostic — graft in `components` via
+ * `<BaseScrollArea.Viewport render={<ScrollAreaViewport/>} />`.
+ */
+export function ScrollAreaViewport({ render, ...props }: ScrollAreaViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: scrollAreaViewportVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx b/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx
new file mode 100644
index 00000000..42de947c
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx
@@ -0,0 +1,246 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  type ScrollAreaScrollbarMagnitude,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from "./index";
+
+const MAGNITUDES: ScrollAreaScrollbarMagnitude[] = ["thin", "standard"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the scrollbar rails laid out statically (Base UI only
+// positions them absolutely and sizes the thumb; story wrappers stand in for both) and every
+// visual state pinned via the `data-*` attributes Base UI's ScrollArea would set
+// (`data-orientation`, `data-hovering=""`, `data-scrolling=""`). Real scrolling, hover reveal,
+// and thumb dragging are demonstrated in the components-tier story (Components/ScrollArea).
+const meta = {
+  title: "Elements/ScrollArea",
+  component: ScrollArea,
+  subcomponents: {
+    ScrollAreaViewport,
+    ScrollAreaContent,
+    ScrollAreaScrollbar,
+    ScrollAreaThumb,
+    ScrollAreaCorner,
+  },
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `ScrollArea` (the relative flex-column root) holding
+ * `ScrollAreaViewport` › `ScrollAreaContent` › the overflowing content, plus a vertical and a
+ * horizontal `ScrollAreaScrollbar` rail (each with its `ScrollAreaThumb`) and the
+ * `ScrollAreaCorner` where they meet (transparent by design). The rails pin the `data-orientation`
+ * attribute Base UI's Scrollbar would set — the cva keys its axis layout and gutter dimension off
+ * it — and use `visibility="always"` so they show at rest. The absolute positioning wrappers and
+ * the fixed-length thumb wrappers stand in for Base UI's inline placement and scroll-ratio thumb
+ * sizing; the outer box clips, standing in for the viewport's Base-UI-applied `overflow: scroll`.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="flex h-64 w-72 flex-col overflow-hidden rounded-lg border border-subtle bg-layer-1">
+      <ScrollArea>
+        <ScrollAreaViewport>
+          <ScrollAreaContent>
+            <div className="flex 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>
+        <div className="absolute inset-e-0 top-0 bottom-3 flex">
+          <ScrollAreaScrollbar visibility="always" magnitude="thin" data-orientation="vertical">
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <div className="absolute inset-s-0 inset-e-3 bottom-0 flex flex-col">
+          <ScrollAreaScrollbar visibility="always" magnitude="thin" data-orientation="horizontal">
+            <div className="flex w-16 flex-1">
+              <ScrollAreaThumb />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <div className="absolute inset-e-0 bottom-0 flex size-3">
+          <ScrollAreaCorner />
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+};
+
+/**
+ * Both scrollbar gutter steps, per orientation: `thin` — 12 px gutter (3 px inset padding), for
+ * dense UI like menus and pickers; `standard` — 16 px gutter (5 px inset padding), for roomier
+ * panels. The thumb stays 6 px in both. Each rail pins `data-orientation` (vertical column,
+ * horizontal bar) and shows at rest via `visibility="always"`.
+ */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex items-start gap-8">
+      {MAGNITUDES.map((magnitude) => (
+        <div key={magnitude} className="flex flex-col items-center gap-2">
+          <p className="text-12 text-tertiary">{magnitude}</p>
+          <div className="flex h-40 rounded-md bg-layer-1">
+            <ScrollAreaScrollbar
+              visibility="always"
+              magnitude={magnitude}
+              data-orientation="vertical"
+            >
+              <div className="flex h-16 flex-1">
+                <ScrollAreaThumb />
+              </div>
+            </ScrollAreaScrollbar>
+          </div>
+          <div className="flex w-40 flex-col rounded-md bg-layer-1">
+            <ScrollAreaScrollbar
+              visibility="always"
+              magnitude={magnitude}
+              data-orientation="horizontal"
+            >
+              <div className="flex w-16 flex-1">
+                <ScrollAreaThumb />
+              </div>
+            </ScrollAreaScrollbar>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the vertical rail and its thumb:
+ *
+ * - **auto · rest** — `visibility="auto"` hides the rail entirely (`opacity-0`); the empty track
+ *   column is the point.
+ * - **auto · hovering** / **auto · scrolling** — pin the `data-hovering=""` / `data-scrolling=""`
+ *   attributes Base UI sets while the pointer is over the area or the viewport scrolls; either
+ *   reveals the rail.
+ * - **always** — permanently visible at rest, no state attribute needed.
+ * - **thumb hover** / **thumb active** — CSS pseudo-classes (`:hover`, `:active`) forced by the
+ *   pseudo-states addon: the thumb steps through `--scrollbar-thumb-hover` and
+ *   `--scrollbar-thumb-active`.
+ */
+export const States: Story = {
+  parameters: {
+    pseudo: {
+      hover: "#scroll-area-thumb-hover",
+      active: "#scroll-area-thumb-active",
+    },
+  },
+  render: () => (
+    <div className="flex items-start gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-40 rounded-md bg-layer-1">
+          <ScrollAreaScrollbar
+            id="scroll-area-scrollbar-rest"
+            visibility="auto"
+            magnitude="thin"
+            data-orientation="vertical"
+          >
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <p className="text-12 text-tertiary">auto · rest</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-40 rounded-md bg-layer-1">
+          <ScrollAreaScrollbar
+            id="scroll-area-scrollbar-hovering"
+            visibility="auto"
+            magnitude="thin"
+            data-orientation="vertical"
+            data-hovering=""
+          >
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <p className="text-12 text-tertiary">auto · hovering</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-40 rounded-md bg-layer-1">
+          <ScrollAreaScrollbar
+            visibility="auto"
+            magnitude="thin"
+            data-orientation="vertical"
+            data-scrolling=""
+          >
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <p className="text-12 text-tertiary">auto · scrolling</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-40 rounded-md bg-layer-1">
+          <ScrollAreaScrollbar visibility="always" magnitude="thin" data-orientation="vertical">
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <p className="text-12 text-tertiary">always</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-40 rounded-md bg-layer-1">
+          <ScrollAreaScrollbar visibility="always" magnitude="thin" data-orientation="vertical">
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb id="scroll-area-thumb-hover" />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <p className="text-12 text-tertiary">thumb hover</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-40 rounded-md bg-layer-1">
+          <ScrollAreaScrollbar visibility="always" magnitude="thin" data-orientation="vertical">
+            <div className="flex h-16 flex-1">
+              <ScrollAreaThumb id="scroll-area-thumb-active" />
+            </div>
+          </ScrollAreaScrollbar>
+        </div>
+        <p className="text-12 text-tertiary">thumb active</p>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-hovering=""` rail's computed opacity (`data-hovering:opacity-100`) differs from the resting
+ * `visibility="auto"` rail's (`opacity-0`). Tagged out of the sidebar/docs/manifest while still
+ * running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const opacity = (id: string) => {
+      const rail = canvasElement.querySelector(`#${id}`);
+      if (!(rail instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(rail).opacity;
+    };
+    await expect(opacity("scroll-area-scrollbar-hovering")).not.toBe(
+      opacity("scroll-area-scrollbar-rest"),
+    );
+  },
+};
diff --git a/packages/propel/src/elements/scroll-area/scroll-area.tsx b/packages/propel/src/elements/scroll-area/scroll-area.tsx
new file mode 100644
index 00000000..e4a3c25c
--- /dev/null
+++ b/packages/propel/src/elements/scroll-area/scroll-area.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { scrollAreaVariants } from "./variants";
+
+export type ScrollAreaProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled scroll-area root: lays its viewport out as a height-constrained flex column but
+ * renders no scrollbars itself. Base-UI-agnostic — graft the scroll behavior in `components` via
+ * `<BaseScrollArea.Root render={<ScrollArea/>} />`. The ready-made scroller that composes the
+ * viewport, scrollbars, thumb and corner lives in `@plane/propel/components/scroll-area`.
+ */
+export function ScrollArea({ render, ...props }: ScrollAreaProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: scrollAreaVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/scroll-area/variants.ts b/packages/propel/src/elements/scroll-area/variants.ts
similarity index 100%
rename from packages/propel/src/ui/scroll-area/variants.ts
rename to packages/propel/src/elements/scroll-area/variants.ts
diff --git a/packages/propel/src/elements/select/index.tsx b/packages/propel/src/elements/select/index.tsx
new file mode 100644
index 00000000..78398687
--- /dev/null
+++ b/packages/propel/src/elements/select/index.tsx
@@ -0,0 +1,7 @@
+export * from "./select-field";
+export * from "./select-item-indicator";
+export * from "./select-label";
+export * from "./select-scroll-down-arrow";
+export * from "./select-scroll-up-arrow";
+export * from "./select-trigger";
+export * from "./select-value";
diff --git a/packages/propel/src/ui/select/select-field.tsx b/packages/propel/src/elements/select/select-field.tsx
similarity index 100%
rename from packages/propel/src/ui/select/select-field.tsx
rename to packages/propel/src/elements/select/select-field.tsx
diff --git a/packages/propel/src/elements/select/select-item-indicator.tsx b/packages/propel/src/elements/select/select-item-indicator.tsx
new file mode 100644
index 00000000..33b7aac0
--- /dev/null
+++ b/packages/propel/src/elements/select/select-item-indicator.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { selectItemIndicatorVariants } from "./variants";
+
+export type SelectItemIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The selection checkmark slot inside an item. Renders whatever svg you pass as `children` (sized
+ * to 1rem). Base-UI-agnostic — graft the visibility behavior in `components` via
+ * `<BaseSelect.ItemIndicator render={<SelectItemIndicator/>} />`.
+ */
+export function SelectItemIndicator({ render, ...props }: SelectItemIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: selectItemIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/select/select-label.tsx b/packages/propel/src/elements/select/select-label.tsx
new file mode 100644
index 00000000..b2f10c3e
--- /dev/null
+++ b/packages/propel/src/elements/select/select-label.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { selectLabelVariants } from "./variants";
+
+export type SelectLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled select label. Base-UI-agnostic — graft the label behavior in `components` via
+ * `<BaseSelect.Label render={<SelectLabel/>} />`.
+ */
+export function SelectLabel({ render, ...props }: SelectLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: selectLabelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/select/select-scroll-down-arrow.tsx b/packages/propel/src/elements/select/select-scroll-down-arrow.tsx
new file mode 100644
index 00000000..bbb39acb
--- /dev/null
+++ b/packages/propel/src/elements/select/select-scroll-down-arrow.tsx
@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react/use-render";
+
+export type SelectScrollDownArrowProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The styled scroll-down affordance at the bottom of a scrollable popup. Base-UI-agnostic — graft
+ * the scroll behavior in `components` via `<BaseSelect.ScrollDownArrow
+ * render={<SelectScrollDownArrow/>} />`.
+ */
+export function SelectScrollDownArrow({ render, ...props }: SelectScrollDownArrowProps) {
+  return useRender({ defaultTagName: "div", render, props });
+}
diff --git a/packages/propel/src/elements/select/select-scroll-up-arrow.tsx b/packages/propel/src/elements/select/select-scroll-up-arrow.tsx
new file mode 100644
index 00000000..1e1dfcdd
--- /dev/null
+++ b/packages/propel/src/elements/select/select-scroll-up-arrow.tsx
@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react/use-render";
+
+export type SelectScrollUpArrowProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled scroll-up affordance at the top of a scrollable popup. Base-UI-agnostic — graft the
+ * scroll behavior in `components` via `<BaseSelect.ScrollUpArrow render={<SelectScrollUpArrow/>}
+ * />`.
+ */
+export function SelectScrollUpArrow({ render, ...props }: SelectScrollUpArrowProps) {
+  return useRender({ defaultTagName: "div", render, props });
+}
diff --git a/packages/propel/src/elements/select/select-trigger.tsx b/packages/propel/src/elements/select/select-trigger.tsx
new file mode 100644
index 00000000..b2d9f98a
--- /dev/null
+++ b/packages/propel/src/elements/select/select-trigger.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type SelectTriggerVariantProps, selectTriggerVariants } from "./variants";
+
+export type { SelectTriggerMagnitude } from "./variants";
+
+export type SelectTriggerProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  SelectTriggerVariantProps;
+
+/**
+ * The styled select trigger button — wraps the selected value + trailing icon in one flex row.
+ * Base-UI-agnostic — graft the select behavior in `components` via `<BaseSelect.Trigger
+ * render={<SelectTrigger/>} />`.
+ */
+export function SelectTrigger({ magnitude, render, ...props }: SelectTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: selectTriggerVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/select/select-value.tsx b/packages/propel/src/elements/select/select-value.tsx
new file mode 100644
index 00000000..79ff02bf
--- /dev/null
+++ b/packages/propel/src/elements/select/select-value.tsx
@@ -0,0 +1,11 @@
+import { useRender } from "@base-ui/react/use-render";
+
+export type SelectValueProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled selected-value display inside a trigger. Base-UI-agnostic — graft the value behavior
+ * in `components` via `<BaseSelect.Value render={<SelectValue/>} />`.
+ */
+export function SelectValue({ render, ...props }: SelectValueProps) {
+  return useRender({ defaultTagName: "span", render, props });
+}
diff --git a/packages/propel/src/elements/select/select.stories.tsx b/packages/propel/src/elements/select/select.stories.tsx
new file mode 100644
index 00000000..0314b24b
--- /dev/null
+++ b/packages/propel/src/elements/select/select.stories.tsx
@@ -0,0 +1,278 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { ListboxItem } from "../../internal/listbox-item";
+import { ListboxPopup } from "../../internal/listbox-popup";
+import {
+  SelectField,
+  SelectItemIndicator,
+  SelectLabel,
+  SelectScrollDownArrow,
+  SelectScrollUpArrow,
+  SelectTrigger,
+  type SelectTriggerMagnitude,
+  SelectValue,
+} from "./index";
+
+const SERVER_TYPES = ["General purpose", "Compute optimized", "Memory optimized"];
+const MAGNITUDES: SelectTriggerMagnitude[] = ["sm", "md", "lg"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the popup laid out inline (it is just a styled div; Base UI
+// only positions it) and every visual state pinned statically via the `data-*`/aria attributes
+// Base UI's select would set (`data-highlighted=""`, `data-selected=""`, `data-disabled=""`,
+// `data-invalid=""`) or the native `disabled` attribute. Grafting, keyboard, and aria behavior are
+// demonstrated AND tested in the components-tier story (Components/Select). The scroll-arrow parts
+// carry no styling of their own yet, so they are documented as subcomponents without a pinned
+// showcase.
+const meta = {
+  title: "Elements/Select",
+  component: SelectTrigger,
+  subcomponents: {
+    SelectField,
+    SelectLabel,
+    SelectValue,
+    SelectItemIndicator,
+    SelectScrollUpArrow,
+    SelectScrollDownArrow,
+    ListboxPopup,
+    ListboxItem,
+  },
+  args: { magnitude: "md" },
+} satisfies Meta<typeof SelectTrigger>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: `SelectField` stacks the `SelectLabel` over the
+ * `SelectTrigger` (which wraps the `SelectValue` text and a trailing secondary-tinted chevron
+ * `Icon`); below it, the internal `ListboxPopup` surface holds `ListboxItem` rows at
+ * `layout="indicator"` — the leading 1rem grid column reserved for the `SelectItemIndicator` check,
+ * which stays mounted on every row and shows its glyph only where `data-selected=""` is pinned (the
+ * attribute Base UI's `ItemIndicator` graft sets). The second row pins `data-highlighted=""` — the
+ * attribute Base UI sets on the active option — and the trigger takes the label's name via
+ * `aria-labelledby`, the wiring Base UI performs. The popup's anchor-derived sizing vars
+ * (`--anchor-width`, `--available-height`) are supplied by the wrapper, standing in for Base UI's
+ * positioner.
+ */
+export const Default: Story = {
+  render: ({ magnitude }) => (
+    <div className="flex w-fit flex-col gap-2 [--anchor-width:12rem] [--available-height:18rem]">
+      <SelectField>
+        <SelectLabel id="select-server-type-label">Server type</SelectLabel>
+        <SelectTrigger magnitude={magnitude} aria-labelledby="select-server-type-label">
+          <SelectValue>General purpose</SelectValue>
+          <Icon tint="secondary">
+            <ChevronsUpDown />
+          </Icon>
+        </SelectTrigger>
+      </SelectField>
+      <ListboxPopup>
+        {SERVER_TYPES.map((label, index) => (
+          <ListboxItem
+            key={label}
+            layout="indicator"
+            magnitude={magnitude}
+            data-highlighted={index === 1 ? "" : undefined}
+          >
+            <SelectItemIndicator data-selected={index === 0 ? "" : undefined}>
+              <Check aria-hidden />
+            </SelectItemIndicator>
+            {label}
+          </ListboxItem>
+        ))}
+      </ListboxPopup>
+    </div>
+  ),
+};
+
+/**
+ * The control magnitude scale (Figma S/Base/L map to sm 28px · md 32px · lg 36px): each step sets
+ * the trigger height, its text size, and the glyph `--node-size` together, and the option rows
+ * track the same step (`ListboxItem` factors the row height and text to the same axis).
+ */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex items-start gap-6 [--anchor-width:12rem] [--available-height:18rem]">
+      {MAGNITUDES.map((magnitude) => (
+        <div key={magnitude} className="flex flex-col gap-2">
+          <SelectField>
+            <SelectLabel id={`select-magnitude-${magnitude}-label`}>{magnitude}</SelectLabel>
+            <SelectTrigger
+              magnitude={magnitude}
+              aria-labelledby={`select-magnitude-${magnitude}-label`}
+            >
+              <SelectValue>General purpose</SelectValue>
+              <Icon tint="secondary">
+                <ChevronsUpDown />
+              </Icon>
+            </SelectTrigger>
+          </SelectField>
+          <ListboxPopup>
+            {SERVER_TYPES.slice(0, 2).map((label, index) => (
+              <ListboxItem key={label} layout="indicator" magnitude={magnitude}>
+                <SelectItemIndicator data-selected={index === 0 ? "" : undefined}>
+                  <Check aria-hidden />
+                </SelectItemIndicator>
+                {label}
+              </ListboxItem>
+            ))}
+          </ListboxPopup>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the trigger:
+ *
+ * - **Rest** — the subtle border over the `layer-2` fill.
+ * - **Hover** / **Focused** — CSS pseudo-classes (`:hover`, `:focus-visible` — the trigger is itself
+ *   the focusable element), forced by the pseudo-states addon: the hover border/fill shift, and the
+ *   accent border + soft ring while focused.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to the trigger; the surface recolors to danger via its own `data-invalid:` selector
+ *   (the trigger IS the focusable control) — no `tone` prop.
+ * - **Disabled** — the native `disabled` plus the `data-disabled=""` Base UI mirrors onto the
+ *   trigger: not-allowed cursor and dimmed text.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: "#select-trigger-hover",
+      focusVisible: "#select-trigger-focus",
+    },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex w-fit flex-col gap-3">
+      <SelectTrigger magnitude={magnitude} id="select-trigger-rest">
+        <SelectValue>Rest</SelectValue>
+        <Icon tint="secondary">
+          <ChevronsUpDown />
+        </Icon>
+      </SelectTrigger>
+      <SelectTrigger magnitude={magnitude} id="select-trigger-hover">
+        <SelectValue>Hover</SelectValue>
+        <Icon tint="secondary">
+          <ChevronsUpDown />
+        </Icon>
+      </SelectTrigger>
+      <SelectTrigger magnitude={magnitude} id="select-trigger-focus">
+        <SelectValue>Focused</SelectValue>
+        <Icon tint="secondary">
+          <ChevronsUpDown />
+        </Icon>
+      </SelectTrigger>
+      <SelectTrigger magnitude={magnitude} id="select-trigger-invalid" aria-invalid data-invalid="">
+        <SelectValue>Invalid</SelectValue>
+        <Icon tint="secondary">
+          <ChevronsUpDown />
+        </Icon>
+      </SelectTrigger>
+      <SelectTrigger magnitude={magnitude} disabled data-disabled="">
+        <SelectValue>Disabled</SelectValue>
+        <Icon tint="secondary">
+          <ChevronsUpDown />
+        </Icon>
+      </SelectTrigger>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` trigger recolors its border (`data-invalid:border-danger-strong`) away from the
+ * resting trigger's. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const trigger = canvasElement.querySelector(`#${id}`);
+      if (!(trigger instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(trigger).borderColor;
+    };
+    await expect(borderColor("select-trigger-invalid")).not.toBe(
+      borderColor("select-trigger-rest"),
+    );
+  },
+};
+
+/**
+ * The listbox surface rendered statically (Base UI only positions it — the popup is a styled div):
+ * `ListboxItem` rows at `layout="indicator"`, the `SelectItemIndicator` mounted on every row (the
+ * `keepMounted` semantics — the 1rem grid column is positional, so the marker must occupy it even
+ * while unselected). The first row pins `data-selected=""` on the marker, which is what reveals the
+ * accent check (`not-data-selected:invisible`); the others pin the active-option
+ * `data-highlighted=""` and the `data-disabled=""` row states.
+ */
+export const Popup: Story = {
+  parameters: {
+    controls: { disable: true },
+    a11y: {
+      // Pinning hover/disabled state attributes makes axe evaluate visuals it never sees live
+      // (it does not test :hover, and WCAG 1.4.3 exempts disabled controls). The tertiary-text-
+      // on-hover-fill contrast is a design-token question flagged for the design pass, not a
+      // story bug.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
+  },
+  render: () => (
+    <div className="flex w-72 flex-col [--anchor-width:18rem] [--available-height:18rem]">
+      <ListboxPopup>
+        <ListboxItem layout="indicator" magnitude="md">
+          <SelectItemIndicator id="select-item-indicator-selected" data-selected="">
+            <Check aria-hidden />
+          </SelectItemIndicator>
+          General purpose
+        </ListboxItem>
+        <ListboxItem layout="indicator" magnitude="md" data-highlighted="">
+          <SelectItemIndicator>
+            <Check aria-hidden />
+          </SelectItemIndicator>
+          Compute optimized
+        </ListboxItem>
+        <ListboxItem layout="indicator" magnitude="md">
+          <SelectItemIndicator id="select-item-indicator-rest">
+            <Check aria-hidden />
+          </SelectItemIndicator>
+          Memory optimized
+        </ListboxItem>
+        <ListboxItem layout="indicator" magnitude="md" data-disabled="">
+          <SelectItemIndicator>
+            <Check aria-hidden />
+          </SelectItemIndicator>
+          Storage optimized
+        </ListboxItem>
+      </ListboxPopup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the family's own indicator selector actually compiled — the
+ * `data-selected` marker computes `visibility: visible` while the resting row's marker hides
+ * (`not-data-selected:invisible`) yet keeps its grid column. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const PopupCanary: Story = {
+  ...Popup,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const visibility = (id: string) => {
+      const indicator = canvasElement.querySelector(`#${id}`);
+      if (!(indicator instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(indicator).visibility;
+    };
+    await expect(visibility("select-item-indicator-selected")).toBe("visible");
+    await expect(visibility("select-item-indicator-rest")).toBe("hidden");
+  },
+};
diff --git a/packages/propel/src/elements/select/variants.ts b/packages/propel/src/elements/select/variants.ts
new file mode 100644
index 00000000..19574d22
--- /dev/null
+++ b/packages/propel/src/elements/select/variants.ts
@@ -0,0 +1,47 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { controlMagnitude } from "../../internal/control-group";
+import { controlLabelClass } from "../../internal/control-group";
+import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
+import { itemIndicatorClass } from "../../internal/item-indicator";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// The field region that stacks the label over the trigger as a column. Holds the
+// gap between `SelectLabel` and `SelectTrigger`; sizes to its widest child (the
+// trigger carries `min-w-48`) so the label never forces the column wider.
+export const selectFieldVariants = cva("flex w-fit flex-col gap-1.5");
+
+export const selectLabelVariants = cva(controlLabelClass);
+
+// The trigger wraps the selected value + trailing icon in a single flex row.
+// Height, text size, and icon size track the magnitude axis (Figma "Size").
+export const selectTriggerVariants = cva(
+  cx(
+    // The trigger is itself the focusable element → `focus: visible`.
+    fieldControlSurfaceVariants({ focus: "visible" }),
+    "flex min-w-48 items-center justify-between gap-2 rounded-md px-3 text-primary outline-none",
+    "hover:border-subtle-1 hover:bg-layer-2-hover",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      // Figma "Size" axis: three trigger heights with matching text and icon sizes.
+      magnitude: {
+        sm: controlMagnitude.sm,
+        md: controlMagnitude.md,
+        lg: controlMagnitude.lg,
+      },
+    },
+  },
+);
+
+// The selection checkmark slot inside an item: a node-slot tinted to the accent.
+// Always left-aligned per the Figma spec; the 1rem grid column in the shared listbox
+// item (`internal/listbox-item`) reserves the space whether the indicator shows or not.
+export const selectItemIndicatorVariants = cva(itemIndicatorClass);
+
+export type SelectTriggerMagnitude = NonNullable<
+  VariantProps<typeof selectTriggerVariants>["magnitude"]
+>;
+
+export type SelectTriggerVariantProps = StrictVariantProps<typeof selectTriggerVariants>;
diff --git a/packages/propel/src/ui/separator/index.tsx b/packages/propel/src/elements/separator/index.tsx
similarity index 100%
rename from packages/propel/src/ui/separator/index.tsx
rename to packages/propel/src/elements/separator/index.tsx
diff --git a/packages/propel/src/elements/separator/separator.stories.tsx b/packages/propel/src/elements/separator/separator.stories.tsx
new file mode 100644
index 00000000..78f593c7
--- /dev/null
+++ b/packages/propel/src/elements/separator/separator.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Separator } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled `Separator` `<div>`
+// renders DIRECTLY — no Base UI graft — with the `[data-orientation]` its cva keys off pinned
+// statically, exactly as Base UI's `Separator` behavior would set it. The role/`aria-orientation`
+// wiring (semantic vs. decorative) is behavior, demonstrated AND tested in the components-tier
+// story (Components/Separator). Separator is static — a thin rule with no interaction-state
+// styling — so it gets no pseudo-states story.
+const meta = {
+  title: "Elements/Separator",
+  component: Separator,
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Horizontal rule dividing stacked content: pins `data-orientation="horizontal"` — the attribute
+ * Base UI's `Separator` would set — collapsing the `<div>` to a full-width `border-subtle` top
+ * border.
+ */
+export const Horizontal: Story = {
+  render: () => (
+    <div className="flex w-72 flex-col gap-3">
+      <span className="text-13 text-secondary">Above</span>
+      <Separator data-orientation="horizontal" />
+      <span className="text-13 text-secondary">Below</span>
+    </div>
+  ),
+};
+
+/**
+ * Vertical rule dividing inline content: pins `data-orientation="vertical"`, collapsing the `<div>`
+ * to a self-stretching `border-subtle` inline-start border.
+ */
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-6 items-center gap-3">
+      <span className="text-13 text-secondary">Left</span>
+      <Separator data-orientation="vertical" />
+      <span className="text-13 text-secondary">Right</span>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned `[data-orientation]` selectors actually compiled — the
+ * horizontal rule draws a top border and no inline-start border; the vertical rule the inverse.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const OrientationCanary: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex w-72 flex-col gap-3">
+      <Separator id="separator-horizontal" data-orientation="horizontal" />
+      <div className="flex h-6">
+        <Separator id="separator-vertical" data-orientation="vertical" />
+      </div>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const rule = (id: string) => {
+      const node = canvasElement.querySelector(`#${id}`);
+      if (!(node instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(node);
+    };
+    await expect(rule("separator-horizontal").borderTopWidth).not.toBe("0px");
+    await expect(rule("separator-vertical").borderTopWidth).toBe("0px");
+    await expect(rule("separator-vertical").borderInlineStartWidth).not.toBe("0px");
+  },
+};
diff --git a/packages/propel/src/elements/separator/separator.tsx b/packages/propel/src/elements/separator/separator.tsx
new file mode 100644
index 00000000..19530db2
--- /dev/null
+++ b/packages/propel/src/elements/separator/separator.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { separatorVariants } from "./variants";
+
+export type SeparatorProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled divider rule — a Base-UI-agnostic `useRender` `<div>`. Its cva keys off the
+ * `[data-orientation]` that Base UI's `Separator` behavior contributes when grafted in `components`
+ * via `<BaseSeparator render={<Separator/>} />`; the semantic vs. decorative role is wired there
+ * too. Spacing around the rule belongs to the surrounding layout, not the separator.
+ */
+export function Separator({ render, ...props }: SeparatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: separatorVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/separator/variants.ts b/packages/propel/src/elements/separator/variants.ts
similarity index 100%
rename from packages/propel/src/ui/separator/variants.ts
rename to packages/propel/src/elements/separator/variants.ts
diff --git a/packages/propel/src/ui/slider/index.tsx b/packages/propel/src/elements/slider/index.tsx
similarity index 100%
rename from packages/propel/src/ui/slider/index.tsx
rename to packages/propel/src/elements/slider/index.tsx
diff --git a/packages/propel/src/elements/slider/slider-control.tsx b/packages/propel/src/elements/slider/slider-control.tsx
new file mode 100644
index 00000000..ad26e7f7
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider-control.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type SliderControlVariantProps, sliderControlVariants } from "./variants";
+
+export type { SliderMagnitude } from "./variants";
+
+export type SliderControlProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  SliderControlVariantProps;
+
+/**
+ * The styled control row that holds the track. Base-UI-agnostic — graft in `components` via
+ * `<BaseSlider.Control render={<SliderControl/>} />`.
+ */
+export function SliderControl({ magnitude, render, ...props }: SliderControlProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: sliderControlVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/slider/slider-header.tsx b/packages/propel/src/elements/slider/slider-header.tsx
similarity index 100%
rename from packages/propel/src/ui/slider/slider-header.tsx
rename to packages/propel/src/elements/slider/slider-header.tsx
diff --git a/packages/propel/src/elements/slider/slider-indicator.tsx b/packages/propel/src/elements/slider/slider-indicator.tsx
new file mode 100644
index 00000000..75b7e580
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider-indicator.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { sliderIndicatorVariants } from "./variants";
+
+export type SliderIndicatorProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled filled portion of the track. Base-UI-agnostic — graft in `components` via
+ * `<BaseSlider.Indicator render={<SliderIndicator/>} />`.
+ */
+export function SliderIndicator({ render, ...props }: SliderIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: sliderIndicatorVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/slider/slider-label.tsx b/packages/propel/src/elements/slider/slider-label.tsx
new file mode 100644
index 00000000..92aa1706
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider-label.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { sliderLabelVariants } from "./variants";
+
+export type SliderLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled slider label. Base-UI-agnostic — graft in `components` via `<BaseSlider.Label
+ * render={<SliderLabel/>} />`.
+ */
+export function SliderLabel({ render, ...props }: SliderLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: sliderLabelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/slider/slider-thumb.tsx b/packages/propel/src/elements/slider/slider-thumb.tsx
new file mode 100644
index 00000000..b666fcd6
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider-thumb.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type SliderThumbVariantProps, sliderThumbVariants } from "./variants";
+
+export type SliderThumbProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  SliderThumbVariantProps;
+
+/**
+ * The styled draggable thumb. Base-UI-agnostic — graft in `components` via `<BaseSlider.Thumb
+ * render={<SliderThumb/>} />` (Base UI adds the nested range input).
+ */
+export function SliderThumb({ magnitude, render, ...props }: SliderThumbProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: sliderThumbVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/slider/slider-track.tsx b/packages/propel/src/elements/slider/slider-track.tsx
new file mode 100644
index 00000000..a633d294
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider-track.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { sliderTrackVariants } from "./variants";
+
+export type SliderTrackProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled track bar the thumb travels along. Base-UI-agnostic — graft in `components` via
+ * `<BaseSlider.Track render={<SliderTrack/>} />`.
+ */
+export function SliderTrack({ render, ...props }: SliderTrackProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: sliderTrackVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/slider/slider-value.tsx b/packages/propel/src/elements/slider/slider-value.tsx
new file mode 100644
index 00000000..649e773f
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider-value.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { sliderValueVariants } from "./variants";
+
+export type SliderValueProps = Omit<useRender.ComponentProps<"output">, "className" | "style">;
+
+/**
+ * The styled value readout. Base-UI-agnostic — graft in `components` via `<BaseSlider.Value
+ * render={<SliderValue/>} />`.
+ */
+export function SliderValue({ render, ...props }: SliderValueProps) {
+  const defaultProps: useRender.ElementProps<"output"> = { className: sliderValueVariants() };
+  return useRender({ defaultTagName: "output", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/slider/slider.stories.tsx b/packages/propel/src/elements/slider/slider.stories.tsx
new file mode 100644
index 00000000..93808a5c
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider.stories.tsx
@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type * as React from "react";
+import { expect } from "storybook/test";
+
+import {
+  Slider,
+  SliderControl,
+  SliderHeader,
+  SliderIndicator,
+  SliderLabel,
+  type SliderMagnitude,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from "./index";
+
+const MAGNITUDES: SliderMagnitude[] = ["sm", "md", "lg"];
+
+// Value-derived inline geometry, exactly as Base UI's `Slider` computes it from `value`: the
+// indicator spans from the start percent to the end percent of the track, and each thumb centers
+// on its value percent. Geometry is not a variant — the showcase pins it statically through the
+// part's own `render` capability, the same way Base UI's inline style lands on the rendered
+// element.
+const indicatorStyle = (startPercent: number, endPercent: number): React.CSSProperties => ({
+  insetInlineStart: `${startPercent}%`,
+  width: `${endPercent - startPercent}%`,
+});
+
+const thumbStyle = (percent: number): React.CSSProperties => ({
+  position: "absolute",
+  top: "50%",
+  insetInlineStart: `${percent}%`,
+  translate: "-50% -50%",
+});
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI import, no graft — with the value-derived geometry Base UI's `Slider`
+// would compute (indicator start/width, thumb center position) pinned statically, and the
+// disabled state pinned via `data-disabled` (which Base UI mirrors onto every part; the thumb's
+// cva is what reads it). The `slider` role, keyboard, and form behavior live on the hidden input
+// Base UI renders inside the thumb — demonstrated AND tested in the ready-made
+// (Components/Slider), which composes these parts. This tier is also where a custom layout like a
+// two-thumb range is assembled.
+const meta = {
+  title: "Elements/Slider",
+  component: Slider,
+  subcomponents: {
+    SliderHeader,
+    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>;
+
+/**
+ * The full anatomy pinned at 40/100: the header row holds the label (inline-start) and the
+ * `<output>` readout (inline-end); the control row holds the thin track, its filled indicator, and
+ * the thumb centered on the value percent.
+ */
+export const Default: Story = {
+  render: () => (
+    <Slider>
+      <SliderHeader>
+        <SliderLabel>Volume</SliderLabel>
+        <SliderValue>40</SliderValue>
+      </SliderHeader>
+      <SliderControl magnitude="md">
+        <SliderTrack>
+          <SliderIndicator render={<div style={indicatorStyle(0, 40)} />} />
+          <SliderThumb magnitude="md" render={<div style={thumbStyle(40)} />} />
+        </SliderTrack>
+      </SliderControl>
+    </Slider>
+  ),
+};
+
+/**
+ * All thumb sizes: `sm` (12 px), `md` (16 px), `lg` (20 px). `magnitude` sizes the thumb and the
+ * control's hit-area together; the track bar height never changes.
+ */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <Slider key={magnitude}>
+          <SliderHeader>
+            <SliderLabel>{magnitude}</SliderLabel>
+            <SliderValue>40</SliderValue>
+          </SliderHeader>
+          <SliderControl magnitude={magnitude}>
+            <SliderTrack>
+              <SliderIndicator render={<div style={indicatorStyle(0, 40)} />} />
+              <SliderThumb magnitude={magnitude} render={<div style={thumbStyle(40)} />} />
+            </SliderTrack>
+          </SliderControl>
+        </Slider>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * A range layout: two thumbs share one track and the indicator spans between them (20%–80%) — the
+ * geometry Base UI computes for a two-value `value`. Assembling multiple thumbs is exactly what
+ * this tier's parts are for; the ready-made `Components/Slider` is single-thumb.
+ */
+export const Range: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Slider>
+      <SliderHeader>
+        <SliderLabel>Scaling threshold</SliderLabel>
+        <SliderValue>20% – 80%</SliderValue>
+      </SliderHeader>
+      <SliderControl magnitude="md">
+        <SliderTrack>
+          <SliderIndicator render={<div style={indicatorStyle(20, 80)} />} />
+          <SliderThumb magnitude="md" render={<div style={thumbStyle(20)} />} />
+          <SliderThumb magnitude="md" render={<div style={thumbStyle(80)} />} />
+        </SliderTrack>
+      </SliderControl>
+    </Slider>
+  ),
+};
+
+/**
+ * The disabled state, pinned via `data-disabled` — the attribute Base UI mirrors onto every part
+ * when the root is disabled; the thumb's cva is what reads it (60% opacity + `not-allowed`
+ * cursor).
+ */
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Slider data-disabled="">
+      <SliderHeader>
+        <SliderLabel>Volume</SliderLabel>
+        <SliderValue>40</SliderValue>
+      </SliderHeader>
+      <SliderControl magnitude="md" data-disabled="">
+        <SliderTrack data-disabled="">
+          <SliderIndicator data-disabled="" render={<div style={indicatorStyle(0, 40)} />} />
+          <SliderThumb magnitude="md" data-disabled="" render={<div style={thumbStyle(40)} />} />
+        </SliderTrack>
+      </SliderControl>
+    </Slider>
+  ),
+};
+
+/**
+ * Hidden CSS canary (the allowed rule-2b play): asserts the pinned configurations compile to real
+ * styling — `magnitude` scales the thumb (`sm` < `md` < `lg`), the indicator's fill resolves to a
+ * color distinct from the track's, the pinned 40% geometry occupies 40% of the track, and
+ * `data-disabled` dims the thumb to 60% opacity. Tagged out of the sidebar/docs/manifest while
+ * still running under the default `test` tag.
+ */
+export const StatesCssCanary: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Slider>
+        <SliderControl magnitude="md">
+          <SliderTrack data-testid="canary-track">
+            <SliderIndicator
+              data-testid="canary-indicator"
+              render={<div style={indicatorStyle(0, 40)} />}
+            />
+            <SliderThumb
+              magnitude="md"
+              data-testid="canary-thumb-md"
+              render={<div style={thumbStyle(40)} />}
+            />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+      <Slider>
+        <SliderControl magnitude="sm">
+          <SliderTrack>
+            <SliderThumb
+              magnitude="sm"
+              data-testid="canary-thumb-sm"
+              render={<div style={thumbStyle(40)} />}
+            />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+      <Slider>
+        <SliderControl magnitude="lg">
+          <SliderTrack>
+            <SliderThumb
+              magnitude="lg"
+              data-testid="canary-thumb-lg"
+              render={<div style={thumbStyle(40)} />}
+            />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+      <Slider data-disabled="">
+        <SliderControl magnitude="md" data-disabled="">
+          <SliderTrack data-disabled="">
+            <SliderThumb
+              magnitude="md"
+              data-disabled=""
+              data-testid="canary-thumb-disabled"
+              render={<div style={thumbStyle(40)} />}
+            />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const track = canvas.getByTestId("canary-track");
+    const indicator = canvas.getByTestId("canary-indicator");
+    const smThumb = canvas.getByTestId("canary-thumb-sm");
+    const mdThumb = canvas.getByTestId("canary-thumb-md");
+    const lgThumb = canvas.getByTestId("canary-thumb-lg");
+    const disabledThumb = canvas.getByTestId("canary-thumb-disabled");
+
+    // `magnitude` compiles to a real thumb-size scale (`sm` 12px < `md` 16px < `lg` 20px).
+    const widthOf = (element: HTMLElement) => element.getBoundingClientRect().width;
+    await expect(widthOf(smThumb)).toBeLessThan(widthOf(mdThumb));
+    await expect(widthOf(mdThumb)).toBeLessThan(widthOf(lgThumb));
+
+    // The indicator's fill resolves to a color distinct from the track it sits on.
+    await expect(getComputedStyle(indicator).backgroundColor).not.toBe(
+      getComputedStyle(track).backgroundColor,
+    );
+
+    // The pinned `width: 40%` geometry occupies 40% of the track.
+    await expect(
+      indicator.getBoundingClientRect().width / track.getBoundingClientRect().width,
+    ).toBeCloseTo(0.4, 2);
+
+    // `data-disabled` dims the thumb to 60% opacity.
+    await expect(getComputedStyle(disabledThumb).opacity).toBe("0.6");
+  },
+};
diff --git a/packages/propel/src/elements/slider/slider.tsx b/packages/propel/src/elements/slider/slider.tsx
new file mode 100644
index 00000000..338fb24e
--- /dev/null
+++ b/packages/propel/src/elements/slider/slider.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { sliderVariants } from "./variants";
+
+export type SliderProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled slider root: stacks the (optional) header row over the control. Base-UI-agnostic —
+ * graft the slider behavior in `components` via `<BaseSlider.Root render={<Slider/>} />`.
+ */
+export function Slider({ render, ...props }: SliderProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: sliderVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/slider/variants.ts b/packages/propel/src/elements/slider/variants.ts
new file mode 100644
index 00000000..de5a1a9c
--- /dev/null
+++ b/packages/propel/src/elements/slider/variants.ts
@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { controlLabelClass } from "../../internal/control-group";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// The root only stacks the (optional) header row over the control; the label/value layout
+// lives on `SliderHeader`, not here.
+export const sliderVariants = cva("flex w-full flex-col gap-2");
+
+// The header row above the control: label at the inline-start, value readout at the inline-end.
+export const sliderHeaderVariants = cva("flex items-center justify-between gap-3");
+
+export const sliderValueVariants = cva("text-13 text-secondary");
+
+// Control height must accommodate the thumb. The track bar height is always the same (h-1),
+// but the thumb and its surrounding hit-area grow with `magnitude`.
+export const sliderControlVariants = cva("flex items-center", {
+  variants: {
+    magnitude: {
+      sm: "h-4",
+      md: "h-5",
+      lg: "h-6",
+    },
+  },
+});
+
+// Track height is always the same (thin bar) per the design spec.
+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");
+
+// Thumb size is fixed per size variant. Focus ring, disabled state, and shape are always the same.
+export const sliderThumbVariants = cva(
+  [
+    "block 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",
+  ].join(" "),
+  {
+    variants: {
+      magnitude: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+  },
+);
+
+export const sliderLabelVariants = cva(controlLabelClass);
+
+export type SliderMagnitude = NonNullable<VariantProps<typeof sliderControlVariants>["magnitude"]>;
+export type SliderControlVariantProps = StrictVariantProps<typeof sliderControlVariants>;
+export type SliderThumbVariantProps = StrictVariantProps<typeof sliderThumbVariants>;
diff --git a/packages/propel/src/ui/switch/index.tsx b/packages/propel/src/elements/switch/index.tsx
similarity index 100%
rename from packages/propel/src/ui/switch/index.tsx
rename to packages/propel/src/elements/switch/index.tsx
diff --git a/packages/propel/src/elements/switch/switch-thumb.tsx b/packages/propel/src/elements/switch/switch-thumb.tsx
new file mode 100644
index 00000000..a25b983d
--- /dev/null
+++ b/packages/propel/src/elements/switch/switch-thumb.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { switchThumbVariants } from "./variants";
+
+export type SwitchThumbProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The styled switch knob. Rendered inside a `Switch` track; it slides between the off/on gutters
+ * when the track is checked. Its diameter and travel come from the parent `Switch`'s `magnitude`
+ * (published as CSS variables on the track), so the thumb takes no size prop of its own.
+ * Base-UI-agnostic — graft `<BaseSwitch.Thumb render={<SwitchThumb />} />` in `components`.
+ */
+export function SwitchThumb({ render, ...props }: SwitchThumbProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: switchThumbVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/switch/switch.stories.tsx b/packages/propel/src/elements/switch/switch.stories.tsx
new file mode 100644
index 00000000..7b1e59e7
--- /dev/null
+++ b/packages/propel/src/elements/switch/switch.stories.tsx
@@ -0,0 +1,177 @@
+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"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI import, no graft — with every visual state pinned statically via the
+// `data-*`/aria attributes Base UI's Switch would set (`data-checked`, `data-disabled`,
+// `data-readonly`, `role="switch"`, `aria-checked`). `Switch` is the styled track: it carries the
+// size axis (`magnitude`) and publishes the thumb's diameter/travel as CSS variables; `SwitchThumb`
+// is the sliding knob, sizing itself from the parent track. Toggling, keyboard, labeling, and
+// `Field`/form behavior are demonstrated and tested in Components/Switch.
+const meta = {
+  title: "Elements/Switch",
+  component: Switch,
+  subcomponents: { SwitchThumb },
+  args: { magnitude: "md" },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Track + thumb assembled statically, pinned on via `data-checked` (on both parts — the track
+ * recolors to the accent, the thumb translates by the track's per-magnitude travel variable). The
+ * pinned `role`/`aria-checked`/`aria-label` mirror what Base UI would set on the rendered track.
+ */
+export const Default: Story = {
+  render: ({ magnitude }) => (
+    <Switch
+      magnitude={magnitude}
+      role="switch"
+      aria-checked="true"
+      aria-label="Notifications"
+      data-checked=""
+    >
+      <SwitchThumb data-checked="" />
+    </Switch>
+  ),
+};
+
+/**
+ * The three track sizes of the Figma "Toggle" scale (lg 30×18 · md 27×16 · sm 23×14). Each
+ * magnitude sets the thumb's diameter and checked-state travel via CSS variables, so the thumb
+ * needs no size prop of its own.
+ */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Switch
+          key={magnitude}
+          magnitude={magnitude}
+          role="switch"
+          aria-checked="true"
+          aria-label={`Size ${magnitude}`}
+          data-checked=""
+        >
+          <SwitchThumb data-checked="" />
+        </Switch>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every visual state, pinned statically. Off is the resting placeholder-tinted track;
+ * `data-checked` swaps it for the accent fill and slides the thumb; focus-visible (forced via
+ * pseudo-states) draws the offset accent outline; `data-disabled` dims the whole control to 40% and
+ * switches to the not-allowed cursor; `data-readonly` applies the same 40% dim without the cursor
+ * change — both match Figma's "Unchangeable" states.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { focusVisible: ["#elements-switch-focus-visible"] },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex items-center gap-3">
+      <Switch magnitude={magnitude} role="switch" aria-checked="false" aria-label="Off">
+        <SwitchThumb />
+      </Switch>
+      <Switch
+        magnitude={magnitude}
+        role="switch"
+        aria-checked="true"
+        aria-label="On"
+        data-checked=""
+      >
+        <SwitchThumb data-checked="" />
+      </Switch>
+      <Switch
+        id="elements-switch-focus-visible"
+        magnitude={magnitude}
+        role="switch"
+        aria-checked="false"
+        aria-label="Focus-visible"
+      >
+        <SwitchThumb />
+      </Switch>
+      <Switch
+        magnitude={magnitude}
+        role="switch"
+        aria-checked="false"
+        aria-disabled="true"
+        aria-label="Disabled off"
+        data-disabled=""
+      >
+        <SwitchThumb data-disabled="" />
+      </Switch>
+      <Switch
+        magnitude={magnitude}
+        role="switch"
+        aria-checked="true"
+        aria-disabled="true"
+        aria-label="Disabled on"
+        data-disabled=""
+        data-checked=""
+      >
+        <SwitchThumb data-disabled="" data-checked="" />
+      </Switch>
+      <Switch
+        magnitude={magnitude}
+        role="switch"
+        aria-checked="false"
+        aria-readonly="true"
+        aria-label="Read-only off"
+        data-readonly=""
+      >
+        <SwitchThumb data-readonly="" />
+      </Switch>
+      <Switch
+        magnitude={magnitude}
+        role="switch"
+        aria-checked="true"
+        aria-readonly="true"
+        aria-label="Read-only on"
+        data-readonly=""
+        data-checked=""
+      >
+        <SwitchThumb data-readonly="" data-checked="" />
+      </Switch>
+    </div>
+  ),
+};
+
+/**
+ * Hidden CSS canary: asserts the pinned `data-*` states compile to real styling — `data-checked`
+ * recolors the track away from the resting placeholder tint and translates the thumb by the track's
+ * travel variable, and `data-disabled` dims the control to 40% opacity. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCssCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const off = canvas.getByRole("switch", { name: "Off" });
+    const on = canvas.getByRole("switch", { name: "On" });
+    // `data-checked` swaps the placeholder-tinted track for the accent fill.
+    await expect(getComputedStyle(on).backgroundColor).not.toBe(
+      getComputedStyle(off).backgroundColor,
+    );
+    // The checked thumb translates by the track's per-magnitude travel variable.
+    const [offThumb] = Array.from(off.children) as HTMLElement[];
+    const [onThumb] = Array.from(on.children) as HTMLElement[];
+    // Tailwind v4's translate-x-* compiles to the standalone CSS `translate` property.
+    await expect(getComputedStyle(onThumb).translate).not.toBe(
+      getComputedStyle(offThumb).translate,
+    );
+    // `data-disabled` dims the whole control to 40%.
+    const disabled = canvas.getByRole("switch", { name: "Disabled on" });
+    await expect(getComputedStyle(disabled).opacity).toBe("0.4");
+  },
+};
diff --git a/packages/propel/src/elements/switch/switch.tsx b/packages/propel/src/elements/switch/switch.tsx
new file mode 100644
index 00000000..84874cc6
--- /dev/null
+++ b/packages/propel/src/elements/switch/switch.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type SwitchVariantProps, switchVariants } from "./variants";
+
+export type { SwitchMagnitude } from "./variants";
+
+export type SwitchProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  SwitchVariantProps;
+
+/**
+ * The styled switch track. It carries the size axis (`magnitude`) and publishes the thumb's
+ * diameter/travel as CSS variables. Base-UI-agnostic — graft the switch behavior in `components`
+ * via `<BaseSwitch.Root render={<Switch magnitude="md" />}>` (it supplies `role="switch"` and full
+ * keyboard/form support). Render a `SwitchThumb` as its child; the thumb sizes itself from this
+ * track's `magnitude`.
+ *
+ * On/off, `disabled`, and `readOnly` are control state from the primitive, not variants. Only the
+ * size axis (`magnitude`) is a visual variant.
+ */
+export function Switch({ magnitude, render, ...props }: SwitchProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: switchVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/switch/variants.ts b/packages/propel/src/elements/switch/variants.ts
similarity index 100%
rename from packages/propel/src/ui/switch/variants.ts
rename to packages/propel/src/elements/switch/variants.ts
diff --git a/packages/propel/src/elements/table/index.tsx b/packages/propel/src/elements/table/index.tsx
new file mode 100644
index 00000000..c7dba1c6
--- /dev/null
+++ b/packages/propel/src/elements/table/index.tsx
@@ -0,0 +1,16 @@
+export * from "./table";
+export * from "./table-scroll-area";
+export * from "./table-scroll-area-viewport";
+export * from "./table-body";
+export * from "./table-cell";
+export * from "./table-cell-content";
+export * from "./table-cell-layout";
+export * from "./table-cell-trigger";
+export * from "./table-cell-trigger-indicator";
+export * from "./table-cell-trigger-label";
+export * from "./table-head";
+export * from "./table-head-sort-indicator";
+export * from "./table-head-sort-trigger";
+export * from "./table-head-title";
+export * from "./table-header";
+export * from "./table-row";
diff --git a/packages/propel/src/ui/table/table-body.tsx b/packages/propel/src/elements/table/table-body.tsx
similarity index 100%
rename from packages/propel/src/ui/table/table-body.tsx
rename to packages/propel/src/elements/table/table-body.tsx
diff --git a/packages/propel/src/elements/table/table-cell-content.tsx b/packages/propel/src/elements/table/table-cell-content.tsx
new file mode 100644
index 00000000..e257e6ad
--- /dev/null
+++ b/packages/propel/src/elements/table/table-cell-content.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableCellContentVariants } from "./variants";
+
+export type TableCellContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/** The growing text region inside a `TableCellLayout`. Truncates instead of overflowing. */
+export function TableCellContent({ render, ...props }: TableCellContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: tableCellContentVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/table/table-cell-layout.tsx b/packages/propel/src/elements/table/table-cell-layout.tsx
new file mode 100644
index 00000000..836bb8a0
--- /dev/null
+++ b/packages/propel/src/elements/table/table-cell-layout.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableCellLayoutVariants } from "./variants";
+
+export type TableCellLayoutProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The inline layout inside a plain `TableCell`: a leading node slot, a growing `TableCellContent`,
+ * and a trailing node slot (the shared internal `NodeSlot`). Sets the slot `--node-size`.
+ */
+export function TableCellLayout({ render, ...props }: TableCellLayoutProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: tableCellLayoutVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/table/table-cell-trigger-indicator.tsx b/packages/propel/src/elements/table/table-cell-trigger-indicator.tsx
new file mode 100644
index 00000000..e541207e
--- /dev/null
+++ b/packages/propel/src/elements/table/table-cell-trigger-indicator.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableCellTriggerIndicatorVariants } from "./variants";
+
+export type TableCellTriggerIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trailing glyph slot inside a `TableCellTrigger` (the editable chevron, the action ellipsis).
+ * Sizes its single child to the trigger's `--node-size` and tints it, dimming when the trigger is
+ * disabled. Decorative, so it is `aria-hidden`.
+ */
+export function TableCellTriggerIndicator({ render, ...props }: TableCellTriggerIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: tableCellTriggerIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/table/table-cell-trigger-label.tsx b/packages/propel/src/elements/table/table-cell-trigger-label.tsx
new file mode 100644
index 00000000..2b365f28
--- /dev/null
+++ b/packages/propel/src/elements/table/table-cell-trigger-label.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableCellTriggerLabelVariants } from "./variants";
+
+export type TableCellTriggerLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/** The truncating value text inside an editable `TableCellTrigger`. */
+export function TableCellTriggerLabel({ render, ...props }: TableCellTriggerLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: tableCellTriggerLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/table/table-cell-trigger.tsx b/packages/propel/src/elements/table/table-cell-trigger.tsx
new file mode 100644
index 00000000..90c99292
--- /dev/null
+++ b/packages/propel/src/elements/table/table-cell-trigger.tsx
@@ -0,0 +1,35 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableCellTriggerVariants } from "./variants";
+
+export type TableCellTriggerLayout = "editable" | "action";
+
+export type TableCellTriggerProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style" | "type"
+> & {
+  /** `editable` lays out a value + trailing chevron; `action` centers an icon. */
+  layout: TableCellTriggerLayout;
+  /** Keeps the active editable cell tinted. @default false */
+  selected?: boolean;
+};
+
+/**
+ * The full-cell `<button>` inside an editable/action cell — a single styled element. Base-UI-
+ * agnostic: the ready-made `components/table` grafts the Base UI Menu trigger onto it via `render`
+ * (`<BaseMenu.Trigger render={<TableCellTrigger/>} />`, behavior part outer). Carries a
+ * `cell-trigger` group so its indicator can dim while disabled.
+ */
+export function TableCellTrigger({
+  layout,
+  selected = false,
+  render,
+  ...props
+}: TableCellTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    type: "button",
+    className: tableCellTriggerVariants({ layout, selected }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/table/table-cell.tsx b/packages/propel/src/elements/table/table-cell.tsx
similarity index 100%
rename from packages/propel/src/ui/table/table-cell.tsx
rename to packages/propel/src/elements/table/table-cell.tsx
diff --git a/packages/propel/src/elements/table/table-head-sort-indicator.tsx b/packages/propel/src/elements/table/table-head-sort-indicator.tsx
new file mode 100644
index 00000000..94532ac1
--- /dev/null
+++ b/packages/propel/src/elements/table/table-head-sort-indicator.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableHeadSortIndicatorVariants } from "./variants";
+
+export type TableHeadSortIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The sort chevron at the trailing edge of a `TableHeadSortTrigger`. Sizes its single glyph child
+ * to the trigger's `--node-size`; the caller passes the direction glyph. Decorative (the `<th>`
+ * carries `aria-sort`), so it is `aria-hidden`.
+ */
+export function TableHeadSortIndicator({ render, ...props }: TableHeadSortIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: tableHeadSortIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/table/table-head-sort-trigger.tsx b/packages/propel/src/elements/table/table-head-sort-trigger.tsx
new file mode 100644
index 00000000..9affc38a
--- /dev/null
+++ b/packages/propel/src/elements/table/table-head-sort-trigger.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableHeadSortTriggerVariants } from "./variants";
+
+export type TableHeadSortTriggerProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style" | "type"
+>;
+
+/**
+ * The sort control inside a sortable `TableHead`: a `<button>` wrapping the `TableHeadTitle` and a
+ * trailing `TableHeadSortIndicator`. Clicking it cycles the column's sort order.
+ */
+export function TableHeadSortTrigger({ render, ...props }: TableHeadSortTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    type: "button",
+    className: tableHeadSortTriggerVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/table/table-head-title.tsx b/packages/propel/src/elements/table/table-head-title.tsx
new file mode 100644
index 00000000..62945581
--- /dev/null
+++ b/packages/propel/src/elements/table/table-head-title.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableHeadTitleVariants } from "./variants";
+
+export type TableHeadTitleProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/** The column title inside a `TableHead`. Truncates instead of overflowing the cell. */
+export function TableHeadTitle({ render, ...props }: TableHeadTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: tableHeadTitleVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/table/table-head.tsx b/packages/propel/src/elements/table/table-head.tsx
similarity index 100%
rename from packages/propel/src/ui/table/table-head.tsx
rename to packages/propel/src/elements/table/table-head.tsx
diff --git a/packages/propel/src/ui/table/table-header.tsx b/packages/propel/src/elements/table/table-header.tsx
similarity index 100%
rename from packages/propel/src/ui/table/table-header.tsx
rename to packages/propel/src/elements/table/table-header.tsx
diff --git a/packages/propel/src/ui/table/table-row.tsx b/packages/propel/src/elements/table/table-row.tsx
similarity index 100%
rename from packages/propel/src/ui/table/table-row.tsx
rename to packages/propel/src/elements/table/table-row.tsx
diff --git a/packages/propel/src/elements/table/table-scroll-area-viewport.tsx b/packages/propel/src/elements/table/table-scroll-area-viewport.tsx
new file mode 100644
index 00000000..d80b1145
--- /dev/null
+++ b/packages/propel/src/elements/table/table-scroll-area-viewport.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableScrollAreaViewportVariants } from "./variants";
+
+export type TableScrollAreaViewportProps = Omit<
+  useRender.ComponentProps<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The scroll viewport inside a `TableScrollArea` that holds the `<table>` — a single styled
+ * `<div>`. It bakes no scroll behavior: Base-UI-agnostic — the ready-made `components/table` grafts
+ * the Base UI `ScrollArea.Viewport` onto it via `<BaseScrollArea.Viewport
+ * render={<TableScrollAreaViewport/>} />` (behavior part outer).
+ */
+export function TableScrollAreaViewport({ render, ...props }: TableScrollAreaViewportProps) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps({ className: tableScrollAreaViewportVariants() }, props),
+  });
+}
diff --git a/packages/propel/src/elements/table/table-scroll-area.tsx b/packages/propel/src/elements/table/table-scroll-area.tsx
new file mode 100644
index 00000000..4bf0bccd
--- /dev/null
+++ b/packages/propel/src/elements/table/table-scroll-area.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tableScrollAreaVariants } from "./variants";
+
+export type TableScrollAreaProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The rounded, hairline-bordered scroll frame around a `Table` — a single styled `<div>`. It bakes
+ * no scroll behavior: Base-UI-agnostic — the ready-made `components/table` grafts the Base UI
+ * `ScrollArea.Root` onto it via `<BaseScrollArea.Root render={<TableScrollArea/>} />` (behavior
+ * part outer), alongside the `TableScrollAreaViewport`, the `<table>`, and the scrollbars.
+ */
+export function TableScrollArea({ render, ...props }: TableScrollAreaProps) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps({ className: tableScrollAreaVariants() }, props),
+  });
+}
diff --git a/packages/propel/src/elements/table/table.stories.tsx b/packages/propel/src/elements/table/table.stories.tsx
new file mode 100644
index 00000000..373e24f1
--- /dev/null
+++ b/packages/propel/src/elements/table/table.stories.tsx
@@ -0,0 +1,626 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, ChevronsUpDown, ChevronUp, Ellipsis } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { Avatar, AvatarFallback } from "../avatar/index";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableCellContent,
+  TableCellLayout,
+  TableCellTrigger,
+  TableCellTriggerIndicator,
+  TableCellTriggerLabel,
+  TableHead,
+  TableHeader,
+  TableHeadSortIndicator,
+  TableHeadSortTrigger,
+  TableHeadTitle,
+  TableRow,
+  TableScrollArea,
+  TableScrollAreaViewport,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled table parts render
+// DIRECTLY — no Base UI grafts — with the scroll frame laid out statically (its scrolling is the
+// Base UI ScrollArea, grafted in the components tier) and every visual state pinned statically:
+// `aria-sort` on the sortable headers, `data-popup-open=""` on the full-cell triggers (the
+// attribute Base UI's Menu trigger would set), the native `disabled`, and `:hover` forced by the
+// pseudo-states addon. Sorting, menus, pagination, and keyboard behavior are demonstrated AND
+// tested in the components-tier story (Components/Table).
+const meta = {
+  title: "Elements/Table",
+  component: Table,
+  subcomponents: {
+    TableScrollArea,
+    TableScrollAreaViewport,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableHeadTitle,
+    TableHeadSortTrigger,
+    TableHeadSortIndicator,
+    TableCell,
+    TableCellLayout,
+    TableCellContent,
+    TableCellTrigger,
+    TableCellTriggerLabel,
+    TableCellTriggerIndicator,
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type Person = {
+  name: string;
+  display: string;
+  email: string;
+  role: string;
+  joined: string;
+};
+
+const PEOPLE: Person[] = [
+  {
+    name: "Chargers",
+    display: "astra",
+    email: "astra.terra@example.com",
+    role: "Admin",
+    joined: "Jan 12, 2024",
+  },
+  {
+    name: "Alpha",
+    display: "nova",
+    email: "nova.star@example.com",
+    role: "Member",
+    joined: "Mar 3, 2024",
+  },
+  {
+    name: "Beta",
+    display: "lyra",
+    email: "lyra.constellation@example.com",
+    role: "Member",
+    joined: "Aug 21, 2024",
+  },
+];
+
+const COLUMNS = ["Name", "Display name", "Email", "Account type"];
+
+/**
+ * The full anatomy assembled statically in the standard `table` mode (rounded frame, row dividers
+ * only): `TableScrollArea` (the hairline frame) holding a `TableScrollAreaViewport` and the `Table`
+ * — both are just styled divs here; the Base UI `ScrollArea` grafts the actual scrolling onto them
+ * in the components tier. Inside, `TableHeader`/`TableBody` › `TableRow` › `TableHead`/`TableCell`,
+ * with each plain cell laying out a leading `NodeSlot` (the avatar) and a truncating
+ * `TableCellContent` through `TableCellLayout`. The second row pins the row-hover tint
+ * (`hover:bg-layer-2-hover`) via the pseudo-states addon.
+ */
+export const Default: Story = {
+  parameters: { pseudo: { hover: "#table-row-hover" } },
+  render: () => (
+    <TableScrollArea>
+      <TableScrollAreaViewport>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {COLUMNS.map((c) => (
+                <TableHead mode="table" pinned="none" key={c}>
+                  <TableHeadTitle>{c}</TableHeadTitle>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {PEOPLE.map((person, index) => (
+              <TableRow key={person.email} id={index === 1 ? "table-row-hover" : undefined}>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <NodeSlot>
+                      <Avatar magnitude="xs" role="img" aria-label={person.name}>
+                        <AvatarFallback tone="indigo">{person.name.charAt(0)}</AvatarFallback>
+                      </Avatar>
+                    </NodeSlot>
+                    <TableCellContent>{person.name}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.display}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.email}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.role}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableScrollAreaViewport>
+    </TableScrollArea>
+  ),
+};
+
+/**
+ * The other value of the `mode` axis: `spreadsheet` borders every head/cell edge to form a full
+ * grid (the `table` mode above draws row dividers only). `mode` sits on each `TableHead` and
+ * `TableCell` — the components-tier `Table` shares it via context so it is set once there.
+ */
+export const Spreadsheet: Story = {
+  render: () => (
+    <TableScrollArea>
+      <TableScrollAreaViewport>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {COLUMNS.map((c) => (
+                <TableHead mode="spreadsheet" pinned="none" key={c}>
+                  <TableHeadTitle>{c}</TableHeadTitle>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {PEOPLE.map((person) => (
+              <TableRow key={person.email}>
+                <TableCell mode="spreadsheet" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.name}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="spreadsheet" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.display}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="spreadsheet" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.email}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="spreadsheet" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.role}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableScrollAreaViewport>
+    </TableScrollArea>
+  ),
+};
+
+/**
+ * The scroll frame's own states, side by side: at **rest**, and with the viewport's keyboard-focus
+ * ring pinned (`focus-visible:ring-accent-strong`, forced by the pseudo-states addon). In the
+ * components tier the Base UI `ScrollArea` makes the viewport focusable so keyboard users can
+ * scroll it — the inset ring marks that focus.
+ */
+export const ScrollFrameFocus: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { focusVisible: "#table-viewport-focus" },
+  },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <TableScrollArea>
+        <TableScrollAreaViewport>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead mode="table" pinned="none">
+                  <TableHeadTitle>Name</TableHeadTitle>
+                </TableHead>
+                <TableHead mode="table" pinned="none">
+                  <TableHeadTitle>Email</TableHeadTitle>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>Chargers</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>astra.terra@example.com</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableScrollAreaViewport>
+      </TableScrollArea>
+      <TableScrollArea>
+        <TableScrollAreaViewport id="table-viewport-focus">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead mode="table" pinned="none">
+                  <TableHeadTitle>Name</TableHeadTitle>
+                </TableHead>
+                <TableHead mode="table" pinned="none">
+                  <TableHeadTitle>Email</TableHeadTitle>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>Chargers</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>astra.terra@example.com</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableScrollAreaViewport>
+      </TableScrollArea>
+    </div>
+  ),
+};
+
+/**
+ * Every visual state of a sortable header, pinned statically: a `TableHeadSortTrigger` button wraps
+ * the `TableHeadTitle` and a `TableHeadSortIndicator` chevron, while the `<th>` pins the
+ * `aria-sort` the components-tier `TableHead` would set — **Rest** (`none`, double chevron),
+ * **Hovered** (the trigger's `hover:text-secondary`, forced by the pseudo-states addon),
+ * **Ascending** (chevron up), and **Descending** (chevron down). The click/keyboard sort cycle
+ * lives in Components/Table.
+ */
+export const SortStates: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: "#table-sort-trigger-hover" },
+  },
+  render: () => (
+    <TableScrollArea>
+      <TableScrollAreaViewport>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead mode="table" pinned="none" aria-sort="none">
+                <TableHeadSortTrigger>
+                  <TableHeadTitle>Rest</TableHeadTitle>
+                  <TableHeadSortIndicator>
+                    <ChevronsUpDown />
+                  </TableHeadSortIndicator>
+                </TableHeadSortTrigger>
+              </TableHead>
+              <TableHead mode="table" pinned="none" aria-sort="none">
+                <TableHeadSortTrigger id="table-sort-trigger-hover">
+                  <TableHeadTitle>Hovered</TableHeadTitle>
+                  <TableHeadSortIndicator>
+                    <ChevronsUpDown />
+                  </TableHeadSortIndicator>
+                </TableHeadSortTrigger>
+              </TableHead>
+              <TableHead mode="table" pinned="none" aria-sort="ascending">
+                <TableHeadSortTrigger>
+                  <TableHeadTitle>Ascending</TableHeadTitle>
+                  <TableHeadSortIndicator>
+                    <ChevronUp />
+                  </TableHeadSortIndicator>
+                </TableHeadSortTrigger>
+              </TableHead>
+              <TableHead mode="table" pinned="none" aria-sort="descending">
+                <TableHeadSortTrigger>
+                  <TableHeadTitle>Descending</TableHeadTitle>
+                  <TableHeadSortIndicator>
+                    <ChevronDown />
+                  </TableHeadSortIndicator>
+                </TableHeadSortTrigger>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {PEOPLE.map((person) => (
+              <TableRow key={person.email}>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.name}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.display}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.email}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell mode="table" pinned="none" padding="cell">
+                  <TableCellLayout>
+                    <TableCellContent>{person.role}</TableCellContent>
+                  </TableCellLayout>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableScrollAreaViewport>
+    </TableScrollArea>
+  ),
+};
+
+/**
+ * Every visual state of the full-cell `TableCellTrigger`, per `layout` — **editable** (a truncating
+ * `TableCellTriggerLabel` + trailing chevron `TableCellTriggerIndicator`) and **action** (a
+ * centered, icon-only glyph). The host `TableCell` uses `padding="trigger"` so the trigger fills
+ * the cell. Rows pin: **Rest**; **Hovered** (`hover:bg-layer-transparent-hover`, forced by the
+ * pseudo-states addon); **Open** — `data-popup-open=""`, the attribute Base UI's Menu trigger sets
+ * while its menu is open (`bg-layer-transparent-active`); **Selected** — the `selected` axis that
+ * keeps the active editable cell tinted; **Disabled** — the native `disabled`, dimming the text and
+ * (via the `cell-trigger` group) the indicator glyph. The menus themselves open in
+ * Components/Table.
+ */
+export const CellTriggers: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: ["#table-cell-trigger-hover-editable", "#table-cell-trigger-hover-action"] },
+  },
+  render: () => (
+    <TableScrollArea>
+      <TableScrollAreaViewport>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead mode="table" pinned="none">
+                <TableHeadTitle>State</TableHeadTitle>
+              </TableHead>
+              <TableHead mode="table" pinned="none">
+                <TableHeadTitle>Account type</TableHeadTitle>
+              </TableHead>
+              <TableHead mode="table" pinned="none">
+                <TableHeadTitle>Actions</TableHeadTitle>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>Rest</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="editable" id="table-cell-trigger-rest">
+                  <TableCellTriggerLabel>Admin</TableCellTriggerLabel>
+                  <TableCellTriggerIndicator>
+                    <ChevronDown />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="action" aria-label="Row actions (rest)">
+                  <TableCellTriggerIndicator>
+                    <Ellipsis />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>Hovered</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="editable" id="table-cell-trigger-hover-editable">
+                  <TableCellTriggerLabel>Admin</TableCellTriggerLabel>
+                  <TableCellTriggerIndicator>
+                    <ChevronDown />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger
+                  layout="action"
+                  id="table-cell-trigger-hover-action"
+                  aria-label="Row actions (hovered)"
+                >
+                  <TableCellTriggerIndicator>
+                    <Ellipsis />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>Open</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="editable" id="table-cell-trigger-open" data-popup-open="">
+                  <TableCellTriggerLabel>Admin</TableCellTriggerLabel>
+                  <TableCellTriggerIndicator>
+                    <ChevronDown />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger
+                  layout="action"
+                  data-popup-open=""
+                  aria-label="Row actions (open)"
+                >
+                  <TableCellTriggerIndicator>
+                    <Ellipsis />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>Selected</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="editable" selected id="table-cell-trigger-selected">
+                  <TableCellTriggerLabel>Admin</TableCellTriggerLabel>
+                  <TableCellTriggerIndicator>
+                    <ChevronDown />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="action" aria-label="Row actions (selected row)">
+                  <TableCellTriggerIndicator>
+                    <Ellipsis />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>Disabled</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="editable" disabled>
+                  <TableCellTriggerLabel>Admin</TableCellTriggerLabel>
+                  <TableCellTriggerIndicator>
+                    <ChevronDown />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="trigger">
+                <TableCellTrigger layout="action" disabled aria-label="Row actions (disabled)">
+                  <TableCellTriggerIndicator>
+                    <Ellipsis />
+                  </TableCellTriggerIndicator>
+                </TableCellTrigger>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableScrollAreaViewport>
+    </TableScrollArea>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-popup-open=""` trigger's background (`data-popup-open:bg-layer-transparent-active`) and the
+ * `selected` trigger's (`bg-layer-transparent-selected`) both compute away from the resting
+ * trigger's. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag.
+ */
+export const CellTriggersCanary: Story = {
+  ...CellTriggers,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const backgroundColor = (id: string) => {
+      const trigger = canvasElement.querySelector(`#${id}`);
+      if (!(trigger instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(trigger).backgroundColor;
+    };
+    await expect(backgroundColor("table-cell-trigger-open")).not.toBe(
+      backgroundColor("table-cell-trigger-rest"),
+    );
+    await expect(backgroundColor("table-cell-trigger-selected")).not.toBe(
+      backgroundColor("table-cell-trigger-rest"),
+    );
+  },
+};
+
+/**
+ * The `pinned` axis on heads and cells: the first column pins to the inline **start** and the last
+ * to the inline **end**, each carrying its own `layer-2` background and a hairline edge border so
+ * scrolled content can't show through. The width-constrained wrapper scrolls sideways — a plain
+ * `overflow-x-auto` div standing in for the Base UI `ScrollArea` viewport that supplies the real
+ * scrolling in the components tier (Components/Table › StickyHeaderAndColumns).
+ */
+export const PinnedColumns: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div
+      // A scrollable region must be keyboard-reachable (axe scrollable-region-focusable).
+      tabIndex={0}
+      role="region"
+      aria-label="Pinned columns table"
+      className="w-115 overflow-x-auto rounded-lg border border-subtle bg-surface-1"
+    >
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead mode="table" pinned="start">
+              <TableHeadTitle>Name</TableHeadTitle>
+            </TableHead>
+            <TableHead mode="table" pinned="none">
+              <TableHeadTitle>Display name</TableHeadTitle>
+            </TableHead>
+            <TableHead mode="table" pinned="none">
+              <TableHeadTitle>Email</TableHeadTitle>
+            </TableHead>
+            <TableHead mode="table" pinned="none">
+              <TableHeadTitle>Account type</TableHeadTitle>
+            </TableHead>
+            <TableHead mode="table" pinned="end">
+              <TableHeadTitle>Member since</TableHeadTitle>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {PEOPLE.map((person) => (
+            <TableRow key={person.email}>
+              <TableCell mode="table" pinned="start" padding="cell">
+                <TableCellLayout>
+                  <NodeSlot>
+                    <Avatar magnitude="xs" role="img" aria-label={person.name}>
+                      <AvatarFallback tone="indigo">{person.name.charAt(0)}</AvatarFallback>
+                    </Avatar>
+                  </NodeSlot>
+                  <TableCellContent>{person.name}</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>{person.display}</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>{person.email}</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="none" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>{person.role}</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell mode="table" pinned="end" padding="cell">
+                <TableCellLayout>
+                  <TableCellContent>{person.joined}</TableCellContent>
+                </TableCellLayout>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/table/table.tsx b/packages/propel/src/elements/table/table.tsx
similarity index 100%
rename from packages/propel/src/ui/table/table.tsx
rename to packages/propel/src/elements/table/table.tsx
diff --git a/packages/propel/src/elements/table/variants.ts b/packages/propel/src/elements/table/variants.ts
new file mode 100644
index 00000000..b113875a
--- /dev/null
+++ b/packages/propel/src/elements/table/variants.ts
@@ -0,0 +1,162 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { nodeSlotClass } from "../../internal/node-slot";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// Table is a structural data primitive. The designer locked two layout looks (Figma
+// "Table" vs "Spreadsheet") as the only `mode` axis, and baked everything else
+// (header chrome, cell padding, row hover, sort-indicator position, focus ring) into
+// the component so every table stays consistent. Every part's className lives here as
+// a cva pairing, so no part takes a `className` at its boundary.
+
+// The rounded, hairline scroll frame around the `<table>`. The ready-made grafts the Base UI
+// ScrollArea.Root onto this styled frame via `render`.
+export const tableScrollAreaVariants = cva(
+  "relative flex max-h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1",
+);
+
+// The scroll viewport that the `<table>` lives in.
+export const tableScrollAreaViewportVariants = cva(
+  cx(
+    "min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-inset",
+  ),
+);
+
+// The `<table>` element itself.
+export const tableModes = cva("w-full caption-bottom border-collapse text-13 text-primary");
+
+// `<thead>` / `<tbody>` carry no chrome of their own; the cva keeps every part styled
+// in one place even when the pairing is empty.
+export const tableHeaderVariants = cva("");
+
+export const tableBodyVariants = cva("");
+
+// A body `<tr>`: the row hover tint (an "always" per the designer) and a hover group so
+// pinned cells can react to the row's hover.
+export const tableRowVariants = cva("group/body-row bg-layer-2 hover:bg-layer-2-hover");
+
+// A header cell (`<th>`). `mode` is the table look; the row/edge borders come from
+// the surrounding `Table`'s mode via `pinned`/`edge`. Sticky to the top so the
+// header stays visible while the body scrolls (an "always").
+export const tableHeadVariants = cva(
+  cx(
+    "sticky top-0 h-[38px] px-4 py-2 text-start align-middle",
+    "bg-layer-1 text-12 font-semibold text-tertiary",
+  ),
+  {
+    variants: {
+      // The surrounding table look, which decides this cell's borders.
+      mode: {
+        table: "border-b border-subtle",
+        spreadsheet: "border-e-[0.5px] border-b-[0.5px] border-subtle last:border-e-0",
+      },
+      // Pin this header to an inline edge while the body scrolls sideways.
+      pinned: {
+        none: "z-20",
+        start: "sticky inset-s-0 z-30 border-e-[0.5px] border-subtle",
+        end: "sticky inset-e-0 z-30 border-s-[0.5px] border-subtle",
+      },
+    },
+  },
+);
+
+// A data cell (`<td>`). `mode` decides its borders; `pinned` makes it stick to an
+// inline edge (carrying its own background so scrolled content does not show through).
+export const tableCellVariants = cva("h-11 align-middle", {
+  variants: {
+    mode: {
+      table: "border-b-[0.5px] border-subtle group-last/body-row:border-b-0",
+      spreadsheet:
+        "border-e-[0.5px] border-b-[0.5px] border-subtle group-last/body-row:border-b-0 last:border-e-0",
+    },
+    pinned: {
+      none: "",
+      start:
+        "sticky inset-s-0 z-10 border-e-[0.5px] border-subtle bg-layer-2 group-hover/body-row:bg-layer-2-hover",
+      end: "sticky inset-e-0 z-10 border-s-[0.5px] border-subtle bg-layer-2 group-hover/body-row:bg-layer-2-hover",
+    },
+    // Cells that host a full-cell trigger (editable/action) drop their own padding so
+    // the trigger fills the cell; plain cells keep the standard padding.
+    padding: {
+      cell: "px-4 py-2",
+      trigger: "p-0",
+    },
+  },
+});
+
+// Per-axis types derive from the cvas (the single source of truth). `mode`/`pinned` are shared by
+// head + cell; `padding` is cell-only. The `<Name>VariantProps` bundles stay PRIVATE — a part
+// imports its own for `Props` (rule 10) and never re-exports it.
+type TableCellVariantConfig = VariantProps<typeof tableCellVariants>;
+
+/** The two table looks: `table` (row dividers only) and `spreadsheet` (full grid). */
+export type TableMode = NonNullable<TableCellVariantConfig["mode"]>;
+
+/** Which inline edge a header/cell pins to (or `none`) while the table scrolls sideways. */
+export type TablePinned = NonNullable<TableCellVariantConfig["pinned"]>;
+
+/** A cell's inner spacing: `cell` pads the content; `trigger` drops it for a full-cell trigger. */
+export type TableCellPadding = NonNullable<TableCellVariantConfig["padding"]>;
+
+export type TableCellVariantProps = StrictVariantProps<typeof tableCellVariants>;
+export type TableHeadVariantProps = StrictVariantProps<typeof tableHeadVariants>;
+
+// The inline flex layout inside a plain cell: leading slot, growing content, trailing
+// slot. Padding lives on the `<td>` (`TableCell`), not here.
+export const tableCellLayoutVariants = cva("flex items-center gap-2 [--node-size:1.25rem]");
+
+// The growing text region of a cell; truncates instead of overflowing.
+export const tableCellContentVariants = cva("min-w-0 flex-1 truncate");
+
+// The label region inside a `TableHead`: truncates the column title.
+export const tableHeadTitleVariants = cva("truncate");
+
+// The sort control inside a sortable `TableHead`: a button that wraps the title + the
+// sort indicator. The chevron sits to the inline-end of the text (an "always").
+export const tableHeadSortTriggerVariants = cva(
+  cx(
+    "-mx-1 inline-flex items-center gap-1.5 rounded-sm px-1 [--node-size:0.875rem]",
+    "text-tertiary hover:text-secondary",
+    "outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "cursor-pointer",
+  ),
+);
+
+// The sort chevron at the trailing edge of a sort control. Sizes its single glyph via
+// the node-slot class and tints it; the caller passes the direction glyph.
+export const tableHeadSortIndicatorVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
+
+// The full-cell trigger inside an editable/action cell (rendered as the styled outer of
+// a Base UI Menu trigger). `layout` picks the editable (text + trailing chevron) or
+// action (centered icon) layout; `selected` keeps the active editable cell tinted.
+export const tableCellTriggerVariants = cva(
+  cx(
+    "group/cell-trigger flex h-11 w-full items-center outline-none [--node-size:1.25rem]",
+    "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",
+  ),
+  {
+    variants: {
+      layout: {
+        editable: "justify-between gap-1 px-4 text-start",
+        action: "justify-center px-4",
+      },
+      selected: {
+        true: "bg-layer-transparent-selected",
+        false: "",
+      },
+    },
+  },
+);
+
+// The truncating value text inside an editable cell trigger.
+export const tableCellTriggerLabelVariants = cva("min-w-0 truncate");
+
+// The trailing glyph slot inside a cell trigger (the editable chevron, the action
+// ellipsis). Sizes its single child via the node-slot class and tints it, dimming when
+// the trigger is disabled.
+export const tableCellTriggerIndicatorVariants = cva(
+  cx(nodeSlotClass, "text-icon-secondary group-disabled/cell-trigger:text-icon-disabled"),
+);
diff --git a/packages/propel/src/ui/tabs/index.tsx b/packages/propel/src/elements/tabs/index.tsx
similarity index 100%
rename from packages/propel/src/ui/tabs/index.tsx
rename to packages/propel/src/elements/tabs/index.tsx
diff --git a/packages/propel/src/elements/tabs/tab-underline-bar-track.tsx b/packages/propel/src/elements/tabs/tab-underline-bar-track.tsx
new file mode 100644
index 00000000..8b328cb6
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tab-underline-bar-track.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tabUnderlineBarTrackVariants } from "./variants";
+
+export type TabUnderlineBarTrackProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The padded track that holds an `underline`-appearance tab's sliding bar. Compose a
+ * `<TabUnderlineBar />` inside it; owns the styled `<span>` so the underline track cva stays
+ * internal.
+ */
+export function TabUnderlineBarTrack({ render, ...props }: TabUnderlineBarTrackProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: tabUnderlineBarTrackVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tab-underline-bar.tsx b/packages/propel/src/elements/tabs/tab-underline-bar.tsx
new file mode 100644
index 00000000..869d67bc
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tab-underline-bar.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tabUnderlineBarVariants } from "./variants";
+
+export type TabUnderlineBarProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The decorative bar beneath an `underline`-appearance tab's label: tints on hover and goes
+ * transparent when active (the shared `TabsIndicator` takes over). Sits inside a
+ * `TabUnderlineBarTrack`. Owns the styled `<span>` so the underline cva stays internal.
+ */
+export function TabUnderlineBar({ render, ...props }: TabUnderlineBarProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: tabUnderlineBarVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tab-underline-label.tsx b/packages/propel/src/elements/tabs/tab-underline-label.tsx
new file mode 100644
index 00000000..aaf96fc4
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tab-underline-label.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tabUnderlineLabelVariants } from "./variants";
+
+export type TabUnderlineLabelProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The label row of an `underline`-appearance tab: a rounded, padded box that tints and fills on
+ * hover/active via the tab's `group/tab` state. Sits inside a `Tab`; owns the styled `<span>` so
+ * consumers never touch the underline cva directly.
+ */
+export function TabUnderlineLabel({ render, ...props }: TabUnderlineLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: tabUnderlineLabelVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tab.tsx b/packages/propel/src/elements/tabs/tab.tsx
new file mode 100644
index 00000000..017564b1
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tab.tsx
@@ -0,0 +1,17 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type TabVariantProps, tabVariants } from "./variants";
+
+export type TabProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  TabVariantProps;
+
+/**
+ * A single tab button — a styled `<button>`. Base-UI-agnostic: the ready-made `components/tabs`
+ * grafts the Base UI `Tabs.Tab` behavior (which ties it to the `TabsPanel` of the same `value`) via
+ * `<BaseTabs.Tab render={<Tab/>}/>`.
+ */
+export function Tab({ appearance, render, ...props }: TabProps) {
+  const defaultProps: useRender.ElementProps<"button"> = { className: tabVariants({ appearance }) };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tabs-indicator.tsx b/packages/propel/src/elements/tabs/tabs-indicator.tsx
new file mode 100644
index 00000000..7872c864
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tabs-indicator.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tabsIndicatorVariants } from "./variants";
+
+export type TabsIndicatorProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * The underline bar — a single styled `<span>`. Base-UI-agnostic: the ready-made `components/tabs`
+ * grafts the Base UI `Tabs.Indicator` behavior (`<BaseTabs.Indicator render={<TabsIndicator/>}/>`);
+ * the built-in `TabsList` already renders it for the `underline` appearance.
+ */
+export function TabsIndicator({ render, ...props }: TabsIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: tabsIndicatorVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tabs-list-scroll-area.tsx b/packages/propel/src/elements/tabs/tabs-list-scroll-area.tsx
new file mode 100644
index 00000000..fbff04ce
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tabs-list-scroll-area.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tabsListScrollAreaVariants } from "./variants";
+
+export type TabsListScrollAreaProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The horizontal scroll frame around a `TabsList` — a single styled `<div>` by default. It bakes in
+ * NO scroll behavior, keeping `elements/tabs` independent of the ScrollArea primitive: the
+ * ready-made `components/tabs` `TabsList` grafts the Base UI `ScrollArea.Root` behavior onto it
+ * (`<BaseScrollArea.Root render={<TabsListScrollArea/>}/>`) and composes the list (as the scroll
+ * viewport) plus a scrollbar so a long row of tabs scrolls sideways.
+ */
+export function TabsListScrollArea({ render, ...props }: TabsListScrollAreaProps) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps({ className: tabsListScrollAreaVariants() }, props),
+  });
+}
diff --git a/packages/propel/src/elements/tabs/tabs-list.tsx b/packages/propel/src/elements/tabs/tabs-list.tsx
new file mode 100644
index 00000000..02fc4bf6
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tabs-list.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type TabsListVariantProps, tabsListVariants } from "./variants";
+
+export type TabsListProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  TabsListVariantProps;
+
+/**
+ * The row of tabs — a single styled `<div>`. Base-UI-agnostic: the ready-made `components/tabs`
+ * grafts the Base UI `Tabs.List` behavior (`<BaseTabs.List render={<TabsList/>}/>`) and adds the
+ * horizontal scroller and the underline `TabsIndicator`.
+ */
+export function TabsList({ appearance, render, ...props }: TabsListProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: tabsListVariants({ appearance }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tabs-panel.tsx b/packages/propel/src/elements/tabs/tabs-panel.tsx
new file mode 100644
index 00000000..2786b8fb
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tabs-panel.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tabsPanelVariants } from "./variants";
+
+export type TabsPanelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * Content shown when the `Tab` of the matching `value` is active — a single styled `<div>`.
+ * Base-UI-agnostic: the ready-made `components/tabs` grafts the Base UI `Tabs.Panel` behavior via
+ * `<BaseTabs.Panel render={<TabsPanel/>}/>`.
+ */
+export function TabsPanel({ render, ...props }: TabsPanelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: tabsPanelVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/tabs.stories.tsx b/packages/propel/src/elements/tabs/tabs.stories.tsx
new file mode 100644
index 00000000..9481097a
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tabs.stories.tsx
@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Activity, LayoutGrid, Settings } from "lucide-react";
+import type * as React from "react";
+import { expect, within } from "storybook/test";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  Tab,
+  TabUnderlineBar,
+  TabUnderlineBarTrack,
+  TabUnderlineLabel,
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsListScrollArea,
+  TabsPanel,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the tab semantics (`role="tablist"`/`role="tab"`/
+// `role="tabpanel"`, `aria-selected`) and every visual state pinned statically via the attributes
+// Base UI's tabs would set: `data-active=""` on the selected tab, the native `disabled` attribute,
+// and the `--active-tab-*` CSS vars `Tabs.Indicator` measures (pinned through the indicator's own
+// `render`, the way Base UI's inline style lands on the rendered element). Both values of the
+// family's one variant axis (`appearance: contained | underline`) get a story. Grafting, keyboard,
+// and aria behavior are demonstrated and tested in Components/Tabs.
+const meta = {
+  title: "Elements/Tabs",
+  component: Tabs,
+  subcomponents: {
+    TabsListScrollArea,
+    TabsList,
+    Tab,
+    TabUnderlineLabel,
+    TabUnderlineBarTrack,
+    TabUnderlineBar,
+    TabsIndicator,
+    TabsPanel,
+  },
+  args: { appearance: "contained" },
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const TAB_ITEMS = [
+  {
+    value: "overview",
+    label: "Overview",
+    icon: <LayoutGrid />,
+    panel: "A high-level summary of the project.",
+  },
+  { value: "activity", label: "Activity", icon: <Activity />, panel: "The latest activity feed." },
+  {
+    value: "settings",
+    label: "Settings",
+    icon: <Settings />,
+    panel: "Configuration and preferences.",
+  },
+];
+
+// The `--active-tab-*` geometry Base UI's `Tabs.Indicator` measures live from the active tab,
+// pinned to representative values for these static rows: the list's 2px inline padding puts the
+// first (active) tab at `left: 2px`, and the width approximates the rendered label. The
+// indicator's cva turns the vars into its `top`/`left`/`width` via `calc()`.
+const indicatorStyle = (activeTabWidth: number): React.CSSProperties =>
+  ({
+    "--active-tab-top": "0px",
+    "--active-tab-left": "2px",
+    "--active-tab-width": `${activeTabWidth}px`,
+  }) as React.CSSProperties;
+
+/**
+ * The contained anatomy assembled statically: `Tabs` › `TabsListScrollArea` (the plain frame the
+ * ready-made grafts a real ScrollArea onto) › `TabsList` › `Tab`s, plus the active tab's
+ * `TabsPanel`. The first tab pins `data-active=""` — the attribute Base UI sets on the selected tab
+ * — which lifts it onto the raised card. Only the active panel renders, matching Base UI's
+ * unmount-while-inactive default (which is also why only the active tab carries `aria-controls`).
+ * Each tab leads with an internal `NodeSlot` glyph sized by the tab's own `--node-size`.
+ */
+export const Contained: Story = {
+  render: () => (
+    <Tabs appearance="contained">
+      <TabsListScrollArea>
+        <TabsList appearance="contained" role="tablist" aria-label="Project sections">
+          {TAB_ITEMS.map((item, index) => {
+            const active = index === 0;
+            return (
+              <Tab
+                key={item.value}
+                appearance="contained"
+                id={`tabs-elements-contained-tab-${item.value}`}
+                role="tab"
+                aria-selected={active}
+                aria-controls={active ? "tabs-elements-contained-panel" : undefined}
+                data-active={active ? "" : undefined}
+              >
+                <NodeSlot aria-hidden>{item.icon}</NodeSlot>
+                {item.label}
+              </Tab>
+            );
+          })}
+        </TabsList>
+      </TabsListScrollArea>
+      <TabsPanel
+        id="tabs-elements-contained-panel"
+        role="tabpanel"
+        aria-labelledby="tabs-elements-contained-tab-overview"
+      >
+        {TAB_ITEMS[0].panel}
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * The underline anatomy: each `Tab` stacks a `TabUnderlineLabel` (the rounded label box) over a
+ * `TabUnderlineBarTrack` › `TabUnderlineBar` (the padded track plus the per-tab hover bar), and the
+ * list holds one shared `TabsIndicator` — the sliding dark bar. The active tab pins
+ * `data-active=""` (its label fills, its own bar goes transparent) and the indicator pins the
+ * `--active-tab-*` vars Base UI would measure from that tab, so the bar sits under it.
+ */
+export const Underline: Story = {
+  render: () => (
+    <Tabs appearance="underline">
+      <TabsListScrollArea>
+        <TabsList appearance="underline" role="tablist" aria-label="Project sections">
+          {TAB_ITEMS.map((item, index) => {
+            const active = index === 0;
+            return (
+              <Tab
+                key={item.value}
+                appearance="underline"
+                id={`tabs-elements-underline-tab-${item.value}`}
+                role="tab"
+                aria-selected={active}
+                aria-controls={active ? "tabs-elements-underline-panel" : undefined}
+                data-active={active ? "" : undefined}
+              >
+                <TabUnderlineLabel>{item.label}</TabUnderlineLabel>
+                <TabUnderlineBarTrack>
+                  <TabUnderlineBar />
+                </TabUnderlineBarTrack>
+              </Tab>
+            );
+          })}
+          <TabsIndicator aria-hidden render={<span style={indicatorStyle(76)} />} />
+        </TabsList>
+      </TabsListScrollArea>
+      <TabsPanel
+        id="tabs-elements-underline-panel"
+        role="tabpanel"
+        aria-labelledby="tabs-elements-underline-tab-overview"
+      >
+        {TAB_ITEMS[0].panel}
+      </TabsPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * Every pinnable state, per appearance:
+ *
+ * - **Resting** — the quiet row.
+ * - **Active** — `data-active=""` (the attribute Base UI sets on the selected tab): the contained tab
+ *   lifts onto its raised card; the underline tab fills its label box and hands the bar off to the
+ *   pinned `TabsIndicator` (its own `TabUnderlineBar` goes transparent).
+ * - **Disabled** — the native `disabled` attribute dims the label and swaps the cursor.
+ *
+ * The underline section leads with the active tab so the pinned indicator geometry (`left: 2px`)
+ * lines up under it. Hover and focus-visible are CSS pseudo-classes, not attributes, so they cannot
+ * be pinned here.
+ */
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Tabs appearance="contained">
+        <TabsList appearance="contained" role="tablist" aria-label="Contained tab states">
+          <Tab appearance="contained" role="tab" aria-selected={false}>
+            Resting
+          </Tab>
+          <Tab appearance="contained" role="tab" aria-selected data-active="">
+            Active
+          </Tab>
+          <Tab appearance="contained" role="tab" aria-selected={false} disabled>
+            Disabled
+          </Tab>
+        </TabsList>
+      </Tabs>
+      <Tabs appearance="underline">
+        <TabsList appearance="underline" role="tablist" aria-label="Underline tab states">
+          <Tab appearance="underline" role="tab" aria-selected data-active="">
+            <TabUnderlineLabel>Active</TabUnderlineLabel>
+            <TabUnderlineBarTrack>
+              <TabUnderlineBar />
+            </TabUnderlineBarTrack>
+          </Tab>
+          <Tab appearance="underline" role="tab" aria-selected={false}>
+            <TabUnderlineLabel>Resting</TabUnderlineLabel>
+            <TabUnderlineBarTrack>
+              <TabUnderlineBar />
+            </TabUnderlineBarTrack>
+          </Tab>
+          <Tab appearance="underline" role="tab" aria-selected={false} disabled>
+            <TabUnderlineLabel>Disabled</TabUnderlineLabel>
+            <TabUnderlineBarTrack>
+              <TabUnderlineBar />
+            </TabUnderlineBarTrack>
+          </Tab>
+          <TabsIndicator aria-hidden render={<span style={indicatorStyle(60)} />} />
+        </TabsList>
+      </Tabs>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors and the `--active-tab-*` var
+ * pipeline actually compiled. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    // Contained: `data-active` lifts the tab onto the raised card (its background changes) and
+    // the native `disabled` attribute swaps the text color to the disabled tone.
+    const containedList = within(canvas.getByRole("tablist", { name: "Contained tab states" }));
+    const resting = containedList.getByRole("tab", { name: "Resting" });
+    const active = containedList.getByRole("tab", { name: "Active" });
+    const disabled = containedList.getByRole("tab", { name: "Disabled" });
+    await expect(getComputedStyle(active).backgroundColor).not.toBe(
+      getComputedStyle(resting).backgroundColor,
+    );
+    await expect(getComputedStyle(disabled).color).not.toBe(getComputedStyle(resting).color);
+
+    // Underline: the pinned `data-active` fills the label box through the compiled
+    // `group-data-active/tab` selector.
+    const underlineListEl = canvas.getByRole("tablist", { name: "Underline tab states" });
+    const underlineList = within(underlineListEl);
+    const labelOf = (tab: HTMLElement) => {
+      const label = tab.querySelector("span");
+      if (!(label instanceof HTMLElement)) throw new Error("missing underline label");
+      return label;
+    };
+    await expect(
+      getComputedStyle(labelOf(underlineList.getByRole("tab", { name: "Active" }))).backgroundColor,
+    ).not.toBe(
+      getComputedStyle(labelOf(underlineList.getByRole("tab", { name: "Resting" })))
+        .backgroundColor,
+    );
+
+    // The pinned `--active-tab-left` (2px) resolves through the indicator's compiled
+    // `left: calc(var(--active-tab-left) + 0.5rem)` to 10px.
+    const indicator = underlineListEl.querySelector(":scope > [aria-hidden]");
+    if (!(indicator instanceof HTMLElement)) throw new Error("missing pinned indicator");
+    await expect(getComputedStyle(indicator).left).toBe("10px");
+  },
+};
diff --git a/packages/propel/src/elements/tabs/tabs.tsx b/packages/propel/src/elements/tabs/tabs.tsx
new file mode 100644
index 00000000..6950e5e2
--- /dev/null
+++ b/packages/propel/src/elements/tabs/tabs.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type TabsVariantProps, tabsVariants } from "./variants";
+
+export type { TabsAppearance } from "./variants";
+
+export type TabsProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  TabsVariantProps;
+
+/**
+ * Root of a tab set — a single styled `<div>`. Groups a `TabsList` of `Tab`s with their
+ * `TabsPanel`s. Base-UI-agnostic: the ready-made `components/tabs` grafts the Base UI `Tabs.Root`
+ * behavior (`<BaseTabs.Root render={<Tabs/>}/>`) and shares the set's `appearance` via context.
+ */
+export function Tabs({ appearance, render, ...props }: TabsProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: tabsVariants({ appearance }) };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tabs/variants.ts b/packages/propel/src/elements/tabs/variants.ts
new file mode 100644
index 00000000..e714543b
--- /dev/null
+++ b/packages/propel/src/elements/tabs/variants.ts
@@ -0,0 +1,71 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// `contained` wraps the tabs in a pill and lifts the active tab onto a raised card; `underline`
+// keeps them flat and slides a dark bar under the active one.
+export type TabsAppearance = NonNullable<VariantProps<typeof tabsVariants>["appearance"]>;
+
+export const tabsVariants = cva("inline-flex max-w-full flex-col items-start gap-3", {
+  variants: {
+    appearance: {
+      contained: "",
+      underline: "",
+    },
+  },
+});
+
+export type TabsVariantProps = StrictVariantProps<typeof tabsVariants>;
+
+export const tabsListVariants = cva(
+  "relative inline-flex max-w-full overscroll-x-contain outline-none",
+  {
+    variants: {
+      appearance: {
+        contained: "items-center gap-px rounded-lg bg-layer-3 p-0.5",
+        underline: "items-start gap-px px-0.5",
+      },
+    },
+  },
+);
+
+export type TabsListVariantProps = StrictVariantProps<typeof tabsListVariants>;
+
+// The horizontal scroll frame around a `TabsList` so a long tab row scrolls.
+export const tabsListScrollAreaVariants = cva("relative max-w-full");
+
+export const tabVariants = cva(
+  // `--node-size` sizes any leading icon slot (the tab owns its node sizing in one place,
+  // like Button does); the slot inherits it.
+  "cursor-pointer font-medium whitespace-nowrap transition-colors outline-none select-none [--node-size:1rem] focus-visible:ring-2 focus-visible:ring-accent-strong disabled:cursor-not-allowed disabled:text-disabled",
+  {
+    variants: {
+      appearance: {
+        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 type TabVariantProps = StrictVariantProps<typeof tabVariants>;
+
+export const tabUnderlineLabelVariants = 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 tabUnderlineBarTrackVariants = cva("flex px-2");
+
+export const tabUnderlineBarVariants = 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/elements/text-area/index.tsx
similarity index 100%
rename from packages/propel/src/ui/text-area/index.tsx
rename to packages/propel/src/elements/text-area/index.tsx
diff --git a/packages/propel/src/ui/text-area/text-area-group.tsx b/packages/propel/src/elements/text-area/text-area-group.tsx
similarity index 100%
rename from packages/propel/src/ui/text-area/text-area-group.tsx
rename to packages/propel/src/elements/text-area/text-area-group.tsx
diff --git a/packages/propel/src/elements/text-area/text-area.stories.tsx b/packages/propel/src/elements/text-area/text-area.stories.tsx
new file mode 100644
index 00000000..36362471
--- /dev/null
+++ b/packages/propel/src/elements/text-area/text-area.stories.tsx
@@ -0,0 +1,213 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { TextArea, TextAreaGroup, type TextAreaMagnitude, type TextAreaResize } from "./index";
+
+const MAGNITUDES: TextAreaMagnitude[] = ["sm", "md", "lg", "xl"];
+const RESIZES: TextAreaResize[] = ["none", "vertical", "both"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `TextArea` (the bare multiline
+// control) and `TextAreaGroup` (the bordered frame) are Base-UI-agnostic styled elements rendered
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the attributes the
+// chrome keys off (`data-invalid=""`, the native `disabled`) or forced by the pseudo-states addon
+// (hover/focus-within are CSS pseudo-classes). Field composition, typing, and validation aria
+// behavior are demonstrated AND tested in the ready-made TextArea (Components/TextArea).
+const meta = {
+  title: "Elements/TextArea",
+  component: TextArea,
+  subcomponents: { TextAreaGroup },
+  args: {
+    magnitude: "md",
+    surface: "field",
+    resize: "vertical",
+    "aria-label": "Comment",
+    placeholder: "Leave a comment...",
+    rows: 3,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The anatomy assembled statically: the `TextAreaGroup` bordered frame holding the bare `TextArea`
+ * leaf. The frame owns the surface (border, radius, fill, hover/focus chrome, vertical padding);
+ * the leaf is transparent primary text over it, with the placeholder color and scrollbar of its
+ * own.
+ */
+export const Default: Story = {
+  render: (args) => (
+    <TextAreaGroup>
+      <TextArea {...args} />
+    </TextAreaGroup>
+  ),
+};
+
+/**
+ * Every text magnitude (sm 12px · md 13px · lg 14px · xl 16px) with the same content. On the
+ * `field` surface each step also pins the frame's minimum height.
+ */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` and labels each textarea for its value, so disable just those two
+  // controls; the rest stay live and update every textarea at once.
+  argTypes: { magnitude: { control: false }, "aria-label": { control: false } },
+  args: { rows: 2 },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <TextAreaGroup key={magnitude}>
+          <TextArea
+            {...args}
+            magnitude={magnitude}
+            aria-label={`Comment (${magnitude})`}
+            defaultValue={`The ${magnitude} magnitude sizes the value text.`}
+          />
+        </TextAreaGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * `surface` picks the control presentation: `field` pairs with the bordered `TextAreaGroup` frame,
+ * `embedded` pads itself inside a composer frame that owns the chrome, and `inline` hugs its line
+ * height for compact single-row composers.
+ */
+export const Surfaces: Story = {
+  parameters: { controls: { disable: true } },
+  args: { resize: "none" },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      <TextAreaGroup>
+        <TextArea
+          {...args}
+          surface="field"
+          aria-label="Field comment"
+          rows={2}
+          defaultValue="The field surface sits inside the TextAreaGroup frame."
+        />
+      </TextAreaGroup>
+      <div className="flex w-full flex-col overflow-clip rounded-xl border border-subtle-1 bg-layer-2">
+        <TextArea
+          {...args}
+          surface="embedded"
+          aria-label="Embedded comment"
+          rows={2}
+          defaultValue="The embedded surface pads itself inside a composer frame."
+        />
+      </div>
+      <div className="flex items-center gap-2 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2">
+        <TextArea
+          {...args}
+          surface="inline"
+          aria-label="Inline comment"
+          rows={1}
+          defaultValue="The inline surface hugs a compact row."
+        />
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * `resize` controls the native drag handle: `none` locks the size, `vertical` allows height
+ * changes, `both` frees both axes.
+ */
+export const Resize: Story = {
+  // Iterates `resize` and labels each textarea for its value, so disable just those two
+  // controls; the rest stay live and update every textarea at once.
+  argTypes: { resize: { control: false }, "aria-label": { control: false } },
+  args: { rows: 2 },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {RESIZES.map((resize) => (
+        <TextAreaGroup key={resize}>
+          <TextArea
+            {...args}
+            resize={resize}
+            aria-label={`Comment (resize ${resize})`}
+            defaultValue={`Resize ${resize}.`}
+          />
+        </TextAreaGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the textarea frame:
+ *
+ * - **Rest** — the subtle border over the `layer-2` fill.
+ * - **Hover** / **Focused** — CSS pseudo-classes (`:hover`, `:focus-within`), forced by the
+ *   pseudo-states addon: the hover border/fill shift, and the accent border + soft ring while the
+ *   inner control has focus.
+ * - **Invalid** — pins the `data-invalid=""` (and `aria-invalid`) Base UI's `Field.Root` would
+ *   propagate to the control; the frame recolors to danger via `:has([data-invalid])` — no `tone`
+ *   prop.
+ * - **Disabled** — the native `disabled` on the control: not-allowed cursor and dimmed text on the
+ *   leaf, while the frame's `:has(:disabled)` guard flattens the fill and drops the ring (the plain
+ *   textarea frame wraps a native control, so the native selector form is the one that fires).
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: "#text-area-group-hover",
+      focusWithin: "#text-area-group-focus",
+    },
+  },
+  args: { rows: 2 },
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      <TextAreaGroup id="text-area-group-rest">
+        <TextArea {...args} aria-label="Rest" placeholder="Rest" />
+      </TextAreaGroup>
+      <TextAreaGroup id="text-area-group-hover">
+        <TextArea {...args} aria-label="Hover" placeholder="Hover" />
+      </TextAreaGroup>
+      <TextAreaGroup id="text-area-group-focus">
+        <TextArea {...args} aria-label="Focused" placeholder="Focused" />
+      </TextAreaGroup>
+      <TextAreaGroup id="text-area-group-invalid">
+        <TextArea
+          {...args}
+          aria-label="Invalid"
+          placeholder="Invalid"
+          aria-invalid
+          data-invalid=""
+        />
+      </TextAreaGroup>
+      <TextAreaGroup>
+        <TextArea {...args} aria-label="Disabled" placeholder="Disabled" disabled />
+      </TextAreaGroup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
+ * `data-invalid` control recolors its wrapping frame's border
+ * (`has-[[data-invalid]]:border-danger-strong`) away from the resting frame's. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const borderColor = (id: string) => {
+      const group = canvasElement.querySelector(`#${id}`);
+      if (!(group instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(group).borderColor;
+    };
+    await expect(borderColor("text-area-group-invalid")).not.toBe(
+      borderColor("text-area-group-rest"),
+    );
+  },
+};
diff --git a/packages/propel/src/elements/text-area/text-area.tsx b/packages/propel/src/elements/text-area/text-area.tsx
new file mode 100644
index 00000000..fc0af2a3
--- /dev/null
+++ b/packages/propel/src/elements/text-area/text-area.tsx
@@ -0,0 +1,27 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type TextAreaMagnitude,
+  type TextAreaResize,
+  type TextAreaSurface,
+  type TextAreaVariantProps,
+  textAreaVariants,
+} from "./variants";
+
+export type { TextAreaMagnitude, TextAreaResize, TextAreaSurface };
+
+export type TextAreaProps = Omit<useRender.ComponentProps<"textarea">, "className" | "style"> &
+  TextAreaVariantProps;
+
+/**
+ * The styled multi-line textarea leaf. Base-UI-agnostic — graft the Base UI `Field.Control`
+ * behavior in `components` via `<BaseField.Control render={<TextArea/>} />`. Compose it inside a
+ * `TextAreaGroup` frame.
+ */
+export function TextArea({ magnitude, surface, resize, render, ...props }: TextAreaProps) {
+  const defaultProps: useRender.ElementProps<"textarea"> = {
+    className: textAreaVariants({ magnitude, surface, resize }),
+  };
+  return useRender({ defaultTagName: "textarea", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/text-area/variants.ts b/packages/propel/src/elements/text-area/variants.ts
new file mode 100644
index 00000000..6802bac7
--- /dev/null
+++ b/packages/propel/src/elements/text-area/variants.ts
@@ -0,0 +1,55 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { controlGroupClass } from "../../internal/control-group";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// The bordered frame around the textarea leaf. Per the Figma "Text area" spec the border
+// style/width, radius, padding, and the focus/error border treatments are "always the same",
+// so they are static chrome. Composes the shared field-box chrome so the input and textarea
+// frames stay in lockstep; danger isn't a prop — the surface recolors its border off the
+// wrapped control's `data-invalid`.
+export const textAreaGroupVariants = cva(
+  cx(controlGroupClass, "w-full items-stretch gap-1.5 rounded-lg py-2"),
+);
+
+export const textAreaVariants = cva(
+  cx(
+    "scrollbar-sm min-w-0 flex-1 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: "p-3 leading-snug",
+        inline: "leading-tight",
+      },
+      /** Controls whether the user can resize the textarea. */
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        both: "resize",
+      },
+    },
+    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 TextAreaVariantConfig = VariantProps<typeof textAreaVariants>;
+
+export type TextAreaMagnitude = NonNullable<TextAreaVariantConfig["magnitude"]>;
+export type TextAreaSurface = NonNullable<TextAreaVariantConfig["surface"]>;
+export type TextAreaResize = NonNullable<TextAreaVariantConfig["resize"]>;
+export type TextAreaVariantProps = StrictVariantProps<typeof textAreaVariants>;
diff --git a/packages/propel/src/elements/toast/index.tsx b/packages/propel/src/elements/toast/index.tsx
new file mode 100644
index 00000000..310aad70
--- /dev/null
+++ b/packages/propel/src/elements/toast/index.tsx
@@ -0,0 +1,12 @@
+export * from "./toast";
+export * from "./toast-status-icon";
+export * from "./toast-viewport";
+export * from "./toast-content";
+export * from "./toast-text-group";
+export * from "./toast-title";
+export * from "./toast-description";
+export * from "./toast-actions";
+export * from "./toast-action-group";
+export * from "./toast-action-button";
+export * from "./toast-action";
+export * from "./toast-close-group";
diff --git a/packages/propel/src/elements/toast/toast-action-button.tsx b/packages/propel/src/elements/toast/toast-action-button.tsx
new file mode 100644
index 00000000..351fc491
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-action-button.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastActionVariants } from "./variants";
+
+export type ToastActionButtonProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * A plain action button for the inline-start `ToastActionGroup` cluster. Shares the toast
+ * action-button styling with `ToastAction`, but unlike `ToastAction` it does not participate in
+ * Base UI's toast focus management or dismiss the toast — use it for secondary actions (e.g. Undo)
+ * that should not close the toast. Defaults to `type="button"` so it never submits a form.
+ */
+export function ToastActionButton({ render, ...props }: ToastActionButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    type: "button",
+    className: toastActionVariants(),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-action-group.tsx b/packages/propel/src/elements/toast/toast-action-group.tsx
new file mode 100644
index 00000000..c4051f3f
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-action-group.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastActionGroupVariants } from "./variants";
+
+export type ToastActionGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The inline-start cluster of plain action buttons inside a `ToastActions` row. Grows to fill the
+ * row so a trailing `ToastAction` pins to the inline-end edge.
+ */
+export function ToastActionGroup({ render, ...props }: ToastActionGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toastActionGroupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-action.tsx b/packages/propel/src/elements/toast/toast-action.tsx
new file mode 100644
index 00000000..88cc1b49
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-action.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastActionVariants } from "./variants";
+
+export type ToastActionProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
+
+/**
+ * The styled action button that participates in the toast's focus management. Base-UI-agnostic —
+ * graft in `components` via `<BaseToast.Action render={<ToastAction/>}>`.
+ */
+export function ToastAction({ render, ...props }: ToastActionProps) {
+  const defaultProps: useRender.ElementProps<"button"> = { className: toastActionVariants() };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/toast/toast-actions.tsx b/packages/propel/src/elements/toast/toast-actions.tsx
similarity index 100%
rename from packages/propel/src/ui/toast/toast-actions.tsx
rename to packages/propel/src/elements/toast/toast-actions.tsx
diff --git a/packages/propel/src/elements/toast/toast-close-group.tsx b/packages/propel/src/elements/toast/toast-close-group.tsx
new file mode 100644
index 00000000..9c51e0de
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-close-group.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastCloseGroupVariants } from "./variants";
+
+export type ToastCloseGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The positioned slot that pins the dismiss button to the toast's inline-end corner. Holds only the
+ * 4px corner offset against the `relative` toast popup; the button's chrome comes from the composed
+ * `IconButton`.
+ */
+export function ToastCloseGroup({ render, ...props }: ToastCloseGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toastCloseGroupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-content.tsx b/packages/propel/src/elements/toast/toast-content.tsx
new file mode 100644
index 00000000..5ef1b64a
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-content.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastContentVariants } from "./variants";
+
+export type ToastContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A container for the contents of a toast (title, description, actions). Base-UI-agnostic — graft
+ * in `components` via `<BaseToast.Content render={<ToastContent/>}>`.
+ */
+export function ToastContent({ render, ...props }: ToastContentProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toastContentVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-description.tsx b/packages/propel/src/elements/toast/toast-description.tsx
new file mode 100644
index 00000000..eb8b7362
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-description.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastDescriptionVariants } from "./variants";
+
+export type ToastDescriptionProps = Omit<useRender.ComponentProps<"p">, "className" | "style">;
+
+/**
+ * The supporting description for the toast. Base-UI-agnostic — graft in `components` via
+ * `<BaseToast.Description render={<ToastDescription/>}>`.
+ */
+export function ToastDescription({ render, ...props }: ToastDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"p"> = { className: toastDescriptionVariants() };
+  return useRender({ defaultTagName: "p", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-status-icon.tsx b/packages/propel/src/elements/toast/toast-status-icon.tsx
new file mode 100644
index 00000000..88a44f33
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-status-icon.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ToastStatusIconVariantProps, toastStatusIconVariants } from "./variants";
+
+export type { ToastTone } from "./variants";
+
+export type ToastStatusIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  ToastStatusIconVariantProps;
+
+/**
+ * The tone-colored status-icon slot at a toast's inline-start. A single styled `<span>` that sizes
+ * and colors its bare `<svg>` glyph child (passed as `children`); the tone→glyph mapping is a
+ * `components` concern (see `components/toast`).
+ */
+export function ToastStatusIcon({ tone, render, ...props }: ToastStatusIconProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: toastStatusIconVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-text-group.tsx b/packages/propel/src/elements/toast/toast-text-group.tsx
new file mode 100644
index 00000000..c16d9688
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-text-group.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastTextGroupVariants } from "./variants";
+
+export type ToastTextGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The tight vertical pairing of `ToastTitle` and `ToastDescription` at the top of a `ToastContent`.
+ * Keeps the title and description close together while sitting in the content column's wider rhythm
+ * alongside an optional progress bar and action row.
+ */
+export function ToastTextGroup({ render, ...props }: ToastTextGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toastTextGroupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-title.tsx b/packages/propel/src/elements/toast/toast-title.tsx
new file mode 100644
index 00000000..e3bdacb8
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-title.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastTitleVariants } from "./variants";
+
+export type ToastTitleProps = Omit<useRender.ComponentProps<"h2">, "className" | "style">;
+
+/**
+ * The accessible title that labels the toast. Base-UI-agnostic — graft in `components` via
+ * `<BaseToast.Title render={<ToastTitle/>}>`.
+ */
+export function ToastTitle({ render, ...props }: ToastTitleProps) {
+  const defaultProps: useRender.ElementProps<"h2"> = { className: toastTitleVariants() };
+  return useRender({ defaultTagName: "h2", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast-viewport.tsx b/packages/propel/src/elements/toast/toast-viewport.tsx
new file mode 100644
index 00000000..0eb680e8
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast-viewport.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastViewportVariants } from "./variants";
+
+export type ToastViewportProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The fixed container that positions queued toasts and acts as the live region. Base-UI-agnostic —
+ * graft in `components` via `<BaseToast.Viewport render={<ToastViewport/>}>`.
+ */
+export function ToastViewport({ render, ...props }: ToastViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toastViewportVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/toast.stories.tsx b/packages/propel/src/elements/toast/toast.stories.tsx
new file mode 100644
index 00000000..3455d3ba
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast.stories.tsx
@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Info, X } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { IconButton } from "../icon-button";
+import {
+  Toast,
+  ToastAction,
+  ToastActionButton,
+  ToastActionGroup,
+  ToastActions,
+  ToastCloseGroup,
+  ToastContent,
+  ToastDescription,
+  ToastStatusIcon,
+  ToastTextGroup,
+  ToastTitle,
+  type ToastTone,
+  ToastViewport,
+} from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts, no manager, no Provider/Portal (those are behavior-only roles that
+// live in `components`). The viewport and toast are just styled divs: the viewport pins itself
+// `fixed` to the inline-end/bottom corner, so the demo frame carries a `transform` to become its
+// containing block, and each visual state is pinned statically via the attribute the cva keys off
+// (`data-ending=""` for the dismiss fade) or forced pseudo-classes (`:hover`, `:focus-visible`).
+// Queueing, swipe/dismiss, keyboard (F6/Tab), and aria behavior are demonstrated AND tested in the
+// components-tier story (Components/Toast).
+const TONES: ToastTone[] = ["success", "danger", "info", "warning", "neutral"];
+
+const meta = {
+  title: "Elements/Toast",
+  component: Toast,
+  subcomponents: {
+    ToastViewport,
+    ToastContent,
+    ToastTextGroup,
+    ToastTitle,
+    ToastDescription,
+    ToastActions,
+    ToastActionGroup,
+    ToastActionButton,
+    ToastAction,
+    ToastCloseGroup,
+    ToastStatusIcon,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1146-61689",
+    },
+  },
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically, as Base UI would lay it out: the fixed `ToastViewport`
+ * pins to the inline-end/bottom corner (the demo frame's `transform` makes it its containing block)
+ * and stacks queued toasts with its `gap-2` rhythm. Each `Toast` card holds the tone-colored
+ * `ToastStatusIcon` glyph slot, then `ToastContent` › `ToastTextGroup` (`ToastTitle` +
+ * `ToastDescription`) over the `ToastActions` row — the inline-start `ToastActionGroup` cluster
+ * growing to pin the trailing `ToastAction` to the inline-end edge — with the dismiss `IconButton`
+ * sitting in the corner-positioned `ToastCloseGroup`. In real usage Base UI keeps the close control
+ * hidden until the viewport expands; statically it shows plainly.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="relative h-64 w-full [transform:translateZ(0)] overflow-hidden rounded-lg border-sm border-subtle">
+      <ToastViewport>
+        <Toast>
+          <ToastStatusIcon tone="info">
+            <Info />
+          </ToastStatusIcon>
+          <ToastContent>
+            <ToastTextGroup>
+              <ToastTitle>Toast title</ToastTitle>
+              <ToastDescription>Description of the toast alert</ToastDescription>
+            </ToastTextGroup>
+            <ToastActions>
+              <ToastActionGroup>
+                <ToastActionButton>Undo</ToastActionButton>
+              </ToastActionGroup>
+              <ToastAction>View</ToastAction>
+            </ToastActions>
+          </ToastContent>
+          <ToastCloseGroup>
+            <IconButton prominence="ghost" tone="neutral" magnitude="sm" aria-label="Dismiss">
+              <Icon>
+                <X />
+              </Icon>
+            </IconButton>
+          </ToastCloseGroup>
+        </Toast>
+        <Toast>
+          <ToastStatusIcon tone="success">
+            <Info />
+          </ToastStatusIcon>
+          <ToastContent>
+            <ToastTextGroup>
+              <ToastTitle>Draft saved</ToastTitle>
+              <ToastDescription>Stacked with the viewport gap-2 rhythm</ToastDescription>
+            </ToastTextGroup>
+          </ToastContent>
+          <ToastCloseGroup>
+            <IconButton prominence="ghost" tone="neutral" magnitude="sm" aria-label="Dismiss">
+              <Icon>
+                <X />
+              </Icon>
+            </IconButton>
+          </ToastCloseGroup>
+        </Toast>
+      </ToastViewport>
+    </div>
+  ),
+};
+
+/**
+ * The `ToastStatusIcon` tone axis (success / danger / info / warning / neutral): the slot is the
+ * only tone-colored element — it sizes and tints whatever bare glyph child it's given while the
+ * card's surface, border, and text stay neutral. The tone→filled-glyph mapping is a `components`
+ * concern (Components/Toast picks the solid status glyphs); here one generic glyph shows the tint.
+ */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-85 flex-col gap-3">
+      {TONES.map((tone) => (
+        <Toast key={tone}>
+          <ToastStatusIcon tone={tone}>
+            <Info />
+          </ToastStatusIcon>
+          <ToastContent>
+            <ToastTextGroup>
+              <ToastTitle>Toast title</ToastTitle>
+              <ToastDescription>The status-icon slot tints the glyph {tone}</ToastDescription>
+            </ToastTextGroup>
+          </ToastContent>
+        </Toast>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the anatomy:
+ *
+ * - **Resting** — the raised floating-card surface at full opacity.
+ * - **Dismissing** — pins the `data-ending=""` attribute the cva keys off for the outgoing fade
+ *   (`data-ending:opacity-0`), so the card is intentionally invisible while holding its layout.
+ * - **Action pill** — rest / `:hover` (the transparent pill fills) / `:focus-visible` (the accent
+ *   ring), forced by the pseudo-states addon.
+ * - **Viewport focused** — the `:focus-visible` outline the live region shows when F6 moves focus
+ *   into it, forced on a viewport pinned inside its own transformed frame.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: "#toast-action-hover",
+      focusVisible: ["#toast-action-focus", "#toast-viewport-focus"],
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-start gap-6">
+        <div className="flex w-85 shrink-0 flex-col gap-2">
+          <p className="text-13 text-secondary">Resting</p>
+          <Toast id="toast-resting">
+            <ToastStatusIcon tone="info">
+              <Info />
+            </ToastStatusIcon>
+            <ToastContent>
+              <ToastTextGroup>
+                <ToastTitle>Resting</ToastTitle>
+                <ToastDescription>The open pose</ToastDescription>
+              </ToastTextGroup>
+            </ToastContent>
+          </Toast>
+        </div>
+        <div className="flex w-85 shrink-0 flex-col gap-2">
+          <p className="text-13 text-secondary">Dismissing (data-ending) — invisible</p>
+          <Toast id="toast-ending" data-ending="">
+            <ToastStatusIcon tone="info">
+              <Info />
+            </ToastStatusIcon>
+            <ToastContent>
+              <ToastTextGroup>
+                <ToastTitle>Dismissing</ToastTitle>
+                <ToastDescription>Pinned at opacity-0</ToastDescription>
+              </ToastTextGroup>
+            </ToastContent>
+          </Toast>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <p className="text-13 text-secondary">Action pill: rest · hover · focus-visible</p>
+        <div className="flex items-center gap-3">
+          <ToastActionButton>Rest</ToastActionButton>
+          <ToastActionButton id="toast-action-hover">Hover</ToastActionButton>
+          <ToastActionButton id="toast-action-focus">Focus-visible</ToastActionButton>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <p className="text-13 text-secondary">Viewport focused (F6) — the live region ring</p>
+        <div className="relative h-32 w-full [transform:translateZ(0)] overflow-hidden rounded-lg border-sm border-subtle">
+          <ToastViewport id="toast-viewport-focus">
+            <Toast>
+              <ToastStatusIcon tone="neutral">
+                <Info />
+              </ToastStatusIcon>
+              <ToastContent>
+                <ToastTextGroup>
+                  <ToastTitle>Focused viewport</ToastTitle>
+                </ToastTextGroup>
+              </ToastContent>
+            </Toast>
+          </ToastViewport>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selector actually compiled — the
+ * `data-ending=""` card computes to opacity 0 while the resting card stays fully opaque. Tagged out
+ * of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const toast = (id: string) => {
+      const el = canvasElement.querySelector(`#${id}`);
+      if (!(el instanceof HTMLElement)) throw new Error(`missing #${id} toast`);
+      return el;
+    };
+    // The compiled `data-ending:opacity-0` selector pins the dismiss fade's endpoint; the resting
+    // card carries no state attribute.
+    await expect(getComputedStyle(toast("toast-resting")).opacity).toBe("1");
+    await expect(getComputedStyle(toast("toast-ending")).opacity).toBe("0");
+  },
+};
diff --git a/packages/propel/src/elements/toast/toast.tsx b/packages/propel/src/elements/toast/toast.tsx
new file mode 100644
index 00000000..1d846544
--- /dev/null
+++ b/packages/propel/src/elements/toast/toast.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toastVariants } from "./variants";
+
+export type ToastProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled floating-card surface of a single toast. Base-UI-agnostic — graft the toast
+ * swipe/dismiss behavior in `components` via `<BaseToast.Root render={<Toast/>}>`.
+ */
+export function Toast({ render, ...props }: ToastProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toastVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toast/variants.ts b/packages/propel/src/elements/toast/variants.ts
new file mode 100644
index 00000000..47f227ef
--- /dev/null
+++ b/packages/propel/src/elements/toast/variants.ts
@@ -0,0 +1,86 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { nodeSlotClass } from "../../internal/node-slot";
+import { surfaceVariants } from "../../internal/surface";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// 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. The behavior-only roles (Provider, Portal) render no
+// element and carry no styling — they live in `components/toast`.
+
+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 toastVariants = 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");
+
+// The tight vertical pairing of the title and description, sitting at the top of the
+// content column. A separate part so `ToastContent` can also hold a progress bar and an
+// action row as siblings with the wider `gap-3` rhythm, while title+description keep a
+// closer `gap-1`.
+export const toastTextGroupVariants = cva("flex flex-col gap-1");
+
+export const toastTitleVariants = cva("text-14 font-medium text-primary");
+
+export const toastDescriptionVariants = cva("text-13 text-tertiary");
+
+// The full-width action row beneath the text/progress (Figma node 1146-61689). Holds the
+// inline-start `ToastActionGroup` cluster and an optional inline-end `ToastAction`.
+export const toastActionsVariants = cva("flex w-full gap-1.5");
+
+// The inline-start cluster of 1–2 plain action buttons. Grows to fill the row so a
+// trailing `ToastAction` pins to the inline-end edge. `-ms-2` pulls each button's
+// transparent `px-2` pill flush with the title text while letting the hover fill bleed
+// toward the inline-start. RTL-safe via logical utilities.
+export const toastActionGroupVariants = cva("-ms-2 flex min-w-0 flex-1 items-center gap-1.5");
+
+// 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",
+  ),
+);
+
+// The positioned slot that pins the dismiss `IconButton` to the toast's inline-end corner. Holds
+// only the 4px corner offset (`absolute inset-e-1 top-1`) against the `relative` toast popup; the
+// button's chrome (size/radius/hover) comes from the composed `IconButton`.
+export const toastCloseGroupVariants = cva("absolute inset-e-1 top-1");
+
+// Status-icon slot: a single styled `<span>` that sizes and tone-colors a bare `<svg>` glyph
+// child via the shared node-slot class (`fill="currentColor"` inherits the per-tone color). The
+// slot is the only tone-colored element; surface/border/text stay neutral, matching Figma.
+// `mt-0.5` nudges it 2px down so it aligns with the title baseline when the toast root uses
+// `items-start` — eliminates the need for a wrapper span.
+export const toastStatusIconVariants = cva(cx(nodeSlotClass, "mt-0.5 size-4 [--node-size:1rem]"), {
+  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 toastStatusIconVariants>["tone"]>;
+export type ToastStatusIconVariantProps = StrictVariantProps<typeof toastStatusIconVariants>;
diff --git a/packages/propel/src/ui/toggle-group/index.tsx b/packages/propel/src/elements/toggle-group/index.tsx
similarity index 100%
rename from packages/propel/src/ui/toggle-group/index.tsx
rename to packages/propel/src/elements/toggle-group/index.tsx
diff --git a/packages/propel/src/elements/toggle-group/toggle-group.stories.tsx b/packages/propel/src/elements/toggle-group/toggle-group.stories.tsx
new file mode 100644
index 00000000..fe773342
--- /dev/null
+++ b/packages/propel/src/elements/toggle-group/toggle-group.stories.tsx
@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlignCenter, AlignLeft, AlignRight, Bold, Italic, Underline } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import { Toggle, type ToggleMagnitude } from "../toggle/index";
+import { ToggleGroup } from "./index";
+
+const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled `ToggleGroup`
+// container and its `Toggle` items render DIRECTLY — no Base UI grafts — with every state pinned
+// statically via the attributes Base UI would set: `role="group"` on the container,
+// `data-orientation` for the vertical flip (the container cva's only state selector),
+// `aria-pressed`/`data-pressed=""` on a pressed item, and `disabled`/`data-disabled=""` on a
+// disabled one. Selection, roving focus, and the shared-`magnitude` context are demonstrated AND
+// tested in Components/ToggleGroup.
+const meta = {
+  title: "Elements/ToggleGroup",
+  component: ToggleGroup,
+  subcomponents: { Toggle },
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The connected/segmented container around three alignment toggles — shared outer border, dividers
+ * between items, clipped corners. The first item pins the pressed state (`data-pressed=""` +
+ * `aria-pressed="true"`) Base UI's single-select group would set on the current value.
+ */
+export const Default: Story = {
+  render: () => (
+    <ToggleGroup role="group" aria-label="Text alignment" data-orientation="horizontal">
+      <Toggle magnitude="md" aria-label="Align left" aria-pressed="true" data-pressed="">
+        <Icon>
+          <AlignLeft />
+        </Icon>
+      </Toggle>
+      <Toggle magnitude="md" aria-label="Align center" aria-pressed="false">
+        <Icon>
+          <AlignCenter />
+        </Icon>
+      </Toggle>
+      <Toggle magnitude="md" aria-label="Align right" aria-pressed="false">
+        <Icon>
+          <AlignRight />
+        </Icon>
+      </Toggle>
+    </ToggleGroup>
+  ),
+};
+
+/**
+ * The full `magnitude` scale of the composed `Toggle`s (the container itself has no size axis — the
+ * components-tier ready-made shares one `magnitude` with every item via context; here each item
+ * carries it explicitly). Each step also scales the glyph via `--node-size`.
+ */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <ToggleGroup
+          key={magnitude}
+          role="group"
+          aria-label={`Text formatting (${magnitude})`}
+          data-orientation="horizontal"
+        >
+          <Toggle
+            magnitude={magnitude}
+            aria-label={`Bold (${magnitude})`}
+            aria-pressed="true"
+            data-pressed=""
+          >
+            <Icon>
+              <Bold />
+            </Icon>
+          </Toggle>
+          <Toggle magnitude={magnitude} aria-label={`Italic (${magnitude})`} aria-pressed="false">
+            <Icon>
+              <Italic />
+            </Icon>
+          </Toggle>
+          <Toggle
+            magnitude={magnitude}
+            aria-label={`Underline (${magnitude})`}
+            aria-pressed="false"
+          >
+            <Icon>
+              <Underline />
+            </Icon>
+          </Toggle>
+        </ToggleGroup>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The container's only state axis: `data-orientation`. `horizontal` (the base look) lays items in a
+ * row with inline-start dividers; pinning `data-orientation="vertical"` stacks them and swaps the
+ * divider axis — exactly the attribute Base UI's `ToggleGroup` reflects from its `orientation`
+ * prop.
+ */
+export const Orientations: Story = {
+  render: () => (
+    <div className="flex items-start gap-6">
+      <ToggleGroup role="group" aria-label="Horizontal" data-orientation="horizontal">
+        <Toggle magnitude="md" aria-label="Bold (horizontal)" aria-pressed="true" data-pressed="">
+          <Icon>
+            <Bold />
+          </Icon>
+        </Toggle>
+        <Toggle magnitude="md" aria-label="Italic (horizontal)" aria-pressed="false">
+          <Icon>
+            <Italic />
+          </Icon>
+        </Toggle>
+      </ToggleGroup>
+      <ToggleGroup role="group" aria-label="Vertical" data-orientation="vertical">
+        <Toggle magnitude="md" aria-label="Bold (vertical)" aria-pressed="true" data-pressed="">
+          <Icon>
+            <Bold />
+          </Icon>
+        </Toggle>
+        <Toggle magnitude="md" aria-label="Italic (vertical)" aria-pressed="false">
+          <Icon>
+            <Italic />
+          </Icon>
+        </Toggle>
+      </ToggleGroup>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the `data-orientation` selector compiled — the vertical group
+ * stacks (`flex-direction: column`) while the horizontal one keeps a row. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const OrientationsCanary: Story = {
+  ...Orientations,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const horizontal = canvas.getByRole("group", { name: "Horizontal" });
+    const vertical = canvas.getByRole("group", { name: "Vertical" });
+    await expect(getComputedStyle(vertical).flexDirection).toBe("column");
+    await expect(getComputedStyle(horizontal).flexDirection).toBe("row");
+  },
+};
+
+/**
+ * Every pinnable item state inside the group: rest, pressed (`data-pressed=""` — two at once, as a
+ * `multiple` group allows), disabled (`disabled` + `data-disabled=""`), and pressed+disabled
+ * combined.
+ */
+export const States: Story = {
+  render: () => (
+    <ToggleGroup role="group" aria-label="Item states" data-orientation="horizontal">
+      <Toggle magnitude="md" aria-label="Rest" aria-pressed="false">
+        <Icon>
+          <AlignLeft />
+        </Icon>
+      </Toggle>
+      <Toggle magnitude="md" aria-label="Pressed" aria-pressed="true" data-pressed="">
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle magnitude="md" aria-label="Also pressed" aria-pressed="true" data-pressed="">
+        <Icon>
+          <Italic />
+        </Icon>
+      </Toggle>
+      <Toggle magnitude="md" aria-label="Disabled" aria-pressed="false" disabled data-disabled="">
+        <Icon>
+          <Underline />
+        </Icon>
+      </Toggle>
+      <Toggle
+        magnitude="md"
+        aria-label="Pressed and disabled"
+        aria-pressed="true"
+        data-pressed=""
+        disabled
+        data-disabled=""
+      >
+        <Icon>
+          <AlignRight />
+        </Icon>
+      </Toggle>
+    </ToggleGroup>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned `data-pressed` selector compiled — the pressed item's
+ * selected fill computes away from the resting item's transparent one. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const rest = canvas.getByRole("button", { name: "Rest" });
+    const pressed = canvas.getByRole("button", { name: "Pressed" });
+    await expect(getComputedStyle(pressed).backgroundColor).not.toBe(
+      getComputedStyle(rest).backgroundColor,
+    );
+  },
+};
diff --git a/packages/propel/src/elements/toggle-group/toggle-group.tsx b/packages/propel/src/elements/toggle-group/toggle-group.tsx
new file mode 100644
index 00000000..ab79f441
--- /dev/null
+++ b/packages/propel/src/elements/toggle-group/toggle-group.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toggleGroupVariants } from "./variants";
+
+export type ToggleGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled connected/segmented container around `Toggle`s — shared outer border, dividers between
+ * items, and clipped corners. Base-UI-agnostic — graft the single/multi-select state + roving focus
+ * in `components` via `<BaseToggleGroup render={<ToggleGroup/>} />`.
+ */
+export function ToggleGroup({ render, ...props }: ToggleGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toggleGroupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/ui/toggle-group/variants.ts b/packages/propel/src/elements/toggle-group/variants.ts
similarity index 100%
rename from packages/propel/src/ui/toggle-group/variants.ts
rename to packages/propel/src/elements/toggle-group/variants.ts
diff --git a/packages/propel/src/elements/toggle/index.tsx b/packages/propel/src/elements/toggle/index.tsx
new file mode 100644
index 00000000..2430908e
--- /dev/null
+++ b/packages/propel/src/elements/toggle/index.tsx
@@ -0,0 +1,2 @@
+export * from "./toggle";
+export { type ToggleMagnitude } from "./variants";
diff --git a/packages/propel/src/elements/toggle/toggle.stories.tsx b/packages/propel/src/elements/toggle/toggle.stories.tsx
new file mode 100644
index 00000000..8e5c2fc7
--- /dev/null
+++ b/packages/propel/src/elements/toggle/toggle.stories.tsx
@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Bold } from "lucide-react";
+
+import { Icon } from "../../internal/icon";
+import { Toggle, type ToggleMagnitude } from "./index";
+
+const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `Toggle` is a Base-UI-agnostic
+// styled two-state `<button>` rendered DIRECTLY — no Base UI graft — with the pressed/disabled
+// states pinned statically via the `data-pressed`/`data-disabled` attributes Base UI's Toggle
+// would set (plus the matching `aria-pressed`); hover/active/focus-visible are CSS pseudo-classes,
+// forced by the pseudo-states addon. The shared internal `Icon` slot sizes a bare glyph to the
+// toggle's `--node-size` (set by `magnitude`). Toggling, keyboard, and aria behavior are
+// demonstrated AND tested in the ready-made Toggle (Components/Toggle).
+const meta = {
+  title: "Elements/Toggle",
+  component: Toggle,
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Toggle {...args} aria-pressed="false" aria-label="Bold">
+      <Icon>
+        <Bold />
+      </Icon>
+    </Toggle>
+  ),
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A single toggle wrapping an icon, resting (unpressed). */
+export const Default: Story = {};
+
+/** The three sizes side by side; each magnitude also scales the glyph via `--node-size`. */
+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-pressed="false"
+          aria-label={`Bold (${magnitude})`}
+        >
+          <Icon>
+            <Bold />
+          </Icon>
+        </Toggle>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every visual state, pinned statically. Resting is the transparent layer; hover / active /
+ * focus-visible are CSS pseudo-classes forced by the pseudo-states addon; `data-pressed` (with the
+ * matching `aria-pressed="true"` Base UI would set) selects the layer and brightens the glyph to
+ * `text-icon-primary`; `data-disabled` dims the whole control and swaps to the not-allowed cursor —
+ * pinned alongside the native `disabled` the grafted Base UI Toggle would also set.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#elements-toggle-hover"],
+      active: ["#elements-toggle-active"],
+      focusVisible: ["#elements-toggle-focus-visible"],
+    },
+  },
+  render: ({ magnitude }) => (
+    <div className="flex items-center gap-2">
+      <Toggle magnitude={magnitude} aria-pressed="false" aria-label="Resting">
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle
+        id="elements-toggle-hover"
+        magnitude={magnitude}
+        aria-pressed="false"
+        aria-label="Hovered"
+      >
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle
+        id="elements-toggle-active"
+        magnitude={magnitude}
+        aria-pressed="false"
+        aria-label="Active"
+      >
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle
+        id="elements-toggle-focus-visible"
+        magnitude={magnitude}
+        aria-pressed="false"
+        aria-label="Focus-visible"
+      >
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle magnitude={magnitude} aria-pressed="true" aria-label="Pressed" data-pressed="">
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle
+        magnitude={magnitude}
+        aria-pressed="false"
+        aria-label="Disabled"
+        disabled
+        data-disabled=""
+      >
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+      <Toggle
+        magnitude={magnitude}
+        aria-pressed="true"
+        aria-label="Disabled pressed"
+        disabled
+        data-disabled=""
+        data-pressed=""
+      >
+        <Icon>
+          <Bold />
+        </Icon>
+      </Toggle>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/toggle/toggle.tsx b/packages/propel/src/elements/toggle/toggle.tsx
new file mode 100644
index 00000000..7f31d415
--- /dev/null
+++ b/packages/propel/src/elements/toggle/toggle.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ToggleVariantProps, toggleVariants } from "./variants";
+
+export type ToggleProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  ToggleVariantProps;
+
+/**
+ * The styled two-state toggle button (typically wrapping an icon). Base-UI-agnostic — graft the
+ * `Toggle` behavior in `components` via `<BaseToggle render={<Toggle magnitude=… />} />`. Only
+ * `magnitude` is a visual axis; pressed/disabled are control state Base UI reflects as `data-*`.
+ */
+export function Toggle({ magnitude, render, ...props }: ToggleProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: toggleVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toggle/variants.ts b/packages/propel/src/elements/toggle/variants.ts
new file mode 100644
index 00000000..be94b063
--- /dev/null
+++ b/packages/propel/src/elements/toggle/variants.ts
@@ -0,0 +1,31 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// 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 the `ToggleIcon` slot sizes
+// its child to match.
+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"]>;
+
+export type ToggleVariantProps = StrictVariantProps<typeof toggleVariants>;
diff --git a/packages/propel/src/elements/toolbar/index.tsx b/packages/propel/src/elements/toolbar/index.tsx
new file mode 100644
index 00000000..5c270387
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/index.tsx
@@ -0,0 +1,10 @@
+export * from "./toolbar";
+export * from "./toolbar-button";
+export * from "./toolbar-menu-trigger-button";
+export * from "./toolbar-menu-trigger-indicator";
+export * from "./toolbar-menu-trigger-label";
+export * from "./toolbar-group";
+export * from "./toolbar-separator";
+export * from "./toolbar-toggle-group";
+export * from "./toolbar-input";
+export * from "./toolbar-link";
diff --git a/packages/propel/src/elements/toolbar/toolbar-button.tsx b/packages/propel/src/elements/toolbar/toolbar-button.tsx
new file mode 100644
index 00000000..8017b96c
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-button.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ToolbarItemVariantProps, toolbarItemVariants } from "./variants";
+
+export type ToolbarButtonProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> &
+  ToolbarItemVariantProps;
+
+/**
+ * The styled chrome for a toolbar action button — a single `<button>`. Base-UI-agnostic: graft the
+ * toolbar item behavior in `components` via `<BaseToolbar.Button render={<ToolbarButton/>} />`.
+ */
+export function ToolbarButton({ density, render, ...props }: ToolbarButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: toolbarItemVariants({ density }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-group.tsx b/packages/propel/src/elements/toolbar/toolbar-group.tsx
new file mode 100644
index 00000000..4dc9cf2a
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-group.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toolbarGroupVariants } from "./variants";
+
+export type ToolbarGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled cluster that packs related controls with a small gap. Base-UI-agnostic: graft the
+ * group behavior in `components` via `<BaseToolbar.Group render={<ToolbarGroup/>} />`.
+ */
+export function ToolbarGroup({ render, ...props }: ToolbarGroupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toolbarGroupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-input.tsx b/packages/propel/src/elements/toolbar/toolbar-input.tsx
new file mode 100644
index 00000000..6c86e08b
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-input.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ToolbarInputVariantProps, toolbarInputVariants } from "./variants";
+
+export type ToolbarInputProps = Omit<useRender.ComponentProps<"input">, "className" | "style"> &
+  ToolbarInputVariantProps;
+
+/**
+ * The styled inline text input for a toolbar (a miniature field on the shared control surface,
+ * density-matched to the items). Base-UI-agnostic — graft in `components` via `<BaseToolbar.Input
+ * render={<ToolbarInput density=… />} />`.
+ */
+export function ToolbarInput({ density, render, ...props }: ToolbarInputProps) {
+  const defaultProps: useRender.ElementProps<"input"> = {
+    className: toolbarInputVariants({ density }),
+  };
+  return useRender({ defaultTagName: "input", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-link.tsx b/packages/propel/src/elements/toolbar/toolbar-link.tsx
new file mode 100644
index 00000000..ee9e3a72
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-link.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ToolbarItemVariantProps, toolbarItemVariants } from "./variants";
+
+export type ToolbarLinkProps = Omit<useRender.ComponentProps<"a">, "className" | "style"> &
+  ToolbarItemVariantProps;
+
+/**
+ * The styled chrome for a toolbar item that navigates — a single `<a>` sharing the item chrome with
+ * `ToolbarButton` (rule 6c: different element, same look). Base-UI-agnostic: graft the toolbar link
+ * behavior in `components` via `<BaseToolbar.Link render={<ToolbarLink/>} />`.
+ */
+export function ToolbarLink({ density, render, ...props }: ToolbarLinkProps) {
+  const defaultProps: useRender.ElementProps<"a"> = {
+    className: toolbarItemVariants({ density }),
+  };
+  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-menu-trigger-button.tsx b/packages/propel/src/elements/toolbar/toolbar-menu-trigger-button.tsx
new file mode 100644
index 00000000..affb0652
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-menu-trigger-button.tsx
@@ -0,0 +1,29 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type ToolbarMenuTriggerButtonVariantProps,
+  toolbarMenuTriggerButtonVariants,
+} from "./variants";
+
+export type ToolbarMenuTriggerButtonProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+> &
+  ToolbarMenuTriggerButtonVariantProps;
+
+/**
+ * The styled chrome for a toolbar menu trigger: a `<button>` that pairs a text label slot with a
+ * disclosure indicator, with density-aware sizing. Base-UI-agnostic: graft the trigger behavior in
+ * `components` via `<BaseToolbar.Button render={<ToolbarMenuTriggerButton/>} />`.
+ */
+export function ToolbarMenuTriggerButton({
+  density,
+  render,
+  ...props
+}: ToolbarMenuTriggerButtonProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: toolbarMenuTriggerButtonVariants({ density }),
+  };
+  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-menu-trigger-indicator.tsx b/packages/propel/src/elements/toolbar/toolbar-menu-trigger-indicator.tsx
new file mode 100644
index 00000000..0cc8a211
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-menu-trigger-indicator.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toolbarMenuTriggerIndicatorVariants } from "./variants";
+
+export type ToolbarMenuTriggerIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The disclosure caret slot at the inline-end of a toolbar menu trigger. A styled, `aria-hidden`
+ * `<span>` that sizes its single child (e.g. a Lucide `ChevronDown`) to the trigger's `--node-size`
+ * and tints it. Decorative (the trigger button carries the a11y state), so it is `aria-hidden`.
+ * Base-UI-agnostic.
+ */
+export function ToolbarMenuTriggerIndicator({
+  render,
+  ...props
+}: ToolbarMenuTriggerIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: toolbarMenuTriggerIndicatorVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-menu-trigger-label.tsx b/packages/propel/src/elements/toolbar/toolbar-menu-trigger-label.tsx
new file mode 100644
index 00000000..3a882a3f
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-menu-trigger-label.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toolbarMenuTriggerLabelVariants } from "./variants";
+
+export type ToolbarMenuTriggerLabelProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The text label of a toolbar menu trigger (e.g. "Text", "Aa"). Its own styled `<span>` so the
+ * trigger button holds no raw typography — the button is the control, this is its label region.
+ * Base-UI-agnostic.
+ */
+export function ToolbarMenuTriggerLabel({ render, ...props }: ToolbarMenuTriggerLabelProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: toolbarMenuTriggerLabelVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-separator.tsx b/packages/propel/src/elements/toolbar/toolbar-separator.tsx
new file mode 100644
index 00000000..67d8679e
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-separator.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toolbarSeparatorVariants } from "./variants";
+
+export type ToolbarSeparatorProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled thin vertical rule that divides one cluster of controls from the next.
+ * Base-UI-agnostic: graft the separator behavior in `components` via `<BaseToolbar.Separator
+ * render={<ToolbarSeparator/>} />`.
+ */
+export function ToolbarSeparator({ render, ...props }: ToolbarSeparatorProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: toolbarSeparatorVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar-toggle-group.tsx b/packages/propel/src/elements/toolbar/toolbar-toggle-group.tsx
new file mode 100644
index 00000000..fd89b0f0
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar-toggle-group.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { toolbarToggleGroupVariants } from "./variants";
+
+export type ToolbarToggleGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * A set of `ToolbarToggle`s that share state. Renders a `<div>` by default and bakes in only the
+ * cluster layout, keeping `elements/toolbar` independent of the ToggleGroup primitive: a
+ * composition grafts the shared-state behavior on by rendering it as a toggle group —
+ * `render={<ToggleGroup />}` (the styled div stays the outer element).
+ */
+export function ToolbarToggleGroup({ render, ...props }: ToolbarToggleGroupProps) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps({ className: toolbarToggleGroupVariants() }, props),
+  });
+}
diff --git a/packages/propel/src/elements/toolbar/toolbar.stories.tsx b/packages/propel/src/elements/toolbar/toolbar.stories.tsx
new file mode 100644
index 00000000..aebb213a
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar.stories.tsx
@@ -0,0 +1,398 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  ChevronDown,
+  History,
+  Image,
+  Italic,
+  Link,
+  Strikethrough,
+  Underline,
+} from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Icon } from "../../internal/icon";
+import {
+  Toolbar,
+  ToolbarButton,
+  type ToolbarDensity,
+  type ToolbarElevation,
+  ToolbarGroup,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarMenuTriggerButton,
+  ToolbarMenuTriggerIndicator,
+  ToolbarMenuTriggerLabel,
+  ToolbarSeparator,
+  ToolbarToggleGroup,
+} from "./index";
+
+const ELEVATIONS: ToolbarElevation[] = ["raised", "flat"];
+const DENSITIES: ToolbarDensity[] = ["compact", "comfortable"];
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with every visual state pinned statically via the `data-*`/aria
+// attributes Base UI's toolbar/toggle/menu would set (`data-pressed=""` + `aria-pressed`,
+// `data-popup-open=""` + `aria-expanded`, `data-invalid=""`) or the native `disabled` attribute,
+// and the roles Base UI's behavior parts would render (`role="toolbar"`, `role="group"`,
+// `role="separator"`) pinned so the static markup reads like the real thing. Every control takes
+// `density` explicitly; the ready-made `components/toolbar` sets it once and shares it via
+// context. Grafting, roving focus, keyboard, and aria behavior are demonstrated AND tested in the
+// components-tier story (Components/Toolbar).
+const meta = {
+  title: "Elements/Toolbar",
+  component: Toolbar,
+  subcomponents: {
+    ToolbarGroup,
+    ToolbarButton,
+    ToolbarLink,
+    ToolbarInput,
+    ToolbarToggleGroup,
+    ToolbarSeparator,
+    ToolbarMenuTriggerButton,
+    ToolbarMenuTriggerLabel,
+    ToolbarMenuTriggerIndicator,
+  },
+  args: { elevation: "raised", density: "compact" },
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically: the `Toolbar` row holding a menu-trigger surface
+ * (`ToolbarMenuTriggerButton` pairing a `ToolbarMenuTriggerLabel` with a chevron in the
+ * `ToolbarMenuTriggerIndicator`), a `ToolbarGroup` clustering the B/I/U/S toggles, a
+ * `ToolbarToggleGroup` for the exclusive alignment cluster, plain action `ToolbarButton`s, and a
+ * `ToolbarLink` — the `<a>` wearing the same item chrome. Bold and Align-left pin `data-pressed=""`
+ * (+ `aria-pressed`), the attributes Base UI's `Toggle` sets while pressed.
+ */
+export const Default: Story = {
+  render: ({ elevation, density }) => (
+    <Toolbar role="toolbar" aria-label="Formatting" elevation={elevation} density={density}>
+      <ToolbarMenuTriggerButton
+        density={density}
+        aria-haspopup="menu"
+        aria-expanded={false}
+        aria-label="Text style"
+      >
+        <ToolbarMenuTriggerLabel>Text</ToolbarMenuTriggerLabel>
+        <ToolbarMenuTriggerIndicator>
+          <ChevronDown />
+        </ToolbarMenuTriggerIndicator>
+      </ToolbarMenuTriggerButton>
+      <ToolbarSeparator role="separator" aria-orientation="vertical" />
+      <ToolbarGroup role="group" aria-label="Text formatting">
+        <ToolbarButton density={density} aria-label="Bold" aria-pressed data-pressed="">
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton density={density} aria-label="Italic" aria-pressed={false}>
+          <Icon>
+            <Italic />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton density={density} aria-label="Underline" aria-pressed={false}>
+          <Icon>
+            <Underline />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton density={density} aria-label="Strikethrough" aria-pressed={false}>
+          <Icon>
+            <Strikethrough />
+          </Icon>
+        </ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarSeparator role="separator" aria-orientation="vertical" />
+      <ToolbarToggleGroup role="group" aria-label="Text alignment">
+        <ToolbarButton density={density} aria-label="Align left" aria-pressed data-pressed="">
+          <Icon>
+            <AlignLeft />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton density={density} aria-label="Align center" aria-pressed={false}>
+          <Icon>
+            <AlignCenter />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton density={density} aria-label="Align right" aria-pressed={false}>
+          <Icon>
+            <AlignRight />
+          </Icon>
+        </ToolbarButton>
+      </ToolbarToggleGroup>
+      <ToolbarSeparator role="separator" aria-orientation="vertical" />
+      <ToolbarButton density={density} aria-label="Insert link">
+        <Icon>
+          <Link />
+        </Icon>
+      </ToolbarButton>
+      <ToolbarButton density={density} aria-label="Insert image">
+        <Icon>
+          <Image />
+        </Icon>
+      </ToolbarButton>
+      <ToolbarSeparator role="separator" aria-orientation="vertical" />
+      <ToolbarLink density={density} href="#history" aria-label="View edit history">
+        <Icon>
+          <History />
+        </Icon>
+      </ToolbarLink>
+    </Toolbar>
+  ),
+};
+
+/**
+ * The `elevation` axis: `raised` draws its own card (border + shadow via the shared raised surface)
+ * so it can float over content; `flat` draws no surface and sits flush inside an existing bar.
+ * Independent of `density` — both rows keep the story's current density.
+ */
+export const Elevations: Story = {
+  argTypes: { elevation: { control: false } },
+  render: ({ density }) => (
+    <div className="flex flex-col gap-6">
+      {ELEVATIONS.map((elevation) => (
+        <Toolbar
+          key={elevation}
+          role="toolbar"
+          aria-label={`Formatting (${elevation})`}
+          elevation={elevation}
+          density={density}
+        >
+          <ToolbarMenuTriggerButton
+            density={density}
+            aria-haspopup="menu"
+            aria-expanded={false}
+            aria-label="Text style"
+          >
+            <ToolbarMenuTriggerLabel>Text</ToolbarMenuTriggerLabel>
+            <ToolbarMenuTriggerIndicator>
+              <ChevronDown />
+            </ToolbarMenuTriggerIndicator>
+          </ToolbarMenuTriggerButton>
+          <ToolbarSeparator role="separator" aria-orientation="vertical" />
+          <ToolbarGroup role="group" aria-label="Text formatting">
+            <ToolbarButton density={density} aria-label="Bold" aria-pressed data-pressed="">
+              <Icon>
+                <Bold />
+              </Icon>
+            </ToolbarButton>
+            <ToolbarButton density={density} aria-label="Italic" aria-pressed={false}>
+              <Icon>
+                <Italic />
+              </Icon>
+            </ToolbarButton>
+          </ToolbarGroup>
+          <ToolbarSeparator role="separator" aria-orientation="vertical" />
+          <ToolbarButton density={density} aria-label="Insert link">
+            <Icon>
+              <Link />
+            </Icon>
+          </ToolbarButton>
+        </Toolbar>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The `density` axis packs every density-aware control together: `compact` gives 24px hit targets
+ * (h-6 trigger/input, size-6 items with a 14px glyph), `comfortable` 28px (16px glyph). The inline
+ * `ToolbarInput` — a miniature field on the shared control surface — tracks the same scale.
+ * Independent of `elevation` — both rows keep the story's current elevation.
+ */
+export const Densities: Story = {
+  argTypes: { density: { control: false } },
+  render: ({ elevation }) => (
+    <div className="flex flex-col gap-6">
+      {DENSITIES.map((density) => (
+        <Toolbar
+          key={density}
+          role="toolbar"
+          aria-label={`Formatting (${density})`}
+          elevation={elevation}
+          density={density}
+        >
+          <ToolbarInput
+            density={density}
+            aria-label={`Filter (${density})`}
+            placeholder={density}
+          />
+          <ToolbarSeparator role="separator" aria-orientation="vertical" />
+          <ToolbarMenuTriggerButton
+            density={density}
+            aria-haspopup="menu"
+            aria-expanded={false}
+            aria-label="Text style"
+          >
+            <ToolbarMenuTriggerLabel>Text</ToolbarMenuTriggerLabel>
+            <ToolbarMenuTriggerIndicator>
+              <ChevronDown />
+            </ToolbarMenuTriggerIndicator>
+          </ToolbarMenuTriggerButton>
+          <ToolbarSeparator role="separator" aria-orientation="vertical" />
+          <ToolbarGroup role="group" aria-label="Text formatting">
+            <ToolbarButton density={density} aria-label="Bold" aria-pressed={false}>
+              <Icon>
+                <Bold />
+              </Icon>
+            </ToolbarButton>
+            <ToolbarButton density={density} aria-label="Italic" aria-pressed={false}>
+              <Icon>
+                <Italic />
+              </Icon>
+            </ToolbarButton>
+          </ToolbarGroup>
+        </Toolbar>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Every pinnable state of the density-aware controls, one flat bar per part:
+ *
+ * - **Item** (`ToolbarButton`) — rest; hover / active / focus-visible (CSS pseudo-classes, forced by
+ *   the pseudo-states addon); pressed pins the `data-pressed=""` (+ `aria-pressed`) Base UI's
+ *   `Toggle` sets while on (selected layer + accent glyph); disabled is the native attribute the
+ *   `disabled:` selector keys off.
+ * - **Menu trigger** — rest; open pins the `data-popup-open=""` (+ `aria-expanded`) Base UI's
+ *   `Menu.Trigger` sets while its popup is open (selected layer); disabled dims the label.
+ * - **Input** — rest; focused (`:focus`, forced) lights the accent border + soft ring; invalid pins
+ *   the `data-invalid=""` (+ `aria-invalid`) Base UI's `Field.Root` would propagate (danger
+ *   border); disabled flattens to the not-allowed cursor and dimmed text.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: {
+      hover: ["#toolbar-item-hover"],
+      active: ["#toolbar-item-active"],
+      focusVisible: ["#toolbar-item-focus"],
+      focus: ["#toolbar-input-focus"],
+    },
+  },
+  render: ({ density }) => (
+    <div className="flex flex-col items-start gap-4">
+      <Toolbar role="toolbar" aria-label="Item states" elevation="flat" density={density}>
+        <ToolbarButton id="toolbar-item-rest" density={density} aria-label="Rest">
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton id="toolbar-item-hover" density={density} aria-label="Hover">
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton id="toolbar-item-active" density={density} aria-label="Active">
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton id="toolbar-item-focus" density={density} aria-label="Focused">
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton
+          id="toolbar-item-pressed"
+          density={density}
+          aria-label="Pressed"
+          aria-pressed
+          data-pressed=""
+        >
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+        <ToolbarButton density={density} aria-label="Disabled" disabled>
+          <Icon>
+            <Bold />
+          </Icon>
+        </ToolbarButton>
+      </Toolbar>
+      <Toolbar role="toolbar" aria-label="Menu trigger states" elevation="flat" density={density}>
+        <ToolbarMenuTriggerButton
+          id="toolbar-trigger-rest"
+          density={density}
+          aria-haspopup="menu"
+          aria-expanded={false}
+        >
+          <ToolbarMenuTriggerLabel>Rest</ToolbarMenuTriggerLabel>
+          <ToolbarMenuTriggerIndicator>
+            <ChevronDown />
+          </ToolbarMenuTriggerIndicator>
+        </ToolbarMenuTriggerButton>
+        <ToolbarMenuTriggerButton
+          id="toolbar-trigger-open"
+          density={density}
+          aria-haspopup="menu"
+          aria-expanded
+          data-popup-open=""
+        >
+          <ToolbarMenuTriggerLabel>Open</ToolbarMenuTriggerLabel>
+          <ToolbarMenuTriggerIndicator>
+            <ChevronDown />
+          </ToolbarMenuTriggerIndicator>
+        </ToolbarMenuTriggerButton>
+        <ToolbarMenuTriggerButton
+          density={density}
+          aria-haspopup="menu"
+          aria-expanded={false}
+          disabled
+        >
+          <ToolbarMenuTriggerLabel>Disabled</ToolbarMenuTriggerLabel>
+          <ToolbarMenuTriggerIndicator>
+            <ChevronDown />
+          </ToolbarMenuTriggerIndicator>
+        </ToolbarMenuTriggerButton>
+      </Toolbar>
+      <Toolbar role="toolbar" aria-label="Input states" elevation="flat" density={density}>
+        <ToolbarInput density={density} aria-label="Rest" placeholder="Rest" />
+        <ToolbarInput
+          id="toolbar-input-focus"
+          density={density}
+          aria-label="Focused"
+          placeholder="Focused"
+        />
+        <ToolbarInput
+          density={density}
+          aria-label="Invalid"
+          placeholder="Invalid"
+          aria-invalid
+          data-invalid=""
+        />
+        <ToolbarInput density={density} aria-label="Disabled" placeholder="Disabled" disabled />
+      </Toolbar>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the pressed
+ * item's glyph tint (`data-pressed:text-icon-accent-primary`) and the open trigger's background
+ * (`data-popup-open:bg-layer-transparent-selected`) compute away from their resting siblings'.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesCanary: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const style = (id: string, property: "color" | "backgroundColor") => {
+      const node = canvasElement.querySelector(`#${id}`);
+      if (!(node instanceof HTMLElement)) throw new Error(`missing #${id}`);
+      return getComputedStyle(node)[property];
+    };
+    await expect(style("toolbar-item-pressed", "color")).not.toBe(
+      style("toolbar-item-rest", "color"),
+    );
+    await expect(style("toolbar-trigger-open", "backgroundColor")).not.toBe(
+      style("toolbar-trigger-rest", "backgroundColor"),
+    );
+  },
+};
diff --git a/packages/propel/src/elements/toolbar/toolbar.tsx b/packages/propel/src/elements/toolbar/toolbar.tsx
new file mode 100644
index 00000000..691152f1
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/toolbar.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type ToolbarVariantProps, toolbarVariants } from "./variants";
+
+export type { ToolbarDensity, ToolbarElevation } from "./variants";
+
+export type ToolbarProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  ToolbarVariantProps;
+
+/**
+ * The styled toolbar row — a single `<div>`. Base-UI-agnostic: graft the toolbar behavior in
+ * `components` via `<BaseToolbar.Root render={<Toolbar/>} />`. The density-sharing behavior (so the
+ * controls inside pick up the toolbar's `density`) is the ready-made `components/toolbar`.
+ */
+export function Toolbar({ elevation, density, render, ...props }: ToolbarProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: toolbarVariants({ density, elevation }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/toolbar/variants.ts b/packages/propel/src/elements/toolbar/variants.ts
new file mode 100644
index 00000000..d3a876a2
--- /dev/null
+++ b/packages/propel/src/elements/toolbar/variants.ts
@@ -0,0 +1,111 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
+import { nodeSlotClass } from "../../internal/node-slot";
+import { surfaceVariants } from "../../internal/surface";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+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 toolbarGroupVariants = cva("flex items-center gap-0.5");
+
+export const toolbarSeparatorVariants = cva("mx-1 h-5 w-0 shrink-0 border-s-sm border-subtle-1");
+
+export const toolbarToggleGroupVariants = cva("flex items-center gap-0.5");
+
+// The square hit target for an icon control (button or toggle). Holds only the box,
+// chrome, and the `--node-size` the child icon scales to via `ToolbarItemIcon` — the
+// glyph itself is a separate node-slot part, never sized by a descendant selector here.
+export const toolbarItemVariants = 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",
+  ),
+  {
+    variants: {
+      density: {
+        compact: "size-6 [--node-size:0.875rem]", // 24px box, 14px glyph
+        comfortable: "size-7 [--node-size:1rem]", // 28px box, 16px glyph
+      },
+    },
+  },
+);
+
+// The styled chrome for a toolbar menu trigger: a horizontal control that pairs a
+// text label with a disclosure indicator. The label's typography lives on the label
+// part, not here.
+export const toolbarMenuTriggerButtonVariants = cva(
+  cx(
+    "inline-flex shrink-0 items-center gap-1 rounded-md px-2",
+    "bg-layer-transparent 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 [--node-size:0.875rem]", // 24px tall, 14px caret
+        comfortable: "h-7 [--node-size:1rem]", // 28px tall, 16px caret
+      },
+    },
+  },
+);
+
+// The text label region of a menu trigger (e.g. "Text", "Aa"). Its own part so the
+// trigger button holds no raw typography.
+export const toolbarMenuTriggerLabelVariants = cva("text-13");
+
+// The disclosure caret at the trigger's inline-end. Sizes its single child to the
+// trigger's `--node-size` and tints it; a slot, like `ToolbarItemIcon`.
+export const toolbarMenuTriggerIndicatorVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
+
+/** Whether the toolbar draws its own surface (`raised`) or sits flush (`flat`). */
+export type ToolbarElevation = NonNullable<VariantProps<typeof toolbarVariants>["elevation"]>;
+
+/** How tightly the controls pack: `compact` (24px) or `comfortable` (28px). */
+export type ToolbarDensity = NonNullable<VariantProps<typeof toolbarVariants>["density"]>;
+
+export type ToolbarVariantProps = StrictVariantProps<typeof toolbarVariants>;
+
+export type ToolbarItemVariantProps = StrictVariantProps<typeof toolbarItemVariants>;
+
+export type ToolbarMenuTriggerButtonVariantProps = StrictVariantProps<
+  typeof toolbarMenuTriggerButtonVariants
+>;
+
+// An inline text input sitting among toolbar items (e.g. a filter box): a miniature field —
+// the shared control surface at `self` focus — whose height tracks the toolbar's density like
+// every other item. Invented pending a Figma spec; flagged for design polish.
+export const toolbarInputVariants = cva(
+  cx(
+    fieldControlSurfaceVariants({ focus: "self" }),
+    "rounded-md px-2 text-13 text-primary outline-none placeholder:text-placeholder",
+    "disabled:cursor-not-allowed disabled:text-disabled",
+  ),
+  {
+    variants: {
+      density: {
+        compact: "h-6",
+        comfortable: "h-7",
+      },
+    },
+  },
+);
+export type ToolbarInputVariantProps = StrictVariantProps<typeof toolbarInputVariants>;
diff --git a/packages/propel/src/elements/tooltip/index.tsx b/packages/propel/src/elements/tooltip/index.tsx
new file mode 100644
index 00000000..244c4a97
--- /dev/null
+++ b/packages/propel/src/elements/tooltip/index.tsx
@@ -0,0 +1,3 @@
+export * from "./tooltip-arrow";
+export * from "./tooltip-popup";
+export * from "./tooltip-shortcut";
diff --git a/packages/propel/src/elements/tooltip/tooltip-arrow.tsx b/packages/propel/src/elements/tooltip/tooltip-arrow.tsx
new file mode 100644
index 00000000..6b85a9f6
--- /dev/null
+++ b/packages/propel/src/elements/tooltip/tooltip-arrow.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tooltipArrowVariants } from "./variants";
+
+export type TooltipArrowProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled tooltip caret — a rotated square clipped per `data-side` so it points back at the
+ * trigger. Base-UI-agnostic; graft in `components` via `<BaseTooltip.Arrow render={<TooltipArrow/>}
+ * />`.
+ */
+export function TooltipArrow({ render, ...props }: TooltipArrowProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: tooltipArrowVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tooltip/tooltip-popup.tsx b/packages/propel/src/elements/tooltip/tooltip-popup.tsx
new file mode 100644
index 00000000..2380ccee
--- /dev/null
+++ b/packages/propel/src/elements/tooltip/tooltip-popup.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tooltipPopupVariants } from "./variants";
+
+export type TooltipPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The styled tooltip surface — an inverse-adaptive popup with caption text, radius, shadow, and the
+ * gap to the shortcut. Base-UI-agnostic; graft in `components` via `<BaseTooltip.Popup
+ * render={<TooltipPopup/>} />`.
+ */
+export function TooltipPopup({ render, ...props }: TooltipPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: tooltipPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tooltip/tooltip-shortcut.tsx b/packages/propel/src/elements/tooltip/tooltip-shortcut.tsx
new file mode 100644
index 00000000..7a50c65a
--- /dev/null
+++ b/packages/propel/src/elements/tooltip/tooltip-shortcut.tsx
@@ -0,0 +1,15 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { tooltipShortcutVariants } from "./variants";
+
+export type TooltipShortcutProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * A dimmed caption-scale label for a keyboard-shortcut hint shown to the inline-end of the tooltip
+ * content — the Figma "Cmd + K" slot. Omit it for a plain tooltip.
+ */
+export function TooltipShortcut({ render, ...props }: TooltipShortcutProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: tooltipShortcutVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/tooltip/tooltip.stories.tsx b/packages/propel/src/elements/tooltip/tooltip.stories.tsx
new file mode 100644
index 00000000..edb03ee6
--- /dev/null
+++ b/packages/propel/src/elements/tooltip/tooltip.stories.tsx
@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { TooltipArrow, TooltipPopup, TooltipShortcut } from "./index";
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
+// DIRECTLY — no Base UI grafts — with the popup laid out inline (it is just a styled div; Base UI
+// only positions it) and the arrow's placement axis pinned statically via the `data-side`
+// attribute Base UI's positioner would set. The Root, Trigger, Portal, Positioner, and Provider
+// are behavior-only roles (they live in `components`, grafting the shared `internal/positioner`).
+// Hover/focus opening, dismissal, Escape, and aria behavior are demonstrated AND tested in
+// Components/Tooltip.
+const meta = {
+  title: "Elements/Tooltip",
+  component: TooltipPopup,
+  subcomponents: {
+    TooltipArrow,
+    TooltipShortcut,
+  },
+} satisfies Meta<typeof TooltipPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full anatomy assembled statically, as Base UI would lay it out open above its trigger (the
+ * ready-made's default `side="top"`): the `TooltipPopup` surface (adaptive `layer-2` fill, caption
+ * text, radius, overlay shadow) holds the label and a `TooltipShortcut` hint, with the
+ * `TooltipArrow` pinned `data-side="top"` and parked at the bottom edge by a demo wrapper (Base
+ * UI's positioner owns the real placement) so it points down at the would-be trigger.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="relative w-fit pb-2">
+      <TooltipPopup>
+        Saves automatically
+        <TooltipShortcut>⌘ S</TooltipShortcut>
+      </TooltipPopup>
+      <div className="absolute inset-s-6 bottom-1" aria-hidden="true">
+        <TooltipArrow data-side="top" />
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * The `TooltipShortcut` slot: a keyboard-shortcut hint to the inline-end of the label — the Figma
+ * "Cmd + K" slot — one notch smaller (`caption-sm`) and tinted `text/tertiary` so it reads as a
+ * dimmer, secondary cue while still meeting text contrast on the popup surface. Omit it for a plain
+ * tooltip.
+ */
+export const Shortcut: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-start gap-6">
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">Plain label</p>
+        <TooltipPopup>Saves automatically</TooltipPopup>
+      </div>
+      <div className="flex shrink-0 flex-col gap-2">
+        <p className="text-13 text-secondary">With shortcut</p>
+        <TooltipPopup>
+          Open command menu
+          <TooltipShortcut>⌘ K</TooltipShortcut>
+        </TooltipPopup>
+      </div>
+    </div>
+  ),
+};
+
+const ARROW_SIDES = ["top", "bottom", "left", "right", "inline-start", "inline-end"] as const;
+
+const LOGICAL_ARROW_SIDES = ["inline-start", "inline-end"] as const;
+
+/**
+ * The caret's placement axis: `data-side` — the attribute Base UI's positioner sets to report which
+ * side of the trigger the popup resolved to — switches the rotated square's clip-path (and, under
+ * the positioner's absolute placement, its `-3px` edge offset) so the visible triangle always
+ * points back at the trigger. The second row pins `dir="rtl"`: the logical
+ * `inline-start`/`inline-end` values flip their clip with writing direction, while the physical
+ * sides render the same.
+ */
+export const ArrowSides: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-start gap-4">
+        {ARROW_SIDES.map((side) => (
+          <div key={side} className="flex flex-col items-center gap-2">
+            <p className="text-12 text-tertiary">{side}</p>
+            <div
+              className="flex size-10 items-center justify-center rounded-md border-sm border-subtle"
+              aria-hidden="true"
+            >
+              <TooltipArrow id={`tooltip-arrow-${side}`} data-side={side} />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div dir="rtl" className="flex flex-wrap items-start gap-4">
+        {LOGICAL_ARROW_SIDES.map((side) => (
+          <div key={side} className="flex flex-col items-center gap-2">
+            <p className="text-12 text-tertiary">{side} (RTL)</p>
+            <div
+              className="flex size-10 items-center justify-center rounded-md border-sm border-subtle"
+              aria-hidden="true"
+            >
+              <TooltipArrow data-side={side} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * CSS canary (rule 2b): asserts the pinned `data-side` attribute selectors actually compiled — each
+ * side resolves a real clip-path, and opposite sides resolve different triangles. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const ArrowSidesCanary: Story = {
+  ...ArrowSides,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvasElement }) => {
+    const arrowClipPath = (side: string) => {
+      const el = canvasElement.querySelector(`#tooltip-arrow-${side}`);
+      if (!(el instanceof HTMLElement)) throw new Error(`missing #tooltip-arrow-${side} arrow`);
+      return getComputedStyle(el).clipPath;
+    };
+    await expect(arrowClipPath("top")).not.toBe("none");
+    await expect(arrowClipPath("bottom")).not.toBe("none");
+    await expect(arrowClipPath("top")).not.toBe(arrowClipPath("bottom"));
+  },
+};
diff --git a/packages/propel/src/elements/tooltip/variants.ts b/packages/propel/src/elements/tooltip/variants.ts
new file mode 100644
index 00000000..10513d73
--- /dev/null
+++ b/packages/propel/src/elements/tooltip/variants.ts
@@ -0,0 +1,20 @@
+import { cva, cx } from "class-variance-authority";
+
+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 tooltipArrowVariants = cva(
+  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%)]",
+  ),
+);
+// Keyboard-shortcut hint rendered to the inline-end of the tooltip label (Figma "Cmd + K"):
+// one notch smaller than the label and tinted `text/tertiary` so it reads as a dimmer,
+// secondary cue while still meeting text-contrast on the popup surface.
+export const tooltipShortcutVariants = cva("text-caption-sm-regular text-tertiary");
diff --git a/packages/propel/src/ui/workspace-avatar/index.tsx b/packages/propel/src/elements/workspace-avatar/index.tsx
similarity index 100%
rename from packages/propel/src/ui/workspace-avatar/index.tsx
rename to packages/propel/src/elements/workspace-avatar/index.tsx
diff --git a/packages/propel/src/elements/workspace-avatar/variants.ts b/packages/propel/src/elements/workspace-avatar/variants.ts
new file mode 100644
index 00000000..819b35c0
--- /dev/null
+++ b/packages/propel/src/elements/workspace-avatar/variants.ts
@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { avatarFallbackClass, avatarImageClass, avatarTones } from "../../internal/avatar-shared";
+import { type StrictVariantProps } from "../../internal/variant-props";
+
+// 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.
+// `bg-layer-1` is the avatar's own neutral backdrop (shows behind a transparent fallback).
+// The rounded-square shape (never circular) is always the same: it reads as a
+// workspace, not a person.
+export const workspaceAvatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-clip border-subtle bg-layer-1",
+  {
+    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",
+      },
+    },
+  },
+);
+
+// The workspace logo image. Fills and crops to the square frame so non-square
+// logos never stretch.
+export const workspaceAvatarImageVariants = cva(avatarImageClass);
+
+// The fallback's `tone` colors the initials surface. `none` (the default) is the
+// anonymous/icon state — neutral layer + muted text. The named tones are the Figma
+// avatar label colors (initials on a solid tone, white text). The same palette as
+// `avatarFallbackVariants` in `elements/avatar`, specialised for workspace avatars.
+export const workspaceAvatarFallbackVariants = cva(avatarFallbackClass, {
+  variants: {
+    tone: avatarTones,
+  },
+});
+
+export type WorkspaceAvatarMagnitude = NonNullable<
+  VariantProps<typeof workspaceAvatarVariants>["magnitude"]
+>;
+
+export type WorkspaceAvatarVariantProps = StrictVariantProps<typeof workspaceAvatarVariants>;
+
+export type WorkspaceAvatarFallbackVariantProps = StrictVariantProps<
+  typeof workspaceAvatarFallbackVariants
+>;
diff --git a/packages/propel/src/elements/workspace-avatar/workspace-avatar-fallback.tsx b/packages/propel/src/elements/workspace-avatar/workspace-avatar-fallback.tsx
new file mode 100644
index 00000000..4b440ac6
--- /dev/null
+++ b/packages/propel/src/elements/workspace-avatar/workspace-avatar-fallback.tsx
@@ -0,0 +1,25 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import {
+  type WorkspaceAvatarFallbackVariantProps,
+  workspaceAvatarFallbackVariants,
+} from "./variants";
+
+/** Props for {@link WorkspaceAvatarFallback}; a styled `<span>` plus a `tone`. */
+export type WorkspaceAvatarFallbackProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+> &
+  WorkspaceAvatarFallbackVariantProps;
+
+/**
+ * The styled workspace initials surface. Base-UI-agnostic — graft the `Avatar.Fallback` behavior in
+ * `components` via `<BaseAvatar.Fallback render={<WorkspaceAvatarFallback/>} />`.
+ */
+export function WorkspaceAvatarFallback({ tone, render, ...props }: WorkspaceAvatarFallbackProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: workspaceAvatarFallbackVariants({ tone }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/workspace-avatar/workspace-avatar-image.tsx b/packages/propel/src/elements/workspace-avatar/workspace-avatar-image.tsx
new file mode 100644
index 00000000..b70efc38
--- /dev/null
+++ b/packages/propel/src/elements/workspace-avatar/workspace-avatar-image.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { workspaceAvatarImageVariants } from "./variants";
+
+/** Props for {@link WorkspaceAvatarImage}; a styled `<img>`. */
+export type WorkspaceAvatarImageProps = Omit<
+  useRender.ComponentProps<"img">,
+  "className" | "style"
+>;
+
+/**
+ * The styled workspace logo image, cropped to the square frame. Base-UI-agnostic — graft the
+ * `Avatar.Image` behavior in `components` via `<BaseAvatar.Image render={<WorkspaceAvatarImage/>}
+ * />`.
+ */
+export function WorkspaceAvatarImage({ render, ...props }: WorkspaceAvatarImageProps) {
+  const defaultProps: useRender.ElementProps<"img"> = {
+    className: workspaceAvatarImageVariants(),
+  };
+  return useRender({ defaultTagName: "img", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/workspace-avatar/workspace-avatar.stories.tsx b/packages/propel/src/elements/workspace-avatar/workspace-avatar.stories.tsx
new file mode 100644
index 00000000..a2e21989
--- /dev/null
+++ b/packages/propel/src/elements/workspace-avatar/workspace-avatar.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { AVATAR_TONES } from "../avatar/index";
+import {
+  WorkspaceAvatar,
+  WorkspaceAvatarFallback,
+  WorkspaceAvatarImage,
+  type WorkspaceAvatarMagnitude,
+} from "./index";
+
+const MAGNITUDES: WorkspaceAvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+
+// An inline-SVG "logo" so the image state renders deterministically with no network.
+const LOGO_SRC = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#4338ca"/><path d="M22 48V16h14a11 11 0 0 1 0 22h-7v10Z" fill="#fff"/></svg>',
+)}`;
+
+// elements-tier story (rule 2b): a pure UI-configuration showcase — the styled parts render
+// DIRECTLY, with no Base UI grafts. The workspace-avatar cvas key off no `data-*`/aria state, so
+// each visual state is simply which child renders (logo image / initials fallback). Image-load
+// fallback behavior is demonstrated in Components/WorkspaceAvatar. `meta.component` is the
+// no-variant `WorkspaceAvatarImage` so no props are forced into story args.
+const meta = {
+  title: "Elements/WorkspaceAvatar",
+  component: WorkspaceAvatarImage,
+  subcomponents: { WorkspaceAvatar, WorkspaceAvatarFallback },
+} satisfies Meta<typeof WorkspaceAvatarImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Root holding a loaded logo. `role="img"` + `aria-label` give the avatar its accessible name. */
+export const Default: Story = {
+  render: () => (
+    <WorkspaceAvatar magnitude="md" role="img" aria-label="Plane workspace">
+      <WorkspaceAvatarImage src={LOGO_SRC} alt="" />
+    </WorkspaceAvatar>
+  ),
+};
+
+/** Every workspace-avatar size (Figma 2xs 16px → 3xl 64px). */
+export const Magnitudes: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <WorkspaceAvatar key={magnitude} magnitude={magnitude} role="img" aria-label={magnitude}>
+          <WorkspaceAvatarFallback tone="indigo">PV</WorkspaceAvatarFallback>
+        </WorkspaceAvatar>
+      ))}
+    </div>
+  ),
+};
+
+/** The fallback's `tone` colors the initials surface — one swatch per Figma avatar tone. */
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      {AVATAR_TONES.map((tone) => (
+        <WorkspaceAvatar key={tone} magnitude="lg" role="img" aria-label={tone}>
+          <WorkspaceAvatarFallback tone={tone}>{tone[0]?.toUpperCase()}</WorkspaceAvatarFallback>
+        </WorkspaceAvatar>
+      ))}
+    </div>
+  ),
+};
+
+/** The two content states side by side: the logo image and the initials fallback. */
+export const States: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <WorkspaceAvatar magnitude="lg" role="img" aria-label="Logo">
+        <WorkspaceAvatarImage src={LOGO_SRC} alt="" />
+      </WorkspaceAvatar>
+      <WorkspaceAvatar magnitude="lg" role="img" aria-label="Initials">
+        <WorkspaceAvatarFallback tone="emerald">PV</WorkspaceAvatarFallback>
+      </WorkspaceAvatar>
+    </div>
+  ),
+};
+
+/**
+ * The single project-wide CSS check (the allowed rule-2b canary): an `md` workspace 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: () => (
+    <WorkspaceAvatar magnitude="md" role="img" aria-label="Plane workspace">
+      <WorkspaceAvatarFallback tone="indigo">PV</WorkspaceAvatarFallback>
+    </WorkspaceAvatar>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("img", { name: "Plane workspace" })).toHaveStyle({
+      width: "28px",
+    });
+    const initials = canvas.getByText("PV");
+    await expect(getComputedStyle(initials).backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+  },
+};
diff --git a/packages/propel/src/elements/workspace-avatar/workspace-avatar.tsx b/packages/propel/src/elements/workspace-avatar/workspace-avatar.tsx
new file mode 100644
index 00000000..7550d0ae
--- /dev/null
+++ b/packages/propel/src/elements/workspace-avatar/workspace-avatar.tsx
@@ -0,0 +1,24 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { type WorkspaceAvatarVariantProps, workspaceAvatarVariants } from "./variants";
+
+export type { WorkspaceAvatarMagnitude } from "./variants";
+
+/** Props for {@link WorkspaceAvatar}; a styled `<span>` plus a `magnitude`. */
+export type WorkspaceAvatarProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  WorkspaceAvatarVariantProps;
+
+/**
+ * The styled workspace avatar root — a single `<span>` that holds a `WorkspaceAvatarImage` and/or
+ * `WorkspaceAvatarFallback`. Base-UI-agnostic — graft the `Avatar.Root` behavior in `components`
+ * via `<BaseAvatar.Root render={<WorkspaceAvatar/>} />`. The rounded-square shape distinguishes a
+ * workspace from a (circular) person avatar. For the ready-made image+initials avatar, use the
+ * `WorkspaceAvatar` from `@plane/propel/components/workspace-avatar`.
+ */
+export function WorkspaceAvatar({ magnitude, render, ...props }: WorkspaceAvatarProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: workspaceAvatarVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/arrow.tsx b/packages/propel/src/internal/arrow.tsx
new file mode 100644
index 00000000..33732d12
--- /dev/null
+++ b/packages/propel/src/internal/arrow.tsx
@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+/**
+ * The shared overlay caret, grafted onto any Base UI `*.Arrow` behavior in `components`
+ * (`<BaseMenu.Arrow render={<Arrow />}>`). Tints the caret to `layer-1` so it blends into the popup
+ * surface; Base UI (and the arrow's children) supply the caret shape itself. Byte-identical across
+ * every overlay family that draws a caret — `context-menu`, `menu`, `preview-card` — so it lives
+ * here rather than being copied per family (rule 4a).
+ */
+export const arrowVariants = cva("text-layer-1");
+
+export type ArrowProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function Arrow({ render, ...props }: ArrowProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: arrowVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/avatar-shared.ts b/packages/propel/src/internal/avatar-shared.ts
new file mode 100644
index 00000000..54326be1
--- /dev/null
+++ b/packages/propel/src/internal/avatar-shared.ts
@@ -0,0 +1,21 @@
+/**
+ * Chrome shared verbatim by the Avatar and WorkspaceAvatar families (rule 4a). The two stay
+ * discrete `components` — a person vs a workspace — and differ in shape (circle vs squared steps),
+ * but the photo treatment and the centered fallback layout are one design.
+ */
+export const avatarImageClass = "size-full object-cover";
+export const avatarFallbackClass = "flex size-full items-center justify-center leading-none";
+
+/**
+ * The shared fallback tone map — Avatar and WorkspaceAvatar carry the exact same six label hues
+ * (there is no neutral "none" tone: an avatar with no initials shows its icon slot over the root's
+ * `layer-1` backdrop instead).
+ */
+export const avatarTones = {
+  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",
+} as const;
diff --git a/packages/propel/src/internal/backdrop.tsx b/packages/propel/src/internal/backdrop.tsx
new file mode 100644
index 00000000..a5ecdc12
--- /dev/null
+++ b/packages/propel/src/internal/backdrop.tsx
@@ -0,0 +1,21 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+/**
+ * The shared overlay backdrop surface, grafted onto any Base UI `*.Backdrop` behavior in
+ * `components` (`<BaseDialog.Backdrop render={<Backdrop />}>`). Dims the page behind a modal
+ * overlay and fades with the overlay's open/close transition. Byte-identical across every overlay
+ * family — alert-dialog, dialog, drawer, navigation-menu, popover, preview-card — so it lives here
+ * rather than being copied per family (rule 4a). No styling axes.
+ */
+export const backdropVariants = cva(
+  "fixed inset-0 bg-backdrop transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+);
+
+export type BackdropProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function Backdrop({ render, ...props }: BackdropProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: backdropVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/checkbox-box.ts b/packages/propel/src/internal/checkbox-box.ts
index 71f999a2..228f9ec6 100644
--- a/packages/propel/src/internal/checkbox-box.ts
+++ b/packages/propel/src/internal/checkbox-box.ts
@@ -2,9 +2,9 @@ import { cva, cx } from "class-variance-authority";
 
 /**
  * The checkbox BOX look: the 16px bordered square that fills the accent on
- * `data-checked`/`data-indeterminate`. Shared chrome — the `Checkbox` box (`ui/checkbox`) and the
- * menu's checkbox indicator (`ui/menu`) both render it, so it lives in `internal/` (rule 4: no
- * cross-component cva coupling). Reacts to the standard Base UI state attributes
+ * `data-checked`/`data-indeterminate`. Shared chrome — the `Checkbox` box (`elements/checkbox`) and
+ * the menu's checkbox indicator (`elements/menu`) both render it, so it lives in `internal/` (rule
+ * 4: no cross-component cva coupling). Reacts to the standard Base UI state attributes
  * (`data-checked`/`data-indeterminate`/`data-disabled`), so any host that sets them gets the look.
  * The error look isn't a prop: it rests at the neutral border and recolors to `danger` off
  * `data-invalid`, which Base UI's `Field.Root` propagates to the `Checkbox.Root` when the field is
diff --git a/packages/propel/src/internal/checkbox-field-control.tsx b/packages/propel/src/internal/checkbox-field-control.tsx
index 16f46206..286a78e5 100644
--- a/packages/propel/src/internal/checkbox-field-control.tsx
+++ b/packages/propel/src/internal/checkbox-field-control.tsx
@@ -1,9 +1,6 @@
 import { Checkbox, type CheckboxProps } from "../components/checkbox";
 
-export type CheckboxFieldControlProps = Omit<
-  CheckboxProps,
-  "children" | "label" | "inlineStartNode"
->;
+export type CheckboxFieldControlProps = Omit<CheckboxProps, "children" | "label" | "icon">;
 
 /**
  * The bare checkbox box (Root + check + indeterminate indicators) used inside a field row — the
diff --git a/packages/propel/src/internal/control-group.ts b/packages/propel/src/internal/control-group.ts
new file mode 100644
index 00000000..41dd481f
--- /dev/null
+++ b/packages/propel/src/internal/control-group.ts
@@ -0,0 +1,50 @@
+import { cx } from "class-variance-authority";
+
+import { fieldControlSurfaceVariants } from "./field-control-surface";
+
+/**
+ * The shared interaction chrome for a bordered group that WRAPS a separately-focusable form control
+ * — the input, textarea, autocomplete, combobox (input row and chips frame), and number-field
+ * frames. Composes the `focus: "within"` control surface and adds the one interaction design every
+ * input box shares (before this, input/text-area carried it and the pickers had silently drifted to
+ * a static frame):
+ *
+ * - A color/border/shadow transition,
+ * - The rest hover (`border-subtle-1` + `layer-2-hover` fill),
+ * - The focused-hover correction (keep the accent border and flat fill while typing),
+ * - The disabled guard in BOTH selector forms — `:has(:disabled)` for a frame around a native control
+ *   and `data-disabled` for a Base UI group that mirrors state as an attribute.
+ *
+ * Families add only their own geometry: width, alignment, gap, radius, padding/magnitude.
+ */
+export const controlGroupClass = cx(
+  fieldControlSurfaceVariants({ focus: "within" }),
+  "group/control flex transition-[color,background-color,border-color,box-shadow]",
+  "hover:border-subtle-1 hover:bg-layer-2-hover",
+  "focus-within:bg-layer-2 focus-within:hover:border-accent-strong focus-within:hover:bg-layer-2",
+  "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-subtle has-[:disabled]:bg-layer-2 has-[:disabled]:ring-0 has-[:disabled]:hover:border-subtle",
+  "data-disabled:cursor-not-allowed data-disabled:border-subtle data-disabled:bg-layer-2 data-disabled:text-disabled data-disabled:ring-0 data-disabled:hover:border-subtle",
+);
+
+/**
+ * THE single-line control magnitude scale — one meaning per step across every bordered form control
+ * (input, autocomplete, combobox, select trigger, otp digit). Before this each family kept its own
+ * scale and they disagreed: input was padding-based `md/lg/xl`, autocomplete/select ran `sm/md/lg`
+ * at 28/32/36px but differed on the text size of the SAME step, the otp digits ran the same pixel
+ * scale one label off (32/36/40 as "sm/md/lg"), and combobox had no axis at all. A step now always
+ * means: height, text size, and glyph `--node-size`.
+ *
+ * Sm 28px / text-13 / 14px glyphs · md 32px / text-14 / 16px · lg 36px / text-14 / 16px · xl 44px /
+ * text-16 / 20px. Families expose the steps their Figma spec defines and add only their own
+ * geometry (padding, width, radius). Multiline (`text-area`) reuses the text sizes; the
+ * number-field's scale stays coupled to its stepper `IconButton` squares.
+ */
+export const controlMagnitude = {
+  sm: "min-h-7 text-13 [--node-size:0.875rem]",
+  md: "min-h-8 text-14 [--node-size:1rem]",
+  lg: "min-h-9 text-14 [--node-size:1rem]",
+  xl: "min-h-11 text-16 [--node-size:1.25rem]",
+} as const;
+
+/** The visible label beside/above a bordered control — one type treatment for every picker. */
+export const controlLabelClass = "text-14 font-medium text-primary";
diff --git a/packages/propel/src/internal/control-icon.tsx b/packages/propel/src/internal/control-icon.tsx
new file mode 100644
index 00000000..e2dc7c70
--- /dev/null
+++ b/packages/propel/src/internal/control-icon.tsx
@@ -0,0 +1,30 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, cx } from "class-variance-authority";
+
+import { nodeSlotClass } from "./node-slot";
+
+/**
+ * The decorative leading icon inside a bordered control group (a search magnifier, a mail glyph):
+ * an `aria-hidden` slot sized to the group's `--node-size`, tinted toward the placeholder and
+ * brightening to secondary when the control focuses — reading the `group/control` class that
+ * `controlGroupClass` carries. One part for every input frame (input-field, autocomplete,
+ * combobox); before this, autocomplete and combobox each kept a copy differing only in their group
+ * name, and the input's icons never brightened.
+ */
+export const controlIconVariants = cva(
+  cx(
+    nodeSlotClass,
+    "text-icon-placeholder transition-colors group-focus-within/control:text-icon-secondary",
+  ),
+);
+
+export type ControlIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+export function ControlIcon({ render, ...props }: ControlIconProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: controlIconVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/control-input.ts b/packages/propel/src/internal/control-input.ts
new file mode 100644
index 00000000..7f10a270
--- /dev/null
+++ b/packages/propel/src/internal/control-input.ts
@@ -0,0 +1,18 @@
+import { cx } from "class-variance-authority";
+
+/**
+ * The shared text treatment for the bare control INSIDE a bordered group — the input, textarea,
+ * autocomplete/combobox inputs, and the number-field's numeric input. Before this each family
+ * re-spelled it (and drifted: only the plain input had the accent caret). The control is
+ * transparent (the group owns the surface), primary text over placeholder color, no outline (the
+ * group draws focus), and disabled shows the not-allowed cursor + disabled text.
+ *
+ * Families add their own geometry/typography: `flex-1`/fixed width, text size per magnitude,
+ * alignment, and overflow behavior.
+ */
+export const controlInputClass = cx(
+  "min-w-0 bg-transparent text-primary outline-none",
+  "caret-(--border-color-accent-strong)",
+  "placeholder:text-placeholder",
+  "disabled:cursor-not-allowed disabled:text-disabled",
+);
diff --git a/packages/propel/src/internal/disclosure-indicator.tsx b/packages/propel/src/internal/disclosure-indicator.tsx
new file mode 100644
index 00000000..0e6f9da0
--- /dev/null
+++ b/packages/propel/src/internal/disclosure-indicator.tsx
@@ -0,0 +1,76 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { nodeSlotClass } from "./node-slot";
+import { type StrictVariantProps } from "./variant-props";
+
+/**
+ * The shared disclosure caret, grafted (or composed) wherever a trigger reveals content. ONE glyph
+ * convention everywhere: pass a **chevron-down** svg and the slot rotates it — before this each
+ * family re-spelled the rotation (and breadcrumb had drifted to a chevron-right convention with
+ * opposite math). Reads the open state from the trigger's `group` class via BOTH Base UI attributes
+ * (`data-panel-open` for collapsibles/accordions, `data-popup-open` for menus/popups), and dims off
+ * a menu row's `group-data-disabled/item`.
+ *
+ * - `motion` — `disclose`: points inline-end while closed, down while open (RTL-mirrored);
+ *   `pointEnd`: always points inline-end (a submenu caret); `flip`: down while closed, up while
+ *   open (a dropdown caret).
+ * - `tint` — resting icon color.
+ * - `magnitude` — the glyph size when the trigger doesn't already provide `--node-size`.
+ */
+export const disclosureIndicatorVariants = cva(
+  cx(
+    nodeSlotClass,
+    "transition-transform duration-200",
+    "group-data-disabled/item:text-icon-disabled",
+  ),
+  {
+    variants: {
+      motion: {
+        disclose: cx(
+          "-rotate-90 group-data-panel-open:rotate-0 group-data-popup-open:rotate-0",
+          "rtl:rotate-90 rtl:group-data-panel-open:rotate-0 rtl:group-data-popup-open:rotate-0",
+        ),
+        pointEnd: "-rotate-90 rtl:rotate-90",
+        flip: "group-data-popup-open:rotate-180",
+      },
+      tint: {
+        secondary: "text-icon-secondary",
+        tertiary: "text-icon-tertiary",
+      },
+      magnitude: {
+        inherit: "",
+        sm: "[--node-size:0.875rem]",
+      },
+    },
+  },
+);
+
+type DisclosureIndicatorVariantConfig = VariantProps<typeof disclosureIndicatorVariants>;
+export type DisclosureIndicatorMotion = NonNullable<DisclosureIndicatorVariantConfig["motion"]>;
+export type DisclosureIndicatorTint = NonNullable<DisclosureIndicatorVariantConfig["tint"]>;
+
+export type DisclosureIndicatorVariantProps = StrictVariantProps<
+  typeof disclosureIndicatorVariants
+>;
+
+export type DisclosureIndicatorProps = Omit<
+  useRender.ComponentProps<"span">,
+  "className" | "style"
+> &
+  DisclosureIndicatorVariantProps;
+
+export function DisclosureIndicator({
+  motion,
+  tint,
+  magnitude,
+  render,
+  ...props
+}: DisclosureIndicatorProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: disclosureIndicatorVariants({ motion, tint, magnitude }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/disclosure-trigger.ts b/packages/propel/src/internal/disclosure-trigger.ts
new file mode 100644
index 00000000..7659e73f
--- /dev/null
+++ b/packages/propel/src/internal/disclosure-trigger.ts
@@ -0,0 +1,16 @@
+import { cx } from "class-variance-authority";
+
+/**
+ * The disclosure trigger core shared by accordion and collapsible (rule 4a): a `group`-carrying row
+ * (its `DisclosureIndicator` reads the open state) with the shared type treatment, focus ring, and
+ * disabled dimming. Families add their own geometry (accordion's padding + hover fill,
+ * collapsible's full width). `disclosureTriggerTitleClass` is the growing, wrapping label beside
+ * the caret.
+ */
+export const disclosureTriggerClass = cx(
+  "group flex items-center gap-2 text-start [--node-size:1rem]",
+  "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 disclosureTriggerTitleClass = "min-w-0 flex-1 text-start";
diff --git a/packages/propel/src/internal/field-option-magnitude.tsx b/packages/propel/src/internal/field-option-magnitude.tsx
index 8bb4455a..fc95a748 100644
--- a/packages/propel/src/internal/field-option-magnitude.tsx
+++ b/packages/propel/src/internal/field-option-magnitude.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import type { InputMagnitude } from "../ui/field/variants";
+import type { InputMagnitude } from "../elements/field/variants";
 
 // Cascades the field magnitude from a group field (`CheckboxGroupField` / `RadioGroupField`) down to
 // its option rows, so an option can omit `magnitude` and inherit the group's. React context is a
-// composition concern — never `ui` (rule 7) — and this one is shared by both group fields, so it
+// composition concern — never `elements` (rule 7) — and this one is shared by both group fields, so it
 // lives here in `internal` (alongside the other shared composition impl).
 const FieldOptionMagnitudeContext = React.createContext<InputMagnitude | null>(null);
 
diff --git a/packages/propel/src/internal/icon.tsx b/packages/propel/src/internal/icon.tsx
new file mode 100644
index 00000000..200a072f
--- /dev/null
+++ b/packages/propel/src/internal/icon.tsx
@@ -0,0 +1,58 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { nodeSlotClass } from "./node-slot";
+import { type StrictVariantProps } from "./variant-props";
+
+/**
+ * The shared decorative glyph slot (rule 4a): an `aria-hidden` `<span>` that sizes its single svg
+ * child to the inherited `--node-size`. Before this, seventeen families each kept a byte-identical
+ * `<Family>Icon` part differing only in tint or a local node size — those are gone; `components`
+ * ready-mades and stories compose this one. A family keeps its OWN icon part only when its styling
+ * is genuinely distinct (toast/banner/alert-dialog tones, avatar's magnitude scale, the
+ * autocomplete/combobox focus-brightening, navigation-menu's Base-UI-named rotating `Icon`).
+ *
+ * Both axes carry a real default (`inherit` — rule 12's sanctioned mechanism): an icon slot's size
+ * and color normally come from its container's `--node-size` and `currentColor`.
+ */
+const iconDefaultVariants = {
+  tint: "inherit",
+  magnitude: "inherit",
+} as const;
+
+export const iconVariants = cva(nodeSlotClass, {
+  variants: {
+    tint: {
+      inherit: "",
+      secondary: "text-icon-secondary",
+      tertiary: "text-icon-tertiary",
+    },
+    magnitude: {
+      inherit: "",
+      sm: "[--node-size:0.875rem]",
+      md: "[--node-size:1rem]",
+    },
+  },
+  defaultVariants: iconDefaultVariants,
+});
+
+type IconVariantConfig = VariantProps<typeof iconVariants>;
+export type IconTint = NonNullable<IconVariantConfig["tint"]>;
+export type IconMagnitude = NonNullable<IconVariantConfig["magnitude"]>;
+
+export type IconVariantProps = StrictVariantProps<
+  typeof iconVariants,
+  keyof typeof iconDefaultVariants
+>;
+
+export type IconProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  IconVariantProps;
+
+export function Icon({ tint, magnitude, render, ...props }: IconProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: iconVariants({ tint, magnitude }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/item-indicator.ts b/packages/propel/src/internal/item-indicator.ts
new file mode 100644
index 00000000..02b4850b
--- /dev/null
+++ b/packages/propel/src/internal/item-indicator.ts
@@ -0,0 +1,15 @@
+import { cx } from "class-variance-authority";
+
+import { nodeSlotClass } from "./node-slot";
+
+/**
+ * The shared selected-check slot chrome (rule 4a): an accent-tinted node slot that hides its glyph
+ * while the row is unselected (`data-selected` comes from the Base UI `ItemIndicator` graft, which
+ * passes `keepMounted` so the gutter column holds). Composed by the select/combobox/menu/
+ * context-menu item indicators — before this each re-spelled it, and combobox had drifted to an
+ * untinted check.
+ */
+export const itemIndicatorClass = cx(
+  nodeSlotClass,
+  "text-icon-accent-primary [--node-size:1rem] not-data-selected:invisible",
+);
diff --git a/packages/propel/src/internal/link-chrome.ts b/packages/propel/src/internal/link-chrome.ts
index bc1d7335..7384e613 100644
--- a/packages/propel/src/internal/link-chrome.ts
+++ b/packages/propel/src/internal/link-chrome.ts
@@ -1,13 +1,13 @@
 import { cva, cx, type VariantProps } from "class-variance-authority";
 
-// The inline text-link look (Figma "Link") shared by surfaces that *present as* a link: `Anchor`
-// (an `<a>`) and `ButtonAnchor` (a `<button>` styled as a link). Underline + the link palette by
+// The inline text-link look (Figma "Link"): `AnchorButton` wears it — a `<button>` action by
+// default, or a real `<a>` via `render`/`nativeButton={false}`. Underline + the link palette by
 // `prominence` (blue primary / muted secondary), text size by `magnitude`. Carries both `disabled`
 // (button) and `aria-disabled` (anchor) so it styles either element. Compose nothing — it is the
 // whole look; each surface just renders its element with this className.
 export const linkChromeVariants = cva(
   cx(
-    "cursor-pointer rounded-xs underline underline-offset-2 transition-colors outline-none",
+    "group inline-flex cursor-pointer items-center gap-1 rounded-xs underline underline-offset-2 transition-colors outline-none",
     "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-1",
     "disabled:cursor-not-allowed disabled:text-disabled disabled:no-underline",
     "aria-disabled:cursor-not-allowed aria-disabled:text-disabled aria-disabled:no-underline",
@@ -18,7 +18,12 @@ export const linkChromeVariants = cva(
         primary: "text-link-primary hover:text-link-primary-hover",
         secondary: "text-secondary hover:text-primary",
       },
-      magnitude: { sm: "text-12 leading-snug", md: "text-13", lg: "text-13", xl: "text-14" },
+      magnitude: {
+        sm: "text-12 leading-snug [--node-size:0.75rem]",
+        md: "text-13 [--node-size:0.875rem]",
+        lg: "text-13 [--node-size:0.875rem]",
+        xl: "text-14 [--node-size:1rem]",
+      },
     },
   },
 );
diff --git a/packages/propel/src/internal/listbox-empty.ts b/packages/propel/src/internal/listbox-empty.ts
new file mode 100644
index 00000000..9df13046
--- /dev/null
+++ b/packages/propel/src/internal/listbox-empty.ts
@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * The listbox "no matches" live region (rule 4a) — shared verbatim by autocomplete and combobox.
+ * Base UI keeps the element mounted as an aria-live status region and renders children only when
+ * the filtered list is empty, so the padding applies via `:not(:empty)` — otherwise every popup
+ * shows a dead padded strip.
+ */
+export const listboxEmptyClass = "text-13 text-tertiary not-empty:px-2 not-empty:py-1.5";
+
+export const listboxEmptyVariants = cva(listboxEmptyClass);
diff --git a/packages/propel/src/internal/listbox-group-label.tsx b/packages/propel/src/internal/listbox-group-label.tsx
new file mode 100644
index 00000000..d15e55c6
--- /dev/null
+++ b/packages/propel/src/internal/listbox-group-label.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+/**
+ * The muted heading naming a group of listbox options, grafted onto a Base UI `GroupLabel` in
+ * `components` (`<BaseCombobox.GroupLabel render={<ListboxGroupLabel/>} />`). Matches the menu
+ * group label's type treatment so grouped pickers and menus read the same.
+ */
+export const listboxGroupLabelVariants = cva("px-2 py-1.5 text-12 font-medium text-tertiary");
+export const groupLabelClass = "px-2 py-1.5 text-12 font-medium text-tertiary";
+
+export type ListboxGroupLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function ListboxGroupLabel({ render, ...props }: ListboxGroupLabelProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: listboxGroupLabelVariants(),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/listbox-item.tsx b/packages/propel/src/internal/listbox-item.tsx
new file mode 100644
index 00000000..e6f224f5
--- /dev/null
+++ b/packages/propel/src/internal/listbox-item.tsx
@@ -0,0 +1,59 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "./variant-props";
+
+/**
+ * The shared listbox option row, grafted onto any Base UI `*.Item` behavior in `components`
+ * (`<BaseAutocomplete.Item render={<ListboxItem layout="plain" magnitude="md" />} value={…} />`).
+ * Highlight/disabled states, a magnitude axis for height + text size, and a `layout` axis for the
+ * row's arrangement.
+ *
+ * Shared chrome across the `autocomplete`, `combobox`, and `select` families, so it lives here
+ * rather than being copied per family (rule 4a). `autocomplete` and `combobox` were fixed at the
+ * `md` step (`min-h-8` + `text-14`); `select` factors min-h/text to a magnitude axis.
+ */
+export const listboxItemVariants = cva(
+  cx(
+    "cursor-default items-center gap-2 rounded-sm px-2 text-primary outline-none",
+    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      // Row arrangement. `indicator` reserves a leading 1rem column for the selection marker
+      // (select/combobox) — grid placement is positional, so the marker graft must pass
+      // `keepMounted`, or unselected rows would slide their text into the 1rem column and wrap at
+      // min-content. `plain` is a flush flex row for families with no selection marker
+      // (autocomplete).
+      layout: {
+        indicator: "grid grid-cols-[1rem_1fr]",
+        plain: "flex",
+      },
+      // Figma "Size" axis: three row heights with matching text sizes. `md` reproduces the
+      // autocomplete/combobox row exactly; `sm`/`lg` come from select's per-magnitude values.
+      magnitude: {
+        sm: "min-h-7 text-13",
+        md: "min-h-8 text-14",
+        lg: "min-h-9 text-14",
+      },
+    },
+  },
+);
+
+export type ListboxItemMagnitude = NonNullable<
+  VariantProps<typeof listboxItemVariants>["magnitude"]
+>;
+
+export type ListboxItemVariantProps = StrictVariantProps<typeof listboxItemVariants>;
+
+export type ListboxItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  ListboxItemVariantProps;
+
+export function ListboxItem({ layout, magnitude, render, ...props }: ListboxItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: listboxItemVariants({ layout, magnitude }),
+  };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/listbox-popup.tsx b/packages/propel/src/internal/listbox-popup.tsx
new file mode 100644
index 00000000..16f339cd
--- /dev/null
+++ b/packages/propel/src/internal/listbox-popup.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+/**
+ * The shared anchored-listbox surface, grafted onto any Base UI `*.Popup` behavior in `components`
+ * (`<BaseAutocomplete.Popup render={<ListboxPopup />}>`). A scrollable floating card sized to its
+ * anchor: capped to the available height, at least as wide as the anchor, with the standard overlay
+ * border/shadow/radius. Byte-identical across the autocomplete, combobox, and select families, so
+ * it lives here rather than being copied per family (rule 4a). `origin-(--transform-origin)` is
+ * included in the base so an animated family (select) shares the exact same class; it is harmless
+ * when the surface is not animated.
+ */
+export const listboxPopupVariants = cva(
+  "max-h-[min(var(--available-height),18rem)] min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto rounded-md border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100",
+);
+
+export type ListboxPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function ListboxPopup({ render, ...props }: ListboxPopupProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: listboxPopupVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/listbox-status.tsx b/packages/propel/src/internal/listbox-status.tsx
new file mode 100644
index 00000000..cb070c27
--- /dev/null
+++ b/packages/propel/src/internal/listbox-status.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+import { listboxEmptyClass } from "./listbox-empty";
+
+/**
+ * The muted status hint inside a listbox popup ("Searching…", "12 results"), sharing the Empty
+ * region's type treatment and its collapse-when-childless behavior.
+ */
+export const listboxStatusVariants = cva(listboxEmptyClass);
+
+export type ListboxStatusProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function ListboxStatus({ render, ...props }: ListboxStatusProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: listboxStatusVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/menu-row-parts.ts b/packages/propel/src/internal/menu-row-parts.ts
new file mode 100644
index 00000000..3f73fe24
--- /dev/null
+++ b/packages/propel/src/internal/menu-row-parts.ts
@@ -0,0 +1,6 @@
+/**
+ * Row furniture shared verbatim by the menu and context-menu families (rule 4a): the separator
+ * spanning the popup padding, and the muted trailing meta/shortcut text.
+ */
+export const menuSeparatorClass = "-mx-1 my-1 border-t border-subtle";
+export const rowMetaClass = "shrink-0 text-12 text-tertiary";
diff --git a/packages/propel/src/internal/option-group.ts b/packages/propel/src/internal/option-group.ts
new file mode 100644
index 00000000..dbaab8b3
--- /dev/null
+++ b/packages/propel/src/internal/option-group.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * A stacked group of labeled option rows (rule 4a) — the checkbox group and radio group share the
+ * column layout and the `density` axis verbatim, so both families alias this cva.
+ */
+export const optionGroupVariants = cva("flex flex-col", {
+  variants: {
+    density: {
+      comfortable: "gap-2",
+      compact: "gap-0",
+    },
+  },
+});
diff --git a/packages/propel/src/internal/overlay-description.tsx b/packages/propel/src/internal/overlay-description.tsx
new file mode 100644
index 00000000..93c2f429
--- /dev/null
+++ b/packages/propel/src/internal/overlay-description.tsx
@@ -0,0 +1,38 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "./variant-props";
+
+/**
+ * The shared overlay description text, grafted onto any Base UI `*.Description` behavior in
+ * `components` (`<BaseDialog.Description render={<OverlayDescription magnitude="lg" />}>`). Renders
+ * the secondary supporting copy under an overlay's title. Byte-identical across every overlay
+ * family, so it lives here rather than being copied per family (rule 4a).
+ *
+ * Adopted by: `dialog`, `alert-dialog`, `drawer` (`magnitude="lg"` → `text-14`) and `popover`,
+ * `preview-card` (`magnitude="md"` → `text-13`).
+ */
+export const overlayDescriptionVariants = cva("", {
+  variants: {
+    magnitude: {
+      md: "text-13 text-secondary",
+      lg: "text-14 text-secondary",
+    },
+  },
+});
+
+export type OverlayDescriptionMagnitude = NonNullable<
+  VariantProps<typeof overlayDescriptionVariants>["magnitude"]
+>;
+export type OverlayDescriptionVariantProps = StrictVariantProps<typeof overlayDescriptionVariants>;
+
+export type OverlayDescriptionProps = Omit<useRender.ComponentProps<"p">, "className" | "style"> &
+  OverlayDescriptionVariantProps;
+
+export function OverlayDescription({ magnitude, render, ...props }: OverlayDescriptionProps) {
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: overlayDescriptionVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "p", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/overlay-frame.ts b/packages/propel/src/internal/overlay-frame.ts
new file mode 100644
index 00000000..8f155398
--- /dev/null
+++ b/packages/propel/src/internal/overlay-frame.ts
@@ -0,0 +1,18 @@
+import { cx } from "class-variance-authority";
+
+/**
+ * Frame regions shared across the modal/popover families (rule 4a): - `modalViewportClass` — the
+ * fixed, centering viewport behind a dialog/alert-dialog popup. - `overlayHeadingClass` — the
+ * title+description column at the top of a surface. - `overlayActionsClass` — the trailing-aligned
+ * action row (families add their own padding). - `overlayCloseClass` — the corner dismiss
+ * affordance's chrome (identical in alert-dialog and drawer; the toast's close is a composed
+ * `IconButton` instead).
+ */
+export const modalViewportClass = "fixed inset-0 z-50 flex items-center justify-center p-4";
+export const overlayHeadingClass = "flex min-w-0 flex-col gap-2";
+export const overlayActionsClass = "flex justify-end gap-2";
+export const overlayCloseClass = 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/internal/overlay-panel.tsx b/packages/propel/src/internal/overlay-panel.tsx
index 685a4242..63fcbf9b 100644
--- a/packages/propel/src/internal/overlay-panel.tsx
+++ b/packages/propel/src/internal/overlay-panel.tsx
@@ -39,7 +39,7 @@ const overlayPanelVariants = cva(
     variants: {
       // `anchor` matches the trigger width; `sm`/`md`/`lg` are the fixed Figma picker
       // widths; `auto` hugs its content with a small floor for compact menus.
-      width: {
+      sizing: {
         anchor: "min-w-(--anchor-width)",
         auto: "min-w-36",
         sm: "w-64", // 256px
@@ -50,7 +50,7 @@ const overlayPanelVariants = cva(
   },
 );
 
-export type OverlayPanelWidth = NonNullable<VariantProps<typeof overlayPanelVariants>["width"]>;
+export type OverlayPanelSizing = NonNullable<VariantProps<typeof overlayPanelVariants>["sizing"]>;
 
 export type OverlayPanelProps = {
   /** Surface shadow depth (see `internal/surface`). */
@@ -61,7 +61,7 @@ export type OverlayPanelProps = {
    * Panel width. `anchor` matches the trigger, `sm`/`md`/`lg` are the fixed picker widths, `auto`
    * hugs content with a floor. Omit for content width with no floor.
    */
-  width?: OverlayPanelWidth;
+  sizing?: OverlayPanelSizing;
   /** Sticky content pinned above the scroll body (e.g. a `DropdownSearch`). */
   header?: React.ReactNode;
   /** Sticky content pinned below the scroll body (e.g. a `DropdownFooter`). */
@@ -73,13 +73,13 @@ export type OverlayPanelProps = {
 export function OverlayPanel({
   elevation,
   radius,
-  width,
+  sizing,
   header,
   footer,
   children,
 }: OverlayPanelProps) {
   return (
-    <div className={cx(surfaceVariants({ elevation, radius }), overlayPanelVariants({ width }))}>
+    <div className={cx(surfaceVariants({ elevation, radius }), overlayPanelVariants({ sizing }))}>
       {header}
       <ScrollArea orientation="vertical" visibility="auto" magnitude="thin">
         {children}
diff --git a/packages/propel/src/internal/overlay-title.tsx b/packages/propel/src/internal/overlay-title.tsx
new file mode 100644
index 00000000..1cbadcf2
--- /dev/null
+++ b/packages/propel/src/internal/overlay-title.tsx
@@ -0,0 +1,37 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "./variant-props";
+
+/**
+ * The shared overlay heading, grafted onto any Base UI `*.Title` behavior in `components`
+ * (`<BaseDialog.Title render={<OverlayTitle magnitude="lg" />}>`). Every anchored/modal overlay
+ * family renders the same semibold primary heading, differing only in size, so the recipe lives
+ * here rather than being copied per family (rule 4a).
+ *
+ * Adopted by: dialog, alert-dialog, drawer (`magnitude="lg"`, text-16) and popover, preview-card
+ * (`magnitude="md"`, text-14).
+ */
+export const overlayTitleVariants = cva("font-semibold text-primary", {
+  variants: {
+    magnitude: {
+      md: "text-14",
+      lg: "text-16",
+    },
+  },
+});
+
+type OverlayTitleVariantConfig = VariantProps<typeof overlayTitleVariants>;
+export type OverlayTitleMagnitude = NonNullable<OverlayTitleVariantConfig["magnitude"]>;
+export type OverlayTitleVariantProps = StrictVariantProps<typeof overlayTitleVariants>;
+
+export type OverlayTitleProps = Omit<useRender.ComponentProps<"h2">, "className" | "style"> &
+  OverlayTitleVariantProps;
+
+export function OverlayTitle({ magnitude, render, ...props }: OverlayTitleProps) {
+  const defaultProps: useRender.ElementProps<"h2"> = {
+    className: overlayTitleVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "h2", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/popup-surface.ts b/packages/propel/src/internal/popup-surface.ts
new file mode 100644
index 00000000..78a25cde
--- /dev/null
+++ b/packages/propel/src/internal/popup-surface.ts
@@ -0,0 +1,16 @@
+import { cx } from "class-variance-authority";
+
+/**
+ * The shared anchored-popup surface (rule 4a): the raised overlay card — `layer-1` fill, subtle
+ * border, overlay shadow — animated from its pointer-anchored transform origin with the standard
+ * 150ms scale/fade. Before this, five families re-spelled it verbatim (menu, context-menu,
+ * navigation-menu, popover, preview-card); each now composes this and adds only its own width cap
+ * and padding. The listbox popup (`internal/listbox-popup`) and tooltip stay separate surfaces by
+ * design (anchor-width sizing / the smaller `layer-2` card).
+ */
+export const popupSurfaceClass = cx(
+  "rounded-lg border-sm border-subtle bg-layer-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",
+);
diff --git a/packages/propel/src/internal/popup-viewport.tsx b/packages/propel/src/internal/popup-viewport.tsx
new file mode 100644
index 00000000..a55372ab
--- /dev/null
+++ b/packages/propel/src/internal/popup-viewport.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+/**
+ * The shared popup viewport surface, grafted onto any Base UI `*.Viewport` behavior in `components`
+ * (`<BaseMenu.Viewport render={<PopupViewport />}>`). A `relative` content wrapper inside the popup
+ * that morphs/clips during submenu or size transitions. Byte-identical across every overlay family
+ * (menu, popover, tooltip), so it lives here rather than being copied per family (rule 4a).
+ */
+export const popupViewportVariants = cva("relative");
+
+export type PopupViewportProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function PopupViewport({ render, ...props }: PopupViewportProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: popupViewportVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/positioner.tsx b/packages/propel/src/internal/positioner.tsx
new file mode 100644
index 00000000..0b32ee13
--- /dev/null
+++ b/packages/propel/src/internal/positioner.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+/**
+ * The shared overlay positioner surface, grafted onto any Base UI `*.Positioner` behavior in
+ * `components` (`<BaseMenu.Positioner render={<Positioner />}>`). Floats the anchored overlay above
+ * page content and drops the focus ring. Byte-identical across every overlay family, so it lives
+ * here rather than being copied per family (rule 4a).
+ */
+export const positionerVariants = cva("z-50 outline-none");
+
+export type PositionerProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+
+export function Positioner({ render, ...props }: PositionerProps) {
+  const defaultProps: useRender.ElementProps<"div"> = { className: positionerVariants() };
+  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/internal/solid-icons/solid-circle-alert.tsx b/packages/propel/src/internal/solid-icons/solid-circle-alert.tsx
new file mode 100644
index 00000000..0c860c3c
--- /dev/null
+++ b/packages/propel/src/internal/solid-icons/solid-circle-alert.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type SolidIconProps } from "./solid-icon";
+
+export function SolidCircleAlert(props: SolidIconProps) {
+  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/internal/solid-icons/solid-circle-check.tsx b/packages/propel/src/internal/solid-icons/solid-circle-check.tsx
new file mode 100644
index 00000000..4f7a82b9
--- /dev/null
+++ b/packages/propel/src/internal/solid-icons/solid-circle-check.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type SolidIconProps } from "./solid-icon";
+
+export function SolidCircleCheck(props: SolidIconProps) {
+  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/internal/solid-icons/solid-circle-x.tsx b/packages/propel/src/internal/solid-icons/solid-circle-x.tsx
new file mode 100644
index 00000000..0c316a28
--- /dev/null
+++ b/packages/propel/src/internal/solid-icons/solid-circle-x.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type SolidIconProps } from "./solid-icon";
+
+export function SolidCircleX(props: SolidIconProps) {
+  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/internal/solid-icons/solid-icon.tsx b/packages/propel/src/internal/solid-icons/solid-icon.tsx
new file mode 100644
index 00000000..096f2c0e
--- /dev/null
+++ b/packages/propel/src/internal/solid-icons/solid-icon.tsx
@@ -0,0 +1,16 @@
+import type * as React from "react";
+
+export type SolidIconProps = React.SVGProps<SVGSVGElement>;
+
+export function SolidIcon(props: SolidIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/internal/solid-icons/solid-info.tsx b/packages/propel/src/internal/solid-icons/solid-info.tsx
new file mode 100644
index 00000000..e47a96ee
--- /dev/null
+++ b/packages/propel/src/internal/solid-icons/solid-info.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type SolidIconProps } from "./solid-icon";
+
+export function SolidInfo(props: SolidIconProps) {
+  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/internal/solid-icons/solid-triangle-alert.tsx b/packages/propel/src/internal/solid-icons/solid-triangle-alert.tsx
new file mode 100644
index 00000000..a0b94761
--- /dev/null
+++ b/packages/propel/src/internal/solid-icons/solid-triangle-alert.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type SolidIconProps } from "./solid-icon";
+
+export function SolidTriangleAlert(props: SolidIconProps) {
+  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/internal/spinner.tsx b/packages/propel/src/internal/spinner.tsx
new file mode 100644
index 00000000..303cc0ed
--- /dev/null
+++ b/packages/propel/src/internal/spinner.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, cx } from "class-variance-authority";
+
+import { nodeSlotClass } from "./node-slot";
+
+/**
+ * The shared pending-state glyph slot (rule 4a): an `aria-hidden` spinning `<span>` sizing its
+ * single svg child (pass a `LoaderCircle`) to the inherited `--node-size`. Replaces the
+ * byte-identical Button/IconButton/Pill spinner parts.
+ */
+export const spinnerVariants = cva(cx(nodeSlotClass, "animate-spin"));
+
+export type SpinnerProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+export function Spinner({ render, ...props }: SpinnerProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    "aria-hidden": true,
+    className: spinnerVariants(),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/patterns/comment.stories.tsx b/packages/propel/src/patterns/comment.stories.tsx
index b13cf8f0..879e20e1 100644
--- a/packages/propel/src/patterns/comment.stories.tsx
+++ b/packages/propel/src/patterns/comment.stories.tsx
@@ -15,7 +15,9 @@ import {
 import * as React from "react";
 import { expect, fn, userEvent } from "storybook/test";
 
+import { Field } from "../components/field";
 import { IconButton } from "../components/icon-button/index";
+import { TextArea } from "../components/text-area";
 import {
   Toolbar,
   ToolbarButton,
@@ -23,9 +25,7 @@ import {
   ToolbarSeparator,
   ToolbarToggle,
 } from "../components/toolbar/index";
-import { Button } from "../ui/button/index";
-import { Field } from "../ui/field/index";
-import { TextArea } from "../ui/text-area/index";
+import { Button } from "../elements/button/index";
 
 // A comment composer is a compositional (application-level) component, not a propel
 // primitive: it is assembled entirely from propel building blocks (Toolbar, Button,
@@ -60,34 +60,34 @@ function FormattingToolbar() {
     <Toolbar elevation="flat" density="compact" aria-label="Comment formatting">
       <ToolbarGroup aria-label="Insert">
         <ToolbarButton aria-label="Mention someone">
-          <AtSign aria-hidden />
+          <AtSign />
         </ToolbarButton>
         <ToolbarButton aria-label="Add reaction">
-          <SmilePlus aria-hidden />
+          <SmilePlus />
         </ToolbarButton>
         <ToolbarButton aria-label="Add link">
-          <Link aria-hidden />
+          <Link />
         </ToolbarButton>
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Text formatting">
         <ToolbarToggle aria-label="Bold">
-          <Bold aria-hidden />
+          <Bold />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Italic">
-          <Italic aria-hidden />
+          <Italic />
         </ToolbarToggle>
         <ToolbarToggle aria-label="Underline">
-          <Underline aria-hidden />
+          <Underline />
         </ToolbarToggle>
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Lists">
         <ToolbarButton aria-label="Bulleted list">
-          <List aria-hidden />
+          <List />
         </ToolbarButton>
         <ToolbarButton aria-label="More formatting">
-          <MoreHorizontal aria-hidden />
+          <MoreHorizontal />
         </ToolbarButton>
       </ToolbarGroup>
     </Toolbar>
@@ -258,25 +258,25 @@ const RECIPE_SOURCE = `function CommentComposer() {
           <Toolbar elevation="flat" density="compact" aria-label="Comment formatting">
             <ToolbarGroup aria-label="Insert">
               <ToolbarButton aria-label="Mention someone">
-                <AtSign aria-hidden />
+                <AtSign />
               </ToolbarButton>
               <ToolbarButton aria-label="Add reaction">
-                <SmilePlus aria-hidden />
+                <SmilePlus />
               </ToolbarButton>
               <ToolbarButton aria-label="Add link">
-                <Link aria-hidden />
+                <Link />
               </ToolbarButton>
             </ToolbarGroup>
             <ToolbarSeparator />
             <ToolbarGroup aria-label="Text formatting">
               <ToolbarToggle aria-label="Bold">
-                <Bold aria-hidden />
+                <Bold />
               </ToolbarToggle>
               <ToolbarToggle aria-label="Italic">
-                <Italic aria-hidden />
+                <Italic />
               </ToolbarToggle>
               <ToolbarToggle aria-label="Underline">
-                <Underline aria-hidden />
+                <Underline />
               </ToolbarToggle>
             </ToolbarGroup>
           </Toolbar>
diff --git a/packages/propel/src/patterns/sidebar.stories.tsx b/packages/propel/src/patterns/sidebar.stories.tsx
index 78a94a60..01d30369 100644
--- a/packages/propel/src/patterns/sidebar.stories.tsx
+++ b/packages/propel/src/patterns/sidebar.stories.tsx
@@ -7,11 +7,11 @@ import {
   List,
   ListItem,
   ListItemButton,
-  ListItemIcon,
   ListItemLabel,
   ListItemLink,
   ListSection,
 } from "../components/list/index";
+import { Icon } from "../internal/icon";
 import {
   AddWorkItemIcon,
   AnalyticsIcon,
@@ -72,7 +72,7 @@ export const WorkspaceSidebar: Story = {
         tone="neutral"
         magnitude="xl"
         sizing="fill"
-        inlineStartNode={<AddWorkItemIcon aria-hidden />}
+        startIcon={<AddWorkItemIcon aria-hidden />}
       >
         New work item
       </Button>
@@ -80,25 +80,25 @@ export const WorkspaceSidebar: Story = {
       <List role="toolbar" aria-label="Primary">
         <ListItem>
           <ListItemLink href="#home">
-            <ListItemIcon>
+            <Icon magnitude="md">
               <HomeIcon aria-hidden />
-            </ListItemIcon>
+            </Icon>
             <ListItemLabel>Home</ListItemLabel>
           </ListItemLink>
         </ListItem>
         <ListItem>
           <ListItemLink href="#stickers">
-            <ListItemIcon>
+            <Icon magnitude="md">
               <StickersIcon aria-hidden />
-            </ListItemIcon>
+            </Icon>
             <ListItemLabel>Stickers</ListItemLabel>
           </ListItemLink>
         </ListItem>
         <ListItem>
           <ListItemLink href="#your-work">
-            <ListItemIcon>
+            <Icon magnitude="md">
               <YourWorkIcon aria-hidden />
-            </ListItemIcon>
+            </Icon>
             <ListItemLabel>Your work</ListItemLabel>
           </ListItemLink>
         </ListItem>
@@ -108,49 +108,49 @@ export const WorkspaceSidebar: Story = {
         <List role="toolbar" aria-label="Workspace">
           <ListItem>
             <ListItemLink href="#projects" aria-current="page">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <ProjectsIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Projects</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#work-graph">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <YourWorkIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Work graph</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#initiatives">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <InitiativesIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Initiatives</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#analytics">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <AnalyticsIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Analytics</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#releases">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <ReleasesIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Releases</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemButton>
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <MoreIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>More</ListItemLabel>
             </ListItemButton>
           </ListItem>
@@ -161,33 +161,41 @@ export const WorkspaceSidebar: Story = {
         <List role="toolbar" aria-label="Projects">
           <ListItem>
             <ListItemLink href="#acme">
-              <ListItemIcon aria-hidden>🚜</ListItemIcon>
+              <Icon magnitude="md" aria-hidden>
+                🚜
+              </Icon>
               <ListItemLabel>Acme Inc.</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#web-development">
-              <ListItemIcon aria-hidden>🧩</ListItemIcon>
+              <Icon magnitude="md" aria-hidden>
+                🧩
+              </Icon>
               <ListItemLabel>Web Development</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#plane-pro">
-              <ListItemIcon aria-hidden>🚗</ListItemIcon>
+              <Icon magnitude="md" aria-hidden>
+                🚗
+              </Icon>
               <ListItemLabel>Plane Pro</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#discover">
-              <ListItemIcon aria-hidden>📞</ListItemIcon>
+              <Icon magnitude="md" aria-hidden>
+                📞
+              </Icon>
               <ListItemLabel>Discover</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemButton>
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <MoreIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>More</ListItemLabel>
             </ListItemButton>
           </ListItem>
@@ -198,25 +206,25 @@ export const WorkspaceSidebar: Story = {
         <List role="toolbar" aria-label="Try">
           <ListItem>
             <ListItemLink href="#github">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <GithubIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Connect to GitHub</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#slack">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <SlackIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Connect to Slack</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#plane-ai">
-              <ListItemIcon>
+              <Icon magnitude="md">
                 <PlaneAiIcon aria-hidden />
-              </ListItemIcon>
+              </Icon>
               <ListItemLabel>Try Plane AI</ListItemLabel>
             </ListItemLink>
           </ListItem>
diff --git a/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx b/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
index eebebe80..63131626 100644
--- a/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
+++ b/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
@@ -6,13 +6,13 @@ import { Badge } from "../components/badge/index";
 import {
   List,
   ListItem,
-  ListItemIcon,
   ListItemLabel,
   ListItemLink,
   ListSectionHeading,
 } from "../components/list/index";
 import { Separator } from "../components/separator/index";
 import { WorkspaceAvatar } from "../components/workspace-avatar/index";
+import { Icon } from "../internal/icon";
 import {
   AccessAndRolesIcon,
   BillingsIcon,
@@ -160,13 +160,13 @@ export const WorkspaceSettings: Story = {
             <ListSectionHeading>{section.label}</ListSectionHeading>
             <List role="toolbar" aria-label={section.label}>
               {section.rows.map((row) => {
-                const Icon = row.icon;
+                const RowIcon = row.icon;
                 return (
                   <ListItem key={row.href}>
                     <ListItemLink href={row.href}>
-                      <ListItemIcon>
-                        <Icon aria-hidden />
-                      </ListItemIcon>
+                      <Icon magnitude="md">
+                        <RowIcon aria-hidden />
+                      </Icon>
                       <ListItemLabel>{row.label}</ListItemLabel>
                     </ListItemLink>
                   </ListItem>
diff --git a/packages/propel/src/storybook/icon-control.tsx b/packages/propel/src/storybook/icon-control.tsx
index cc10163d..7e15af65 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 (`inlineStartNode`, `inlineEndNode`, `icon`).
+ * Reusable Storybook argType for any icon-shaped prop (`icon`, `startIcon`, `endIcon`, `trailing`).
  * 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: { inlineStartNode: iconControl }`
+ * `argTypes: { icon: 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/styles/variables.css b/packages/propel/src/styles/variables.css
index 948aab6b..87058d73 100644
--- a/packages/propel/src/styles/variables.css
+++ b/packages/propel/src/styles/variables.css
@@ -152,19 +152,19 @@
     /* -------------------- Light mode color tokens -------------------- */
     /* Neutral colors */
     --neutral-white: oklch(1 0 0);
-    --neutral-100: oklch(0.9848 0.0003 230.66);
-    --neutral-200: oklch(0.9696 0.0007 230.67);
-    --neutral-300: oklch(0.9543 0.001 230.67);
-    --neutral-400: oklch(0.9389 0.0014 230.68);
-    --neutral-500: oklch(0.9235 0.001733 230.6853);
-    --neutral-600: oklch(0.8925 0.0024 230.7);
-    --neutral-700: oklch(0.8612 0.0032 230.71);
-    --neutral-800: oklch(0.6668 0.0079 230.82);
-    --neutral-900: oklch(0.6161 0.009153 230.867);
-    --neutral-1000: oklch(0.5288 0.0083 230.88);
-    --neutral-1100: oklch(0.4377 0.0066 230.87);
-    --neutral-1200: oklch(0.2378 0.0029 230.83);
-    --neutral-black: oklch(0.1472 0.0034 230.83);
+    --neutral-100: oklch(0.9911 0 0);
+    --neutral-200: oklch(0.9821 0 0);
+    --neutral-300: oklch(0.9614 0.0013 286.38);
+    --neutral-400: oklch(0.9396 0.0017 247.84);
+    --neutral-500: oklch(0.9123 0.0017 247.84);
+    --neutral-600: oklch(0.8782 0.0035 247.86);
+    --neutral-700: oklch(0.8466 0.0043 236.51);
+    --neutral-800: oklch(0.5651 0.0086 228.95);
+    --neutral-900: oklch(0.4928 0.0079 233.77);
+    --neutral-1000: oklch(0.4176 0.0072 239.98);
+    --neutral-1100: oklch(0.3225 0.0045 219.62);
+    --neutral-1200: oklch(0.1689 0.0021 286.18);
+    --neutral-black: oklch(0.1149 0 0);
     /* Brand colors */
     --brand-100: oklch(0.9847 0.0083 236.56);
     --brand-200: oklch(0.9715 0.0167 230.9);
@@ -312,8 +312,8 @@
     --txt-primary: var(--neutral-1200);
     --txt-secondary: var(--neutral-1100);
     --txt-tertiary: var(--neutral-1000);
-    --txt-placeholder: var(--neutral-800);
-    --txt-disabled: var(--neutral-700);
+    --txt-placeholder: var(--neutral-900);
+    --txt-disabled: var(--neutral-800);
     --txt-accent-primary: var(--brand-900);
     --txt-accent-secondary: var(--brand-default);
     --txt-blue-primary: var(--blue-900);
diff --git a/packages/propel/src/ui/accordion/accordion-header.tsx b/packages/propel/src/ui/accordion/accordion-header.tsx
deleted file mode 100644
index ac596993..00000000
--- a/packages/propel/src/ui/accordion/accordion-header.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-
-import { accordionHeaderVariants } from "./variants";
-
-export type AccordionHeaderProps = Omit<BaseAccordion.Header.Props, "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
deleted file mode 100644
index ae8f5bcb..00000000
--- a/packages/propel/src/ui/accordion/accordion-item.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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 = Omit<BaseAccordionItem.Props, "className" | "style">;
-
-/** A single collapsible section: pairs an `AccordionHeader` and `AccordionPanel`. */
-export function AccordionItem(props: AccordionItemProps) {
-  return <BaseAccordion.Item className={accordionItemVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion-panel-content.tsx b/packages/propel/src/ui/accordion/accordion-panel-content.tsx
deleted file mode 100644
index 2fda8a50..00000000
--- a/packages/propel/src/ui/accordion/accordion-panel-content.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { accordionPanelContentVariants } from "./variants";
-
-export type AccordionPanelContentProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The panel's inner content shown while the item is expanded. */
-  children?: React.ReactNode;
-};
-
-/**
- * The padded inner content of an `AccordionPanel`. The padding lives here rather than on the panel
- * itself, because the panel animates its height open/closed and padding there would offset the
- * measured height.
- */
-export function AccordionPanelContent(props: AccordionPanelContentProps) {
-  return <div className={accordionPanelContentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion-panel.tsx b/packages/propel/src/ui/accordion/accordion-panel.tsx
deleted file mode 100644
index ad89a1bd..00000000
--- a/packages/propel/src/ui/accordion/accordion-panel.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-
-import { accordionPanelVariants } from "./variants";
-
-export type AccordionPanelProps = Omit<BaseAccordion.Panel.Props, "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(props: AccordionPanelProps) {
-  return <BaseAccordion.Panel className={accordionPanelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion-trigger-icon.tsx b/packages/propel/src/ui/accordion/accordion-trigger-icon.tsx
deleted file mode 100644
index 597651d9..00000000
--- a/packages/propel/src/ui/accordion/accordion-trigger-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { accordionTriggerIconVariants } from "./variants";
-
-export type AccordionTriggerIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render (e.g. a Lucide glyph), sized to the trigger's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * A decorative leading icon at the trigger's inline-start (the Figma header icon). Sizes its single
- * child to the trigger's `--node-size`, so callers pass a bare icon. Decorative (the trigger
- * carries the accessible name), so it is `aria-hidden`.
- */
-export function AccordionTriggerIcon(props: AccordionTriggerIconProps) {
-  return <span aria-hidden className={accordionTriggerIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion-trigger-indicator.tsx b/packages/propel/src/ui/accordion/accordion-trigger-indicator.tsx
deleted file mode 100644
index 2b65d995..00000000
--- a/packages/propel/src/ui/accordion/accordion-trigger-indicator.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type * as React from "react";
-
-import { accordionTriggerIndicatorVariants } from "./variants";
-
-export type AccordionTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /**
-   * The disclosure caret to render — any svg (e.g. a Lucide `ChevronDown`), sized to the trigger's
-   * `--node-size`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The disclosure caret slot at the trigger's inline-end. Renders whatever svg you pass (sized to
- * the trigger's `--node-size`) and rotates toward the inline-end while collapsed, to point down
- * when the panel opens. Decorative — the trigger carries the a11y state — so it is `aria-hidden`.
- */
-export function AccordionTriggerIndicator(props: AccordionTriggerIndicatorProps) {
-  return <span aria-hidden className={accordionTriggerIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion-trigger-title.tsx b/packages/propel/src/ui/accordion/accordion-trigger-title.tsx
deleted file mode 100644
index 7dbd9574..00000000
--- a/packages/propel/src/ui/accordion/accordion-trigger-title.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { accordionTriggerTitleVariants } from "./variants";
-
-export type AccordionTriggerTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The trigger's label content (typically the section's text). */
-  children?: React.ReactNode;
-};
-
-/**
- * The trigger's label. Grows to fill the trigger row so a trailing `AccordionTriggerIndicator` sits
- * at the inline-end edge.
- */
-export function AccordionTriggerTitle(props: AccordionTriggerTitleProps) {
-  return <span className={accordionTriggerTitleVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion-trigger.tsx b/packages/propel/src/ui/accordion/accordion-trigger.tsx
deleted file mode 100644
index 4f10c795..00000000
--- a/packages/propel/src/ui/accordion/accordion-trigger.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-
-import { accordionTriggerVariants } from "./variants";
-
-export type AccordionTriggerProps = Omit<BaseAccordion.Trigger.Props, "className" | "style">;
-
-/**
- * The clickable control that opens and closes its panel. Base UI sets `aria-expanded` and
- * `aria-controls` for you.
- */
-export function AccordionTrigger(props: AccordionTriggerProps) {
-  return <BaseAccordion.Trigger className={accordionTriggerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/accordion/accordion.stories.tsx b/packages/propel/src/ui/accordion/accordion.stories.tsx
deleted file mode 100644
index 69d31349..00000000
--- a/packages/propel/src/ui/accordion/accordion.stories.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronDown, CircleHelp } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Accordion,
-  AccordionHeader,
-  AccordionItem,
-  AccordionPanel,
-  AccordionPanelContent,
-  AccordionTrigger,
-  AccordionTriggerIcon,
-  AccordionTriggerIndicator,
-  AccordionTriggerTitle,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC accordion parts (each renders a single element) —
-// the title, the disclosure indicator, and the panel's padded content are their own
-// parts, so the trigger and panel hold no raw layout. The components-tier `Accordion`
-// story shows the ready-made trigger (auto title + chevron) and padded panel.
-const meta = {
-  title: "UI/Accordion",
-  component: Accordion,
-  subcomponents: {
-    AccordionItem,
-    AccordionHeader,
-    AccordionTrigger,
-    AccordionTriggerIcon,
-    AccordionTriggerTitle,
-    AccordionTriggerIndicator,
-    AccordionPanel,
-    AccordionPanelContent,
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-118.5">
-        <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>
-              <AccordionTriggerIcon>
-                <CircleHelp />
-              </AccordionTriggerIcon>
-              <AccordionTriggerTitle>{item.label}</AccordionTriggerTitle>
-              <AccordionTriggerIndicator>
-                <ChevronDown />
-              </AccordionTriggerIndicator>
-            </AccordionTrigger>
-          </AccordionHeader>
-          <AccordionPanel>
-            <AccordionPanelContent>{item.body}</AccordionPanelContent>
-          </AccordionPanel>
-        </AccordionItem>
-      ))}
-    </Accordion>
-  ),
-};
-
-/**
- * Interaction test: clicking a collapsed trigger expands its panel. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
- * sees a panel expand on its own.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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>
-              <AccordionTriggerTitle>{item.label}</AccordionTriggerTitle>
-            </AccordionTrigger>
-          </AccordionHeader>
-          <AccordionPanel>
-            <AccordionPanelContent>{item.body}</AccordionPanelContent>
-          </AccordionPanel>
-        </AccordionItem>
-      ))}
-    </Accordion>
-  ),
-};
diff --git a/packages/propel/src/ui/accordion/accordion.tsx b/packages/propel/src/ui/accordion/accordion.tsx
deleted file mode 100644
index 8a96ca70..00000000
--- a/packages/propel/src/ui/accordion/accordion.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import type { AccordionRoot } from "@base-ui/react/accordion";
-
-import { accordionVariants } from "./variants";
-
-// Mirror `BaseAccordion.Root`'s own `Value` generic (default `any`), so propel narrows nothing Base
-// UI doesn't; callers can still parameterize it.
-export type AccordionProps<Value = any> = 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 = any>(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
deleted file mode 100644
index 740b296b..00000000
--- a/packages/propel/src/ui/accordion/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./accordion";
-export * from "./accordion-header";
-export * from "./accordion-item";
-export * from "./accordion-panel";
-export * from "./accordion-panel-content";
-export * from "./accordion-trigger";
-export * from "./accordion-trigger-icon";
-export * from "./accordion-trigger-indicator";
-export * from "./accordion-trigger-title";
diff --git a/packages/propel/src/ui/accordion/variants.ts b/packages/propel/src/ui/accordion/variants.ts
deleted file mode 100644
index 471ef91c..00000000
--- a/packages/propel/src/ui/accordion/variants.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-
-// 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",
-  ),
-);
-
-// The decorative leading icon at the trigger's inline-start. Sizes its single child
-// to the trigger's `--node-size` (via the shared node-slot class) and tints it.
-export const accordionTriggerIconVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
-
-// The trigger's growing label. `flex-1` fills the row so the indicator sits at the
-// trailing edge; `min-w-0` lets long labels wrap/shrink instead of overflowing.
-export const accordionTriggerTitleVariants = cva("min-w-0 flex-1 text-start");
-
-// The disclosure caret inside the trigger. Per Figma the caret points toward the
-// inline-end when collapsed and rotates to point down when the panel opens (Base UI
-// sets `data-panel-open` on the trigger, which carries the `group` class). The glyph
-// is a chevron-down at rest (the open state), rotated a quarter-turn while collapsed —
-// toward the inline-end, mirrored under RTL.
-export const accordionTriggerIndicatorVariants = cva(
-  cx(
-    // Reuse the node-slot sizing so the indicator renders ANY svg passed to it (sized to
-    // `--node-size`), instead of baking a size onto a specific glyph. 14px per Figma.
-    nodeSlotClass,
-    "text-icon-secondary [--node-size:0.875rem]",
-    "transition-transform duration-200",
-    "-rotate-90 group-data-panel-open:rotate-0",
-    "rtl:rotate-90 rtl:group-data-panel-open:rotate-0",
-  ),
-);
-
-// The padded inner content of a panel. Padding lives here, never on the
-// height-animating `AccordionPanel` (padding there would jump the open/close height).
-export const accordionPanelContentVariants = cva("px-3 pb-3");
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx
deleted file mode 100644
index dd0ed091..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-
-import { alertDialogActionsVariants } from "./variants";
-
-export type AlertDialogActionsProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** The action buttons to right-align — e.g. a cancel `AlertDialogClose` and a confirming action. */
-  children?: React.ReactNode;
-};
-
-/**
- * Right-aligns action buttons with consistent horizontal spacing. The placement and gap are always
- * the same — baked in by the design system.
- */
-export function AlertDialogActions(props: AlertDialogActionsProps) {
-  return <div className={alertDialogActionsVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-backdrop.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-backdrop.tsx
deleted file mode 100644
index 4bf426ec..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-backdrop.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-import { alertDialogBackdropVariants } from "./variants";
-
-export type AlertDialogBackdropProps = Omit<BaseAlertDialog.Backdrop.Props, "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
deleted file mode 100644
index e09e5ba4..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-close.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-import { alertDialogCloseVariants } from "./variants";
-
-export type AlertDialogCloseProps = Omit<BaseAlertDialog.Close.Props, "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
deleted file mode 100644
index 053bb553..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-description.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-import { alertDialogDescriptionVariants } from "./variants";
-
-export type AlertDialogDescriptionProps = Omit<
-  BaseAlertDialog.Description.Props,
-  "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-header.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-header.tsx
deleted file mode 100644
index 58d2113e..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-header.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type * as React from "react";
-
-import { alertDialogHeaderVariants } from "./variants";
-
-export type AlertDialogHeaderProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /**
-   * The header's contents — typically a leading `AlertDialogIcon` followed by an
-   * `AlertDialogIntro`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The top region of the popup: lays out the leading `AlertDialogIcon` at the inline-start of the
- * `AlertDialogIntro` (icon left of title), per the design spec. The icon and intro are passed as
- * children.
- */
-export function AlertDialogHeader(props: AlertDialogHeaderProps) {
-  return <div className={alertDialogHeaderVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx
deleted file mode 100644
index 0ee545e0..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { type AlertDialogIconVariantProps, alertDialogIconVariants } from "./variants";
-
-export type { AlertDialogIconTone } from "./variants";
-
-export type AlertDialogIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> &
-  AlertDialogIconVariantProps;
-
-/**
- * The decorative leading glyph shown at the inline-start of the title. Sizes its single child to
- * `--node-size`, so the caller passes a bare icon (warning, error, info, …). Decorative — the title
- * carries the accessible name — so it is `aria-hidden`.
- */
-export function AlertDialogIcon({ tone, ...props }: AlertDialogIconProps) {
-  return <span aria-hidden className={alertDialogIconVariants({ tone })} {...props} />;
-}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx
deleted file mode 100644
index fd26f2dd..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-
-import { alertDialogIntroVariants } from "./variants";
-
-export type AlertDialogIntroProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** The intro's contents — typically an `AlertDialogTitle` and `AlertDialogDescription`. */
-  children?: React.ReactNode;
-};
-
-/**
- * Groups the title and description with consistent vertical spacing. The gap between title and
- * description is always the same — baked in by the design system.
- */
-export function AlertDialogIntro(props: AlertDialogIntroProps) {
-  return <div className={alertDialogIntroVariants()} {...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
deleted file mode 100644
index 579231db..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-popup.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-import { alertDialogPopupVariants } from "./variants";
-
-export type AlertDialogPopupProps = Omit<BaseAlertDialog.Popup.Props, "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
deleted file mode 100644
index 5accdc02..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-portal.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-export type AlertDialogPortalProps = Omit<BaseAlertDialog.Portal.Props, "className" | "style">;
-
-/**
- * Renders the backdrop and popup into a portal so they escape local stacking contexts. Maps 1:1 to
- * `AlertDialog.Portal`.
- */
-export function AlertDialogPortal(props: AlertDialogPortalProps) {
-  return <BaseAlertDialog.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-title.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-title.tsx
deleted file mode 100644
index 7f8e7869..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-title.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-import { alertDialogTitleVariants } from "./variants";
-
-export type AlertDialogTitleProps = Omit<BaseAlertDialog.Title.Props, "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
deleted file mode 100644
index f5271de4..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-trigger.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-export type AlertDialogTriggerProps = Omit<BaseAlertDialog.Trigger.Props, "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
deleted file mode 100644
index 95433d4c..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog-viewport.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-import { alertDialogViewportVariants } from "./variants";
-
-export type AlertDialogViewportProps = Omit<BaseAlertDialog.Viewport.Props, "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
deleted file mode 100644
index 1e9e7166..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { TriangleAlert } from "lucide-react";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-
-import { Button } from "../button";
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogBackdrop,
-  AlertDialogClose,
-  AlertDialogDescription,
-  AlertDialogHeader,
-  AlertDialogIcon,
-  AlertDialogIntro,
-  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. Trigger and Close compose the `Button`
-// primitive via Base UI's `render` prop rather than raw `<button>` elements.
-
-const meta = {
-  title: "UI/AlertDialog",
-  component: AlertDialog,
-  subcomponents: {
-    AlertDialogTrigger,
-    AlertDialogPortal,
-    AlertDialogBackdrop,
-    AlertDialogViewport,
-    AlertDialogPopup,
-    AlertDialogHeader,
-    AlertDialogIcon,
-    AlertDialogIntro,
-    AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogActions,
-    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>
-      <Button
-        sizing="hug"
-        prominence="primary"
-        tone="danger"
-        magnitude="xl"
-        render={<AlertDialogTrigger />}
-      >
-        Delete account
-      </Button>
-      <AlertDialogPortal>
-        <AlertDialogBackdrop />
-        <AlertDialogViewport>
-          <AlertDialogPopup>
-            <AlertDialogHeader>
-              <AlertDialogIcon tone="danger">
-                <TriangleAlert />
-              </AlertDialogIcon>
-              <AlertDialogIntro>
-                <AlertDialogTitle>Delete account?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This permanently deletes your account and cannot be undone.
-                </AlertDialogDescription>
-              </AlertDialogIntro>
-            </AlertDialogHeader>
-            <AlertDialogActions>
-              <Button
-                sizing="hug"
-                prominence="secondary"
-                tone="neutral"
-                magnitude="xl"
-                render={<AlertDialogClose />}
-              >
-                Cancel
-              </Button>
-              <Button
-                sizing="hug"
-                prominence="primary"
-                tone="danger"
-                magnitude="xl"
-                render={<AlertDialogClose />}
-              >
-                Delete
-              </Button>
-            </AlertDialogActions>
-          </AlertDialogPopup>
-        </AlertDialogViewport>
-      </AlertDialogPortal>
-    </AlertDialog>
-  ),
-};
-
-/**
- * Interaction test: opening it, then Cancel closes it. Tagged out of the sidebar/docs/manifest
- * while still running under the default `test` tag — so a browsing user never sees the dialog flash
- * open and then close.
- */
-export const CancelCloses: Story = {
-  ...Anatomy,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 4c945d87..00000000
--- a/packages/propel/src/ui/alert-dialog/alert-dialog.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-
-export type AlertDialogProps = Omit<BaseAlertDialog.Root.Props, "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
deleted file mode 100644
index f798c8a3..00000000
--- a/packages/propel/src/ui/alert-dialog/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export * from "./alert-dialog";
-export * from "./alert-dialog-actions";
-export * from "./alert-dialog-backdrop";
-export * from "./alert-dialog-close";
-export * from "./alert-dialog-description";
-export * from "./alert-dialog-header";
-export * from "./alert-dialog-icon";
-export * from "./alert-dialog-intro";
-export * from "./alert-dialog-popup";
-export * from "./alert-dialog-portal";
-export * from "./alert-dialog-title";
-export * from "./alert-dialog-trigger";
-export * from "./alert-dialog-viewport";
diff --git a/packages/propel/src/ui/alert-dialog/variants.ts b/packages/propel/src/ui/alert-dialog/variants.ts
deleted file mode 100644
index 76e326dc..00000000
--- a/packages/propel/src/ui/alert-dialog/variants.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// 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. The one design axis the
-// spec calls out is the leading icon's intent (destructive vs informational), which
-// the `AlertDialogIcon` exposes as a required `tone` — every other part is static
-// chrome held in a single cva so there is 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(
-    // Fixed width and layout: the max-width constraint and internal spacing are
-    // always the same per spec — baked here, not left to the consumer.
-    "flex w-80 flex-col gap-4",
-    "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");
-
-// Header: the top region that places the leading icon at the inline-start of the
-// intro (icon left of title, per spec). Items align to the start so a multi-line
-// description keeps the icon level with the title.
-export const alertDialogHeaderVariants = cva("flex items-start gap-3");
-
-// Icon: the decorative leading glyph beside the title. Sizes its single child to
-// `--node-size` (via the shared node-slot class) and tints it by `tone` — the
-// destructive-vs-informational axis the spec marks as adjustable. The glyph itself
-// (warning/error/info) is whatever child the caller passes. No default tone: the
-// caller must state the intent.
-export const alertDialogIconVariants = cva(cx(nodeSlotClass, "mt-0.5 [--node-size:1.25rem]"), {
-  variants: {
-    tone: {
-      danger: "text-icon-danger",
-      warning: "text-icon-warning-primary",
-      info: "text-icon-info-primary",
-      success: "text-icon-success-primary",
-    },
-  },
-});
-
-// Intro: groups the title and description with consistent vertical spacing.
-// Always the same per spec (spacing between title and description). `min-w-0` lets
-// long copy wrap instead of pushing the icon out of the header row.
-export const alertDialogIntroVariants = cva("flex min-w-0 flex-col gap-2");
-
-// Actions: right-aligns action buttons with consistent horizontal spacing.
-// Always the same per spec (action button placement, right-aligned in footer).
-export const alertDialogActionsVariants = cva("flex justify-end gap-2");
-
-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",
-  ),
-);
-
-export type AlertDialogIconTone = NonNullable<VariantProps<typeof alertDialogIconVariants>["tone"]>;
-export type AlertDialogIconVariantProps = StrictVariantProps<typeof alertDialogIconVariants>;
diff --git a/packages/propel/src/ui/anchor-button/anchor-button-icon.tsx b/packages/propel/src/ui/anchor-button/anchor-button-icon.tsx
deleted file mode 100644
index 95b9be54..00000000
--- a/packages/propel/src/ui/anchor-button/anchor-button-icon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { anchorButtonIconVariants } from "./variants";
-
-export type AnchorButtonIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/** A decorative node beside the label, sized to the anchor-button's `--node-size`. `aria-hidden`. */
-export function AnchorButtonIcon({ render, ...props }: AnchorButtonIconProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: anchorButtonIconVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/anchor-button/anchor-button-label.tsx b/packages/propel/src/ui/anchor-button/anchor-button-label.tsx
deleted file mode 100644
index 64394acd..00000000
--- a/packages/propel/src/ui/anchor-button/anchor-button-label.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { anchorButtonLabelVariants } from "./variants";
-
-export type AnchorButtonLabelProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/** The anchor-button's text label. */
-export function AnchorButtonLabel({ render, ...props }: AnchorButtonLabelProps) {
-  const defaultProps: useRender.ElementProps<"span"> = { className: anchorButtonLabelVariants() };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/anchor-button/anchor-button-spinner.tsx b/packages/propel/src/ui/anchor-button/anchor-button-spinner.tsx
deleted file mode 100644
index 317b8a1c..00000000
--- a/packages/propel/src/ui/anchor-button/anchor-button-spinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { anchorButtonSpinnerVariants } from "./variants";
-
-export type AnchorButtonSpinnerProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The spinner glyph to render (e.g. a Lucide `LoaderCircle`), sized to the root's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The pending-navigation indicator shown in place of the inline-start node while a navigation is in
- * flight (e.g. a router holding on the link while the next route's data/code loads). A pure slot
- * sized to `--node-size`; callers pass the spinner icon as `children`. Decorative (the root carries
- * `aria-busy`), so it is `aria-hidden`.
- */
-export function AnchorButtonSpinner(props: AnchorButtonSpinnerProps) {
-  return <span aria-hidden className={anchorButtonSpinnerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/anchor-button/anchor-button.stories.tsx b/packages/propel/src/ui/anchor-button/anchor-button.stories.tsx
deleted file mode 100644
index e220ede2..00000000
--- a/packages/propel/src/ui/anchor-button/anchor-button.stories.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ArrowRight, Plus } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  AnchorButton,
-  AnchorButtonIcon,
-  AnchorButtonLabel,
-  AnchorButtonSpinner,
-  type AnchorButtonMagnitude,
-  type AnchorButtonProminence,
-} from "./index";
-
-const PROMINENCES: AnchorButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
-const MAGNITUDES: AnchorButtonMagnitude[] = ["sm", "md", "lg", "xl"];
-
-// UI-tier story: the ATOMIC anchor-button — a single `<a>` wearing the shared control chrome, with
-// `prominence` / `tone` / `magnitude` / `sizing`. Same look as `Button` but it navigates. The
-// ready-made `AnchorButton` (Components/AnchorButton) lays out its icon/label slots.
-const meta = {
-  title: "UI/AnchorButton",
-  component: AnchorButton,
-  subcomponents: { AnchorButtonIcon, AnchorButtonLabel, AnchorButtonSpinner },
-  args: {
-    children: "Link",
-    href: "#",
-    prominence: "primary",
-    tone: "neutral",
-    magnitude: "md",
-    sizing: "hug",
-  },
-} satisfies Meta<typeof AnchorButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** Every prominence (Figma "Type") side by side. */
-export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      {PROMINENCES.map((prominence) => (
-        <AnchorButton key={prominence} {...args} prominence={prominence}>
-          {prominence}
-        </AnchorButton>
-      ))}
-    </div>
-  ),
-};
-
-/** Tone selects the palette: `neutral` or `danger`. */
-export const Tones: Story = {
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      <AnchorButton {...args} tone="neutral" prominence="primary">
-        Neutral
-      </AnchorButton>
-      <AnchorButton {...args} tone="danger" prominence="primary">
-        Danger fill
-      </AnchorButton>
-      <AnchorButton {...args} tone="danger" prominence="secondary">
-        Danger outline
-      </AnchorButton>
-    </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) => (
-        <AnchorButton key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </AnchorButton>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * Composed by hand from named parts: `AnchorButtonIcon` sizes a decorative node to `--node-size`,
- * `AnchorButtonLabel` holds the text. The ready-made `AnchorButton` lays these out for you.
- */
-export const Anatomy: Story = {
-  args: { children: undefined },
-  argTypes: { children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      <AnchorButton {...args}>
-        <AnchorButtonIcon>
-          <Plus />
-        </AnchorButtonIcon>
-        <AnchorButtonLabel>With icon</AnchorButtonLabel>
-      </AnchorButton>
-      <AnchorButton {...args} prominence="secondary">
-        <AnchorButtonLabel>Learn more</AnchorButtonLabel>
-        <AnchorButtonIcon>
-          <ArrowRight />
-        </AnchorButtonIcon>
-      </AnchorButton>
-    </div>
-  ),
-};
-
-/** It renders a real `<a>` carrying the given `href`. */
-export const RendersAnchor: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { href: "https://example.com" },
-  play: async ({ canvas }) => {
-    const link = canvas.getByRole("link", { name: "Link" });
-    await expect(link).toHaveAttribute("href", "https://example.com");
-  },
-};
diff --git a/packages/propel/src/ui/anchor-button/anchor-button.tsx b/packages/propel/src/ui/anchor-button/anchor-button.tsx
deleted file mode 100644
index 68481f73..00000000
--- a/packages/propel/src/ui/anchor-button/anchor-button.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { type AnchorButtonVariantProps, anchorButtonVariants } from "./variants";
-
-export type {
-  AnchorButtonMagnitude,
-  AnchorButtonProminence,
-  AnchorButtonSizing,
-  AnchorButtonTone,
-} from "./variants";
-
-export type AnchorButtonProps = Omit<useRender.ComponentProps<"a">, "className" | "style"> &
-  AnchorButtonVariantProps;
-
-/**
- * A link that looks like a button (`<a>` wearing the shared control chrome) — for navigation that
- * should read as a button. Same surface as `Button` (`prominence`/`tone`/`magnitude`/`sizing`, all
- * required) but it renders an `<a>` and takes `href`. Compose a
- * `AnchorButtonIcon`/`AnchorButtonLabel` inside.
- */
-export function AnchorButton({
-  prominence,
-  tone,
-  magnitude,
-  sizing,
-  render,
-  ...props
-}: AnchorButtonProps) {
-  const defaultProps: useRender.ElementProps<"a"> = {
-    className: anchorButtonVariants({ prominence, tone, magnitude, sizing }),
-  };
-  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/anchor-button/index.tsx b/packages/propel/src/ui/anchor-button/index.tsx
deleted file mode 100644
index e65531e8..00000000
--- a/packages/propel/src/ui/anchor-button/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./anchor-button";
-export * from "./anchor-button-icon";
-export * from "./anchor-button-label";
-export * from "./anchor-button-spinner";
diff --git a/packages/propel/src/ui/anchor-button/variants.ts b/packages/propel/src/ui/anchor-button/variants.ts
deleted file mode 100644
index 777231d3..00000000
--- a/packages/propel/src/ui/anchor-button/variants.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { buttonGeometryVariants } from "../../internal/button-geometry";
-import { composeVariants } from "../../internal/compose-variants";
-import { controlChromeVariants } from "../../internal/control-chrome";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/**
- * The full AnchorButton className: the shared control chrome composed with the label-button
- * geometry.
- */
-export const anchorButtonVariants = composeVariants(controlChromeVariants, buttonGeometryVariants);
-
-type AnchorButtonVariantConfig = VariantProps<typeof anchorButtonVariants>;
-export type AnchorButtonProminence = NonNullable<AnchorButtonVariantConfig["prominence"]>;
-export type AnchorButtonTone = NonNullable<AnchorButtonVariantConfig["tone"]>;
-export type AnchorButtonMagnitude = NonNullable<AnchorButtonVariantConfig["magnitude"]>;
-export type AnchorButtonSizing = NonNullable<AnchorButtonVariantConfig["sizing"]>;
-
-// No `defaultVariants` today, so every axis is required.
-export type AnchorButtonVariantProps = StrictVariantProps<typeof anchorButtonVariants>;
-
-// A decorative node beside the label, sized to the anchor's inherited `--node-size`.
-export const anchorButtonIconVariants = cva(nodeSlotClass);
-
-// The anchor-button's text label. It stays at full contrast while a navigation is pending — the link
-// is not disabled, the spinner is the pending cue — so it is not dimmed (unlike the disabled Button).
-export const anchorButtonLabelVariants = cva("");
-
-// The pending-navigation indicator shown in place of the inline-start node while a navigation is in
-// flight. A pure slot that sizes its single child to `--node-size` and spins it. `aria-hidden`.
-export const anchorButtonSpinnerVariants = cva(cx(nodeSlotClass, "animate-spin"));
diff --git a/packages/propel/src/ui/anchor/anchor.stories.tsx b/packages/propel/src/ui/anchor/anchor.stories.tsx
deleted file mode 100644
index 3b0e7d51..00000000
--- a/packages/propel/src/ui/anchor/anchor.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { Anchor, type AnchorMagnitude, type AnchorProminence } from "./index";
-
-const PROMINENCES: AnchorProminence[] = ["primary", "secondary"];
-const MAGNITUDES: AnchorMagnitude[] = ["sm", "md", "lg", "xl"];
-
-// UI-tier story: the inline text link — a single styled `<a>` with `prominence` (primary blue /
-// secondary gray) and `magnitude` (text size). It is the correct element for what used to be the button
-// `link` look. For a link that looks like a button, see `AnchorButton`.
-const meta = {
-  title: "UI/Anchor",
-  component: Anchor,
-  args: { children: "Anchor", href: "#", prominence: "primary", magnitude: "md" },
-} satisfies Meta<typeof Anchor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** `prominence`: `primary` is the blue link; `secondary` is the muted gray inline link. */
-export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-4">
-      {PROMINENCES.map((prominence) => (
-        <Anchor key={prominence} {...args} prominence={prominence}>
-          {prominence} link
-        </Anchor>
-      ))}
-    </div>
-  ),
-};
-
-/** Text 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-4">
-      {MAGNITUDES.map((magnitude) => (
-        <Anchor key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </Anchor>
-      ))}
-    </div>
-  ),
-};
-
-/** It renders a real `<a>` carrying the given `href`. */
-export const RendersAnchor: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { href: "https://example.com" },
-  play: async ({ canvas }) => {
-    const link = canvas.getByRole("link", { name: "Anchor" });
-    await expect(link).toHaveAttribute("href", "https://example.com");
-  },
-};
diff --git a/packages/propel/src/ui/anchor/anchor.tsx b/packages/propel/src/ui/anchor/anchor.tsx
deleted file mode 100644
index daf83e58..00000000
--- a/packages/propel/src/ui/anchor/anchor.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { type AnchorVariantProps, anchorVariants } from "./variants";
-
-export type { AnchorMagnitude, AnchorProminence } from "./variants";
-
-export type AnchorProps = Omit<useRender.ComponentProps<"a">, "className" | "style"> &
-  AnchorVariantProps;
-
-/**
- * An inline text link (`<a>`) in propel's link palette — the correct element for the look that used
- * to be `Button variant="link"`. Pick `prominence` (`primary` blue / `secondary` gray) and
- * `magnitude`, both required. Renders an `<a>` and is render-capable for the rare action-as-link
- * (`render={<button />}`). `children` is passed through.
- */
-export function Anchor({ prominence, magnitude, render, ...props }: AnchorProps) {
-  const defaultProps: useRender.ElementProps<"a"> = {
-    className: anchorVariants({ prominence, magnitude }),
-  };
-  return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/anchor/index.tsx b/packages/propel/src/ui/anchor/index.tsx
deleted file mode 100644
index 44ca6fbd..00000000
--- a/packages/propel/src/ui/anchor/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./anchor";
diff --git a/packages/propel/src/ui/anchor/variants.ts b/packages/propel/src/ui/anchor/variants.ts
deleted file mode 100644
index e9c0b961..00000000
--- a/packages/propel/src/ui/anchor/variants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { type VariantProps } from "class-variance-authority";
-
-import { linkChromeVariants } from "../../internal/link-chrome";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// `Anchor` is the inline text link (an `<a>`). Its look is the shared link chrome; for a `<button>`
-// that looks like a link use `ButtonAnchor`, for an `<a>` that looks like a button use `AnchorButton`.
-export const anchorVariants = linkChromeVariants;
-
-type AnchorVariantConfig = VariantProps<typeof anchorVariants>;
-export type AnchorProminence = NonNullable<AnchorVariantConfig["prominence"]>;
-export type AnchorMagnitude = NonNullable<AnchorVariantConfig["magnitude"]>;
-
-export type AnchorVariantProps = StrictVariantProps<typeof anchorVariants>;
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-clear.tsx b/packages/propel/src/ui/autocomplete/autocomplete-clear.tsx
deleted file mode 100644
index a04bea62..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-clear.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-export type AutocompleteClearProps = Omit<BaseAutocomplete.Clear.Props, "className" | "style">;
-
-/**
- * A behavior wrapper that clears the autocomplete value when activated. Use as the `render` target
- * of an `IconButton` so the styled primitive's look wins via render-composition:
- *
- * ```tsx
- * <IconButton
- *   prominence="ghost"
- *   tone="neutral"
- *   magnitude="md"
- *   aria-label="Clear"
- *   render={<AutocompleteClear />}
- * >
- *   <IconButtonIcon>
- *     <X />
- *   </IconButtonIcon>
- * </IconButton>;
- * ```
- *
- * Maps 1:1 to `Autocomplete.Clear`.
- */
-export function AutocompleteClear(props: AutocompleteClearProps) {
-  return <BaseAutocomplete.Clear {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-empty.tsx b/packages/propel/src/ui/autocomplete/autocomplete-empty.tsx
deleted file mode 100644
index 8b6779b1..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-empty.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import { autocompleteEmptyVariants } from "./variants";
-
-export type AutocompleteEmptyProps = Omit<BaseAutocomplete.Empty.Props, "className" | "style">;
-
-export function AutocompleteEmpty(props: AutocompleteEmptyProps) {
-  return <BaseAutocomplete.Empty className={autocompleteEmptyVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-icon.tsx b/packages/propel/src/ui/autocomplete/autocomplete-icon.tsx
deleted file mode 100644
index 71b62cda..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-icon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import { autocompleteIconVariants } from "./variants";
-
-export type AutocompleteIconProps = Omit<BaseAutocomplete.Icon.Props, "className" | "style">;
-
-/**
- * The autocomplete's decorative icon — Base UI's `Autocomplete.Icon`, a `<span aria-hidden>` slot.
- * Placed at the input group's inline-start as the leading slot (e.g. a search magnifier); the cva
- * sizes its single child to the group's `--node-size`. Pass a bare icon — it overrides Base UI's
- * default indicator glyph.
- */
-export function AutocompleteIcon(props: AutocompleteIconProps) {
-  return <BaseAutocomplete.Icon className={autocompleteIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-input-group.tsx b/packages/propel/src/ui/autocomplete/autocomplete-input-group.tsx
deleted file mode 100644
index ecf819f6..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-input-group.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import {
-  type AutocompleteInputGroupVariantProps,
-  autocompleteInputGroupVariants,
-} from "./variants";
-
-export type { AutocompleteMagnitude } from "./variants";
-
-export type AutocompleteInputGroupProps = Omit<
-  BaseAutocomplete.InputGroup.Props,
-  "className" | "style"
-> &
-  AutocompleteInputGroupVariantProps;
-
-export function AutocompleteInputGroup({ magnitude, ...props }: AutocompleteInputGroupProps) {
-  return (
-    <BaseAutocomplete.InputGroup
-      className={autocompleteInputGroupVariants({ magnitude })}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-input.tsx b/packages/propel/src/ui/autocomplete/autocomplete-input.tsx
deleted file mode 100644
index 7e580962..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-input.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import { type AutocompleteInputVariantProps, autocompleteInputVariants } from "./variants";
-
-export type AutocompleteInputProps = Omit<BaseAutocomplete.Input.Props, "className" | "style"> &
-  AutocompleteInputVariantProps;
-
-export function AutocompleteInput({ magnitude, ...props }: AutocompleteInputProps) {
-  return <BaseAutocomplete.Input className={autocompleteInputVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-item.tsx b/packages/propel/src/ui/autocomplete/autocomplete-item.tsx
deleted file mode 100644
index 9761ad48..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-item.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import { autocompleteItemVariants } from "./variants";
-
-export type AutocompleteItemProps = Omit<BaseAutocomplete.Item.Props, "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
deleted file mode 100644
index e78d1360..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-list.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-export type AutocompleteListProps = Omit<BaseAutocomplete.List.Props, "className" | "style">;
-
-export function AutocompleteList(props: AutocompleteListProps) {
-  return <BaseAutocomplete.List {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-popup.tsx b/packages/propel/src/ui/autocomplete/autocomplete-popup.tsx
deleted file mode 100644
index 2c81bc3c..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-popup.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import { autocompletePopupVariants } from "./variants";
-
-export type AutocompletePopupProps = Omit<BaseAutocomplete.Popup.Props, "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
deleted file mode 100644
index 9f0fcc6c..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-portal.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-export type AutocompletePortalProps = Omit<BaseAutocomplete.Portal.Props, "className" | "style">;
-
-export function AutocompletePortal(props: AutocompletePortalProps) {
-  return <BaseAutocomplete.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-positioner.tsx b/packages/propel/src/ui/autocomplete/autocomplete-positioner.tsx
deleted file mode 100644
index 44e69390..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-positioner.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-import { autocompletePositionerVariants } from "./variants";
-
-export type AutocompletePositionerProps = Omit<
-  BaseAutocomplete.Positioner.Props,
-  "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
deleted file mode 100644
index 3f3d75d0..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete-trigger.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-
-export type AutocompleteTriggerProps = Omit<BaseAutocomplete.Trigger.Props, "className" | "style">;
-
-/**
- * A behavior wrapper that opens the autocomplete popup when activated. Use as the `render` target
- * of an `IconButton` so the styled primitive's look wins via render-composition:
- *
- * ```tsx
- * <IconButton
- *   prominence="ghost"
- *   tone="neutral"
- *   magnitude="md"
- *   aria-label="Open"
- *   render={<AutocompleteTrigger />}
- * >
- *   <IconButtonIcon>
- *     <ChevronsUpDown />
- *   </IconButtonIcon>
- * </IconButton>;
- * ```
- *
- * Maps 1:1 to `Autocomplete.Trigger`.
- */
-export function AutocompleteTrigger(props: AutocompleteTriggerProps) {
-  return <BaseAutocomplete.Trigger {...props} />;
-}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete.stories.tsx b/packages/propel/src/ui/autocomplete/autocomplete.stories.tsx
deleted file mode 100644
index 7f86fd5b..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete.stories.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronsUpDown, X } from "lucide-react";
-import { expect, within } from "storybook/test";
-
-import { Field, FieldDescription, FieldError, FieldLabel } from "../field/index";
-import { IconButton, IconButtonIcon } from "../icon-button";
-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" inset={false}>
-          Container image
-        </FieldLabel>
-        <AutocompleteInputGroup magnitude="md">
-          <AutocompleteInput magnitude="md" placeholder="e.g. docker.io/library/node:latest" />
-          <AutocompleteClear
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Clear container image"
-              >
-                <IconButtonIcon>
-                  <X />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-          <AutocompleteTrigger
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Open container image"
-              >
-                <IconButtonIcon>
-                  <ChevronsUpDown />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-        </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>
-  ),
-};
-
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas, userEvent }) => {
-    await userEvent.type(canvas.getByRole("combobox", { name: "Container image" }), "node");
-    await expect(within(document.body).getByText("node:22-slim")).toBeInTheDocument();
-  },
-};
-
-/**
- * An invalid field: `Field.Root invalid` propagates `data-invalid` to the input, and the input
- * group recolors its border to `danger` off `:has([data-invalid])` — no `tone` prop required.
- */
-export const Invalid: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { items: IMAGES, mode: "both", required: true },
-  render: (args) => (
-    <Field name="containerImage" invalid>
-      <Autocomplete {...args}>
-        <FieldLabel magnitude="md" inset={false}>
-          Container image
-        </FieldLabel>
-        <AutocompleteInputGroup magnitude="md">
-          <AutocompleteInput magnitude="md" placeholder="e.g. docker.io/library/node:latest" />
-          <AutocompleteClear
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Clear container image"
-              >
-                <IconButtonIcon>
-                  <X />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-          <AutocompleteTrigger
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Open container image"
-              >
-                <IconButtonIcon>
-                  <ChevronsUpDown />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-        </AutocompleteInputGroup>
-        <FieldError magnitude="md" match={true}>
-          Enter a container image.
-        </FieldError>
-      </Autocomplete>
-    </Field>
-  ),
-  play: async ({ canvas }) => {
-    const input = canvas.getByRole("combobox", { name: "Container image" });
-    await expect(input).toHaveAttribute("aria-invalid", "true");
-    await expect(input).toHaveAttribute("data-invalid");
-    // The wrapping input group recolors its border off `:has([data-invalid])`.
-    const group = input.closest<HTMLElement>(":has([data-invalid])");
-    await expect(group).toHaveClass("has-[[data-invalid]]:border-danger-strong");
-  },
-};
diff --git a/packages/propel/src/ui/autocomplete/autocomplete.tsx b/packages/propel/src/ui/autocomplete/autocomplete.tsx
deleted file mode 100644
index a0aeca2d..00000000
--- a/packages/propel/src/ui/autocomplete/autocomplete.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
-import type * as React from "react";
-
-export type AutocompleteProps<Value> = Omit<
-  BaseAutocomplete.Root.Props<Value>,
-  "className" | "style"
-> & {
-  /** Items to display in the autocomplete list. */
-  items?: readonly Value[];
-  /** The autocomplete's anatomy — an `AutocompleteInput` and the `AutocompletePopup` of items. */
-  children?: React.ReactNode;
-};
-
-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
deleted file mode 100644
index 0f7113fd..00000000
--- a/packages/propel/src/ui/autocomplete/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export * from "./autocomplete";
-export * from "./autocomplete-clear";
-export * from "./autocomplete-empty";
-export * from "./autocomplete-input";
-export * from "./autocomplete-input-group";
-export * from "./autocomplete-icon";
-export * from "./autocomplete-item";
-export * from "./autocomplete-list";
-export * from "./autocomplete-popup";
-export * from "./autocomplete-portal";
-export * from "./autocomplete-positioner";
-export * from "./autocomplete-trigger";
diff --git a/packages/propel/src/ui/autocomplete/variants.ts b/packages/propel/src/ui/autocomplete/variants.ts
deleted file mode 100644
index 43526197..00000000
--- a/packages/propel/src/ui/autocomplete/variants.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-export const autocompleteInputGroupVariants = cva(
-  cx(
-    // Wraps a separate focusable input → `focus: within`.
-    fieldControlSurfaceVariants({ focus: "within" }),
-    "group/autocomplete flex w-full items-center gap-2 rounded-lg",
-    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      // Height / padding / icon-size per step, matching the Search box (Figma 28/32/36px).
-      // `--node-size` sizes the leading icon slot (and any bare node-slot child).
-      magnitude: {
-        sm: "min-h-7 px-1.5 [--node-size:0.875rem]",
-        md: "min-h-8 px-2 [--node-size:1rem]",
-        lg: "min-h-9 px-2.5 [--node-size:1rem]",
-      },
-    },
-  },
-);
-
-type AutocompleteInputGroupVariantConfig = VariantProps<typeof autocompleteInputGroupVariants>;
-export type AutocompleteMagnitude = NonNullable<AutocompleteInputGroupVariantConfig["magnitude"]>;
-export type AutocompleteInputGroupVariantProps = StrictVariantProps<
-  typeof autocompleteInputGroupVariants
->;
-
-// The decorative leading icon (e.g. a search magnifier) at the input group's inline-start. Sizes its
-// single child to the group's `--node-size` and tints toward the placeholder, brightening on focus.
-export const autocompleteIconVariants = cva(
-  cx(
-    nodeSlotClass,
-    "text-icon-placeholder transition-colors group-focus-within/autocomplete:text-icon-secondary",
-  ),
-);
-export const autocompleteInputVariants = cva(
-  "min-w-0 flex-1 bg-transparent text-primary outline-none placeholder:text-placeholder disabled:text-disabled",
-  {
-    variants: {
-      magnitude: { sm: "text-13", md: "text-14", lg: "text-14" },
-    },
-  },
-);
-export type AutocompleteInputVariantProps = StrictVariantProps<typeof autocompleteInputVariants>;
-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
deleted file mode 100644
index 456c1377..00000000
--- a/packages/propel/src/ui/avatar-group/avatar-group.stories.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-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: the `AvatarGroup` ui primitive is just the styled overlapping-stack container (a
-// single `<div>`); each `Avatar` inside sets its own size. The components-tier `AvatarGroup` adds
-// the shared-`magnitude` context so the whole group sizes at once.
-const meta = {
-  title: "UI/AvatarGroup",
-  component: AvatarGroup,
-  subcomponents: { Avatar, AvatarImage, AvatarFallback },
-} satisfies Meta<typeof AvatarGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The overlapping stack; each avatar sets its own `magnitude`. */
-export const TwoMembers: Story = {
-  render: () => (
-    <AvatarGroup>
-      <Avatar magnitude="sm" role="img" aria-label="Ada">
-        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
-        <AvatarFallback tone="orange">AL</AvatarFallback>
-      </Avatar>
-      <Avatar magnitude="sm" 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: () => (
-    <AvatarGroup>
-      <Avatar magnitude="sm" role="img" aria-label="Ada">
-        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
-        <AvatarFallback tone="orange">AL</AvatarFallback>
-      </Avatar>
-      <Avatar magnitude="sm" role="img" aria-label="Grace">
-        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
-        <AvatarFallback tone="indigo">GH</AvatarFallback>
-      </Avatar>
-      <Avatar magnitude="sm" role="img" aria-label="Linus">
-        <AvatarFallback tone="emerald">LT</AvatarFallback>
-      </Avatar>
-    </AvatarGroup>
-  ),
-};
-
-/**
- * Interaction test: the group renders three avatars, each sized `sm` (24px). Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const ThreeMembersInteraction: Story = {
-  ...ThreeMembers,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas }) => {
-    const avatars = canvas.getAllByRole("img");
-    await expect(avatars).toHaveLength(3);
-    // Each avatar is `sm` (24px).
-    await expect(avatars[0]).toHaveStyle({ width: "24px" });
-  },
-};
-
-/** Overflow pattern: a few member images, then a final avatar whose fallback shows a "+N" count. */
-export const OverflowCount: Story = {
-  render: () => (
-    <AvatarGroup>
-      <Avatar magnitude="sm" role="img" aria-label="Ada Lovelace">
-        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
-        <AvatarFallback tone="orange">AL</AvatarFallback>
-      </Avatar>
-      <Avatar magnitude="sm" role="img" aria-label="Grace Hopper">
-        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
-        <AvatarFallback tone="indigo">GH</AvatarFallback>
-      </Avatar>
-      <Avatar magnitude="sm" role="img" aria-label="Linus Torvalds">
-        <AvatarImage src="https://i.pravatar.cc/64?img=12" alt="" />
-        <AvatarFallback tone="emerald">LT</AvatarFallback>
-      </Avatar>
-      <Avatar magnitude="sm" role="img" aria-label="4 more members">
-        <AvatarFallback tone="purple">+4</AvatarFallback>
-      </Avatar>
-    </AvatarGroup>
-  ),
-};
diff --git a/packages/propel/src/ui/avatar/avatar-fallback.tsx b/packages/propel/src/ui/avatar/avatar-fallback.tsx
deleted file mode 100644
index f309a17a..00000000
--- a/packages/propel/src/ui/avatar/avatar-fallback.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-
-import { type AvatarFallbackVariantProps, avatarFallbackVariants } from "./variants";
-
-export type { AvatarFallbackTone } from "./variants";
-
-/** Props for {@link AvatarFallback}; 1:1 with Base UI `Avatar.Fallback`, plus a `tone`. */
-export type AvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, "className" | "style"> &
-  AvatarFallbackVariantProps;
-
-/** 1:1 wrapper around Base UI `Avatar.Fallback`. */
-export function AvatarFallback({ tone, ...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
deleted file mode 100644
index 4cbd699c..00000000
--- a/packages/propel/src/ui/avatar/avatar-image.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-
-import { avatarImageVariants } from "./variants";
-
-/** Props for {@link AvatarImage}; 1:1 with Base UI `Avatar.Image`. */
-export type AvatarImageProps = Omit<BaseAvatar.Image.Props, "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
deleted file mode 100644
index 3d12fe84..00000000
--- a/packages/propel/src/ui/avatar/avatar.stories.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { User } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Avatar,
-  AVATAR_TONES,
-  AvatarFallback,
-  AvatarIcon,
-  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, AvatarIcon },
-  // `magnitude` is required on the ui `Avatar`; the per-story renders pass it explicitly, this just
-  // satisfies the story arg type.
-  args: { magnitude: "md" },
-} 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">
-          <AvatarIcon magnitude="lg">
-            <User />
-          </AvatarIcon>
-        </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
deleted file mode 100644
index eb4ada2f..00000000
--- a/packages/propel/src/ui/avatar/avatar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-
-import { avatarToneBgClass, avatarVariants, type AvatarVariantProps } from "./variants";
-
-export type { AvatarMagnitude } from "./variants";
-
-// 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];
-
-// Re-exported for callers (e.g. `WorkspaceAvatar`) that style their own fallback surface.
-// The source of truth lives in `variants.ts`.
-export const initialsToneClass: Record<AvatarTone, string> = avatarToneBgClass;
-
-/**
- * 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<BaseAvatar.Root.Props, "className" | "style"> & AvatarVariantProps;
-
-/**
- * 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) {
-  return <BaseAvatar.Root className={avatarVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/avatar/variants.ts b/packages/propel/src/ui/avatar/variants.ts
deleted file mode 100644
index 5589d846..00000000
--- a/packages/propel/src/ui/avatar/variants.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-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",
-      },
-    },
-  },
-);
-
-// Initials background utility per tone — the same palette as `avatarFallbackVariants`
-// but exposed as a plain map for consumers (e.g. WorkspaceAvatar) that style their own
-// fallback surface without using `AvatarFallback`. All className decisions live here in
-// variants.ts, not scattered across component files.
-export const avatarToneBgClass = {
-  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",
-} as const;
-
-// The anonymous person-icon slot (the Figma "icon" content state). A node-slot: it
-// sizes whatever single child it's given to the inherited `--node-size`, never baking a
-// size onto the child. `--node-size` is set per magnitude from Figma's explicit "icon"
-// px values (not a fixed fraction of the avatar), and the glyph is tinted muted.
-export const avatarIconVariants = cva(cx(nodeSlotClass, "text-icon-placeholder"), {
-  variants: {
-    magnitude: {
-      "2xs": "[--node-size:0.875rem]", // 14px
-      xs: "[--node-size:0.875rem]", // 14px
-      sm: "[--node-size:1rem]", // 16px
-      md: "[--node-size:1.25rem]", // 20px
-      lg: "[--node-size:1.5rem]", // 24px
-      xl: "[--node-size:1.5rem]", // 24px
-      "2xl": "[--node-size:2rem]", // 32px
-      "3xl": "[--node-size:2rem]", // 32px
-    },
-  },
-});
-
-type AvatarVariantConfig = VariantProps<typeof avatarVariants>;
-export type AvatarMagnitude = NonNullable<AvatarVariantConfig["magnitude"]>;
-export type AvatarVariantProps = StrictVariantProps<typeof avatarVariants>;
-
-export type AvatarFallbackTone = NonNullable<VariantProps<typeof avatarFallbackVariants>["tone"]>;
-export type AvatarFallbackVariantProps = StrictVariantProps<typeof avatarFallbackVariants>;
-
-export type AvatarIconVariantProps = StrictVariantProps<typeof avatarIconVariants>;
diff --git a/packages/propel/src/ui/badge/badge-icon.tsx b/packages/propel/src/ui/badge/badge-icon.tsx
deleted file mode 100644
index 9a21b88f..00000000
--- a/packages/propel/src/ui/badge/badge-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { badgeIconVariants } from "./variants";
-
-export type BadgeIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * The decorative leading icon at the badge's inline-start (the Figma badge icon). Sizes its single
- * child to the badge's `--node-size` and inherits the tone's text color, so callers pass a bare
- * icon. Decorative (the label carries the name), so it is `aria-hidden`.
- */
-export function BadgeIcon({ render, ...props }: BadgeIconProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: badgeIconVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/badge/index.tsx b/packages/propel/src/ui/badge/index.tsx
deleted file mode 100644
index 66d44433..00000000
--- a/packages/propel/src/ui/badge/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./badge";
-export * from "./badge-icon";
-export * from "./badge-label";
diff --git a/packages/propel/src/ui/badge/variants.ts b/packages/propel/src/ui/badge/variants.ts
deleted file mode 100644
index 2bc7127a..00000000
--- a/packages/propel/src/ui/badge/variants.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// Badge is the small rounded pill of inline text (a status tag, a "Paid"/"Free"
-// label). Per the designer spec on the Badge issue, every part's static chrome lives
-// in cva here so each part stays a single styled element with no `className` at the
-// boundary.
-//
-// "Always the same" (baked into the base of `badgeVariants`):
-//   pill shape (rounded-full), inline-flex with centered content, the gap between
-//   icon/label/dismiss, font-medium, single-line text (whitespace-nowrap), and the
-//   icon-to-text vertical alignment (leading-none).
-//
-// "Depends (adjustable)" — exposed as required cva variants:
-//   - magnitude: S / Base / Large (height, horizontal padding, text size, node size)
-//   - tone: color/sentiment (neutral, grey, brand, info, …)
-export const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full leading-none font-medium whitespace-nowrap",
-  {
-    variants: {
-      // Figma Size axis. Each step sets height, horizontal padding, text size, and the
-      // CSS custom property `--node-size` consumed by the node-slot children.
-      magnitude: {
-        // S: 18px tall, 4px x-padding, text/12, 14px nodes.
-        sm: "h-[18px] px-1 text-12 [--node-size:0.875rem]",
-        // Base: 20px tall, 6px x-padding, text/13, 14px nodes.
-        md: "h-5 px-1.5 text-13 [--node-size:0.875rem]",
-        // Large: 24px tall, 8px x-padding, text/14, 16px nodes.
-        lg: "h-6 px-2 text-14 [--node-size:1rem]",
-      },
-      // Figma Color/sentiment axis. Label-hue tones map to `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",
-      },
-    },
-  },
-);
-
-// The decorative leading icon at the badge's inline-start (the Figma badge icon). Sizes
-// its single child to the badge's `--node-size` (shared node-slot class) and inherits
-// the tone's text color so the icon tints to match — per the spec, "icon follows the
-// badge's size and color".
-type BadgeVariantConfig = VariantProps<typeof badgeVariants>;
-export type BadgeMagnitude = NonNullable<BadgeVariantConfig["magnitude"]>;
-export type BadgeTone = NonNullable<BadgeVariantConfig["tone"]>;
-export type BadgeVariantProps = StrictVariantProps<typeof badgeVariants>;
-
-export const badgeIconVariants = cva(nodeSlotClass);
-
-// The badge's text label. Single-line (the base already sets `whitespace-nowrap`); kept
-// as its own region so the label and leading/trailing icons compose as siblings.
-export const badgeLabelVariants = cva("min-w-0");
diff --git a/packages/propel/src/ui/banner/banner-description.tsx b/packages/propel/src/ui/banner/banner-description.tsx
deleted file mode 100644
index ddc4c0ca..00000000
--- a/packages/propel/src/ui/banner/banner-description.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { bannerDescriptionVariants } from "./variants";
-
-export type BannerDescriptionProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The supporting message text, shown below the `BannerTitle`. */
-  children?: React.ReactNode;
-};
-
-/** The banner's supporting message, stacked below the `BannerTitle` inside the `BannerBody`. */
-export function BannerDescription(props: BannerDescriptionProps) {
-  return <div className={bannerDescriptionVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/banner/banner.stories.tsx b/packages/propel/src/ui/banner/banner.stories.tsx
deleted file mode 100644
index 637b4c71..00000000
--- a/packages/propel/src/ui/banner/banner.stories.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Info, X } from "lucide-react";
-import { expect, fn } from "storybook/test";
-
-import { Button } from "../button/index";
-import { IconButton, IconButtonIcon } from "../icon-button";
-import {
-  Banner,
-  BannerActions,
-  BannerBody,
-  BannerDescription,
-  BannerIcon,
-  type BannerTone,
-  BannerTitle,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC banner parts (each renders a single element) — the
-// leading icon, the message body (title + description), the trailing actions, and the
-// dismiss control. The components-tier `Banner` story shows the ready-made banner that
-// takes content via convenience props instead of assembling the parts.
-const TONES: BannerTone[] = ["neutral", "info", "accent", "warning", "danger"];
-
-const dismissSpy = fn();
-
-const meta = {
-  title: "UI/Banner",
-  component: Banner,
-  subcomponents: {
-    BannerIcon,
-    BannerBody,
-    BannerTitle,
-    BannerDescription,
-    BannerActions,
-  },
-  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>;
-
-/** Assemble the atomic parts: Root › Icon › Body (Title + Description). */
-export const Default: Story = {
-  args: { placement: "page", tone: "neutral" },
-  render: (args) => (
-    <Banner {...args}>
-      <BannerIcon placement={args.placement} tone={args.tone}>
-        <Info />
-      </BannerIcon>
-      <BannerBody placement={args.placement} tone={args.tone}>
-        <BannerTitle>There is something that needs your attention</BannerTitle>
-      </BannerBody>
-    </Banner>
-  ),
-};
-
-/** Every intent (`tone`) side by side — the soft surface + foreground color per meaning. */
-export const Tones: Story = {
-  args: { placement: "inline", tone: "neutral" },
-  argTypes: { tone: { control: false }, placement: { control: false } },
-  render: () => (
-    <div className="flex w-160 flex-col gap-3">
-      {TONES.map((tone) => (
-        <Banner key={tone} placement="inline" tone={tone}>
-          <BannerIcon placement="inline" tone={tone}>
-            <Info />
-          </BannerIcon>
-          <BannerBody placement="inline" tone={tone}>
-            <BannerTitle>There is something that needs your attention</BannerTitle>
-          </BannerBody>
-        </Banner>
-      ))}
-    </div>
-  ),
-};
-
-/** The two scopes (`placement`): the full-width page strip vs the rounded inline card. */
-export const Placements: Story = {
-  args: { placement: "page", tone: "info" },
-  argTypes: { placement: { control: false }, tone: { control: false } },
-  render: () => (
-    <div className="flex w-160 flex-col gap-4">
-      {(["page", "inline"] as const).map((placement) => (
-        <Banner key={placement} placement={placement} tone="info">
-          <BannerIcon placement={placement} tone="info">
-            <Info />
-          </BannerIcon>
-          <BannerBody placement={placement} tone="info">
-            <BannerTitle>There is something that needs your attention</BannerTitle>
-          </BannerBody>
-        </Banner>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * The full page banner from Figma (see the meta's design link): a message with trailing actions and
- * a dismiss control, assembled from the atomic parts. `BannerActions` takes any nodes, so the
- * banner composes propel `Button`s — a ghost, a secondary, and a primary, plus a ghost `IconButton`
- * close.
- */
-export const WithActions: Story = {
-  args: { placement: "page", tone: "neutral" },
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <Banner {...args}>
-      <BannerIcon placement={args.placement} tone={args.tone}>
-        <Info />
-      </BannerIcon>
-      <BannerBody placement={args.placement} tone={args.tone}>
-        <BannerTitle>There is something that needs your attention</BannerTitle>
-      </BannerBody>
-      <BannerActions>
-        <Button sizing="hug" prominence="ghost" tone="neutral" magnitude="sm">
-          Remind me later
-        </Button>
-        <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="sm">
-          Learn more
-        </Button>
-        <Button sizing="hug" prominence="primary" tone="neutral" magnitude="sm">
-          Update now
-        </Button>
-        <IconButton
-          prominence="ghost"
-          tone="neutral"
-          magnitude="md"
-          aria-label="Dismiss"
-          onClick={fn()}
-        >
-          <IconButtonIcon>
-            <X />
-          </IconButtonIcon>
-        </IconButton>
-      </BannerActions>
-    </Banner>
-  ),
-};
-
-/**
- * Real interaction test: clicking the dismiss button invokes its handler. The spy comes from a
- * Storybook `fn()`; the button is queried by its `aria-label`. Tagged out of the
- * sidebar/docs/manifest but still run under the default `test` tag.
- */
-export const DismissCallsHandler: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { placement: "inline", tone: "info" },
-  render: (args) => (
-    <Banner {...args}>
-      <BannerIcon placement={args.placement} tone={args.tone}>
-        <Info />
-      </BannerIcon>
-      <BannerBody placement={args.placement} tone={args.tone}>
-        <BannerTitle>There is something that needs your attention</BannerTitle>
-      </BannerBody>
-      <IconButton
-        prominence="ghost"
-        tone="neutral"
-        magnitude="md"
-        aria-label="Dismiss"
-        onClick={dismissSpy}
-      >
-        <IconButtonIcon>
-          <X />
-        </IconButtonIcon>
-      </IconButton>
-    </Banner>
-  ),
-  play: async ({ canvas, userEvent }) => {
-    dismissSpy.mockClear();
-    const button = canvas.getByRole("button", { name: "Dismiss" });
-    await userEvent.click(button);
-    await expect(dismissSpy).toHaveBeenCalledTimes(1);
-  },
-};
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-trigger-icon.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-trigger-icon.tsx
deleted file mode 100644
index 1bdf9d14..00000000
--- a/packages/propel/src/ui/breadcrumb/breadcrumb-trigger-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { breadcrumbTriggerIconVariants } from "./variants";
-
-export type BreadcrumbTriggerIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render, sized to the trigger's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * A decorative leading icon at a `BreadcrumbTrigger`'s inline-start. Sizes its single child to the
- * trigger's `--node-size`, so callers pass a bare icon. Decorative (the trigger carries the
- * accessible name), so it is `aria-hidden`.
- */
-export function BreadcrumbTriggerIcon(props: BreadcrumbTriggerIconProps) {
-  return <span aria-hidden className={breadcrumbTriggerIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-trigger-indicator.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-trigger-indicator.tsx
deleted file mode 100644
index 3de2dfd1..00000000
--- a/packages/propel/src/ui/breadcrumb/breadcrumb-trigger-indicator.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type * as React from "react";
-
-import { breadcrumbTriggerIndicatorVariants } from "./variants";
-
-export type BreadcrumbTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /**
-   * The disclosure caret to render (e.g. a Lucide `ChevronRight`), sized to the trigger's
-   * `--node-size`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The disclosure caret at a `BreadcrumbTrigger`'s inline-end. Points toward the inline-end at rest
- * and rotates down while the menu is open (the trigger carries `group/trigger`). Mirrored under
- * RTL. A node-slot: it sizes its single child to the indicator size, so callers pass a bare glyph.
- * Decorative (the trigger carries the a11y state), so it is `aria-hidden`.
- */
-export function BreadcrumbTriggerIndicator(props: BreadcrumbTriggerIndicatorProps) {
-  return <span aria-hidden className={breadcrumbTriggerIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx
deleted file mode 100644
index ad4130d4..00000000
--- a/packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronRight, Layers } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Menu,
-  MenuItem,
-  MenuItemContent,
-  MenuItemTitle,
-  MenuItemTitleRow,
-  MenuPopup,
-  MenuPortal,
-  MenuPositioner,
-  MenuTrigger as MenuTriggerElement,
-} from "../menu";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbTrigger,
-  BreadcrumbTriggerIcon,
-  BreadcrumbTriggerIndicator,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC breadcrumb parts (each renders a single element).
-// The components-tier `Breadcrumb` story shows the ready-made menu crumbs. Here you assemble the
-// raw crumb chrome from `ui` atoms: the landmark + list, links, the current page, separators, and
-// a menu-trigger crumb wired to a Base UI `Menu` (its own leading icon and trailing indicator).
-const meta = {
-  title: "UI/Breadcrumb",
-  component: Breadcrumb,
-  args: { "aria-label": "Breadcrumb" },
-  subcomponents: {
-    BreadcrumbList,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-    BreadcrumbTrigger,
-    BreadcrumbTriggerIcon,
-    BreadcrumbTriggerIndicator,
-    Menu,
-    MenuItem,
-  },
-} satisfies Meta<typeof Breadcrumb>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Root › List › Item › (Link | Page), with Separator between crumbs. */
-export const Default: Story = {
-  render: () => (
-    <Breadcrumb aria-label="Breadcrumb">
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
-            Plane
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <ChevronRight />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
-            Projects
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <ChevronRight />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
-            Design
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <ChevronRight />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Work items</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-/**
- * Interaction test: the trail exposes its accessible landmark name and marks the last crumb as the
- * current page. Tagged out of the sidebar/docs/manifest while still running under the default
- * `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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 non-navigating anchor for the `render` prop of crumb menu items. Activating a
-// bare `href="#"` performs a full document navigation, which tears down the test page in the
-// browser runner — so swallow the default click. Real apps pass a router link here instead.
-const inertAnchor = () => <a href="#" onClick={(event) => event.preventDefault()} />;
-
-/**
- * A menu-style crumb built from the raw `BreadcrumbTrigger` (`group` adds the open-state marker so
- * the indicator can rotate), composing the atomic `BreadcrumbTriggerIcon` and
- * `BreadcrumbTriggerIndicator` parts. The trigger is projected onto a Base UI `Menu`'s trigger via
- * `render`, with the menu surface assembled from the `ui` menu atoms. The menu crumb owns its own
- * chevron, so no separator follows it.
- */
-export const MenuTrigger: Story = {
-  render: () => (
-    <Breadcrumb aria-label="Breadcrumb">
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
-            Plane
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <ChevronRight />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <Menu>
-            <MenuTriggerElement render={<BreadcrumbTrigger group />}>
-              <BreadcrumbTriggerIcon>
-                <Layers />
-              </BreadcrumbTriggerIcon>
-              Plane Design
-              <BreadcrumbTriggerIndicator>
-                <ChevronRight />
-              </BreadcrumbTriggerIndicator>
-            </MenuTriggerElement>
-            <MenuPortal>
-              <MenuPositioner sideOffset={4}>
-                <MenuPopup elevation="raised">
-                  {["Plane Web", "Plane Mobile", "Plane Server"].map((label) => (
-                    <MenuItem key={label} render={inertAnchor()} layout="default">
-                      <MenuItemContent>
-                        <MenuItemTitleRow>
-                          <MenuItemTitle>{label}</MenuItemTitle>
-                        </MenuItemTitleRow>
-                      </MenuItemContent>
-                    </MenuItem>
-                  ))}
-                </MenuPopup>
-              </MenuPositioner>
-            </MenuPortal>
-          </Menu>
-        </BreadcrumbItem>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Components</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
diff --git a/packages/propel/src/ui/breadcrumb/index.tsx b/packages/propel/src/ui/breadcrumb/index.tsx
deleted file mode 100644
index 90987132..00000000
--- a/packages/propel/src/ui/breadcrumb/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./breadcrumb";
-export * from "./breadcrumb-item";
-export * from "./breadcrumb-link";
-export * from "./breadcrumb-list";
-export * from "./breadcrumb-page";
-export * from "./breadcrumb-separator";
-export * from "./breadcrumb-trigger";
-export * from "./breadcrumb-trigger-icon";
-export * from "./breadcrumb-trigger-indicator";
diff --git a/packages/propel/src/ui/breadcrumb/variants.ts b/packages/propel/src/ui/breadcrumb/variants.ts
deleted file mode 100644
index 3b163b11..00000000
--- a/packages/propel/src/ui/breadcrumb/variants.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-
-/** Chrome for `BreadcrumbLink` — a navigable (hoverable) crumb anchor. */
-export const breadcrumbLinkVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary transition-colors hover:bg-layer-transparent-hover hover:text-primary",
-);
-
-/** Chrome for `BreadcrumbPage` — the current page (non-interactive) crumb. */
-export const breadcrumbPageVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-primary",
-);
-
-/**
- * All-in-one chrome for a menu-trigger crumb: base pill styles, hover/open-state shifts, cursor,
- * and an optional `group/trigger` marker so descendant chevrons can react to the popup open state.
- */
-export const breadcrumbTriggerVariants = cva(
-  "inline-flex cursor-default items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary transition-colors [--node-size:0.875rem] hover:bg-layer-transparent-hover hover:text-primary data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
-  {
-    variants: {
-      /** Adds `group/trigger` so descendant elements can use `group-data-popup-open/trigger:*`. */
-      group: {
-        true: "group/trigger",
-        false: "",
-      },
-    },
-  },
-);
-
-/** The `<li>` wrapper for every crumb (link, page, trigger). */
-export const breadcrumbItemVariants = cva("inline-flex items-center");
-
-/**
- * The visual divider between crumbs. Sets `--node-size` and uses `[&>svg]` / `[&>img]` to size any
- * child icon, so callers pass raw SVGs without extra wrappers. Chevron icons are RTL-mirrored via
- * `rtl:[&>svg]:-scale-x-100`.
- */
-export const breadcrumbSeparatorVariants = cva(
-  "flex items-center px-1 text-icon-tertiary [--node-size:0.875rem] [&>img]:size-(--node-size) [&>svg]:size-(--node-size) rtl:[&>svg]:-scale-x-100",
-);
-
-/** The `<ol>` that carries the ordered trail of crumbs. */
-export const breadcrumbListVariants = cva("flex items-center gap-0.5");
-
-/**
- * A decorative leading icon inside a `BreadcrumbTrigger`. Sizes its single child to 16 px via
- * `--node-size` (the shared node-slot class) and tints it, so callers pass a bare icon.
- */
-export const breadcrumbTriggerIconVariants = cva(
-  cx(nodeSlotClass, "text-icon-tertiary [--node-size:1rem]"),
-);
-
-/**
- * The trailing chevron inside a `BreadcrumbTrigger`. Fixed 14 px, points toward the inline-end at
- * rest and rotates down (90°) while the menu is open; mirrored in RTL. The trigger carries
- * `group/trigger`, so the rotation keys off `group-data-popup-open/trigger`.
- */
-export const breadcrumbTriggerIndicatorVariants = cva(
-  cx(
-    "inline-flex shrink-0 items-center justify-center text-icon-tertiary [&>svg]:size-3.5",
-    "transition-transform group-data-popup-open/trigger:rotate-90",
-    "rtl:not-group-data-popup-open/trigger:-scale-x-100",
-  ),
-);
diff --git a/packages/propel/src/ui/button-anchor/button-anchor.stories.tsx b/packages/propel/src/ui/button-anchor/button-anchor.stories.tsx
deleted file mode 100644
index 60c17c39..00000000
--- a/packages/propel/src/ui/button-anchor/button-anchor.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, fn } from "storybook/test";
-
-import { ButtonAnchor, type ButtonAnchorMagnitude, type ButtonAnchorProminence } from "./index";
-
-const PROMINENCES: ButtonAnchorProminence[] = ["primary", "secondary"];
-const MAGNITUDES: ButtonAnchorMagnitude[] = ["sm", "md", "lg", "xl"];
-
-// UI-tier story: a `<button>` (an action) wearing the inline-link look. Same appearance as `Anchor`,
-// but it acts (onClick) instead of navigating. For a nav `<a>` that looks like a button, see `AnchorButton`.
-const meta = {
-  title: "UI/ButtonAnchor",
-  component: ButtonAnchor,
-  args: { children: "Show more", prominence: "primary", magnitude: "md" },
-} satisfies Meta<typeof ButtonAnchor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** `prominence`: `primary` is the blue link; `secondary` is the muted gray inline link. */
-export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-4">
-      {PROMINENCES.map((prominence) => (
-        <ButtonAnchor key={prominence} {...args} prominence={prominence}>
-          {prominence} action
-        </ButtonAnchor>
-      ))}
-    </div>
-  ),
-};
-
-/** Text 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-4">
-      {MAGNITUDES.map((magnitude) => (
-        <ButtonAnchor key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </ButtonAnchor>
-      ))}
-    </div>
-  ),
-};
-
-/** It is a real `<button>` (an action) — clicking fires `onClick`, not navigation. */
-export const ActsNotNavigates: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { onClick: fn() },
-  play: async ({ args, canvas, userEvent }) => {
-    const button = canvas.getByRole("button", { name: "Show more" });
-    await userEvent.click(button);
-    await expect(args.onClick).toHaveBeenCalledOnce();
-  },
-};
diff --git a/packages/propel/src/ui/button-anchor/button-anchor.tsx b/packages/propel/src/ui/button-anchor/button-anchor.tsx
deleted file mode 100644
index f5807dee..00000000
--- a/packages/propel/src/ui/button-anchor/button-anchor.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react/button";
-
-import { type ButtonAnchorVariantProps, buttonAnchorVariants } from "./variants";
-
-export type { ButtonAnchorMagnitude, ButtonAnchorProminence } from "./variants";
-
-export type ButtonAnchorProps = Omit<BaseButton.Props, "className" | "style"> &
-  ButtonAnchorVariantProps;
-
-/**
- * A `<button>` (an action) that _looks like_ an inline text link — the "action that reads as a
- * link" (e.g. a "Show more" toggle, an inline "Edit"). Button behavior (`onClick`, `disabled`,
- * `type`); the link palette (`prominence`) and text size (`magnitude`) are shared with `Anchor`.
- * For a navigation link that looks like a button, use `AnchorButton`; for a real inline link, use
- * `Anchor`.
- */
-export function ButtonAnchor({
-  prominence,
-  magnitude,
-  type = "button",
-  ...props
-}: ButtonAnchorProps) {
-  return (
-    <BaseButton
-      type={type}
-      className={buttonAnchorVariants({ prominence, magnitude })}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/button-anchor/index.tsx b/packages/propel/src/ui/button-anchor/index.tsx
deleted file mode 100644
index 83182a5a..00000000
--- a/packages/propel/src/ui/button-anchor/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./button-anchor";
diff --git a/packages/propel/src/ui/button-anchor/variants.ts b/packages/propel/src/ui/button-anchor/variants.ts
deleted file mode 100644
index 1c0e04c2..00000000
--- a/packages/propel/src/ui/button-anchor/variants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { type VariantProps } from "class-variance-authority";
-
-import { linkChromeVariants } from "../../internal/link-chrome";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// `ButtonAnchor` presents as a link (the shared link chrome) but is a `<button>` (an action). Same
-// look as `Anchor`, button behavior. For a navigation `<a>` that looks like a button, use `AnchorButton`.
-export const buttonAnchorVariants = linkChromeVariants;
-
-type ButtonAnchorVariantConfig = VariantProps<typeof buttonAnchorVariants>;
-export type ButtonAnchorProminence = NonNullable<ButtonAnchorVariantConfig["prominence"]>;
-export type ButtonAnchorMagnitude = NonNullable<ButtonAnchorVariantConfig["magnitude"]>;
-
-export type ButtonAnchorVariantProps = StrictVariantProps<typeof buttonAnchorVariants>;
diff --git a/packages/propel/src/ui/button/button-icon.tsx b/packages/propel/src/ui/button/button-icon.tsx
deleted file mode 100644
index fd22c54d..00000000
--- a/packages/propel/src/ui/button/button-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { buttonIconVariants } from "./variants";
-
-export type ButtonIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * A decorative node beside the label (Figma leading/trailing icon). Sizes its single child to the
- * button's `--node-size`, so callers pass a bare icon/avatar. Decorative — the button's label
- * carries the accessible name — so it is `aria-hidden`.
- */
-export function ButtonIcon({ render, ...props }: ButtonIconProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: buttonIconVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/button/button-spinner.tsx b/packages/propel/src/ui/button/button-spinner.tsx
deleted file mode 100644
index 5d23dae5..00000000
--- a/packages/propel/src/ui/button/button-spinner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type * as React from "react";
-
-import { buttonSpinnerVariants } from "./variants";
-
-export type ButtonSpinnerProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /**
-   * The spinner glyph to render (e.g. a Lucide `LoaderCircle`), sized to the button's
-   * `--node-size`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The loading indicator shown in place of the inline-start node while the button is busy. A pure
- * slot: it sizes its single child to the button's `--node-size` and spins it via `animate-spin`,
- * but bakes no glyph — callers pass the spinner icon as `children`. Decorative (the root carries
- * `aria-busy`), so it is `aria-hidden`.
- */
-export function ButtonSpinner(props: ButtonSpinnerProps) {
-  return <span aria-hidden className={buttonSpinnerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/button/button.stories.tsx b/packages/propel/src/ui/button/button.stories.tsx
deleted file mode 100644
index 9b4db3fc..00000000
--- a/packages/propel/src/ui/button/button.stories.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LoaderCircle, Plus } from "lucide-react";
-import { expect, fn, userEvent as baseUserEvent } from "storybook/test";
-
-import {
-  Button,
-  ButtonIcon,
-  ButtonLabel,
-  type ButtonMagnitude,
-  ButtonSpinner,
-  type ButtonProminence,
-} from "./index";
-
-const PROMINENCES: ButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
-const MAGNITUDES: ButtonMagnitude[] = ["sm", "md", "lg", "xl"];
-
-// UI-tier story: the ATOMIC button — a single accessible `<button>` with `prominence` /
-// `tone` / `magnitude` / `sizing`. 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,
-  // The button's anatomy parts; the ready-made Button (Components/Button) composes them.
-  subcomponents: { ButtonIcon, ButtonLabel, ButtonSpinner },
-  args: {
-    children: "Button",
-    prominence: "primary",
-    tone: "neutral",
-    magnitude: "md",
-    sizing: "hug",
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-/** Every prominence (Figma "Type") side by side at the default magnitude. */
-export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      {PROMINENCES.map((prominence) => (
-        <Button key={prominence} {...args} prominence={prominence}>
-          {prominence}
-        </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" prominence="primary">
-        Neutral
-      </Button>
-      <Button {...args} tone="danger" prominence="primary">
-        Danger fill
-      </Button>
-      <Button {...args} tone="danger" prominence="secondary">
-        Danger outline
-      </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>
-  ),
-};
-
-/** `sizing="fill"` fills the container (e.g. a form row or mobile CTA). */
-export const Stretch: Story = {
-  argTypes: { sizing: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex w-64 flex-col gap-2">
-      <Button {...args} sizing="hug">
-        Auto width
-      </Button>
-      <Button {...args} sizing="fill">
-        Full width
-      </Button>
-    </div>
-  ),
-};
-
-/**
- * The atomic button is composed from named parts: `ButtonIcon` sizes a decorative leading/trailing
- * node to the button's `--node-size`, `ButtonLabel` holds the text (and dims under `aria-busy`),
- * and `ButtonSpinner` is the loading indicator. The ready-made `Button` (Components/Button) lays
- * these out for you; here they are composed by hand.
- */
-export const Anatomy: Story = {
-  args: { children: undefined },
-  argTypes: { children: { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      <Button {...args}>
-        <ButtonIcon>
-          <Plus />
-        </ButtonIcon>
-        <ButtonLabel>With icon</ButtonLabel>
-      </Button>
-      {/* The busy state mirrors the ready-made Button: it is `aria-busy` AND soft-disabled
-          (Base UI `disabled` + `focusableWhenDisabled`), so the disabled palette applies. */}
-      <Button {...args} aria-busy disabled focusableWhenDisabled>
-        <ButtonSpinner>
-          <LoaderCircle />
-        </ButtonSpinner>
-        <ButtonLabel>Loading</ButtonLabel>
-      </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 }) => {
-    const button = canvas.getByRole("button", { name: "Button" });
-    await expect(button).toBeDisabled();
-    // A disabled button sets `pointer-events: none`, so the default user-event guard
-    // refuses to click it. Disable that guard so the click is dispatched at the element;
-    // the native disabled button must still ignore it and never fire `onClick`.
-    const user = baseUserEvent.setup({ pointerEventsCheck: 0 });
-    await user.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
deleted file mode 100644
index e2624b4f..00000000
--- a/packages/propel/src/ui/button/button.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react/button";
-
-import { type ButtonVariantProps, buttonVariants } from "./variants";
-
-export type { ButtonMagnitude, ButtonProminence, ButtonSizing, ButtonTone } from "./variants";
-
-export type ButtonProps = Omit<BaseButton.Props, "className" | "style"> & ButtonVariantProps;
-
-/**
- * A plain accessible action button (`<button>`) built on propel's design tokens. Pick its weight
- * with `prominence` (Figma Type: primary·secondary·tertiary·ghost), the error palette with `tone`,
- * the size with `magnitude`, and full-width with `sizing` — all required, so consumers choose
- * explicitly. For navigation use `AnchorButton` (button look) or `Anchor` (inline link), not a
- * button. `children` is passed through; it is not a variant.
- */
-export function Button({
-  prominence,
-  tone,
-  magnitude,
-  sizing,
-  type = "button",
-  ...props
-}: ButtonProps) {
-  return (
-    <BaseButton
-      type={type}
-      className={buttonVariants({ prominence, tone, magnitude, sizing })}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/button/index.tsx b/packages/propel/src/ui/button/index.tsx
deleted file mode 100644
index bf15e489..00000000
--- a/packages/propel/src/ui/button/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./button";
-export * from "./button-icon";
-export * from "./button-label";
-export * from "./button-spinner";
diff --git a/packages/propel/src/ui/button/variants.ts b/packages/propel/src/ui/button/variants.ts
deleted file mode 100644
index 20f2365d..00000000
--- a/packages/propel/src/ui/button/variants.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { buttonGeometryVariants } from "../../internal/button-geometry";
-import { composeVariants } from "../../internal/compose-variants";
-import { controlChromeVariants } from "../../internal/control-chrome";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/** The full Button className: the shared control chrome composed with the label-button geometry. */
-export const buttonVariants = composeVariants(controlChromeVariants, buttonGeometryVariants);
-
-type ButtonVariantConfig = VariantProps<typeof buttonVariants>;
-export type ButtonProminence = NonNullable<ButtonVariantConfig["prominence"]>;
-export type ButtonTone = NonNullable<ButtonVariantConfig["tone"]>;
-export type ButtonMagnitude = NonNullable<ButtonVariantConfig["magnitude"]>;
-export type ButtonSizing = NonNullable<ButtonVariantConfig["sizing"]>;
-
-// No `defaultVariants` today, so every axis is required.
-export type ButtonVariantProps = StrictVariantProps<typeof buttonVariants>;
-
-// The text label inside a Button. When the parent button is `aria-busy` (loading) it dims via the
-// `group-aria-busy:` sibling of the `group` class on the root.
-export const buttonLabelVariants = cva("group-aria-busy:opacity-50");
-
-// A decorative node beside the label. Reuses the shared node-slot chrome so its single child is
-// sized to the button's inherited `--node-size`.
-export const buttonIconVariants = cva(nodeSlotClass);
-
-// The loading indicator that replaces the inline-start node while busy. A pure slot that sizes its
-// single child to `--node-size` and spins the wrapper via `animate-spin`.
-export const buttonSpinnerVariants = cva(cx(nodeSlotClass, "animate-spin"));
diff --git a/packages/propel/src/ui/calendar/calendar.stories.tsx b/packages/propel/src/ui/calendar/calendar.stories.tsx
deleted file mode 100644
index 1af0e0f7..00000000
--- a/packages/propel/src/ui/calendar/calendar.stories.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-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
deleted file mode 100644
index 277c14f3..00000000
--- a/packages/propel/src/ui/calendar/calendar.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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) {
-  // react-day-picker handles month/grid/aria; we only restyle (its default nav chevron is styled
-  // via `classNames.chevron`). The ready-made `Calendar` in `components` swaps in lucide chevrons.
-  return <DayPicker classNames={calendarClassNames} {...props} />;
-}
diff --git a/packages/propel/src/ui/calendar/index.tsx b/packages/propel/src/ui/calendar/index.tsx
deleted file mode 100644
index 90fe453b..00000000
--- a/packages/propel/src/ui/calendar/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./calendar";
diff --git a/packages/propel/src/ui/calendar/variants.ts b/packages/propel/src/ui/calendar/variants.ts
deleted file mode 100644
index 81bfa7fe..00000000
--- a/packages/propel/src/ui/calendar/variants.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-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",
-  // The nav chevron: 16px, mirrored in RTL. react-day-picker passes this class to its `Chevron`
-  // component (default or a custom one), so the icon needs no className of its own.
-  chevron: "size-4 rtl:-scale-x-100",
-  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
deleted file mode 100644
index 14520688..00000000
--- a/packages/propel/src/ui/checkbox-group/checkbox-group.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, Minus } from "lucide-react";
-import { expect } from "storybook/test";
-
-import { Checkbox, CheckboxIndeterminateIndicator, 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 value={value} aria-label={label}>
-      <CheckboxIndicator>
-        <Check aria-hidden />
-      </CheckboxIndicator>
-      <CheckboxIndeterminateIndicator>
-        <Minus aria-hidden />
-      </CheckboxIndeterminateIndicator>
-    </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>
-  ),
-};
-
-/**
- * Interaction test: the group reflects its `defaultValue`, so HTTPS reads as checked. Tagged out of
- * the sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 6a7db848..00000000
--- a/packages/propel/src/ui/checkbox-group/checkbox-group.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
-
-import { type CheckboxGroupVariantProps, checkboxGroupVariants } from "./variants";
-
-export type { CheckboxGroupDensity } from "./variants";
-
-export type CheckboxGroupProps = Omit<BaseCheckboxGroup.Props, "className" | "style"> &
-  CheckboxGroupVariantProps;
-
-/** 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/variants.ts b/packages/propel/src/ui/checkbox-group/variants.ts
deleted file mode 100644
index cb9e2bb5..00000000
--- a/packages/propel/src/ui/checkbox-group/variants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-export const checkboxGroupVariants = cva("flex flex-col", {
-  variants: {
-    density: {
-      comfortable: "gap-2",
-      compact: "gap-0",
-    },
-  },
-});
-
-export type CheckboxGroupDensity = NonNullable<
-  VariantProps<typeof checkboxGroupVariants>["density"]
->;
-export type CheckboxGroupVariantProps = StrictVariantProps<typeof checkboxGroupVariants>;
diff --git a/packages/propel/src/ui/checkbox/checkbox-indeterminate-indicator.tsx b/packages/propel/src/ui/checkbox/checkbox-indeterminate-indicator.tsx
deleted file mode 100644
index 336eec2e..00000000
--- a/packages/propel/src/ui/checkbox/checkbox-indeterminate-indicator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-
-import { checkboxIndeterminateIndicatorVariants } from "./variants";
-
-export type CheckboxIndeterminateIndicatorProps = Omit<
-  BaseCheckbox.Indicator.Props,
-  "className" | "style"
->;
-
-/**
- * The dash shown while a `Checkbox` is indeterminate. A second `Checkbox.Indicator` that Base UI
- * mounts when checked or indeterminate; its cva keeps it hidden unless `data-indeterminate` is
- * present, so only the dash (not the check) shows in the mixed state. Decorative — the Root carries
- * a11y. Children — typically a lucide `Minus` — pass through.
- */
-export function CheckboxIndeterminateIndicator(props: CheckboxIndeterminateIndicatorProps) {
-  return <BaseCheckbox.Indicator className={checkboxIndeterminateIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/checkbox/checkbox-indicator.tsx b/packages/propel/src/ui/checkbox/checkbox-indicator.tsx
deleted file mode 100644
index f4117626..00000000
--- a/packages/propel/src/ui/checkbox/checkbox-indicator.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-
-import { checkboxIndicatorVariants } from "./variants";
-
-export type CheckboxIndicatorProps = Omit<BaseCheckbox.Indicator.Props, "className" | "style">;
-
-/**
- * The CHECK mark shown inside a checked `Checkbox`. A `Checkbox.Indicator` that Base UI mounts
- * while checked or indeterminate (no `keepMounted`), so the box is empty when unchecked; its cva
- * hides it when `data-indeterminate` is present, so the check disappears in the mixed state (the
- * dash takes over). Decorative — the Root carries the a11y state. Children — typically a lucide
- * `Check` — are passed through.
- */
-export function CheckboxIndicator(props: CheckboxIndicatorProps) {
-  return <BaseCheckbox.Indicator className={checkboxIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/checkbox/checkbox-inline-start-node.tsx b/packages/propel/src/ui/checkbox/checkbox-inline-start-node.tsx
deleted file mode 100644
index 5d82a9b8..00000000
--- a/packages/propel/src/ui/checkbox/checkbox-inline-start-node.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { checkboxInlineStartNodeVariants } from "./variants";
-
-export type CheckboxInlineStartNodeProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render in the slot, sized to `--node-size` (14px). */
-  children?: React.ReactNode;
-};
-
-/**
- * The decorative icon slot between the box and the label text (Figma "checkbox with label" icon
- * slot). Sizes its single child to `--node-size` (14px); pass a bare icon. Decorative — the box and
- * label carry the accessible name — so it is `aria-hidden`.
- */
-export function CheckboxInlineStartNode(props: CheckboxInlineStartNodeProps) {
-  return <span aria-hidden className={checkboxInlineStartNodeVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/checkbox/checkbox-label.tsx b/packages/propel/src/ui/checkbox/checkbox-label.tsx
deleted file mode 100644
index d4e5b714..00000000
--- a/packages/propel/src/ui/checkbox/checkbox-label.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type * as React from "react";
-
-import { checkboxLabelVariants } from "./variants";
-
-export type CheckboxLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"label">,
-  "className" | "style"
-> & {
-  /** The row's contents — a `Checkbox`, an optional `CheckboxInlineStartNode`, and the label text. */
-  children?: React.ReactNode;
-};
-
-/**
- * The clickable row chip that wraps a `Checkbox` box with an optional `CheckboxInlineStartNode` and
- * the label text, matching the Figma "Checkbox with label" component. Associate it with the box via
- * `htmlFor` so clicking anywhere in the row toggles the box. The row reads its disabled look off
- * the wrapped `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled`
- * prop.
- */
-export function CheckboxLabel(props: CheckboxLabelProps) {
-  return <label className={checkboxLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/checkbox/checkbox.stories.tsx b/packages/propel/src/ui/checkbox/checkbox.stories.tsx
deleted file mode 100644
index de1576cf..00000000
--- a/packages/propel/src/ui/checkbox/checkbox.stories.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, Minus, Repeat } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Checkbox,
-  CheckboxIndeterminateIndicator,
-  CheckboxIndicator,
-  CheckboxInlineStartNode,
-  CheckboxLabel,
-} 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` (check) and a `CheckboxIndeterminateIndicator` (dash). A
-// labeled row is the `CheckboxLabel` chip wrapping the box, an optional
-// `CheckboxInlineStartNode` icon slot, and the text. The components-tier `Checkbox`
-// story shows the ready-made version. Here you assemble the raw parts and own the
-// accessible name.
-const meta = {
-  title: "UI/Checkbox",
-  component: Checkbox,
-  subcomponents: {
-    CheckboxIndicator,
-    CheckboxIndeterminateIndicator,
-    CheckboxLabel,
-    CheckboxInlineStartNode,
-  },
-  args: { "aria-label": "Example" },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Root box with its check + indeterminate indicators. Toggling mounts/unmounts the tick. */
-export const Default: Story = {
-  render: (args) => (
-    <Checkbox {...args}>
-      <CheckboxIndicator>
-        <Check aria-hidden />
-      </CheckboxIndicator>
-      <CheckboxIndeterminateIndicator>
-        <Minus aria-hidden />
-      </CheckboxIndeterminateIndicator>
-    </Checkbox>
-  ),
-};
-
-/**
- * Interaction test: clicking the box toggles the tick on and off. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
- * sees the tick flip on its own.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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 only), disabled, and the danger look. The error look isn't
- * a prop — it's the `data-invalid` STATE: inside an invalid `Field.Root` Base UI sets it on the
- * box, and any host can set it directly (as the last box does here) to get the danger border.
- */
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Checkbox aria-label="Unchecked">
-        <CheckboxIndicator>
-          <Check aria-hidden />
-        </CheckboxIndicator>
-        <CheckboxIndeterminateIndicator>
-          <Minus aria-hidden />
-        </CheckboxIndeterminateIndicator>
-      </Checkbox>
-      <Checkbox aria-label="Checked" defaultChecked>
-        <CheckboxIndicator>
-          <Check aria-hidden />
-        </CheckboxIndicator>
-        <CheckboxIndeterminateIndicator>
-          <Minus aria-hidden />
-        </CheckboxIndeterminateIndicator>
-      </Checkbox>
-      <Checkbox aria-label="Indeterminate" indeterminate>
-        <CheckboxIndicator>
-          <Check aria-hidden />
-        </CheckboxIndicator>
-        <CheckboxIndeterminateIndicator>
-          <Minus aria-hidden />
-        </CheckboxIndeterminateIndicator>
-      </Checkbox>
-      <Checkbox aria-label="Disabled" disabled>
-        <CheckboxIndicator>
-          <Check aria-hidden />
-        </CheckboxIndicator>
-        <CheckboxIndeterminateIndicator>
-          <Minus aria-hidden />
-        </CheckboxIndeterminateIndicator>
-      </Checkbox>
-      <Checkbox aria-label="Error" data-invalid="">
-        <CheckboxIndicator>
-          <Check aria-hidden />
-        </CheckboxIndicator>
-        <CheckboxIndeterminateIndicator>
-          <Minus aria-hidden />
-        </CheckboxIndeterminateIndicator>
-      </Checkbox>
-    </div>
-  ),
-};
-
-/**
- * Interaction test: the resting box is empty, the checked box mounts its indicator, and the
- * `data-invalid` box recolors its border to danger. Tagged out of the sidebar/docs/manifest while
- * still running under the default `test` tag.
- */
-export const StatesInteraction: Story = {
-  ...States,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas }) => {
-    const [unchecked, checked, , , error] = 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();
-    // The `data-invalid` host state recolors the box border to danger (differs from resting).
-    await expect(error).toHaveAttribute("data-invalid");
-    await expect(getComputedStyle(error).borderColor).not.toBe(
-      getComputedStyle(unchecked).borderColor,
-    );
-  },
-};
-
-/**
- * A labeled row assembled from the atomic parts: a `CheckboxLabel` chip wrapping the box, an
- * optional `CheckboxInlineStartNode` icon slot, and the text. The label is associated with the box
- * via `htmlFor`, so clicking anywhere in the row toggles the box.
- */
-export const Labeled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <CheckboxLabel htmlFor="ui-checkbox-labeled">
-      <Checkbox id="ui-checkbox-labeled">
-        <CheckboxIndicator>
-          <Check aria-hidden />
-        </CheckboxIndicator>
-        <CheckboxIndeterminateIndicator>
-          <Minus aria-hidden />
-        </CheckboxIndeterminateIndicator>
-      </Checkbox>
-      <CheckboxInlineStartNode>
-        <Repeat aria-hidden />
-      </CheckboxInlineStartNode>
-      Sync automatically
-    </CheckboxLabel>
-  ),
-};
-
-/**
- * Interaction test: clicking the label text toggles the associated box. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
- * sees the tick flip on its own.
- */
-export const LabeledInteraction: Story = {
-  ...Labeled,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas, userEvent }) => {
-    const box = canvas.getByRole("checkbox");
-    await expect(box).toHaveAttribute("aria-checked", "false");
-    // Clicking the label text toggles the associated box.
-    await userEvent.click(canvas.getByText("Sync automatically"));
-    await expect(box).toHaveAttribute("aria-checked", "true");
-  },
-};
diff --git a/packages/propel/src/ui/checkbox/checkbox.tsx b/packages/propel/src/ui/checkbox/checkbox.tsx
deleted file mode 100644
index 5a413063..00000000
--- a/packages/propel/src/ui/checkbox/checkbox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-
-import { checkboxVariants, type CheckboxVariantProps } from "./variants";
-
-export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"> &
-  CheckboxVariantProps;
-
-/**
- * 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>`. The danger look is a STATE, not a prop: inside an invalid `Field.Root`,
- * Base UI propagates `data-invalid` here and the box recolors its border to `danger`.
- */
-export function Checkbox(props: CheckboxProps) {
-  return <BaseCheckbox.Root className={checkboxVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/checkbox/index.tsx b/packages/propel/src/ui/checkbox/index.tsx
deleted file mode 100644
index a522a1e1..00000000
--- a/packages/propel/src/ui/checkbox/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./checkbox";
-export * from "./checkbox-indicator";
-export * from "./checkbox-indeterminate-indicator";
-export * from "./checkbox-label";
-export * from "./checkbox-inline-start-node";
diff --git a/packages/propel/src/ui/checkbox/variants.ts b/packages/propel/src/ui/checkbox/variants.ts
deleted file mode 100644
index 235ac4cf..00000000
--- a/packages/propel/src/ui/checkbox/variants.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { checkboxBoxVariants } from "../../internal/checkbox-box";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// The box look lives in `internal/checkbox-box` so it can be shared with the menu's checkbox
-// indicator (rule 4). `Checkbox` renders it directly — same signature, so delegate to it.
-export const checkboxVariants = checkboxBoxVariants;
-
-export type CheckboxVariantProps = StrictVariantProps<typeof checkboxVariants>;
-
-// the CHECK indicator: shown when checked, hidden when indeterminate
-export const checkboxIndicatorVariants = cva(
-  cx(nodeSlotClass, "text-current", "data-indeterminate:hidden"),
-);
-// the INDETERMINATE (dash) indicator: a second Checkbox.Indicator that shows ONLY when indeterminate.
-// NOTE: do NOT use nodeSlotClass here — its bare `inline-flex` would fight the default `hidden`.
-// Spell out the node sizing + center, default hidden, reveal on data-indeterminate:
-export const checkboxIndeterminateIndicatorVariants = cva(
-  cx(
-    "hidden items-center justify-center data-indeterminate:inline-flex [&>img]:size-(--node-size) [&>svg]:size-(--node-size)",
-    "text-current",
-  ),
-);
-
-// The clickable label row that wraps the box + optional icon + label text. The row reads its
-// disabled state off the wrapped `Checkbox` (Base UI — and `Field.Root` — set `data-disabled` on
-// it) via `:has()`, so it needs no `disabled` prop: it cancels the hover background and shows the
-// not-allowed cursor whenever a descendant is disabled.
-export const checkboxLabelVariants = cva(
-  cx(
-    "inline-flex items-center gap-2 rounded-sm px-2 py-1",
-    "text-13 text-secondary transition-colors",
-    "cursor-pointer not-has-[[data-disabled]]:hover:bg-layer-transparent-hover has-[[data-disabled]]:cursor-not-allowed",
-  ),
-);
-
-// The inline-start icon slot between the box and the label text.
-export const checkboxInlineStartNodeVariants = cva(
-  cx(nodeSlotClass, "text-icon-secondary [--node-size:0.875rem]"),
-);
diff --git a/packages/propel/src/ui/circular-progress/circular-progress-indicator.tsx b/packages/propel/src/ui/circular-progress/circular-progress-indicator.tsx
deleted file mode 100644
index 336c3813..00000000
--- a/packages/propel/src/ui/circular-progress/circular-progress-indicator.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type * as React from "react";
-
-import {
-  type CircularProgressIndicatorVariantProps,
-  circularProgressIndicatorVariants,
-} from "./variants";
-
-/** Props for {@link CircularProgressIndicator}. */
-export type CircularProgressIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"circle">,
-  "className" | "style"
-> &
-  CircularProgressIndicatorVariantProps;
-
-/**
- * The toned arc proportional to the value (the circular analogue of `ProgressIndicator`). `tone`
- * drives the stroke color. Pass the geometry (`cx` / `cy` / `r` / `strokeWidth` / `strokeDasharray`
- * / `strokeDashoffset` / `strokeLinecap`) as SVG attributes.
- */
-export function CircularProgressIndicator({ tone, ...props }: CircularProgressIndicatorProps) {
-  return <circle className={circularProgressIndicatorVariants({ tone })} {...props} />;
-}
diff --git a/packages/propel/src/ui/circular-progress/circular-progress-svg.tsx b/packages/propel/src/ui/circular-progress/circular-progress-svg.tsx
deleted file mode 100644
index 4f14aee2..00000000
--- a/packages/propel/src/ui/circular-progress/circular-progress-svg.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type * as React from "react";
-
-import { circularProgressSvgVariants } from "./variants";
-
-/** Props for {@link CircularProgressSvg}. */
-export type CircularProgressSvgProps = Omit<
-  React.ComponentPropsWithoutRef<"svg">,
-  "className" | "style"
-> & {
-  /**
-   * The ring's circles — a `CircularProgressTrack` and a `CircularProgressIndicator`; size the
-   * coordinate system via the `viewBox` attribute.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The SVG viewport of the circular ring. Fills its `CircularProgress` box and holds the
- * `CircularProgressTrack` + `CircularProgressIndicator` circles. Decorative (the `CircularProgress`
- * root carries the `progressbar` a11y), so it is `aria-hidden`. Pass a `viewBox` matching the ring
- * box so one SVG user unit equals one pixel.
- */
-export function CircularProgressSvg(props: CircularProgressSvgProps) {
-  return (
-    <svg aria-hidden="true" fill="none" className={circularProgressSvgVariants()} {...props} />
-  );
-}
diff --git a/packages/propel/src/ui/circular-progress/circular-progress-track.tsx b/packages/propel/src/ui/circular-progress/circular-progress-track.tsx
deleted file mode 100644
index fa1ae961..00000000
--- a/packages/propel/src/ui/circular-progress/circular-progress-track.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type * as React from "react";
-
-import { circularProgressTrackVariants } from "./variants";
-
-/** Props for {@link CircularProgressTrack}. */
-export type CircularProgressTrackProps = Omit<
-  React.ComponentPropsWithoutRef<"circle">,
-  "className" | "style"
-> & {
-  /**
-   * Optional inline SVG (e.g. a `<title>`); the ring geometry is passed via the `cx` / `cy` / `r` /
-   * `strokeWidth` attributes.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The full subtle ring behind the arc (the circular analogue of `ProgressTrack`). Pass the geometry
- * (`cx` / `cy` / `r` / `strokeWidth`) as SVG attributes; the low-emphasis stroke color is baked
- * in.
- */
-export function CircularProgressTrack(props: CircularProgressTrackProps) {
-  return <circle className={circularProgressTrackVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/circular-progress/circular-progress.stories.tsx b/packages/propel/src/ui/circular-progress/circular-progress.stories.tsx
deleted file mode 100644
index 35a0da07..00000000
--- a/packages/propel/src/ui/circular-progress/circular-progress.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import {
-  CircularProgress,
-  CircularProgressIndicator,
-  CircularProgressSvg,
-  CircularProgressTrack,
-} from "./index";
-
-// UI-tier parts of the determinate ring. The ready-made `CircularProgress` (Components/CircularProgress)
-// composes these with the geometry math; here they are assembled by hand.
-const meta = {
-  title: "UI/CircularProgress",
-  component: CircularProgress,
-  subcomponents: { CircularProgressSvg, CircularProgressTrack, CircularProgressIndicator },
-  args: { value: 60, "aria-label": "Progress", magnitude: "md" },
-} satisfies Meta<typeof CircularProgress>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <CircularProgress {...args}>
-      <CircularProgressSvg viewBox="0 0 20 20">
-        <CircularProgressTrack cx={10} cy={10} r={8} strokeWidth={2} />
-        <CircularProgressIndicator
-          tone="brand"
-          cx={10}
-          cy={10}
-          r={8}
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeDasharray={2 * Math.PI * 8}
-          strokeDashoffset={2 * Math.PI * 8 * 0.4}
-        />
-      </CircularProgressSvg>
-    </CircularProgress>
-  ),
-};
diff --git a/packages/propel/src/ui/circular-progress/circular-progress.tsx b/packages/propel/src/ui/circular-progress/circular-progress.tsx
deleted file mode 100644
index edf7418f..00000000
--- a/packages/propel/src/ui/circular-progress/circular-progress.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-import { type CircularProgressVariantProps, circularProgressVariants } from "./variants";
-
-/** Props for {@link CircularProgress}. */
-export type CircularProgressProps = Omit<BaseProgress.Root.Props, "className" | "style"> &
-  CircularProgressVariantProps;
-
-/**
- * The circular ring root — a styled Base UI `Progress.Root` that sizes the ring box (`magnitude`
- * `sm` 16px / `md` 20px) and owns the `progressbar` role + `aria-valuenow`. Compose a
- * `CircularProgressSvg` (holding `CircularProgressTrack` + `CircularProgressIndicator`) inside it.
- */
-export function CircularProgress({ magnitude, ...props }: CircularProgressProps) {
-  return <BaseProgress.Root className={circularProgressVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/circular-progress/variants.ts b/packages/propel/src/ui/circular-progress/variants.ts
deleted file mode 100644
index c973f1e4..00000000
--- a/packages/propel/src/ui/circular-progress/variants.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { cva } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/**
- * Circular ring root variants. `magnitude` sets the diameter of the ring box. The arc and track
- * circles fill the box; geometry (radius, dash) is passed to those parts as SVG attributes.
- */
-export const circularProgressVariants = cva("shrink-0", {
-  variants: {
-    magnitude: { sm: "size-4", md: "size-5" },
-  },
-});
-
-/** The circular ring's SVG viewport. Fills its `CircularProgress` box. */
-export const circularProgressSvgVariants = cva("block size-full");
-
-/**
- * The full subtle ring behind the arc. Strokes with the same `layer-3-selected` surface token the
- * linear track fills with, so both read as the same low-emphasis track and re-tint together.
- */
-export const circularProgressTrackVariants = cva("[stroke:var(--bg-layer-3-selected)]");
-
-/**
- * The toned arc proportional to the value, with rounded caps. `tone` drives the stroke color. The
- * arc starts at 12 o'clock (`-rotate-90`, `origin-center` so the sweep stays clockwise in RTL). The
- * dash offset (the value model) is passed as an SVG attribute.
- */
-export const circularProgressIndicatorVariants = cva(
-  "origin-center -rotate-90 transition-[stroke-dashoffset] duration-300 ease-out",
-  {
-    variants: {
-      tone: {
-        brand: "[stroke:var(--bg-accent-primary)]",
-        success: "[stroke:var(--bg-success-primary)]",
-        warning: "[stroke:var(--bg-warning-primary)]",
-        danger: "[stroke:var(--bg-danger-primary)]",
-      },
-    },
-  },
-);
-
-export type CircularProgressVariantProps = StrictVariantProps<typeof circularProgressVariants>;
-export type CircularProgressIndicatorVariantProps = StrictVariantProps<
-  typeof circularProgressIndicatorVariants
->;
diff --git a/packages/propel/src/ui/collapsible/collapsible-panel-content.tsx b/packages/propel/src/ui/collapsible/collapsible-panel-content.tsx
deleted file mode 100644
index e63e6460..00000000
--- a/packages/propel/src/ui/collapsible/collapsible-panel-content.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { collapsiblePanelContentVariants } from "./variants";
-
-export type CollapsiblePanelContentProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The panel's inner content shown while expanded. */
-  children?: React.ReactNode;
-};
-
-/**
- * The padded inner content of a `CollapsiblePanel`. The padding lives here rather than on the panel
- * itself, because the panel animates its height open/closed and padding there would offset the
- * measured height.
- */
-export function CollapsiblePanelContent(props: CollapsiblePanelContentProps) {
-  return <div className={collapsiblePanelContentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/collapsible/collapsible-panel.tsx b/packages/propel/src/ui/collapsible/collapsible-panel.tsx
deleted file mode 100644
index a37fad66..00000000
--- a/packages/propel/src/ui/collapsible/collapsible-panel.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
-
-import { collapsiblePanelVariants } from "./variants";
-
-export type CollapsiblePanelProps = Omit<BaseCollapsible.Panel.Props, "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-indicator.tsx b/packages/propel/src/ui/collapsible/collapsible-trigger-indicator.tsx
deleted file mode 100644
index 02fa04df..00000000
--- a/packages/propel/src/ui/collapsible/collapsible-trigger-indicator.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type * as React from "react";
-
-import { collapsibleTriggerIndicatorVariants } from "./variants";
-
-export type CollapsibleTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /**
-   * The disclosure caret to render (e.g. a Lucide `ChevronDown`), sized to the trigger's
-   * `--node-size`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The disclosure caret slot at the trigger's inline-end. Renders whatever svg you pass (sized to
- * the trigger's `--node-size`) and flips it 180° when the panel opens. Decorative — the trigger
- * carries the a11y state — so it is `aria-hidden`.
- */
-export function CollapsibleTriggerIndicator(props: CollapsibleTriggerIndicatorProps) {
-  return <span aria-hidden className={collapsibleTriggerIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/collapsible/collapsible-trigger-title.tsx b/packages/propel/src/ui/collapsible/collapsible-trigger-title.tsx
deleted file mode 100644
index 02c2ee14..00000000
--- a/packages/propel/src/ui/collapsible/collapsible-trigger-title.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { collapsibleTriggerTitleVariants } from "./variants";
-
-export type CollapsibleTriggerTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The trigger's label text. */
-  children?: React.ReactNode;
-};
-
-/**
- * The trigger's label. Grows to fill the trigger row so a trailing `CollapsibleTriggerIndicator`
- * sits at the inline-end edge.
- */
-export function CollapsibleTriggerTitle(props: CollapsibleTriggerTitleProps) {
-  return <span className={collapsibleTriggerTitleVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/collapsible/collapsible-trigger.tsx b/packages/propel/src/ui/collapsible/collapsible-trigger.tsx
deleted file mode 100644
index 8db945e5..00000000
--- a/packages/propel/src/ui/collapsible/collapsible-trigger.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
-
-import { collapsibleTriggerVariants } from "./variants";
-
-export type CollapsibleTriggerProps = Omit<BaseCollapsible.Trigger.Props, "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
deleted file mode 100644
index c92e4dbe..00000000
--- a/packages/propel/src/ui/collapsible/collapsible.stories.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronDown } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Collapsible,
-  CollapsiblePanel,
-  CollapsiblePanelContent,
-  CollapsibleTrigger,
-  CollapsibleTriggerIndicator,
-  CollapsibleTriggerTitle,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC collapsible parts (Root › Trigger / Panel). Each part renders a
-// single element and owns its own chrome (no `className` at the boundary), so the trigger lays its
-// title and indicator out itself and the panel insets its content via `CollapsiblePanelContent`. The
-// components-tier `Collapsible` story shows the ready-made `<Collapsible trigger=…>` wrapper.
-const meta = {
-  title: "UI/Collapsible",
-  component: Collapsible,
-  subcomponents: {
-    CollapsibleTrigger,
-    CollapsibleTriggerTitle,
-    CollapsibleTriggerIndicator,
-    CollapsiblePanel,
-    CollapsiblePanelContent,
-  },
-  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 (title + indicator), plus Panel › PanelContent. */
-export const Default: Story = {
-  render: () => (
-    <Collapsible>
-      <CollapsibleTrigger>
-        <CollapsibleTriggerTitle>Recent activity</CollapsibleTriggerTitle>
-        <CollapsibleTriggerIndicator>
-          <ChevronDown />
-        </CollapsibleTriggerIndicator>
-      </CollapsibleTrigger>
-      <CollapsiblePanel>
-        <CollapsiblePanelContent>3 work items updated in the last hour.</CollapsiblePanelContent>
-      </CollapsiblePanel>
-    </Collapsible>
-  ),
-};
-
-/** `defaultOpen` renders the panel expanded on mount. */
-export const DefaultOpen: Story = {
-  render: () => (
-    <Collapsible defaultOpen>
-      <CollapsibleTrigger>
-        <CollapsibleTriggerTitle>Description</CollapsibleTriggerTitle>
-        <CollapsibleTriggerIndicator>
-          <ChevronDown />
-        </CollapsibleTriggerIndicator>
-      </CollapsibleTrigger>
-      <CollapsiblePanel>
-        <CollapsiblePanelContent>
-          The roadmap groups upcoming work into quarterly milestones.
-        </CollapsiblePanelContent>
-      </CollapsiblePanel>
-    </Collapsible>
-  ),
-};
-
-/** Without an indicator — the trigger is adjustable content; the indicator is optional. */
-export const WithoutIndicator: Story = {
-  render: () => (
-    <Collapsible>
-      <CollapsibleTrigger>
-        <CollapsibleTriggerTitle>Toggle section</CollapsibleTriggerTitle>
-      </CollapsibleTrigger>
-      <CollapsiblePanel>
-        <CollapsiblePanelContent>Content with no caret in the trigger.</CollapsiblePanelContent>
-      </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>
-        <CollapsibleTriggerTitle>Toggle</CollapsibleTriggerTitle>
-      </CollapsibleTrigger>
-      <CollapsiblePanel>
-        <CollapsiblePanelContent>Panel content</CollapsiblePanelContent>
-      </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
deleted file mode 100644
index ea041e1e..00000000
--- a/packages/propel/src/ui/collapsible/collapsible.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
-
-export type CollapsibleProps = Omit<BaseCollapsible.Root.Props, "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
deleted file mode 100644
index b9fc79bf..00000000
--- a/packages/propel/src/ui/collapsible/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./collapsible";
-export * from "./collapsible-panel";
-export * from "./collapsible-panel-content";
-export * from "./collapsible-trigger";
-export * from "./collapsible-trigger-indicator";
-export * from "./collapsible-trigger-title";
diff --git a/packages/propel/src/ui/collapsible/variants.ts b/packages/propel/src/ui/collapsible/variants.ts
deleted file mode 100644
index f287ded7..00000000
--- a/packages/propel/src/ui/collapsible/variants.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-
-// 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 gap-2 text-start [--node-size:1rem]",
-    "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",
-  ),
-);
-
-// The trigger's growing label. `flex-1` fills the row so a trailing
-// `CollapsibleTriggerIndicator` sits at the inline-end edge; `min-w-0` lets a long
-// label wrap/shrink instead of overflowing.
-export const collapsibleTriggerTitleVariants = cva("min-w-0 flex-1 text-start");
-
-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",
-  ),
-);
-
-// The padded inner content of a panel. Padding lives here, never on the
-// height-animating `CollapsiblePanel` (padding there would offset the measured
-// open/close height and jump the transition).
-export const collapsiblePanelContentVariants = cva("pt-2");
-
-// The disclosure caret at the trigger's inline-end. Per Figma the caret (a
-// chevron-down) points down at rest and flips up when the panel opens. Base UI
-// sets `data-panel-open` on the trigger which carries the `group` class. Single-
-// element slot — callers pass any svg and it is sized to `--node-size`.
-export const collapsibleTriggerIndicatorVariants = cva(
-  cx(
-    nodeSlotClass,
-    "text-icon-secondary",
-    "transition-transform duration-200",
-    "group-data-panel-open:rotate-180",
-  ),
-);
diff --git a/packages/propel/src/ui/combobox/combobox-clear.tsx b/packages/propel/src/ui/combobox/combobox-clear.tsx
deleted file mode 100644
index 05dc8830..00000000
--- a/packages/propel/src/ui/combobox/combobox-clear.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-export type ComboboxClearProps = Omit<BaseCombobox.Clear.Props, "className" | "style">;
-
-/**
- * A behavior wrapper that clears the combobox value when activated. Use as the `render` target of
- * an `IconButton` so the styled primitive's look wins via render-composition:
- *
- * ```tsx
- * <IconButton
- *   prominence="ghost"
- *   tone="neutral"
- *   magnitude="md"
- *   aria-label="Clear"
- *   render={<ComboboxClear />}
- * >
- *   <IconButtonIcon>
- *     <X />
- *   </IconButtonIcon>
- * </IconButton>;
- * ```
- *
- * Maps 1:1 to `Combobox.Clear`.
- */
-export function ComboboxClear(props: ComboboxClearProps) {
-  return <BaseCombobox.Clear {...props} />;
-}
diff --git a/packages/propel/src/ui/combobox/combobox-empty.tsx b/packages/propel/src/ui/combobox/combobox-empty.tsx
deleted file mode 100644
index 2724d14f..00000000
--- a/packages/propel/src/ui/combobox/combobox-empty.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxEmptyVariants } from "./variants";
-
-export type ComboboxEmptyProps = Omit<BaseCombobox.Empty.Props, "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
deleted file mode 100644
index 5428c9e0..00000000
--- a/packages/propel/src/ui/combobox/combobox-input-group.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxInputGroupVariants } from "./variants";
-
-export type ComboboxInputGroupProps = Omit<BaseCombobox.InputGroup.Props, "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
deleted file mode 100644
index e0ecc65e..00000000
--- a/packages/propel/src/ui/combobox/combobox-input.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxInputVariants } from "./variants";
-
-export type ComboboxInputProps = Omit<BaseCombobox.Input.Props, "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
deleted file mode 100644
index a9eeb50e..00000000
--- a/packages/propel/src/ui/combobox/combobox-item-indicator.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxItemIndicatorVariants } from "./variants";
-
-export type ComboboxItemIndicatorProps = Omit<
-  BaseCombobox.ItemIndicator.Props,
-  "className" | "style"
->;
-
-export function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {
-  return <BaseCombobox.ItemIndicator className={comboboxItemIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/combobox/combobox-item.tsx b/packages/propel/src/ui/combobox/combobox-item.tsx
deleted file mode 100644
index 3eb72a1b..00000000
--- a/packages/propel/src/ui/combobox/combobox-item.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxItemVariants } from "./variants";
-
-export type ComboboxItemProps = Omit<BaseCombobox.Item.Props, "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
deleted file mode 100644
index a7308188..00000000
--- a/packages/propel/src/ui/combobox/combobox-label.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxLabelVariants } from "./variants";
-
-export type ComboboxLabelProps = Omit<BaseCombobox.Label.Props, "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
deleted file mode 100644
index 07b5d356..00000000
--- a/packages/propel/src/ui/combobox/combobox-list.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-export type ComboboxListProps = Omit<BaseCombobox.List.Props, "className" | "style">;
-
-export function ComboboxList(props: ComboboxListProps) {
-  return <BaseCombobox.List {...props} />;
-}
diff --git a/packages/propel/src/ui/combobox/combobox-popup.tsx b/packages/propel/src/ui/combobox/combobox-popup.tsx
deleted file mode 100644
index 47c6843b..00000000
--- a/packages/propel/src/ui/combobox/combobox-popup.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxPopupVariants } from "./variants";
-
-export type ComboboxPopupProps = Omit<BaseCombobox.Popup.Props, "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
deleted file mode 100644
index 99c30dd3..00000000
--- a/packages/propel/src/ui/combobox/combobox-portal.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-export type ComboboxPortalProps = Omit<BaseCombobox.Portal.Props, "className" | "style">;
-
-export function ComboboxPortal(props: ComboboxPortalProps) {
-  return <BaseCombobox.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/combobox/combobox-positioner.tsx b/packages/propel/src/ui/combobox/combobox-positioner.tsx
deleted file mode 100644
index b6678679..00000000
--- a/packages/propel/src/ui/combobox/combobox-positioner.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-import { comboboxPositionerVariants } from "./variants";
-
-export type ComboboxPositionerProps = Omit<BaseCombobox.Positioner.Props, "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
deleted file mode 100644
index 2f314aa9..00000000
--- a/packages/propel/src/ui/combobox/combobox-trigger.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-
-export type ComboboxTriggerProps = Omit<BaseCombobox.Trigger.Props, "className" | "style">;
-
-/**
- * A behavior wrapper that opens the combobox popup when activated. Use as the `render` target of an
- * `IconButton` so the styled primitive's look wins via render-composition:
- *
- * ```tsx
- * <IconButton
- *   prominence="ghost"
- *   tone="neutral"
- *   magnitude="md"
- *   aria-label="Open"
- *   render={<ComboboxTrigger />}
- * >
- *   <IconButtonIcon>
- *     <ChevronsUpDown />
- *   </IconButtonIcon>
- * </IconButton>;
- * ```
- *
- * Maps 1:1 to `Combobox.Trigger`.
- */
-export function ComboboxTrigger(props: ComboboxTriggerProps) {
-  return <BaseCombobox.Trigger {...props} />;
-}
diff --git a/packages/propel/src/ui/combobox/combobox.stories.tsx b/packages/propel/src/ui/combobox/combobox.stories.tsx
deleted file mode 100644
index 73b75587..00000000
--- a/packages/propel/src/ui/combobox/combobox.stories.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, ChevronsUpDown, X } from "lucide-react";
-import { expect, within } from "storybook/test";
-
-import { Field, FieldError, FieldLabel } from "../field/index";
-import { IconButton, IconButtonIcon } from "../icon-button";
-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" inset={false}>
-          Region
-        </FieldLabel>
-        <ComboboxInputGroup>
-          <ComboboxInput placeholder="e.g. eu-central-1" />
-          <ComboboxClear
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Clear region"
-              >
-                <IconButtonIcon>
-                  <X />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-          <ComboboxTrigger
-            render={
-              <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
-                <IconButtonIcon>
-                  <ChevronsUpDown />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-        </ComboboxInputGroup>
-        <ComboboxPortal>
-          <ComboboxPositioner>
-            <ComboboxPopup>
-              <ComboboxEmpty>No matches</ComboboxEmpty>
-              <ComboboxList>
-                {REGIONS.map((region) => (
-                  <ComboboxItem key={region} value={region}>
-                    <ComboboxItemIndicator>
-                      <Check aria-hidden />
-                    </ComboboxItemIndicator>
-                    <span>{region}</span>
-                  </ComboboxItem>
-                ))}
-              </ComboboxList>
-            </ComboboxPopup>
-          </ComboboxPositioner>
-        </ComboboxPortal>
-        <FieldError magnitude="md" />
-      </Combobox>
-    </Field>
-  ),
-};
-
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas, userEvent }) => {
-    await userEvent.type(canvas.getByRole("combobox", { name: "Region" }), "eu");
-    await expect(within(document.body).getByText("eu-central-1")).toBeInTheDocument();
-  },
-};
-
-/**
- * An invalid field: `Field.Root invalid` propagates `data-invalid` to the input, and the input
- * group recolors its border to `danger` off `:has([data-invalid])` — no `tone` prop required.
- */
-export const Invalid: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { items: REGIONS, required: true },
-  render: (args) => (
-    <Field name="region" invalid>
-      <Combobox {...args}>
-        <FieldLabel magnitude="md" inset={false}>
-          Region
-        </FieldLabel>
-        <ComboboxInputGroup>
-          <ComboboxInput placeholder="e.g. eu-central-1" />
-          <ComboboxClear
-            render={
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="md"
-                aria-label="Clear region"
-              >
-                <IconButtonIcon>
-                  <X />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-          <ComboboxTrigger
-            render={
-              <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
-                <IconButtonIcon>
-                  <ChevronsUpDown />
-                </IconButtonIcon>
-              </IconButton>
-            }
-          />
-        </ComboboxInputGroup>
-        <FieldError magnitude="md" match={true}>
-          Choose a deployment region.
-        </FieldError>
-      </Combobox>
-    </Field>
-  ),
-  play: async ({ canvas }) => {
-    const input = canvas.getByRole("combobox", { name: "Region" });
-    await expect(input).toHaveAttribute("aria-invalid", "true");
-    await expect(input).toHaveAttribute("data-invalid");
-    // The wrapping input group recolors its border off `:has([data-invalid])`.
-    const group = input.closest<HTMLElement>(":has([data-invalid])");
-    await expect(group).toHaveClass("has-[[data-invalid]]:border-danger-strong");
-  },
-};
diff --git a/packages/propel/src/ui/combobox/combobox.tsx b/packages/propel/src/ui/combobox/combobox.tsx
deleted file mode 100644
index d487cb85..00000000
--- a/packages/propel/src/ui/combobox/combobox.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 0a3f090f..00000000
--- a/packages/propel/src/ui/combobox/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export * from "./combobox";
-export * from "./combobox-clear";
-export * from "./combobox-empty";
-export * from "./combobox-input";
-export * from "./combobox-input-group";
-export * from "./combobox-item";
-export * from "./combobox-item-indicator";
-export * from "./combobox-label";
-export * from "./combobox-list";
-export * from "./combobox-popup";
-export * from "./combobox-portal";
-export * from "./combobox-positioner";
-export * from "./combobox-trigger";
diff --git a/packages/propel/src/ui/combobox/variants.ts b/packages/propel/src/ui/combobox/variants.ts
deleted file mode 100644
index b146fed0..00000000
--- a/packages/propel/src/ui/combobox/variants.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-
-export const comboboxLabelVariants = cva("text-14 font-medium text-primary");
-export const comboboxInputGroupVariants = cva(
-  cx(
-    // Wraps a separate focusable input → `focus: within`.
-    fieldControlSurfaceVariants({ focus: "within" }),
-    "flex min-h-9 min-w-64 items-center gap-2 rounded-md px-3",
-    "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 comboboxItemIndicatorVariants = cva(
-  cx("flex size-4 items-center justify-center [&>svg]:size-4"),
-);
-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
deleted file mode 100644
index fb5f5197..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-arrow.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuArrowVariants } from "./variants";
-
-export type ContextMenuArrowProps = Omit<BaseContextMenu.Arrow.Props, "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
deleted file mode 100644
index 7e4a9ed2..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-backdrop.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-export type ContextMenuBackdropProps = Omit<BaseContextMenu.Backdrop.Props, "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
deleted file mode 100644
index d67e9730..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-checkbox-item-indicator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuItemIndicatorVariants } from "./variants";
-
-export type ContextMenuCheckboxItemIndicatorProps = Omit<
-  BaseContextMenu.CheckboxItemIndicator.Props,
-  "className" | "style"
->;
-
-/**
- * Shows whether the checkbox item is ticked. Sizes its single child (the tick icon) to the row's
- * `--node-size`. Wraps `ContextMenu.CheckboxItemIndicator` 1:1.
- */
-export function ContextMenuCheckboxItemIndicator(props: ContextMenuCheckboxItemIndicatorProps) {
-  return (
-    <BaseContextMenu.CheckboxItemIndicator
-      className={contextMenuItemIndicatorVariants()}
-      {...props}
-    />
-  );
-}
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
deleted file mode 100644
index 06ad8fb9..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-checkbox-item.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
-
-export type ContextMenuCheckboxItemProps = Omit<
-  BaseContextMenu.CheckboxItem.Props,
-  "className" | "style"
-> &
-  ContextMenuItemVariantProps;
-
-/** A menu row that toggles a setting on or off. Wraps `ContextMenu.CheckboxItem` 1:1. */
-export function ContextMenuCheckboxItem({ tone, ...props }: ContextMenuCheckboxItemProps) {
-  return <BaseContextMenu.CheckboxItem className={contextMenuItemVariants({ tone })} {...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
deleted file mode 100644
index 11d3f74f..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-group-label.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuGroupLabelVariants } from "./variants";
-
-export type ContextMenuGroupLabelProps = Omit<
-  BaseContextMenu.GroupLabel.Props,
-  "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
deleted file mode 100644
index 14d2c38f..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-group.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-export type ContextMenuGroupProps = Omit<BaseContextMenu.Group.Props, "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-icon.tsx b/packages/propel/src/ui/context-menu/context-menu-item-icon.tsx
deleted file mode 100644
index e2fb4bab..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-item-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { contextMenuItemIconVariants } from "./variants";
-
-export type ContextMenuItemIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render, sized to the row's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The leading icon region of a menu row. Sizes its single child to the row's `--node-size`, so
- * callers pass a bare icon. Decorative (the row's label carries the accessible name), so it is
- * `aria-hidden`.
- */
-export function ContextMenuItemIcon(props: ContextMenuItemIconProps) {
-  return <span aria-hidden className={contextMenuItemIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/context-menu/context-menu-item-indicator.tsx b/packages/propel/src/ui/context-menu/context-menu-item-indicator.tsx
deleted file mode 100644
index cb5ed330..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-item-indicator.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { contextMenuItemIndicatorVariants } from "./variants";
-
-export type ContextMenuItemIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The check glyph to render (e.g. a Lucide `Check`), sized to the row's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The trailing selection-check region of a single-select `ContextMenuItem`. Sizes its single child
- * to the row's `--node-size` and tints it accent. Decorative (the row carries the selected state),
- * so it is `aria-hidden`.
- */
-export function ContextMenuItemIndicator(props: ContextMenuItemIndicatorProps) {
-  return <span aria-hidden className={contextMenuItemIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/context-menu/context-menu-item-label.tsx b/packages/propel/src/ui/context-menu/context-menu-item-label.tsx
deleted file mode 100644
index 0f67abe5..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-item-label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { contextMenuItemLabelVariants } from "./variants";
-
-export type ContextMenuItemLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The row's label text. */
-  children?: React.ReactNode;
-};
-
-/**
- * The label region of a menu row. Grows to fill the row so trailing regions (shortcut, indicator,
- * submenu caret) sit at the inline-end; truncates rather than overflowing.
- */
-export function ContextMenuItemLabel(props: ContextMenuItemLabelProps) {
-  return <span className={contextMenuItemLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/context-menu/context-menu-item-shortcut.tsx b/packages/propel/src/ui/context-menu/context-menu-item-shortcut.tsx
deleted file mode 100644
index c2c21308..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-item-shortcut.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { contextMenuItemShortcutVariants } from "./variants";
-
-export type ContextMenuItemShortcutProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The keyboard-shortcut hint text (e.g. `⌘C`). */
-  children?: React.ReactNode;
-};
-
-/**
- * The keyboard-shortcut text region of a menu row, sitting at the row's inline-end. Decorative hint
- * (the row's label carries the accessible name), so it is `aria-hidden`.
- */
-export function ContextMenuItemShortcut(props: ContextMenuItemShortcutProps) {
-  return <span aria-hidden className={contextMenuItemShortcutVariants()} {...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
deleted file mode 100644
index a161bc70..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-item.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
-
-export type ContextMenuItemProps = Omit<BaseContextMenu.Item.Props, "className" | "style"> &
-  ContextMenuItemVariantProps;
-
-/** An interactive menu row. Wraps `ContextMenu.Item` 1:1. */
-export function ContextMenuItem({ tone, ...props }: ContextMenuItemProps) {
-  return <BaseContextMenu.Item className={contextMenuItemVariants({ tone })} {...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
deleted file mode 100644
index 7beff7e7..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-link-item.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
-
-export type ContextMenuLinkItemProps = Omit<BaseContextMenu.LinkItem.Props, "className" | "style"> &
-  ContextMenuItemVariantProps;
-
-/** A navigational `<a>` menu row. Wraps `ContextMenu.LinkItem` 1:1. */
-export function ContextMenuLinkItem({ tone, ...props }: ContextMenuLinkItemProps) {
-  return <BaseContextMenu.LinkItem className={contextMenuItemVariants({ tone })} {...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
deleted file mode 100644
index 16b106db..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-popup.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuPopupVariants } from "./variants";
-
-export type ContextMenuPopupProps = Omit<BaseContextMenu.Popup.Props, "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
deleted file mode 100644
index 158ab85c..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-portal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-export type ContextMenuPortalProps = Omit<BaseContextMenu.Portal.Props, "className" | "style">;
-
-/** Portals the popup out to `<body>` by default. Re-exports `ContextMenu.Portal` 1:1. */
-export function ContextMenuPortal(props: ContextMenuPortalProps) {
-  return <BaseContextMenu.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/context-menu/context-menu-positioner.tsx b/packages/propel/src/ui/context-menu/context-menu-positioner.tsx
deleted file mode 100644
index 61cfb778..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-positioner.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuPositionerVariants } from "./variants";
-
-export type ContextMenuPositionerProps = Omit<
-  BaseContextMenu.Positioner.Props,
-  "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-item-indicator.tsx b/packages/propel/src/ui/context-menu/context-menu-radio-item-indicator.tsx
deleted file mode 100644
index 545e6eb8..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-radio-item-indicator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuItemIndicatorVariants } from "./variants";
-
-export type ContextMenuRadioItemIndicatorProps = Omit<
-  BaseContextMenu.RadioItemIndicator.Props,
-  "className" | "style"
->;
-
-/**
- * Shows whether the radio item is selected. Sizes its single child (the selection icon) to the
- * row's `--node-size`. Wraps `ContextMenu.RadioItemIndicator` 1:1.
- */
-export function ContextMenuRadioItemIndicator(props: ContextMenuRadioItemIndicatorProps) {
-  return (
-    <BaseContextMenu.RadioItemIndicator className={contextMenuItemIndicatorVariants()} {...props} />
-  );
-}
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
deleted file mode 100644
index c44945d2..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-radio-item.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { type ContextMenuItemVariantProps, contextMenuItemVariants } from "./variants";
-
-export type ContextMenuRadioItemProps = Omit<
-  BaseContextMenu.RadioItem.Props,
-  "className" | "style"
-> &
-  ContextMenuItemVariantProps;
-
-/** A menu row that behaves like a radio button. Wraps `ContextMenu.RadioItem` 1:1. */
-export function ContextMenuRadioItem({ tone, ...props }: ContextMenuRadioItemProps) {
-  return <BaseContextMenu.RadioItem className={contextMenuItemVariants({ tone })} {...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
deleted file mode 100644
index f506c713..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-separator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import { contextMenuSeparatorVariants } from "./variants";
-
-export type ContextMenuSeparatorProps = Omit<
-  BaseContextMenu.Separator.Props,
-  "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-trigger-indicator.tsx b/packages/propel/src/ui/context-menu/context-menu-submenu-trigger-indicator.tsx
deleted file mode 100644
index 838b2255..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-submenu-trigger-indicator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { contextMenuSubmenuTriggerIndicatorVariants } from "./variants";
-
-export type ContextMenuSubmenuTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The caret icon to render (e.g. a Lucide `ChevronRight`), sized to the row's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The submenu caret region at a `ContextMenuSubmenuTrigger`'s inline-end. Renders whatever icon you
- * pass (sized to the row's `--node-size`), tinted tertiary and mirrored under RTL so it always
- * points toward the submenu. Decorative (the trigger carries the a11y state), so it is
- * `aria-hidden`.
- */
-export function ContextMenuSubmenuTriggerIndicator(props: ContextMenuSubmenuTriggerIndicatorProps) {
-  return <span aria-hidden className={contextMenuSubmenuTriggerIndicatorVariants()} {...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
deleted file mode 100644
index c6c42a54..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-submenu-trigger.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-import {
-  type ContextMenuSubmenuTriggerVariantProps,
-  contextMenuSubmenuTriggerVariants,
-} from "./variants";
-
-export type ContextMenuSubmenuTriggerProps = Omit<
-  BaseContextMenu.SubmenuTrigger.Props,
-  "className" | "style"
-> &
-  ContextMenuSubmenuTriggerVariantProps;
-
-/** The row that opens a submenu. Wraps `ContextMenu.SubmenuTrigger` 1:1. */
-export function ContextMenuSubmenuTrigger({ tone, ...props }: ContextMenuSubmenuTriggerProps) {
-  return (
-    <BaseContextMenu.SubmenuTrigger
-      className={contextMenuSubmenuTriggerVariants({ tone })}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/context-menu/context-menu-submenu.tsx b/packages/propel/src/ui/context-menu/context-menu-submenu.tsx
deleted file mode 100644
index ab7cc3eb..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-submenu.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-export type ContextMenuSubmenuProps = Omit<
-  BaseContextMenu.SubmenuRoot.Props,
-  "className" | "style"
->;
-
-/** Groups all parts of a nested submenu. Wraps `ContextMenu.SubmenuRoot` 1:1. */
-export function ContextMenuSubmenu(props: ContextMenuSubmenuProps) {
-  return <BaseContextMenu.SubmenuRoot {...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
deleted file mode 100644
index 73f5c602..00000000
--- a/packages/propel/src/ui/context-menu/context-menu-trigger.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-export type ContextMenuTriggerProps = Omit<BaseContextMenu.Trigger.Props, "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
deleted file mode 100644
index 0b7bceba..00000000
--- a/packages/propel/src/ui/context-menu/context-menu.stories.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, Copy, Scissors, Trash2 } from "lucide-react";
-import { expect, fireEvent, waitFor } from "storybook/test";
-
-import {
-  ContextMenu,
-  ContextMenuGroup,
-  ContextMenuGroupLabel,
-  ContextMenuItem,
-  ContextMenuItemIcon,
-  ContextMenuItemIndicator,
-  ContextMenuItemLabel,
-  ContextMenuItemShortcut,
-  ContextMenuPopup,
-  ContextMenuPortal,
-  ContextMenuPositioner,
-  ContextMenuSeparator,
-  ContextMenuSubmenuTriggerIndicator,
-  ContextMenuTrigger,
-} from "./index";
-
-// UI-tier story: assemble the ATOMIC context-menu parts by hand — Root › Trigger,
-// then Portal › Positioner › Popup wrapping items composed from their region parts
-// (icon, label, shortcut, indicator), 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,
-    ContextMenuItemIcon,
-    ContextMenuItemLabel,
-    ContextMenuItemShortcut,
-    ContextMenuItemIndicator,
-    ContextMenuSubmenuTriggerIndicator,
-    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 tone="neutral">
-                <ContextMenuItemIcon>
-                  <Scissors />
-                </ContextMenuItemIcon>
-                <ContextMenuItemLabel>Cut</ContextMenuItemLabel>
-                <ContextMenuItemShortcut>⌘X</ContextMenuItemShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem tone="neutral">
-                <ContextMenuItemIcon>
-                  <Copy />
-                </ContextMenuItemIcon>
-                <ContextMenuItemLabel>Copy</ContextMenuItemLabel>
-                <ContextMenuItemShortcut>⌘C</ContextMenuItemShortcut>
-                <ContextMenuItemIndicator>
-                  <Check />
-                </ContextMenuItemIndicator>
-              </ContextMenuItem>
-            </ContextMenuGroup>
-            <ContextMenuSeparator />
-            <ContextMenuItem tone="danger">
-              <ContextMenuItemIcon>
-                <Trash2 />
-              </ContextMenuItemIcon>
-              <ContextMenuItemLabel>Delete</ContextMenuItemLabel>
-            </ContextMenuItem>
-          </ContextMenuPopup>
-        </ContextMenuPositioner>
-      </ContextMenuPortal>
-    </ContextMenu>
-  ),
-};
-
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 854b2d85..00000000
--- a/packages/propel/src/ui/context-menu/context-menu.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-
-export type ContextMenuProps = Omit<BaseContextMenu.Root.Props, "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
deleted file mode 100644
index 36528034..00000000
--- a/packages/propel/src/ui/context-menu/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-export * from "./context-menu";
-export * from "./context-menu-arrow";
-export * from "./context-menu-backdrop";
-export * from "./context-menu-checkbox-item";
-export * from "./context-menu-checkbox-item-indicator";
-export * from "./context-menu-group";
-export * from "./context-menu-group-label";
-export * from "./context-menu-item";
-export * from "./context-menu-item-icon";
-export * from "./context-menu-item-indicator";
-export * from "./context-menu-item-label";
-export * from "./context-menu-item-shortcut";
-export * from "./context-menu-link-item";
-export * from "./context-menu-popup";
-export * from "./context-menu-portal";
-export * from "./context-menu-positioner";
-export * from "./context-menu-radio-group";
-export * from "./context-menu-radio-item";
-export * from "./context-menu-radio-item-indicator";
-export * from "./context-menu-separator";
-export * from "./context-menu-submenu";
-export * from "./context-menu-submenu-trigger";
-export * from "./context-menu-submenu-trigger-indicator";
-export * from "./context-menu-trigger";
diff --git a/packages/propel/src/ui/context-menu/variants.ts b/packages/propel/src/ui/context-menu/variants.ts
deleted file mode 100644
index 926e0548..00000000
--- a/packages/propel/src/ui/context-menu/variants.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/** 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 and RadioItem. `--node-size` sizes the
- * row's icon regions (leading icon, selection indicator) to the 16px row glyph.
- */
-export const contextMenuItemVariants = cva(
-  cx(
-    "flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
-    "data-highlighted:bg-layer-transparent-hover",
-    "data-disabled:pointer-events-none data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
-      tone: {
-        neutral: "text-secondary data-highlighted:text-primary",
-        danger:
-          "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary",
-      },
-    },
-  },
-);
-
-/**
- * Submenu trigger row: extends item styles with the `group/item` marker and popup-open highlight.
- * `group/item` lets the trailing submenu caret react to the trigger's disabled state.
- */
-export const contextMenuSubmenuTriggerVariants = cva(
-  cx(
-    "group/item flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
-    "data-highlighted:bg-layer-transparent-hover",
-    "data-popup-open:bg-layer-transparent-hover",
-    "data-disabled:pointer-events-none data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
-      tone: {
-        neutral: "text-secondary data-highlighted:text-primary data-popup-open:text-primary",
-        danger:
-          "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary data-popup-open:text-danger-primary",
-      },
-    },
-  },
-);
-
-/** The leading icon region of an item row. Sizes its single child to the row's `--node-size`. */
-export const contextMenuItemIconVariants = cva(nodeSlotClass);
-
-/** The growing label region of an item row; fills the row so trailing regions sit at the inline-end. */
-export const contextMenuItemLabelVariants = cva("min-w-0 flex-1 truncate");
-
-/** The trailing keyboard-shortcut text region, sitting at the row's inline-end. */
-export const contextMenuItemShortcutVariants = cva("shrink-0 text-12 text-tertiary");
-
-/**
- * Selection indicator region: the check inside checkbox/radio items and the trailing check of a
- * single-select `ContextMenuItem`. Sizes its single child to the row's `--node-size` and tints it
- * accent.
- */
-export const contextMenuItemIndicatorVariants = cva(cx(nodeSlotClass, "text-icon-accent-primary"));
-
-/**
- * The submenu caret region at a submenu trigger's inline-end. Sizes its single child to the row's
- * `--node-size`, tints it tertiary (disabled when the trigger is disabled), and mirrors under RTL
- * so it always points toward the submenu.
- */
-export const contextMenuSubmenuTriggerIndicatorVariants = cva(
-  cx(
-    nodeSlotClass,
-    "text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100",
-  ),
-);
-
-/** 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");
-
-export type ContextMenuItemVariantProps = StrictVariantProps<typeof contextMenuItemVariants>;
-
-export type ContextMenuSubmenuTriggerVariantProps = StrictVariantProps<
-  typeof contextMenuSubmenuTriggerVariants
->;
diff --git a/packages/propel/src/ui/dialog/dialog-actions.tsx b/packages/propel/src/ui/dialog/dialog-actions.tsx
deleted file mode 100644
index 14707ec3..00000000
--- a/packages/propel/src/ui/dialog/dialog-actions.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react";
-
-import { dialogActionsVariants } from "./variants";
-
-export type DialogActionsProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "className" | "style"
-> & {
-  /** The action buttons to right-align — e.g. a cancel `DialogClose` and a confirming action. */
-  children?: React.ReactNode;
-};
-
-/**
- * The footer row of the dialog popup. Right-aligns action buttons (cancel, confirm, etc.) with a
- * gap between them. Padding is baked in to match the header and body gutters.
- */
-export function DialogActions(props: DialogActionsProps) {
-  return <div className={dialogActionsVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-backdrop.tsx b/packages/propel/src/ui/dialog/dialog-backdrop.tsx
deleted file mode 100644
index 1fba30b4..00000000
--- a/packages/propel/src/ui/dialog/dialog-backdrop.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-import { dialogBackdropVariants } from "./variants";
-
-export type DialogBackdropProps = Omit<BaseDialog.Backdrop.Props, "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-body.tsx b/packages/propel/src/ui/dialog/dialog-body.tsx
deleted file mode 100644
index 395e09da..00000000
--- a/packages/propel/src/ui/dialog/dialog-body.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from "react";
-
-import { dialogBodyVariants } from "./variants";
-
-export type DialogBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
-  /** The dialog's main content — plain text, form fields, lists, etc. */
-  children?: React.ReactNode;
-};
-
-/**
- * The scrollable main content region of the dialog popup. Grows to fill available space and scrolls
- * vertically when content exceeds the popup's max-height. Side padding is baked in. Pass any
- * content — plain text, form fields, lists — as children.
- */
-export function DialogBody(props: DialogBodyProps) {
-  return <div className={dialogBodyVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-close.tsx b/packages/propel/src/ui/dialog/dialog-close.tsx
deleted file mode 100644
index d8cc363c..00000000
--- a/packages/propel/src/ui/dialog/dialog-close.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-export type DialogCloseProps = Omit<BaseDialog.Close.Props, "className" | "style">;
-
-/**
- * A behavior wrapper that closes the dialog when activated. Use as the `render` target of a
- * `Button` or `IconButton` so the styled primitive's look wins via render-composition:
- *
- * ```tsx
- * <IconButton prominence="ghost" tone="neutral" magnitude="lg" render={<DialogClose />}>
- *   <X />
- * </IconButton>;
- * ```
- *
- * Maps 1:1 to `Dialog.Close`.
- */
-export function DialogClose(props: DialogCloseProps) {
-  return <BaseDialog.Close {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-description.tsx b/packages/propel/src/ui/dialog/dialog-description.tsx
deleted file mode 100644
index fa764266..00000000
--- a/packages/propel/src/ui/dialog/dialog-description.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-import { dialogDescriptionVariants } from "./variants";
-
-export type DialogDescriptionProps = Omit<BaseDialog.Description.Props, "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-header.tsx b/packages/propel/src/ui/dialog/dialog-header.tsx
deleted file mode 100644
index 93ec994f..00000000
--- a/packages/propel/src/ui/dialog/dialog-header.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from "react";
-
-import { dialogHeaderVariants } from "./variants";
-
-export type DialogHeaderProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "className" | "style"
-> & {
-  /** The header's contents — typically a `DialogHeading` and an optional close `IconButton`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The top region of the dialog popup. Lays out a `DialogHeading` (title + optional description) at
- * the inline-start and an optional close `IconButton` at the inline-end. Padding is baked in; the
- * spacing to the body/actions is provided by the parent `DialogPopup` via its `gap`.
- */
-export function DialogHeader(props: DialogHeaderProps) {
-  return <div className={dialogHeaderVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-heading.tsx b/packages/propel/src/ui/dialog/dialog-heading.tsx
deleted file mode 100644
index 2e137b19..00000000
--- a/packages/propel/src/ui/dialog/dialog-heading.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { dialogHeadingVariants } from "./variants";
-
-export type DialogHeadingProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "className" | "style"
-> & {
-  /** The heading block's contents — a `DialogTitle` and an optional `DialogDescription`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The heading block inside a `DialogHeader`: stacks the `DialogTitle` over an optional
- * `DialogDescription` with a tight gap, sitting at the header's inline-start opposite the close
- * button. Holding the title/description together as one block keeps them aligned to the start while
- * the close stays pinned to the inline-end corner.
- */
-export function DialogHeading(props: DialogHeadingProps) {
-  return <div className={dialogHeadingVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-popup.tsx b/packages/propel/src/ui/dialog/dialog-popup.tsx
deleted file mode 100644
index d3cd3dc6..00000000
--- a/packages/propel/src/ui/dialog/dialog-popup.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-import { type DialogPopupVariantProps, dialogPopupVariants } from "./variants";
-
-export type DialogPopupProps = Omit<BaseDialog.Popup.Props, "className" | "style"> &
-  DialogPopupVariantProps;
-
-/**
- * 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.
- *
- * `magnitude` sets the popup width (`sm` = 320 px, `md` = 384 px, `lg` = 512 px) and is required so
- * every call-site is explicit. Maps 1:1 to `Dialog.Popup`.
- */
-export function DialogPopup({ magnitude, ...props }: DialogPopupProps) {
-  return <BaseDialog.Popup className={dialogPopupVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-portal.tsx b/packages/propel/src/ui/dialog/dialog-portal.tsx
deleted file mode 100644
index cc9cf972..00000000
--- a/packages/propel/src/ui/dialog/dialog-portal.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-export type DialogPortalProps = Omit<BaseDialog.Portal.Props, "className" | "style">;
-
-/**
- * Renders the backdrop and popup into a portal so they escape local stacking contexts. Maps 1:1 to
- * `Dialog.Portal`.
- */
-export function DialogPortal(props: DialogPortalProps) {
-  return <BaseDialog.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/dialog/dialog-title.tsx b/packages/propel/src/ui/dialog/dialog-title.tsx
deleted file mode 100644
index 8dfd84d7..00000000
--- a/packages/propel/src/ui/dialog/dialog-title.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-import { dialogTitleVariants } from "./variants";
-
-export type DialogTitleProps = Omit<BaseDialog.Title.Props, "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
deleted file mode 100644
index e2bde99e..00000000
--- a/packages/propel/src/ui/dialog/dialog-trigger.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-export type DialogTriggerProps = Omit<BaseDialog.Trigger.Props, "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
deleted file mode 100644
index d438f219..00000000
--- a/packages/propel/src/ui/dialog/dialog-viewport.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-import { dialogViewportVariants } from "./variants";
-
-export type DialogViewportProps = Omit<BaseDialog.Viewport.Props, "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
deleted file mode 100644
index b8d36bbb..00000000
--- a/packages/propel/src/ui/dialog/dialog.stories.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { X } from "lucide-react";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-
-import { Button } from "../button";
-import { IconButton, IconButtonIcon } from "../icon-button";
-import {
-  Dialog,
-  DialogActions,
-  DialogBackdrop,
-  DialogBody,
-  DialogClose,
-  DialogDescription,
-  DialogHeader,
-  DialogHeading,
-  DialogPopup,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  DialogViewport,
-} from "./index";
-
-// UI-tier story: assembles the ATOMIC dialog parts (Root › Trigger › Portal ›
-// Backdrop › Viewport › Popup, plus Header/Body/Actions/Title/Description/Close).
-// The components-tier `DialogContent` ready-made composes the portal/backdrop/
-// viewport/popup for you; here you wire that boilerplate by hand.
-// Trigger/Close compose the `Button` (or `IconButton` for the corner close)
-// primitive via Base UI's `render` prop — the styled primitive is the outer
-// element so its look wins, the dialog part supplies the behavior.
-
-const meta = {
-  title: "UI/Dialog",
-  component: Dialog,
-  subcomponents: {
-    DialogTrigger,
-    DialogPortal,
-    DialogBackdrop,
-    DialogViewport,
-    DialogPopup,
-    DialogHeader,
-    DialogHeading,
-    DialogBody,
-    DialogActions,
-    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>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<DialogTrigger />}
-      >
-        Open dialog
-      </Button>
-      <DialogPortal>
-        <DialogBackdrop />
-        <DialogViewport>
-          <DialogPopup magnitude="sm">
-            <DialogHeader>
-              <DialogHeading>
-                <DialogTitle>Delete project</DialogTitle>
-              </DialogHeading>
-              <IconButton
-                prominence="ghost"
-                tone="neutral"
-                magnitude="lg"
-                aria-label="Close"
-                render={<DialogClose />}
-              >
-                <IconButtonIcon>
-                  <X />
-                </IconButtonIcon>
-              </IconButton>
-            </DialogHeader>
-            <DialogBody>
-              <DialogDescription>
-                This permanently removes the project and all of its work items.
-              </DialogDescription>
-            </DialogBody>
-            <DialogActions>
-              <Button
-                sizing="hug"
-                prominence="secondary"
-                tone="neutral"
-                magnitude="xl"
-                render={<DialogClose />}
-              >
-                Cancel
-              </Button>
-            </DialogActions>
-          </DialogPopup>
-        </DialogViewport>
-      </DialogPortal>
-    </Dialog>
-  ),
-};
-
-/**
- * Interaction test: opening the dialog, then Cancel closes it. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
- * sees the dialog flash open and then close.
- */
-export const CancelCloses: Story = {
-  ...Anatomy,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<DialogTrigger />}
-      >
-        Open locked dialog
-      </Button>
-      <DialogPortal>
-        <DialogBackdrop />
-        <DialogViewport>
-          <DialogPopup magnitude="sm">
-            <DialogHeader>
-              <DialogHeading>
-                <DialogTitle>Unsaved changes</DialogTitle>
-              </DialogHeading>
-            </DialogHeader>
-            <DialogBody>
-              <DialogDescription>
-                Choose an action — clicking outside won&apos;t dismiss.
-              </DialogDescription>
-            </DialogBody>
-            <DialogActions>
-              <Button
-                sizing="hug"
-                prominence="secondary"
-                tone="neutral"
-                magnitude="xl"
-                render={<DialogClose />}
-              >
-                Discard
-              </Button>
-            </DialogActions>
-          </DialogPopup>
-        </DialogViewport>
-      </DialogPortal>
-    </Dialog>
-  ),
-};
diff --git a/packages/propel/src/ui/dialog/dialog.tsx b/packages/propel/src/ui/dialog/dialog.tsx
deleted file mode 100644
index 50a07992..00000000
--- a/packages/propel/src/ui/dialog/dialog.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-export type DialogProps = Omit<BaseDialog.Root.Props, "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
deleted file mode 100644
index 6717fa07..00000000
--- a/packages/propel/src/ui/dialog/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export * from "./dialog";
-export * from "./dialog-actions";
-export * from "./dialog-backdrop";
-export * from "./dialog-body";
-export * from "./dialog-close";
-export * from "./dialog-description";
-export * from "./dialog-header";
-export * from "./dialog-heading";
-export * from "./dialog-popup";
-export * from "./dialog-portal";
-export * from "./dialog-title";
-export * from "./dialog-trigger";
-export * from "./dialog-viewport";
diff --git a/packages/propel/src/ui/dialog/variants.ts b/packages/propel/src/ui/dialog/variants.ts
deleted file mode 100644
index c62dfaf0..00000000
--- a/packages/propel/src/ui/dialog/variants.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// Dialog is a structural overlay primitive. Base UI drives every interactive
-// state (open/closed, starting/ending transition styles) as data attributes.
-// Width (magnitude) is an adjustable axis per the design spec; every other
-// structural chrome is baked in. The cva pairings below hold all static
-// and variant-driven styling 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(
-    // chrome — no padding; per-section parts (Header/Body/Actions) own their
-    // own padding so each region can scroll or space correctly.
-    "flex flex-col gap-4 rounded-lg border-sm border-subtle bg-layer-1 shadow-overlay-100 outline-none",
-    // max-height: cap the popup at the viewport (minus gutter) so the body scrolls
-    // rather than the whole dialog overflowing.
-    "max-h-[calc(100dvh-2rem)]",
-    // open/close animation
-    "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",
-  ),
-  {
-    variants: {
-      // Width axis — "always adjustable" per the design spec. sm/md/lg are
-      // the Figma widths; required so each call-site is explicit.
-      magnitude: {
-        sm: "w-80", // 320px
-        md: "w-96", // 384px
-        lg: "w-128",
-      },
-    },
-  },
-);
-
-export const dialogTitleVariants = cva("text-16 font-semibold text-primary");
-
-export const dialogDescriptionVariants = cva("text-14 text-secondary");
-
-// DialogHeader: the row that holds the heading block (title + optional
-// description) at the inline-start alongside the inline-end close button. Padding
-// matches the popup's top/side gutter; there is no bottom padding — the gap on the
-// popup provides spacing. `items-start` keeps the close aligned to the first line
-// of a multi-line title.
-export const dialogHeaderVariants = cva("flex items-start justify-between gap-4 px-4 pt-4");
-
-// DialogHeading: the title-over-description block at the header's inline-start.
-// Stacks the two with a tight gap so they read as one heading group opposite the
-// close button.
-export const dialogHeadingVariants = cva("flex min-w-0 flex-col gap-2");
-
-// DialogBody: the scrollable main content region. `min-h-0 flex-1 overflow-y-auto`
-// lets it shrink inside the flex popup so the actions stay pinned at the bottom;
-// `overscroll-contain` prevents the page from scrolling when the body hits its limit.
-export const dialogBodyVariants = cva("min-h-0 flex-1 overflow-y-auto overscroll-contain px-4");
-
-// DialogActions: the right-aligned footer row for action buttons. Padding mirrors
-// the header gutter. Sticks to the bottom via the flex popup layout.
-export const dialogActionsVariants = cva("flex justify-end gap-2 px-4 pb-4");
-
-export type DialogPopupVariantProps = StrictVariantProps<typeof dialogPopupVariants>;
diff --git a/packages/propel/src/ui/drawer/drawer-backdrop.tsx b/packages/propel/src/ui/drawer/drawer-backdrop.tsx
deleted file mode 100644
index beb54027..00000000
--- a/packages/propel/src/ui/drawer/drawer-backdrop.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerBackdropVariants } from "./variants";
-
-export type DrawerBackdropProps = Omit<BaseDrawer.Backdrop.Props, "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
deleted file mode 100644
index 6db7a809..00000000
--- a/packages/propel/src/ui/drawer/drawer-close.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerCloseVariants } from "./variants";
-
-export type DrawerCloseProps = Omit<BaseDrawer.Close.Props, "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
deleted file mode 100644
index c6aedb49..00000000
--- a/packages/propel/src/ui/drawer/drawer-content.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerContentVariants } from "./variants";
-
-export type DrawerContentProps = Omit<BaseDrawer.Content.Props, "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
deleted file mode 100644
index 2cac4d9a..00000000
--- a/packages/propel/src/ui/drawer/drawer-description.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerDescriptionVariants } from "./variants";
-
-export type DrawerDescriptionProps = Omit<BaseDrawer.Description.Props, "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-footer.tsx b/packages/propel/src/ui/drawer/drawer-footer.tsx
deleted file mode 100644
index 3266b16a..00000000
--- a/packages/propel/src/ui/drawer/drawer-footer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { drawerFooterVariants } from "./variants";
-
-export type DrawerFooterProps = Omit<
-  React.ComponentPropsWithoutRef<"footer">,
-  "className" | "style"
-> & {
-  /** The footer's action buttons, laid out at the inline-end. */
-  children?: React.ReactNode;
-};
-
-/** The drawer's footer actions region (the Figma footer). Lays its actions at the inline-end. */
-export function DrawerFooter(props: DrawerFooterProps) {
-  return <footer className={drawerFooterVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/drawer/drawer-header-content.tsx b/packages/propel/src/ui/drawer/drawer-header-content.tsx
deleted file mode 100644
index 5f54b372..00000000
--- a/packages/propel/src/ui/drawer/drawer-header-content.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { drawerHeaderContentVariants } from "./variants";
-
-export type DrawerHeaderContentProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The stacked heading block — a `DrawerTitle` and an optional `DrawerDescription`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The stacked title + description inside a `DrawerHeader`. Groups them at the header's inline-start
- * so a corner close can sit opposite at the inline-end; a long title wraps instead of pushing the
- * close off the row.
- */
-export function DrawerHeaderContent(props: DrawerHeaderContentProps) {
-  return <div className={drawerHeaderContentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/drawer/drawer-header.tsx b/packages/propel/src/ui/drawer/drawer-header.tsx
deleted file mode 100644
index ea2973c4..00000000
--- a/packages/propel/src/ui/drawer/drawer-header.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { drawerHeaderVariants } from "./variants";
-
-export type DrawerHeaderProps = Omit<
-  React.ComponentPropsWithoutRef<"header">,
-  "className" | "style"
-> & {
-  /** The header's contents — typically a `DrawerHeaderContent` and an optional corner close. */
-  children?: React.ReactNode;
-};
-
-/**
- * The drawer's top region (the Figma header). Lays the title/description heading block at the
- * inline-start and an optional corner close at the inline-end on one baseline. Compose a
- * `DrawerHeaderContent` for the title/description stack.
- */
-export function DrawerHeader(props: DrawerHeaderProps) {
-  return <header className={drawerHeaderVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/drawer/drawer-popup.tsx b/packages/propel/src/ui/drawer/drawer-popup.tsx
deleted file mode 100644
index e8c8670d..00000000
--- a/packages/propel/src/ui/drawer/drawer-popup.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerPopupVariants } from "./variants";
-
-export type DrawerPopupSide = "start" | "end";
-
-export type DrawerPopupProps = Omit<BaseDrawer.Popup.Props, "className" | "style"> & {
-  /**
-   * The viewport edge the drawer is anchored to. "end" pins to the inline-end (right in LTR);
-   * "start" pins to the inline-start (left in LTR). The slide animation direction and the
-   * leading-edge shadow border both follow this value.
-   */
-  side: DrawerPopupSide;
-};
-
-/**
- * The sliding panel itself. Anchored to `side` ("start" or "end") and 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({ side, ...props }: DrawerPopupProps) {
-  return <BaseDrawer.Popup className={drawerPopupVariants({ side })} {...props} />;
-}
diff --git a/packages/propel/src/ui/drawer/drawer-portal.tsx b/packages/propel/src/ui/drawer/drawer-portal.tsx
deleted file mode 100644
index a341d178..00000000
--- a/packages/propel/src/ui/drawer/drawer-portal.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-export type DrawerPortalProps = Omit<BaseDrawer.Portal.Props, "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-swipe-area.tsx b/packages/propel/src/ui/drawer/drawer-swipe-area.tsx
deleted file mode 100644
index db56dc7d..00000000
--- a/packages/propel/src/ui/drawer/drawer-swipe-area.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-export type DrawerSwipeAreaProps = Omit<BaseDrawer.SwipeArea.Props, "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
deleted file mode 100644
index db368253..00000000
--- a/packages/propel/src/ui/drawer/drawer-title.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerTitleVariants } from "./variants";
-
-export type DrawerTitleProps = Omit<BaseDrawer.Title.Props, "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
deleted file mode 100644
index c674da02..00000000
--- a/packages/propel/src/ui/drawer/drawer-trigger.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-export type DrawerTriggerProps = Omit<BaseDrawer.Trigger.Props, "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
deleted file mode 100644
index 55d30e4f..00000000
--- a/packages/propel/src/ui/drawer/drawer-viewport.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-import { drawerViewportVariants } from "./variants";
-
-export type DrawerViewportProps = Omit<BaseDrawer.Viewport.Props, "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
deleted file mode 100644
index 0bda380a..00000000
--- a/packages/propel/src/ui/drawer/drawer.stories.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { X } from "lucide-react";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-
-import { Button } from "../button";
-import { IconButton, IconButtonIcon } from "../icon-button";
-import {
-  Drawer,
-  DrawerBackdrop,
-  DrawerBody,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerHeaderContent,
-  DrawerPopup,
-  DrawerPortal,
-  DrawerTitle,
-  DrawerTrigger,
-  DrawerViewport,
-} from "./index";
-
-// UI-tier story: assembles the ATOMIC drawer parts by hand (Root › Trigger ›
-// Portal › Backdrop › Viewport › Popup › Content, with the Header/Body/Footer
-// layout regions and Title/Description/Close inside). The components-tier
-// `DrawerPanel` ready-made composes the portal/backdrop/viewport/popup/content for
-// you. Trigger/Close compose the `Button` (or `IconButton` for the corner close)
-// primitive via Base UI's `render` prop — the styled primitive is the outer element
-// so its look wins, the drawer part supplies the behavior.
-
-const meta = {
-  title: "UI/Drawer",
-  component: Drawer,
-  subcomponents: {
-    DrawerTrigger,
-    DrawerPortal,
-    DrawerBackdrop,
-    DrawerViewport,
-    DrawerPopup,
-    DrawerContent,
-    DrawerHeader,
-    DrawerHeaderContent,
-    DrawerBody,
-    DrawerFooter,
-    DrawerTitle,
-    DrawerDescription,
-    DrawerClose,
-  },
-} satisfies Meta<typeof Drawer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The full anatomy wired by hand: trigger opens an end-edge sliding panel. */
-export const Anatomy: Story = {
-  render: () => (
-    <Drawer>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<DrawerTrigger />}
-      >
-        Open drawer
-      </Button>
-      <DrawerPortal>
-        <DrawerBackdrop />
-        <DrawerViewport>
-          <DrawerPopup side="end">
-            <DrawerContent>
-              <DrawerHeader>
-                <DrawerHeaderContent>
-                  <DrawerTitle>Work item details</DrawerTitle>
-                  <DrawerDescription>Edit the fields for this work item.</DrawerDescription>
-                </DrawerHeaderContent>
-                <IconButton
-                  prominence="ghost"
-                  tone="neutral"
-                  magnitude="lg"
-                  aria-label="Close"
-                  render={<DrawerClose />}
-                >
-                  <IconButtonIcon>
-                    <X />
-                  </IconButtonIcon>
-                </IconButton>
-              </DrawerHeader>
-              <DrawerBody>Panel body content goes here.</DrawerBody>
-              <DrawerFooter>
-                <Button
-                  sizing="hug"
-                  prominence="ghost"
-                  tone="neutral"
-                  magnitude="lg"
-                  render={<DrawerClose />}
-                >
-                  Cancel
-                </Button>
-                <Button sizing="hug" prominence="primary" tone="neutral" magnitude="lg">
-                  Save
-                </Button>
-              </DrawerFooter>
-            </DrawerContent>
-          </DrawerPopup>
-        </DrawerViewport>
-      </DrawerPortal>
-    </Drawer>
-  ),
-};
-
-/**
- * Interaction test: opening the drawer, then the dismiss button closes it. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
- * sees the drawer flash open and then close.
- */
-export const CloseButtonDismisses: Story = {
-  ...Anatomy,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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. Rendered in an isolated
- * iframe on the docs page (`docs.story.inline: false`) — the portaled backdrop/popup are fixed to
- * the viewport, so inline rendering would cover the whole docs page instead of staying boxed.
- */
-export const DefaultOpen: Story = {
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
-  render: () => (
-    <Drawer defaultOpen>
-      <DrawerPortal>
-        <DrawerBackdrop />
-        <DrawerViewport>
-          <DrawerPopup side="end">
-            <DrawerContent>
-              <DrawerHeader>
-                <DrawerHeaderContent>
-                  <DrawerTitle>Filters</DrawerTitle>
-                  <DrawerDescription>This drawer started open.</DrawerDescription>
-                </DrawerHeaderContent>
-              </DrawerHeader>
-            </DrawerContent>
-          </DrawerPopup>
-        </DrawerViewport>
-      </DrawerPortal>
-    </Drawer>
-  ),
-};
diff --git a/packages/propel/src/ui/drawer/drawer.tsx b/packages/propel/src/ui/drawer/drawer.tsx
deleted file mode 100644
index 036d71a2..00000000
--- a/packages/propel/src/ui/drawer/drawer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-export type DrawerProps = Omit<BaseDrawer.Root.Props, "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
deleted file mode 100644
index f9f50371..00000000
--- a/packages/propel/src/ui/drawer/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export * from "./drawer";
-export * from "./drawer-provider";
-export * from "./drawer-indent-background";
-export * from "./drawer-indent";
-export * from "./drawer-trigger";
-export * from "./drawer-swipe-area";
-export * from "./drawer-portal";
-export * from "./drawer-backdrop";
-export * from "./drawer-viewport";
-export * from "./drawer-popup";
-export * from "./drawer-content";
-export * from "./drawer-header";
-export * from "./drawer-header-content";
-export * from "./drawer-body";
-export * from "./drawer-footer";
-export * from "./drawer-title";
-export * from "./drawer-description";
-export * from "./drawer-close";
diff --git a/packages/propel/src/ui/drawer/variants.ts b/packages/propel/src/ui/drawer/variants.ts
deleted file mode 100644
index 002d4ec9..00000000
--- a/packages/propel/src/ui/drawer/variants.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-// Drawer wraps Base UI's drawer parts 1:1, plus a few layout-region extensions
-// (Header, HeaderContent, Body, Footer) that the Figma spec defines as the
-// always-the-same header/body/footer structure. Base UI drives open/closed and
-// swipe state as data attributes, so the only styling axis exposed is the popup's
-// anchor `side` (an adjustable axis per the spec). Every part is styled in one
-// place here, 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");
-
-// `side` is the anchor edge: "end" pins to the inline-end (right in LTR) and
-// "start" pins to the inline-start (left in LTR). The shadow border and slide
-// animation both follow the side — "end" has a leading-edge border-s and slides
-// right; "start" has a leading-edge border-e and slides left.
-export const drawerPopupVariants = cva(
-  cx(
-    "fixed inset-y-0 z-50 flex h-full w-80 max-w-[90vw] flex-col",
-    "border-subtle bg-layer-1 shadow-overlay-100 outline-none",
-    "transition-transform duration-200",
-  ),
-  {
-    variants: {
-      side: {
-        end: cx(
-          "inset-e-0 border-s-sm",
-          "data-ending-style:translate-x-full data-starting-style:translate-x-full",
-        ),
-        start: cx(
-          "inset-s-0 border-e-sm",
-          "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");
-
-// The drawer's top region (Figma "header"): the title/description heading block at
-// the inline-start and an optional corner close at the inline-end, on one baseline.
-export const drawerHeaderVariants = cva("flex items-start justify-between gap-4");
-
-// The stacked title + description inside the header. `min-w-0` lets a long title
-// wrap instead of pushing the corner close off the row.
-export const drawerHeaderContentVariants = cva("flex min-w-0 flex-col gap-1");
-
-// The drawer's main content region (Figma "body"). Grows to fill the space between
-// the header and footer and scrolls its overflow; the secondary text tone is the
-// baked-in body style.
-export const drawerBodyVariants = cva(
-  "flex min-h-0 flex-1 flex-col gap-2 overflow-auto text-14 text-secondary",
-);
-
-// The drawer's footer actions region (Figma "footer"). Actions sit at the inline-end.
-export const drawerFooterVariants = cva("flex items-center justify-end gap-2");
-
-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/field-description.tsx b/packages/propel/src/ui/field/field-description.tsx
deleted file mode 100644
index 9e57219e..00000000
--- a/packages/propel/src/ui/field/field-description.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-
-import { type FieldDescriptionVariantProps, fieldDescriptionVariants } from "./variants";
-
-export type FieldDescriptionProps = Omit<BaseField.Description.Props, "className" | "style"> &
-  FieldDescriptionVariantProps;
-
-/** 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
deleted file mode 100644
index 07ebaaf3..00000000
--- a/packages/propel/src/ui/field/field-error.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-
-import { type FieldErrorVariantProps, fieldErrorVariants } from "./variants";
-
-export type FieldErrorProps = Omit<BaseField.Error.Props, "className" | "style"> &
-  FieldErrorVariantProps;
-
-/** 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-item-content.tsx b/packages/propel/src/ui/field/field-item-content.tsx
deleted file mode 100644
index 5afb17e6..00000000
--- a/packages/propel/src/ui/field/field-item-content.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { fieldItemContentVariants } from "./variants";
-
-export type FieldItemContentProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The option's label and optional description. */
-  children?: React.ReactNode;
-};
-
-/** The label + description column for a single choice option (checkbox/radio/switch row). */
-export function FieldItemContent(props: FieldItemContentProps) {
-  return <div className={fieldItemContentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/field/field-item.tsx b/packages/propel/src/ui/field/field-item.tsx
deleted file mode 100644
index 67be9929..00000000
--- a/packages/propel/src/ui/field/field-item.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-
-import { fieldItemVariants } from "./variants";
-
-export type FieldItemProps = Omit<BaseField.Item.Props, "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-required-marker.tsx b/packages/propel/src/ui/field/field-label-required-marker.tsx
deleted file mode 100644
index e665ed49..00000000
--- a/packages/propel/src/ui/field/field-label-required-marker.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { fieldLabelRequiredMarkerVariants } from "./variants";
-
-export type FieldLabelRequiredMarkerProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The required marker to render (e.g. an asterisk). */
-  children?: React.ReactNode;
-};
-
-/**
- * The required marker slot shown after a `FieldLabel`'s text. Decorative (the control's `required`
- * attribute carries the semantics), so it is `aria-hidden`. Bakes no glyph: pass the marker (e.g.
- * an asterisk) as `children`.
- */
-export function FieldLabelRequiredMarker(props: FieldLabelRequiredMarkerProps) {
-  return <span aria-hidden className={fieldLabelRequiredMarkerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/field/field-label.tsx b/packages/propel/src/ui/field/field-label.tsx
deleted file mode 100644
index 623b8a02..00000000
--- a/packages/propel/src/ui/field/field-label.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-
-import { fieldLabelVariants, type FieldLabelVariantProps } from "./variants";
-
-export type FieldLabelProps = Omit<BaseField.Label.Props, "className" | "style"> &
-  FieldLabelVariantProps;
-
-/** The label naming a field's control. */
-export function FieldLabel({ magnitude, inset, ...props }: FieldLabelProps) {
-  return <BaseField.Label className={fieldLabelVariants({ magnitude, inset })} {...props} />;
-}
diff --git a/packages/propel/src/ui/field/field.stories.tsx b/packages/propel/src/ui/field/field.stories.tsx
deleted file mode 100644
index 5098deeb..00000000
--- a/packages/propel/src/ui/field/field.stories.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { Input } from "../input/index";
-import { Field, FieldDescription, FieldError, FieldLabel, FieldLabelRequiredMarker } 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,
-    FieldLabelRequiredMarker,
-    Input,
-    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. The `FieldLabel` slot names
- * the control; the `RequiredMarker` story shows how to append the `FieldLabelRequiredMarker` slot.
- */
-export const Default: Story = {
-  render: () => (
-    <Field name="displayName">
-      <FieldLabel magnitude="md" inset={false}>
-        Display name
-      </FieldLabel>
-      <Input magnitude="md" required placeholder="Ada Lovelace" />
-      <FieldDescription magnitude="md">Shown anywhere your profile is visible.</FieldDescription>
-    </Field>
-  ),
-};
-
-/**
- * Interaction test: the control is required and exposes its helper text as the accessible
- * description. Tagged out of the sidebar/docs/manifest while still running under the default `test`
- * tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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.");
-  },
-};
-
-/**
- * The required marker is a bare slot that bakes no glyph: the consumer passes the marker (here, the
- * conventional asterisk) as `children`.
- */
-export const RequiredMarker: Story = {
-  render: () => (
-    <Field name="displayName">
-      <FieldLabel magnitude="md" inset={false}>
-        Display name
-        <FieldLabelRequiredMarker>*</FieldLabelRequiredMarker>
-      </FieldLabel>
-      <Input magnitude="md" required placeholder="Ada Lovelace" />
-    </Field>
-  ),
-};
-
-/** 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" inset={false}>
-        Workspace slug
-      </FieldLabel>
-      <Input magnitude="md" defaultValue="Already taken" />
-      <FieldError magnitude="md" match={true}>
-        Choose a different workspace slug.
-      </FieldError>
-    </Field>
-  ),
-};
-
-/**
- * Interaction test: the control exposes `aria-invalid` and announces the `FieldError` text as its
- * accessible description. Tagged out of the sidebar/docs/manifest while still running under the
- * default `test` tag.
- */
-export const InvalidInteraction: Story = {
-  ...Invalid,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 63ddb366..00000000
--- a/packages/propel/src/ui/field/field.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-
-import { fieldVariants } from "./variants";
-
-export type FieldProps = Omit<BaseField.Root.Props, "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={fieldVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/field/index.tsx b/packages/propel/src/ui/field/index.tsx
deleted file mode 100644
index 03d57ca8..00000000
--- a/packages/propel/src/ui/field/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./field";
-export * from "./field-control-content";
-export * from "./field-description";
-export * from "./field-error";
-export * from "./field-item";
-export * from "./field-label";
-export * from "./field-label-required-marker";
diff --git a/packages/propel/src/ui/fieldset/fieldset-description.tsx b/packages/propel/src/ui/fieldset/fieldset-description.tsx
deleted file mode 100644
index 1c3187e5..00000000
--- a/packages/propel/src/ui/fieldset/fieldset-description.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { fieldsetDescriptionVariants } from "./variants";
-
-export type FieldsetDescriptionProps = Omit<
-  React.ComponentPropsWithRef<"p">,
-  "className" | "style"
-> & {
-  /** The supporting description text shown below the legend. */
-  children?: React.ReactNode;
-};
-
-/** Supporting text shown below the fieldset legend. */
-export function FieldsetDescription(props: FieldsetDescriptionProps) {
-  return <p className={fieldsetDescriptionVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/fieldset/fieldset-legend.tsx b/packages/propel/src/ui/fieldset/fieldset-legend.tsx
deleted file mode 100644
index 8873238f..00000000
--- a/packages/propel/src/ui/fieldset/fieldset-legend.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
-
-import { type FieldsetLegendVariantProps, fieldsetLegendVariants } from "./variants";
-
-export type FieldsetLegendProps = Omit<BaseFieldset.Legend.Props, "className" | "style"> &
-  FieldsetLegendVariantProps;
-
-/** 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
deleted file mode 100644
index bef5a774..00000000
--- a/packages/propel/src/ui/fieldset/fieldset.stories.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { Field, FieldLabel } from "../field/index";
-import { Input } from "../input/index";
-import { Fieldset, FieldsetBody, FieldsetDescription, FieldsetLegend } from "./index";
-
-// UI-tier story: composes the atomic `Fieldset` + `FieldsetLegend` + `FieldsetBody` 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, FieldsetDescription, FieldsetBody },
-  decorators: [
-    (Story) => (
-      <div className="w-80">
-        <Story />
-      </div>
-    ),
-  ],
-} 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" inset={false}>
-        {label}
-      </FieldLabel>
-      <Input magnitude="md" placeholder={label} />
-    </Field>
-  );
-}
-
-/** Fieldset groups related fields under one accessible legend. */
-export const Default: Story = {
-  args: { bordered: false },
-  render: () => (
-    <Fieldset bordered={false}>
-      <FieldsetLegend magnitude="md">Billing details</FieldsetLegend>
-      <FieldsetBody>
-        <TextField name="company" label="Company" />
-        <TextField name="taxId" label="Tax ID" />
-      </FieldsetBody>
-    </Fieldset>
-  ),
-};
-
-/** A bordered fieldset draws a visible boundary around the grouped controls. */
-export const Bordered: Story = {
-  args: { bordered: true },
-  render: () => (
-    <Fieldset bordered={true}>
-      <FieldsetLegend magnitude="md">Billing details</FieldsetLegend>
-      <FieldsetDescription>Enter your billing information below.</FieldsetDescription>
-      <FieldsetBody>
-        <TextField name="company" label="Company" />
-        <TextField name="taxId" label="Tax ID" />
-      </FieldsetBody>
-    </Fieldset>
-  ),
-};
-
-export const GroupSemantics: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { bordered: false },
-  render: () => (
-    <Fieldset bordered={false}>
-      <FieldsetLegend magnitude="md">Shipping address</FieldsetLegend>
-      <FieldsetBody>
-        <TextField name="city" label="City" />
-      </FieldsetBody>
-    </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
deleted file mode 100644
index 29e0f317..00000000
--- a/packages/propel/src/ui/fieldset/fieldset.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
-
-import { type FieldsetVariantProps, fieldsetVariants } from "./variants";
-
-export type FieldsetProps = Omit<BaseFieldset.Root.Props, "className" | "style"> &
-  FieldsetVariantProps;
-
-/** Groups a legend with related controls. */
-export function Fieldset({ bordered, ...props }: FieldsetProps) {
-  return <BaseFieldset.Root className={fieldsetVariants({ bordered })} {...props} />;
-}
diff --git a/packages/propel/src/ui/form/form.stories.tsx b/packages/propel/src/ui/form/form.stories.tsx
deleted file mode 100644
index 31c08ebf..00000000
--- a/packages/propel/src/ui/form/form.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, fn, userEvent } from "storybook/test";
-
-import { Button } from "../button/index";
-import { Field, FieldError, FieldLabel } from "../field/index";
-import { Input } from "../input/index";
-import { Form, FormActions, FormBody } from "./index";
-
-// UI-tier story: composes the atomic `Form` parts — `FormBody` (the field stack, with
-// its single/multi-column `layout` axis) and `FormActions` (the bottom actions bar) —
-// 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,
-  subcomponents: { FormBody, FormActions },
-  parameters: { layout: "centered" },
-  decorators: [
-    (Story) => (
-      <div className="w-80">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Form>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A form assembled from `Form` › `FormBody` (`Field`…) + `FormActions`. */
-export const Default: Story = {
-  render: (args) => (
-    <Form {...args}>
-      <FormBody layout="single">
-        <Field name="email">
-          <FieldLabel magnitude="md" inset={false}>
-            Email
-          </FieldLabel>
-          <Input magnitude="md" type="email" required placeholder="you@example.com" />
-          <FieldError magnitude="md" />
-        </Field>
-      </FormBody>
-      <FormActions layout="inline">
-        <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-          Submit
-        </Button>
-      </FormActions>
-    </Form>
-  ),
-};
-
-/**
- * Interaction test: native constraint validation — submitting an empty required field shows the
- * error. Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const ValidationInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { onSubmit: fn((e) => e.preventDefault()) },
-  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
deleted file mode 100644
index 74bde0d1..00000000
--- a/packages/propel/src/ui/form/form.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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. Lays out its regions (`FormBody`,
- * `FormActions`) with a consistent vertical rhythm; field spacing and the actions-bar treatment
- * live on those parts.
- */
-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/icon-button/icon-button-icon.tsx b/packages/propel/src/ui/icon-button/icon-button-icon.tsx
deleted file mode 100644
index 6d920f1a..00000000
--- a/packages/propel/src/ui/icon-button/icon-button-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { iconButtonIconVariants } from "./variants";
-
-export type IconButtonIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render, sized to the root's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The icon-button's single glyph. Sizes its one child to the root's inherited `--node-size`, so
- * callers pass a bare icon. Decorative (the root's `aria-label` carries the accessible name), so it
- * is `aria-hidden`.
- */
-export function IconButtonIcon(props: IconButtonIconProps) {
-  return <span aria-hidden className={iconButtonIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/icon-button/icon-button-spinner.tsx b/packages/propel/src/ui/icon-button/icon-button-spinner.tsx
deleted file mode 100644
index c3f83202..00000000
--- a/packages/propel/src/ui/icon-button/icon-button-spinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { iconButtonSpinnerVariants } from "./variants";
-
-export type IconButtonSpinnerProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The spinner glyph to render (e.g. a Lucide `LoaderCircle`), sized to the root's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The loading indicator shown in place of the icon while the button is busy. A single spinning
- * glyph sized to the root's inherited `--node-size`. Decorative (the root carries `aria-busy`), so
- * it is `aria-hidden`. Bakes no glyph — pass the spinner as `children` (the ready-made `IconButton`
- * passes a `LoaderCircle`).
- */
-export function IconButtonSpinner(props: IconButtonSpinnerProps) {
-  return <span aria-hidden className={iconButtonSpinnerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/icon-button/icon-button.stories.tsx b/packages/propel/src/ui/icon-button/icon-button.stories.tsx
deleted file mode 100644
index ce432601..00000000
--- a/packages/propel/src/ui/icon-button/icon-button.stories.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LoaderCircle, Plus } from "lucide-react";
-import { expect } from "storybook/test";
-
-import { iconControl } from "../../storybook/icon-control";
-import {
-  IconButtonIcon,
-  IconButton,
-  type IconButtonMagnitude,
-  IconButtonSpinner,
-  type IconButtonProminence,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC icon-button parts (each renders a single element) —
-// the square `IconButton` box, the `IconButtonIcon` glyph slot, and the
-// `IconButtonSpinner` loading indicator. The components-tier `IconButton` story shows the
-// ready-made button that swaps the slot for the spinner while `loading`.
-const PROMINENCES: IconButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
-const MAGNITUDES: IconButtonMagnitude[] = ["sm", "md", "lg", "xl"];
-
-const meta = {
-  title: "UI/IconButton",
-  component: IconButton,
-  subcomponents: { IconButtonIcon, IconButtonSpinner },
-  // Icon picker control for the single glyph rendered inside the slot.
-  argTypes: { children: iconControl },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1720-3036",
-    },
-  },
-  args: {
-    prominence: "primary",
-    tone: "neutral",
-    magnitude: "md",
-    "aria-label": "Add item",
-    children: (
-      <IconButtonIcon>
-        <Plus />
-      </IconButtonIcon>
-    ),
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Assemble the atomic parts: `IconButton` wrapping an `IconButtonIcon` glyph slot. */
-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 Prominences: Story = {
-  argTypes: { prominence: { control: false }, "aria-label": { control: false } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      {PROMINENCES.map((prominence) => (
-        <IconButton
-          key={prominence}
-          {...args}
-          prominence={prominence}
-          aria-label={`${prominence} action`}
-        >
-          <IconButtonIcon>
-            <Plus />
-          </IconButtonIcon>
-        </IconButton>
-      ))}
-    </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" prominence="primary" aria-label="Neutral">
-        <IconButtonIcon>
-          <Plus />
-        </IconButtonIcon>
-      </IconButton>
-      <IconButton {...args} tone="danger" prominence="primary" aria-label="Danger fill">
-        <IconButtonIcon>
-          <Plus />
-        </IconButtonIcon>
-      </IconButton>
-      <IconButton {...args} tone="danger" prominence="secondary" aria-label="Danger outline">
-        <IconButtonIcon>
-          <Plus />
-        </IconButtonIcon>
-      </IconButton>
-    </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`}>
-          <IconButtonIcon>
-            <Plus />
-          </IconButtonIcon>
-        </IconButton>
-      ))}
-    </div>
-  ),
-};
-
-/** Swap the `IconButtonIcon` slot for an `IconButtonSpinner` to show the busy indicator. */
-export const Spinner: Story = {
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <div className="flex items-center gap-3">
-      <IconButton {...args} prominence="primary" aria-label="Saving" aria-busy>
-        <IconButtonSpinner>
-          <LoaderCircle className="animate-spin" />
-        </IconButtonSpinner>
-      </IconButton>
-      <IconButton {...args} prominence="secondary" aria-label="Loading" aria-busy>
-        <IconButtonSpinner>
-          <LoaderCircle className="animate-spin" />
-        </IconButtonSpinner>
-      </IconButton>
-      <IconButton {...args} prominence="tertiary" aria-label="Refreshing" aria-busy>
-        <IconButtonSpinner>
-          <LoaderCircle className="animate-spin" />
-        </IconButtonSpinner>
-      </IconButton>
-    </div>
-  ),
-};
-
-/**
- * The `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 prominence="primary" tone="neutral" magnitude="md" aria-label="Add item">
-      <IconButtonIcon>
-        <Plus />
-      </IconButtonIcon>
-    </IconButton>
-  ),
-  play: async ({ canvas }) => {
-    await expect(canvas.getByRole("button", { name: "Add item" })).toBeInTheDocument();
-  },
-};
diff --git a/packages/propel/src/ui/icon-button/icon-button.tsx b/packages/propel/src/ui/icon-button/icon-button.tsx
deleted file mode 100644
index cdd4a55f..00000000
--- a/packages/propel/src/ui/icon-button/icon-button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react/button";
-
-import { iconButtonVariants, type IconButtonVariantProps } from "./variants";
-
-export type IconButtonProps = Omit<BaseButton.Props, "className" | "style"> &
-  IconButtonVariantProps;
-
-/**
- * The square button box of the icon-only button: the styled Base UI `Button` with no baked content.
- * It owns its chrome (`prominence`/`tone`) and geometry (`magnitude`'s square `size-N` box and
- * `--node-size` glyph scale) through `iconButtonVariants` — independent of `Button`. There is no
- * `link` icon button. Compose an `IconButtonIcon` (or `IconButtonSpinner`) inside it.
- */
-export function IconButton({
-  prominence,
-  tone,
-  magnitude,
-  type = "button",
-  ...props
-}: IconButtonProps) {
-  return (
-    <BaseButton
-      type={type}
-      className={iconButtonVariants({ prominence, tone, magnitude })}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/icon-button/index.tsx b/packages/propel/src/ui/icon-button/index.tsx
deleted file mode 100644
index 7b0da839..00000000
--- a/packages/propel/src/ui/icon-button/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from "./icon-button";
-export * from "./icon-button-icon";
-export * from "./icon-button-spinner";
-export {
-  type IconButtonMagnitude,
-  type IconButtonTone,
-  type IconButtonProminence,
-} from "./variants";
diff --git a/packages/propel/src/ui/icon-button/variants.ts b/packages/propel/src/ui/icon-button/variants.ts
deleted file mode 100644
index 468bb1d4..00000000
--- a/packages/propel/src/ui/icon-button/variants.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { composeVariants } from "../../internal/compose-variants";
-import { controlChromeVariants } from "../../internal/control-chrome";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// IconButton's local styling: the square geometry only. The chrome (behavior base + neutral/danger
-// palette) comes from the shared `controlChromeVariants`. `prominence` is declared (color-less) to
-// constrain the composed props to the icon-button Types — no `link` icon button. Icon buttons are
-// square: a fixed `size-N` box per Figma's "Icon button" Size scale (S/Base/L/XL = 20/24/28/32px →
-// sm/md/lg/xl), each magnitude setting `--node-size` (14/16/16/20px) for the glyph slot and spinner.
-const iconButtonLocalVariants = cva("", {
-  variants: {
-    prominence: { primary: "", secondary: "", tertiary: "", ghost: "" },
-    tone: { neutral: "", danger: "" },
-    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
-    },
-  },
-});
-
-/** The full icon button className: the shared control chrome composed with the square geometry. */
-export const iconButtonVariants = composeVariants(controlChromeVariants, iconButtonLocalVariants);
-
-type IconButtonVariantConfig = VariantProps<typeof iconButtonLocalVariants>;
-export type IconButtonProminence = NonNullable<IconButtonVariantConfig["prominence"]>;
-export type IconButtonTone = NonNullable<IconButtonVariantConfig["tone"]>;
-export type IconButtonMagnitude = NonNullable<IconButtonVariantConfig["magnitude"]>;
-
-// No `defaultVariants` today, so every axis is required.
-export type IconButtonVariantProps = StrictVariantProps<typeof iconButtonVariants>;
-
-// The icon slot: the button's single glyph, sized to the root's `--node-size` (shared node-slot
-// class). Decorative (the accessible name lives on the root's `aria-label`), so it is `aria-hidden`.
-export const iconButtonIconVariants = cva(nodeSlotClass);
-
-// The loading indicator shown in place of the icon: a single spinning glyph sized to `--node-size`.
-// Decorative (the root carries `aria-busy`), so it is `aria-hidden`. A pure slot that bakes no glyph.
-export const iconButtonSpinnerVariants = cva(
-  cx(
-    "inline-flex shrink-0 items-center justify-center",
-    "[&>svg]:size-(--node-size) [&>svg]:animate-spin",
-  ),
-);
diff --git a/packages/propel/src/ui/input-field/input-field.stories.tsx b/packages/propel/src/ui/input-field/input-field.stories.tsx
deleted file mode 100644
index a8075e8b..00000000
--- a/packages/propel/src/ui/input-field/input-field.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { FieldLabel } from "../field/index";
-import { Input } from "../input/index";
-import { InputField } from "./index";
-
-// UI-tier story: the input field's orientation-aware root (`Field.Root` + layout). The ready-made
-// `InputField` (Components/InputField) composes this with the box, control, and helper text; here it
-// just frames a label + control to show the `vertical` / `horizontal` layout.
-const meta = {
-  title: "UI/InputField",
-  component: InputField,
-  args: { name: "displayName", orientation: "vertical" },
-} satisfies Meta<typeof InputField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <InputField {...args}>
-      <FieldLabel magnitude="md" inset={false}>
-        Display name
-      </FieldLabel>
-      <Input magnitude="md" placeholder="Ada Lovelace" />
-    </InputField>
-  ),
-};
-
-export const Horizontal: Story = {
-  args: { orientation: "horizontal" },
-  render: Default.render,
-};
diff --git a/packages/propel/src/ui/input-field/input-field.tsx b/packages/propel/src/ui/input-field/input-field.tsx
deleted file mode 100644
index d1fd82f3..00000000
--- a/packages/propel/src/ui/input-field/input-field.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Field as BaseField } from "@base-ui/react/field";
-
-import { type InputFieldVariantProps, inputFieldVariants } from "./variants";
-
-export type InputFieldProps = Omit<BaseField.Root.Props, "className" | "style"> &
-  InputFieldVariantProps;
-
-/** The Base UI `Field.Root` chrome for `InputField`, with orientation-aware layout. */
-export function InputField({ orientation, ...props }: InputFieldProps) {
-  return <BaseField.Root className={inputFieldVariants({ orientation })} {...props} />;
-}
diff --git a/packages/propel/src/ui/input/index.tsx b/packages/propel/src/ui/input/index.tsx
deleted file mode 100644
index 25d0e485..00000000
--- a/packages/propel/src/ui/input/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./input";
-export * from "./input-group";
-export * from "./input-icon-slot";
diff --git a/packages/propel/src/ui/input/input-icon-slot.tsx b/packages/propel/src/ui/input/input-icon-slot.tsx
deleted file mode 100644
index 42be1dd5..00000000
--- a/packages/propel/src/ui/input/input-icon-slot.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { inputIconSlotVariants } from "./variants";
-
-export type InputIconSlotProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/** A 16px decorative slot rendered at the inline start/end of the the input control. */
-export function InputIconSlot({ render, ...props }: InputIconSlotProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: inputIconSlotVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/input/input.stories.tsx b/packages/propel/src/ui/input/input.stories.tsx
deleted file mode 100644
index f012f777..00000000
--- a/packages/propel/src/ui/input/input.stories.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Mail, Search } from "lucide-react";
-import type * as React from "react";
-import { expect, userEvent } from "storybook/test";
-
-import { Field, FieldError, FieldLabel } from "../field/index";
-import type { InputMagnitude } from "../field/variants";
-import { InputGroup, InputIconSlot } from "./index";
-import { Input } from "./index";
-
-const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
-
-// UI-tier story: the bare `Input` is a single native element. To frame it with a border
-// and inline icon addons we compose the single-element `InputGroup` / `InputIconSlot`
-// parts from `ui/field` — the story holds no raw box styling of its own.
-const meta = {
-  title: "UI/Input",
-  component: Input,
-  subcomponents: { InputGroup, InputIconSlot },
-} 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">
-      <InputGroup magnitude={magnitude}>{children}</InputGroup>
-    </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>
-  ),
-};
-
-/** Leading and trailing icon addons frame the control via `InputIconSlot`. */
-export const WithIconSlots: Story = {
-  args: {
-    magnitude: "md",
-    "aria-label": "Search",
-    placeholder: "Search people",
-  },
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <InputSurface>
-      <InputIconSlot>
-        <Search />
-      </InputIconSlot>
-      <Input {...args} />
-      <InputIconSlot>
-        <Mail />
-      </InputIconSlot>
-    </InputSurface>
-  ),
-};
-
-export const FieldComposition: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { magnitude: "md" },
-  render: (args) => (
-    <Field name="displayName">
-      <FieldLabel magnitude="md" inset={false}>
-        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" inset={false}>
-        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
deleted file mode 100644
index 53ea8650..00000000
--- a/packages/propel/src/ui/input/input.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input as BaseInput } from "@base-ui/react/input";
-
-import { inputVariants, type InputMagnitude, type InputVariantProps } from "./variants";
-
-export type { InputMagnitude };
-
-export type InputProps = Omit<BaseInput.Props, "className" | "style"> & InputVariantProps;
-
-/** 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
deleted file mode 100644
index 968f7ccc..00000000
--- a/packages/propel/src/ui/input/variants.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-export const inputVariants = cva(
-  cx(
-    "min-w-0 flex-1 bg-transparent text-primary outline-none",
-    "caret-(--border-color-accent-strong)",
-    "placeholder:text-placeholder",
-    "disabled:cursor-not-allowed disabled:text-disabled disabled:opacity-60",
-  ),
-  {
-    variants: {
-      magnitude: {
-        md: "text-14",
-        lg: "text-14",
-        xl: "text-16",
-      },
-    },
-  },
-);
-
-type InputVariantConfig = VariantProps<typeof inputVariants>;
-
-export type InputMagnitude = NonNullable<InputVariantConfig["magnitude"]>;
-
-export type InputVariantProps = StrictVariantProps<typeof inputVariants>;
-
-// The bordered group that frames the input + its inline icon slots: the shared field-control
-// surface (`focus: within`) + input geometry (rounded-md, px, magnitude py), hover, transition,
-// and the descendant-`:disabled` muting (disabled lives on the inner `<input>`). Danger isn't a
-// prop — the surface recolors its border off the wrapped control's `data-invalid`.
-export const inputGroupVariants = cva(
-  cx(
-    fieldControlSurfaceVariants({ focus: "within" }),
-    "flex w-full items-center gap-1.5 transition-[color,background-color,border-color,box-shadow]",
-    "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-subtle has-[:disabled]:bg-layer-2 has-[:disabled]:ring-0 has-[:disabled]:hover:border-subtle",
-    "rounded-md px-3",
-    "hover:border-subtle-1 hover:bg-layer-2-hover",
-    "focus-within:bg-layer-2 focus-within:hover:border-accent-strong focus-within:hover:bg-layer-2",
-  ),
-  {
-    variants: {
-      magnitude: { md: "py-1.5", lg: "py-2", xl: "py-3" },
-    },
-  },
-);
-
-export type InputGroupVariantProps = StrictVariantProps<typeof inputGroupVariants>;
-
-// The decorative 16px node at the input's inline start/end (sizes its child to `--node-size`).
-export const inputIconSlotVariants = cva(
-  cx(nodeSlotClass, "text-icon-secondary [--node-size:1rem]"),
-);
diff --git a/packages/propel/src/ui/linear-progress/linear-progress-indicator.tsx b/packages/propel/src/ui/linear-progress/linear-progress-indicator.tsx
deleted file mode 100644
index ec884a5c..00000000
--- a/packages/propel/src/ui/linear-progress/linear-progress-indicator.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-import {
-  type LinearProgressIndicatorVariantProps,
-  linearProgressIndicatorVariants,
-} from "./variants";
-
-/** Props for {@link LinearProgressIndicator}; 1:1 with Base UI `LinearProgress.Indicator`. */
-export type LinearProgressIndicatorProps = Omit<
-  BaseProgress.Indicator.Props,
-  "className" | "style"
-> &
-  LinearProgressIndicatorVariantProps;
-
-/** 1:1 wrapper around Base UI `LinearProgress.Indicator`. The `tone` drives the fill color. */
-export function LinearProgressIndicator({ tone, ...props }: LinearProgressIndicatorProps) {
-  return (
-    <BaseProgress.Indicator className={linearProgressIndicatorVariants({ tone })} {...props} />
-  );
-}
diff --git a/packages/propel/src/ui/linear-progress/linear-progress-label.tsx b/packages/propel/src/ui/linear-progress/linear-progress-label.tsx
deleted file mode 100644
index 1702d7fd..00000000
--- a/packages/propel/src/ui/linear-progress/linear-progress-label.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-import { linearProgressLabelVariants } from "./variants";
-
-/** Props for {@link LinearProgressLabel}; 1:1 with Base UI `LinearProgress.Label`. */
-export type LinearProgressLabelProps = Omit<BaseProgress.Label.Props, "className" | "style">;
-
-/** 1:1 wrapper around Base UI `LinearProgress.Label`. */
-export function LinearProgressLabel(props: LinearProgressLabelProps) {
-  return <BaseProgress.Label className={linearProgressLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/linear-progress/linear-progress-track.tsx b/packages/propel/src/ui/linear-progress/linear-progress-track.tsx
deleted file mode 100644
index 94ba8388..00000000
--- a/packages/propel/src/ui/linear-progress/linear-progress-track.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-import { type LinearProgressTrackVariantProps, linearProgressTrackVariants } from "./variants";
-
-/** Props for {@link LinearProgressTrack}; 1:1 with Base UI `LinearProgress.Track`. */
-export type LinearProgressTrackProps = Omit<BaseProgress.Track.Props, "className" | "style"> &
-  LinearProgressTrackVariantProps;
-
-/**
- * 1:1 wrapper around Base UI `LinearProgress.Track`. `magnitude` drives the track thickness (`sm`
- * 5px / `md` 8px).
- */
-export function LinearProgressTrack({ magnitude, ...props }: LinearProgressTrackProps) {
-  return <BaseProgress.Track className={linearProgressTrackVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/linear-progress/linear-progress-value.tsx b/packages/propel/src/ui/linear-progress/linear-progress-value.tsx
deleted file mode 100644
index 2e1bc0a6..00000000
--- a/packages/propel/src/ui/linear-progress/linear-progress-value.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-import { linearProgressValueVariants } from "./variants";
-
-/** Props for {@link LinearProgressValue}; 1:1 with Base UI `LinearProgress.Value`. */
-export type LinearProgressValueProps = Omit<BaseProgress.Value.Props, "className" | "style">;
-
-/**
- * 1:1 wrapper around Base UI `LinearProgress.Value`. Renders the percentage as a neutral readout;
- * the semantic tone lives on the fill, not the number.
- */
-export function LinearProgressValue(props: LinearProgressValueProps) {
-  return <BaseProgress.Value className={linearProgressValueVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/linear-progress/linear-progress.stories.tsx b/packages/propel/src/ui/linear-progress/linear-progress.stories.tsx
deleted file mode 100644
index 6edb58ca..00000000
--- a/packages/propel/src/ui/linear-progress/linear-progress.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import {
-  LinearProgress,
-  LinearProgressIndicator,
-  LinearProgressLabel,
-  LinearProgressTrack,
-  LinearProgressValue,
-} from "./index";
-
-// UI-tier parts of the horizontal bar. The ready-made `LinearProgress` (Components/LinearProgress)
-// composes these; here they are assembled by hand.
-const meta = {
-  title: "UI/LinearProgress",
-  component: LinearProgress,
-  subcomponents: {
-    LinearProgressTrack,
-    LinearProgressIndicator,
-    LinearProgressValue,
-    LinearProgressLabel,
-  },
-  // The render fns assemble their own atoms; these satisfy the Root's required value-model props.
-  args: { value: 60, "aria-label": "Progress" },
-} satisfies Meta<typeof LinearProgress>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="w-64">
-      <LinearProgress {...args}>
-        <LinearProgressTrack magnitude="md">
-          <LinearProgressIndicator tone="brand" />
-        </LinearProgressTrack>
-        <LinearProgressValue>
-          {(_, value) => (value == null ? "" : `${Math.round(value)}%`)}
-        </LinearProgressValue>
-      </LinearProgress>
-    </div>
-  ),
-};
diff --git a/packages/propel/src/ui/linear-progress/linear-progress.tsx b/packages/propel/src/ui/linear-progress/linear-progress.tsx
deleted file mode 100644
index 73467c92..00000000
--- a/packages/propel/src/ui/linear-progress/linear-progress.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-import { linearProgressVariants } from "./variants";
-
-/** Props for {@link LinearProgress} (the Base UI `LinearProgress.Root`). */
-export type LinearProgressProps = Omit<BaseProgress.Root.Props, "className" | "style">;
-
-/**
- * The atomic `LinearProgress.Root` — maps 1:1 to Base UI's `LinearProgress.Root`. It owns the
- * `linearProgressbar` value model (`value` / `min` / `max` / `format` are native, not styling) and
- * groups the linearProgress parts (`LinearProgressTrack` → `LinearProgressIndicator`,
- * `LinearProgressLabel`, `LinearProgressValue`).
- *
- * For the ready-made bar (linear + circular variants, `magnitude`, the trailing `%` label), use the
- * `LinearProgress` from `@plane/propel/components/linearProgress`.
- */
-export function LinearProgress(props: LinearProgressProps) {
-  return <BaseProgress.Root className={linearProgressVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/list/index.tsx b/packages/propel/src/ui/list/index.tsx
deleted file mode 100644
index c4870cb4..00000000
--- a/packages/propel/src/ui/list/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./list";
-export * from "./list-section-heading";
-export * from "./list-section-trigger";
-export * from "./list-section-trigger-indicator";
-export * from "./list-item";
-export * from "./list-item-link";
-export * from "./list-item-button";
-export * from "./list-item-icon";
-export * from "./list-item-label";
diff --git a/packages/propel/src/ui/list/list-item-button.tsx b/packages/propel/src/ui/list/list-item-button.tsx
deleted file mode 100644
index d24015bc..00000000
--- a/packages/propel/src/ui/list/list-item-button.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CompositeItem, type CompositeItemProps } from "../../base/composite";
-import { type ListItemButtonVariantProps, listItemButtonVariants } from "./variants";
-
-export type ListItemButtonProps = Omit<CompositeItemProps, "className" | "style" | "tag"> &
-  ListItemButtonVariantProps;
-
-/**
- * A row's primary action — a `<button>` that is also a roving `Composite` item (like
- * `Toolbar.Button`/`Menu.Item`). For action rows that don't navigate, e.g. a "More" row that
- * expands the sidebar; it shares the row chrome with `ListItemLink`. Compose a `ListItemIcon` +
- * `ListItemLabel` inside.
- */
-export function ListItemButton(props: ListItemButtonProps) {
-  return (
-    <CompositeItem tag="button" type="button" className={listItemButtonVariants()} {...props} />
-  );
-}
diff --git a/packages/propel/src/ui/list/list-item-icon.tsx b/packages/propel/src/ui/list/list-item-icon.tsx
deleted file mode 100644
index 7f3df21f..00000000
--- a/packages/propel/src/ui/list/list-item-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { type ListItemIconVariantProps, listItemIconVariants } from "./variants";
-
-export type ListItemIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
-  ListItemIconVariantProps;
-
-/**
- * The row's icon slot — pass an icon or an `Avatar` as `children`; the slot sizes it. Renders a
- * `<span>` by default. Decorative: the row's label names it, so keep the glyph `aria-hidden`.
- */
-export function ListItemIcon({ render, ...props }: ListItemIconProps) {
-  return useRender({
-    defaultTagName: "span",
-    render,
-    props: mergeProps({ className: listItemIconVariants() }, props),
-  });
-}
diff --git a/packages/propel/src/ui/list/list-item-link.tsx b/packages/propel/src/ui/list/list-item-link.tsx
deleted file mode 100644
index 6046c92e..00000000
--- a/packages/propel/src/ui/list/list-item-link.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { CompositeItem, type CompositeItemProps } from "../../base/composite";
-import { type ListItemLinkVariantProps, listItemLinkVariants } from "./variants";
-
-export type ListItemLinkProps = Omit<CompositeItemProps, "className" | "style" | "tag"> &
-  ListItemLinkVariantProps;
-
-/**
- * A row's primary navigation target — an `<a>` that is also a roving `Composite` item (like
- * `Toolbar.Link`/`Menu.LinkItem`). Mark the current page with `aria-current="page"` (the wrapping
- * `ListItem` reads it for the selected look). Render-capable: pass `render` to swap in a router
- * `<Link>`. Compose a `ListItemIcon` + `ListItemLabel` inside.
- */
-export function ListItemLink(props: ListItemLinkProps) {
-  return <CompositeItem tag="a" className={listItemLinkVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/list/list-section-trigger-indicator.tsx b/packages/propel/src/ui/list/list-section-trigger-indicator.tsx
deleted file mode 100644
index c2ae04ec..00000000
--- a/packages/propel/src/ui/list/list-section-trigger-indicator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type * as React from "react";
-
-import { listSectionTriggerIndicatorVariants } from "./variants";
-
-export type ListSectionTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
->;
-
-/**
- * The disclosure caret slot at a `ListSectionTrigger`'s inline-end. Renders whatever svg you pass
- * (sized to the trigger's `--node-size`) pointing toward the inline-end while collapsed, rotating
- * down when the panel opens — the same motion as the accordion trigger. Decorative — the trigger
- * carries the a11y state — so it is `aria-hidden`.
- */
-export function ListSectionTriggerIndicator(props: ListSectionTriggerIndicatorProps) {
-  return <span aria-hidden className={listSectionTriggerIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/list/list.stories.tsx b/packages/propel/src/ui/list/list.stories.tsx
deleted file mode 100644
index 2aef719e..00000000
--- a/packages/propel/src/ui/list/list.stories.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { Collapsible } from "@base-ui/react/collapsible";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronDown, Ellipsis, Inbox, LayoutGrid, Settings } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemLabel,
-  ListItemLink,
-  ListSectionTrigger,
-  ListSectionTriggerIndicator,
-} from "./index";
-
-// `List` is role-flexible; this story uses `role="toolbar"` (the canonical roving-controls role) so
-// axe passes while showing the chrome. The production role — navigation tree vs region — is the open
-// a11y decision in the RFC, settled at composition time.
-const meta = {
-  title: "UI/List",
-  component: List,
-  subcomponents: {
-    ListItem,
-    ListItemLink,
-    ListItemButton,
-    ListItemIcon,
-    ListItemLabel,
-    ListSectionTrigger,
-    ListSectionTriggerIndicator,
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-64">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A navigation list; the current page carries `aria-current="page"` and its row reads as selected. */
-export const Navigation: Story = {
-  render: () => (
-    <List role="toolbar" aria-label="Workspace">
-      <ListItem>
-        <ListItemLink href="#inbox">
-          <ListItemIcon>
-            <Inbox aria-hidden />
-          </ListItemIcon>
-          <ListItemLabel>Inbox</ListItemLabel>
-        </ListItemLink>
-      </ListItem>
-      <ListItem>
-        <ListItemLink href="#projects" aria-current="page">
-          <ListItemIcon>
-            <LayoutGrid aria-hidden />
-          </ListItemIcon>
-          <ListItemLabel>Projects</ListItemLabel>
-        </ListItemLink>
-      </ListItem>
-      <ListItem>
-        <ListItemLink href="#settings">
-          <ListItemIcon>
-            <Settings aria-hidden />
-          </ListItemIcon>
-          <ListItemLabel>Settings</ListItemLabel>
-        </ListItemLink>
-      </ListItem>
-      <ListItem>
-        {/* An action row (not navigation) — a button that shares the row chrome. */}
-        <ListItemButton>
-          <ListItemIcon>
-            <Ellipsis aria-hidden />
-          </ListItemIcon>
-          <ListItemLabel>More</ListItemLabel>
-        </ListItemButton>
-      </ListItem>
-    </List>
-  ),
-  play: async ({ canvas, userEvent }) => {
-    const inbox = canvas.getByRole("link", { name: "Inbox" });
-    const projects = canvas.getByRole("link", { name: "Projects" });
-
-    // The current page is exposed via aria-current, and its row reads as selected.
-    await expect(projects).toHaveAttribute("aria-current", "page");
-    const selectedRow = projects.parentElement;
-    const restingRow = inbox.parentElement;
-    if (!selectedRow || !restingRow) throw new Error("expected each link to sit in a ListItem row");
-    await expect(getComputedStyle(selectedRow).backgroundColor).not.toBe(
-      getComputedStyle(restingRow).backgroundColor,
-    );
-
-    // One tab stop for the whole list; arrow keys roam the rows — links and the action button alike.
-    inbox.focus();
-    await expect(inbox).toHaveFocus();
-    await userEvent.keyboard("{ArrowDown}");
-    await expect(projects).toHaveFocus();
-    await userEvent.keyboard("{ArrowDown}{ArrowDown}");
-    await expect(canvas.getByRole("button", { name: "More" })).toHaveFocus();
-  },
-};
-
-/**
- * A collapsible section. `ListSectionTrigger` is a plain styled button; the disclosure behavior is
- * grafted by rendering it as a `Collapsible.Trigger` (the styled button stays the outer element),
- * and `ListSectionTriggerIndicator` rotates the chevron off the trigger's `data-panel-open` —
- * pointing inline-end while collapsed, down when open.
- */
-export const Section: Story = {
-  render: () => (
-    <Collapsible.Root defaultOpen>
-      <ListSectionTrigger render={<Collapsible.Trigger />}>
-        Workspace
-        <ListSectionTriggerIndicator>
-          <ChevronDown aria-hidden />
-        </ListSectionTriggerIndicator>
-      </ListSectionTrigger>
-      <Collapsible.Panel>
-        <List role="toolbar" aria-label="Workspace">
-          <ListItem>
-            <ListItemLink href="#projects" aria-current="page">
-              <ListItemIcon>
-                <LayoutGrid aria-hidden />
-              </ListItemIcon>
-              <ListItemLabel>Projects</ListItemLabel>
-            </ListItemLink>
-          </ListItem>
-          <ListItem>
-            <ListItemLink href="#settings">
-              <ListItemIcon>
-                <Settings aria-hidden />
-              </ListItemIcon>
-              <ListItemLabel>Settings</ListItemLabel>
-            </ListItemLink>
-          </ListItem>
-        </List>
-      </Collapsible.Panel>
-    </Collapsible.Root>
-  ),
-  play: async ({ canvas, userEvent }) => {
-    // The plain trigger gets its disclosure behavior from the Collapsible.Trigger it renders as.
-    const trigger = canvas.getByRole("button", { name: "Workspace" });
-    await expect(trigger).toHaveAttribute("aria-expanded", "true");
-    await userEvent.click(trigger);
-    await expect(trigger).toHaveAttribute("aria-expanded", "false");
-    await userEvent.click(trigger);
-    await expect(trigger).toHaveAttribute("aria-expanded", "true");
-    trigger.blur();
-  },
-};
diff --git a/packages/propel/src/ui/list/list.tsx b/packages/propel/src/ui/list/list.tsx
deleted file mode 100644
index dcd19805..00000000
--- a/packages/propel/src/ui/list/list.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Composite, type CompositeProps } from "../../base/composite";
-import { type ListVariantProps, listVariants } from "./variants";
-
-export type ListProps = Omit<CompositeProps, "className" | "style"> & ListVariantProps;
-
-/**
- * A vertical, roving-tabindex list of rows (built on `Composite`) — the primitive sidebars compose.
- * One tab stop for the whole list; arrow keys move between the focusable rows. Role-flexible: pass
- * the `role`/`aria-*` the context calls for (e.g. a navigation tree). Compose `ListItem` rows
- * inside.
- */
-export function List(props: ListProps) {
-  return <Composite className={listVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/list/variants.ts b/packages/propel/src/ui/list/variants.ts
deleted file mode 100644
index ac6bcd58..00000000
--- a/packages/propel/src/ui/list/variants.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { listItemPrimaryVariants } from "../../internal/list-item-primary";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/** The list container — a vertical stack of rows. Role/aria are supplied by the consumer. */
-export const listVariants = cva("flex w-full flex-col gap-0.5");
-export type ListVariantProps = StrictVariantProps<typeof listVariants>;
-
-/**
- * A row wrapper. It owns the chrome (hover + selected fill + focus ring) and the layout, but is not
- * itself the focusable target — that's the `ListItemLink`/`ListItemButton` it wraps. Selected and
- * focus are read off descendants via `:has`, so the whole row reacts to its primary's state.
- */
-export const listItemVariants = cva(
-  cx(
-    "group/list-item relative flex h-8 w-full items-center gap-2 rounded-lg px-2",
-    "text-13 text-secondary transition-colors",
-    "hover:bg-layer-transparent-hover",
-    "has-[[aria-current=page]]:bg-layer-transparent-selected has-[[aria-current=page]]:text-primary",
-    "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-strong",
-  ),
-);
-export type ListItemVariantProps = StrictVariantProps<typeof listItemVariants>;
-
-// A row's primary — `ListItemLink` (`<a>`) and `ListItemButton` (`<button>`) — wears the shared
-// row-primary chrome from `internal/list-item-primary` (rule 4); they differ only in the element
-// they render (rule 6c).
-export const listItemLinkVariants = listItemPrimaryVariants;
-export type ListItemLinkVariantProps = StrictVariantProps<typeof listItemLinkVariants>;
-
-export const listItemButtonVariants = listItemPrimaryVariants;
-export type ListItemButtonVariantProps = StrictVariantProps<typeof listItemButtonVariants>;
-
-/** The row's icon slot — holds an icon or an Avatar, sized to `--node-size`. */
-export const listItemIconVariants = cva(
-  "inline-flex shrink-0 items-center justify-center [--node-size:1rem] [&>svg]:size-4",
-);
-export type ListItemIconVariantProps = StrictVariantProps<typeof listItemIconVariants>;
-
-/** The row label — fills the remaining width and truncates. */
-export const listItemLabelVariants = cva("min-w-0 flex-1 truncate");
-export type ListItemLabelVariantProps = StrictVariantProps<typeof listItemLabelVariants>;
-
-/**
- * A static section heading — a small, muted label that names a group of rows. The non-interactive
- * sibling of `listSectionTrigger`: no button affordance (no hover/focus/cursor), it just titles a
- * static section in a settings-style sidebar.
- */
-export const listSectionHeadingVariants = cva(
-  cx("flex h-7 w-full items-center px-2 py-1", "text-13 font-semibold text-tertiary"),
-);
-export type ListSectionHeadingVariantProps = StrictVariantProps<typeof listSectionHeadingVariants>;
-
-/**
- * A collapsible section's header — a small, muted heading that toggles the section, with the
- * chevron pushed to the inline-end edge of the row. Styled `Collapsible.Trigger`; carries the
- * `group` so a `CollapsibleTriggerIndicator` inside rotates off its `data-panel-open`.
- */
-export const listSectionTriggerVariants = cva(
-  cx(
-    "group flex w-full items-center justify-between gap-1 rounded-md px-2 py-1 [--node-size:0.875rem]",
-    "text-12 font-medium text-tertiary transition-colors",
-    "cursor-pointer outline-none hover:text-secondary",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-  ),
-);
-export type ListSectionTriggerVariantProps = StrictVariantProps<typeof listSectionTriggerVariants>;
-
-/**
- * The section header's disclosure caret slot. Renders the chevron you pass (sized to the trigger's
- * `--node-size`) pointing toward the inline-end while collapsed, rotating down when the panel opens
- * — the same disclosure motion as the accordion trigger, mirrored under RTL.
- */
-export const listSectionTriggerIndicatorVariants = cva(
-  cx(
-    nodeSlotClass,
-    "text-icon-secondary [--node-size:0.875rem]",
-    "transition-transform duration-200",
-    "-rotate-90 group-data-panel-open:rotate-0",
-    "rtl:rotate-90 rtl:group-data-panel-open:rotate-0",
-  ),
-);
-export type ListSectionTriggerIndicatorVariantProps = StrictVariantProps<
-  typeof listSectionTriggerIndicatorVariants
->;
diff --git a/packages/propel/src/ui/menu/index.tsx b/packages/propel/src/ui/menu/index.tsx
deleted file mode 100644
index c9db62c8..00000000
--- a/packages/propel/src/ui/menu/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-export * from "./menu";
-export * from "./menu-arrow";
-export * from "./menu-backdrop";
-export * from "./menu-checkbox-item";
-export * from "./menu-checkbox-item-indicator";
-export * from "./menu-footer";
-export * from "./menu-group";
-export * from "./menu-group-label";
-export * from "./menu-item";
-export * from "./menu-item-content";
-export * from "./menu-item-control";
-export * from "./menu-item-description";
-export * from "./menu-item-icon";
-export * from "./menu-item-meta";
-export * from "./menu-item-secondary-text";
-export * from "./menu-item-selected-indicator";
-export * from "./menu-item-submenu-indicator";
-export * from "./menu-item-title";
-export * from "./menu-item-trailing";
-export * from "./menu-item-title-row";
-export * from "./menu-label";
-export * from "./menu-label-meta";
-export * from "./menu-label-title";
-export * from "./menu-link-item";
-export * from "./menu-popup";
-export * from "./menu-portal";
-export * from "./menu-positioner";
-export * from "./menu-radio-group";
-export * from "./menu-radio-item";
-export * from "./menu-radio-item-indicator";
-export * from "./menu-search";
-export * from "./menu-search-icon";
-export * from "./menu-search-input";
-export * from "./menu-separator";
-export * from "./menu-submenu";
-export * from "./menu-submenu-trigger";
-export * from "./menu-trigger";
-export * from "./menu-viewport";
diff --git a/packages/propel/src/ui/menu/menu-arrow.tsx b/packages/propel/src/ui/menu/menu-arrow.tsx
deleted file mode 100644
index ad776138..00000000
--- a/packages/propel/src/ui/menu/menu-arrow.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuArrowVariants } from "./variants";
-
-export type MenuArrowProps = Omit<BaseMenu.Arrow.Props, "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
deleted file mode 100644
index 26d69c68..00000000
--- a/packages/propel/src/ui/menu/menu-backdrop.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-export type MenuBackdropProps = Omit<BaseMenu.Backdrop.Props, "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
deleted file mode 100644
index 504878ed..00000000
--- a/packages/propel/src/ui/menu/menu-checkbox-item-indicator.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuCheckboxItemIndicatorVariants } from "./variants";
-
-export type MenuCheckboxItemIndicatorProps = Omit<
-  BaseMenu.CheckboxItemIndicator.Props,
-  "className" | "style"
->;
-
-/**
- * The checkbox BOX shown at the leading edge of a checkbox item. Renders
- * `Menu.CheckboxItemIndicator` styled as the box (via `menuCheckboxItemIndicatorVariants`) and
- * `keepMounted` so the empty bordered box is visible when unchecked — Base UI sets
- * `data-checked`/`data-unchecked` on it, filling the box and revealing the glyph child only when
- * ticked. Not a 1:1 wrap of `Menu.CheckboxItemIndicator` (it bakes the always-mounted box).
- */
-export function MenuCheckboxItemIndicator(props: MenuCheckboxItemIndicatorProps) {
-  return (
-    <BaseMenu.CheckboxItemIndicator
-      keepMounted
-      className={menuCheckboxItemIndicatorVariants()}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/menu/menu-checkbox-item.tsx b/packages/propel/src/ui/menu/menu-checkbox-item.tsx
deleted file mode 100644
index 12cdfea3..00000000
--- a/packages/propel/src/ui/menu/menu-checkbox-item.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuCheckboxItemVariants } from "./variants";
-
-export type MenuCheckboxItemProps = Omit<
-  BaseMenu.CheckboxItem.Props,
-  "className" | "style" | "label"
->;
-
-/** A toggleable multi-select menu row with `role="menuitemcheckbox"`. Wraps `Menu.CheckboxItem` 1:1. */
-export function MenuCheckboxItem(props: MenuCheckboxItemProps) {
-  return <BaseMenu.CheckboxItem className={menuCheckboxItemVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-group-label.tsx b/packages/propel/src/ui/menu/menu-group-label.tsx
deleted file mode 100644
index 68d6b460..00000000
--- a/packages/propel/src/ui/menu/menu-group-label.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuGroupLabelVariants } from "./variants";
-
-export type MenuGroupLabelProps = Omit<BaseMenu.GroupLabel.Props, "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
deleted file mode 100644
index 15810e10..00000000
--- a/packages/propel/src/ui/menu/menu-group.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-export type MenuGroupProps = Omit<BaseMenu.Group.Props, "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-content.tsx b/packages/propel/src/ui/menu/menu-item-content.tsx
deleted file mode 100644
index a955e588..00000000
--- a/packages/propel/src/ui/menu/menu-item-content.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { menuItemContentVariants } from "./variants";
-
-export type MenuItemContentProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The row's text column — a `MenuItemTitleRow` and an optional `MenuItemDescription`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The text column of a row. Grows to fill the row so trailing nodes/indicators sit at the
- * inline-end, and stacks a `MenuItemTitleRow` over an optional `MenuItemDescription`.
- */
-export function MenuItemContent(props: MenuItemContentProps) {
-  return <span className={menuItemContentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-control.tsx b/packages/propel/src/ui/menu/menu-item-control.tsx
deleted file mode 100644
index 2f4ac788..00000000
--- a/packages/propel/src/ui/menu/menu-item-control.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuItemControlVariants } from "./variants";
-
-export type MenuItemControlProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The leading toggle visual — a checkbox or radio indicator. */
-  children?: React.ReactNode;
-};
-
-/** The leading control slot of a checkbox/radio row, holding its visual toggle. */
-export function MenuItemControl(props: MenuItemControlProps) {
-  return <span className={menuItemControlVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-description.tsx b/packages/propel/src/ui/menu/menu-item-description.tsx
deleted file mode 100644
index c6a80d4b..00000000
--- a/packages/propel/src/ui/menu/menu-item-description.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuItemDescriptionVariants } from "./variants";
-
-export type MenuItemDescriptionProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The muted description text shown beneath the title. */
-  children?: React.ReactNode;
-};
-
-/** A muted second line beneath the title, holding the item's description. */
-export function MenuItemDescription(props: MenuItemDescriptionProps) {
-  return <span className={menuItemDescriptionVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-icon.tsx b/packages/propel/src/ui/menu/menu-item-icon.tsx
deleted file mode 100644
index d569f88d..00000000
--- a/packages/propel/src/ui/menu/menu-item-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { menuItemIconVariants } from "./variants";
-
-export type MenuItemIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * A decorative leading icon at a row's inline-start. Sizes its single child to the row's
- * `--node-size`, so callers pass a bare icon. Decorative (the row carries the accessible name), so
- * it is `aria-hidden`.
- */
-export function MenuItemIcon({ render, ...props }: MenuItemIconProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: menuItemIconVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/menu/menu-item-secondary-text.tsx b/packages/propel/src/ui/menu/menu-item-secondary-text.tsx
deleted file mode 100644
index 8c7a4477..00000000
--- a/packages/propel/src/ui/menu/menu-item-secondary-text.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuItemSecondaryTextVariants } from "./variants";
-
-export type MenuItemSecondaryTextProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** Muted text shown inline after the title (e.g. a hint or translation). */
-  children?: React.ReactNode;
-};
-
-/** Muted text shown inline after the title (e.g. a translation or a hint). */
-export function MenuItemSecondaryText(props: MenuItemSecondaryTextProps) {
-  return <span className={menuItemSecondaryTextVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-selected-indicator.tsx b/packages/propel/src/ui/menu/menu-item-selected-indicator.tsx
deleted file mode 100644
index f3500e25..00000000
--- a/packages/propel/src/ui/menu/menu-item-selected-indicator.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { menuItemSelectedIndicatorVariants } from "./variants";
-
-export type MenuItemSelectedIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The check glyph to render (e.g. a Lucide `Check`), sized to the row's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The single-select check slot shown at a row's inline-end. Decorative (the row carries the
- * selected state), so it is `aria-hidden`. Renders and sizes its single child; pass the glyph as
- * `children`.
- */
-export function MenuItemSelectedIndicator(props: MenuItemSelectedIndicatorProps) {
-  return <span aria-hidden className={menuItemSelectedIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-submenu-indicator.tsx b/packages/propel/src/ui/menu/menu-item-submenu-indicator.tsx
deleted file mode 100644
index 2c28ac6a..00000000
--- a/packages/propel/src/ui/menu/menu-item-submenu-indicator.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { menuItemSubmenuIndicatorVariants } from "./variants";
-
-export type MenuItemSubmenuIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The submenu chevron to render (e.g. a Lucide `ChevronRight`), sized to the row's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The chevron slot marking a submenu trigger, pinned at the row's inline-end and mirrored under
- * RTL. Decorative (the trigger carries `aria-haspopup`), so it is `aria-hidden`. Renders and sizes
- * its single child; pass the glyph as `children`.
- */
-export function MenuItemSubmenuIndicator(props: MenuItemSubmenuIndicatorProps) {
-  return <span aria-hidden className={menuItemSubmenuIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-title-row.tsx b/packages/propel/src/ui/menu/menu-item-title-row.tsx
deleted file mode 100644
index abc84fa7..00000000
--- a/packages/propel/src/ui/menu/menu-item-title-row.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuItemTitleRowVariants } from "./variants";
-
-export type MenuItemTitleRowProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The title line — a `MenuItemTitle` and any inline `MenuItemSecondaryText`. */
-  children?: React.ReactNode;
-};
-
-/** The baseline-aligned line holding a `MenuItemTitle` and any inline `MenuItemSecondaryText`. */
-export function MenuItemTitleRow(props: MenuItemTitleRowProps) {
-  return <span className={menuItemTitleRowVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-title.tsx b/packages/propel/src/ui/menu/menu-item-title.tsx
deleted file mode 100644
index 052cfb87..00000000
--- a/packages/propel/src/ui/menu/menu-item-title.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuItemTitleVariants } from "./variants";
-
-export type MenuItemTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The row's primary label text. */
-  children?: React.ReactNode;
-};
-
-/** A row's primary label. Truncates rather than wrapping. */
-export function MenuItemTitle(props: MenuItemTitleProps) {
-  return <span className={menuItemTitleVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item-trailing.tsx b/packages/propel/src/ui/menu/menu-item-trailing.tsx
deleted file mode 100644
index d997b548..00000000
--- a/packages/propel/src/ui/menu/menu-item-trailing.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { menuItemTrailingVariants } from "./variants";
-
-export type MenuItemTrailingProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** Trailing content — a shortcut, count, or chevron. */
-  children?: React.ReactNode;
-};
-
-/**
- * A trailing slot at the row's inline-end for arbitrary content (a shortcut, a count, a chevron).
- * Sizes any icon child to the row's `--node-size`; unlike `MenuItemIcon` it adds no tint, so passed
- * content keeps its own color.
- */
-export function MenuItemTrailing(props: MenuItemTrailingProps) {
-  return <span className={menuItemTrailingVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-item.tsx b/packages/propel/src/ui/menu/menu-item.tsx
deleted file mode 100644
index 77ca7a41..00000000
--- a/packages/propel/src/ui/menu/menu-item.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { type MenuRowVariantProps, menuRowVariants } from "./variants";
-
-export type MenuItemProps = Omit<BaseMenu.Item.Props, "className" | "style"> & MenuRowVariantProps;
-
-/** A selectable menu row. Wraps `Menu.Item` 1:1. */
-export function MenuItem({ layout, ...props }: MenuItemProps) {
-  return <BaseMenu.Item className={menuRowVariants({ layout })} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-label-meta.tsx b/packages/propel/src/ui/menu/menu-label-meta.tsx
deleted file mode 100644
index febea35f..00000000
--- a/packages/propel/src/ui/menu/menu-label-meta.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuLabelMetaVariants } from "./variants";
-
-export type MenuLabelMetaProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** Trailing metadata text pinned at the label's inline-end. */
-  children?: React.ReactNode;
-};
-
-/** Trailing metadata pinned at the inline-end of a `MenuLabel`. */
-export function MenuLabelMeta(props: MenuLabelMetaProps) {
-  return <span className={menuLabelMetaVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-label-title.tsx b/packages/propel/src/ui/menu/menu-label-title.tsx
deleted file mode 100644
index 8ad50aec..00000000
--- a/packages/propel/src/ui/menu/menu-label-title.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menuLabelTitleVariants } from "./variants";
-
-export type MenuLabelTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The label's title text. */
-  children?: React.ReactNode;
-};
-
-/** The growing title within a `MenuLabel`. Grows so a trailing `MenuLabelMeta` sits at the edge. */
-export function MenuLabelTitle(props: MenuLabelTitleProps) {
-  return <span className={menuLabelTitleVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-label.tsx b/packages/propel/src/ui/menu/menu-label.tsx
deleted file mode 100644
index a4fda6f3..00000000
--- a/packages/propel/src/ui/menu/menu-label.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuLabelVariants } from "./variants";
-
-export type MenuLabelProps = Omit<BaseMenu.GroupLabel.Props, "className" | "style">;
-
-/** A non-interactive section heading for a group of menu items. Wraps `Menu.GroupLabel` 1:1. */
-export function MenuLabel(props: MenuLabelProps) {
-  return <BaseMenu.GroupLabel className={menuLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-link-item.tsx b/packages/propel/src/ui/menu/menu-link-item.tsx
deleted file mode 100644
index e2509e0b..00000000
--- a/packages/propel/src/ui/menu/menu-link-item.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuRowVariants } from "./variants";
-
-export type MenuLinkItemProps = Omit<BaseMenu.LinkItem.Props, "className" | "style">;
-
-/** A navigational `<a>` menu row. Wraps `Menu.LinkItem` 1:1. */
-export function MenuLinkItem(props: MenuLinkItemProps) {
-  return <BaseMenu.LinkItem className={menuRowVariants({ layout: "default" })} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-popup.tsx b/packages/propel/src/ui/menu/menu-popup.tsx
deleted file mode 100644
index cb089b7b..00000000
--- a/packages/propel/src/ui/menu/menu-popup.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { type MenuPopupVariantProps, menuPopupVariants } from "./variants";
-
-export type MenuPopupProps = Omit<BaseMenu.Popup.Props, "className" | "style"> &
-  MenuPopupVariantProps;
-
-/** The menu surface that contains the items. Wraps `Menu.Popup` 1:1. */
-export function MenuPopup({ elevation, ...props }: MenuPopupProps) {
-  return <BaseMenu.Popup className={menuPopupVariants({ elevation })} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-portal.tsx b/packages/propel/src/ui/menu/menu-portal.tsx
deleted file mode 100644
index aac9f32d..00000000
--- a/packages/propel/src/ui/menu/menu-portal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-export type MenuPortalProps = Omit<BaseMenu.Portal.Props, "className" | "style">;
-
-/** Portals the popup out to `<body>` by default. Re-exports `Menu.Portal` 1:1. */
-export function MenuPortal(props: MenuPortalProps) {
-  return <BaseMenu.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-positioner.tsx b/packages/propel/src/ui/menu/menu-positioner.tsx
deleted file mode 100644
index 4804cda6..00000000
--- a/packages/propel/src/ui/menu/menu-positioner.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuPositionerVariants } from "./variants";
-
-export type MenuPositionerProps = Omit<BaseMenu.Positioner.Props, "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
deleted file mode 100644
index 4c8b1575..00000000
--- a/packages/propel/src/ui/menu/menu-radio-group.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-export type MenuRadioGroupProps = Omit<BaseMenu.RadioGroup.Props, "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
deleted file mode 100644
index 2f2bb2e3..00000000
--- a/packages/propel/src/ui/menu/menu-radio-item-indicator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuRadioItemIndicatorVariants } from "./variants";
-
-export type MenuRadioItemIndicatorProps = Omit<
-  BaseMenu.RadioItemIndicator.Props,
-  "className" | "style"
->;
-
-/** Shows whether the radio item is selected. Wraps `Menu.RadioItemIndicator` 1:1. */
-export function MenuRadioItemIndicator(props: MenuRadioItemIndicatorProps) {
-  return <BaseMenu.RadioItemIndicator className={menuRadioItemIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-radio-item.tsx b/packages/propel/src/ui/menu/menu-radio-item.tsx
deleted file mode 100644
index b635c4fd..00000000
--- a/packages/propel/src/ui/menu/menu-radio-item.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuRowVariants } from "./variants";
-
-export type MenuRadioItemProps = Omit<BaseMenu.RadioItem.Props, "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={menuRowVariants({ layout: "default" })} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-search-icon.tsx b/packages/propel/src/ui/menu/menu-search-icon.tsx
deleted file mode 100644
index e231411f..00000000
--- a/packages/propel/src/ui/menu/menu-search-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { menuSearchIconVariants } from "./variants";
-
-export type MenuSearchIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The search icon to render (e.g. a Lucide `Search`), sized to the slot. */
-  children?: React.ReactNode;
-};
-
-/**
- * The leading icon slot inside `MenuSearch`. Sizes its single child; decorative, so it is
- * `aria-hidden`. Renders and sizes its single child; pass the glyph as `children`.
- */
-export function MenuSearchIcon(props: MenuSearchIconProps) {
-  return <span aria-hidden className={menuSearchIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-search-input.tsx b/packages/propel/src/ui/menu/menu-search-input.tsx
deleted file mode 100644
index 3b7e036a..00000000
--- a/packages/propel/src/ui/menu/menu-search-input.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type * as React from "react";
-
-import { menuSearchInputVariants } from "./variants";
-
-export type MenuSearchInputProps = Omit<
-  React.ComponentPropsWithoutRef<"input">,
-  "className" | "style"
->;
-
-/**
- * The borderless text field inside `MenuSearch`. Stops keydown from bubbling so typing does not
- * trigger the menu's own type-ahead navigation.
- */
-export function MenuSearchInput({ onKeyDown, ...props }: MenuSearchInputProps) {
-  return (
-    <input
-      className={menuSearchInputVariants()}
-      onKeyDown={(event) => {
-        event.stopPropagation();
-        onKeyDown?.(event);
-      }}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/ui/menu/menu-separator.tsx b/packages/propel/src/ui/menu/menu-separator.tsx
deleted file mode 100644
index 9a024bd2..00000000
--- a/packages/propel/src/ui/menu/menu-separator.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuSeparatorVariants } from "./variants";
-
-export type MenuSeparatorProps = Omit<BaseMenu.Separator.Props, "className" | "style">;
-
-/** A thin divider between groups of items. */
-export function MenuSeparator(props: MenuSeparatorProps) {
-  return <BaseMenu.Separator className={menuSeparatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-submenu-trigger.tsx b/packages/propel/src/ui/menu/menu-submenu-trigger.tsx
deleted file mode 100644
index e5ee48c0..00000000
--- a/packages/propel/src/ui/menu/menu-submenu-trigger.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuSubmenuTriggerVariants } from "./variants";
-
-export type MenuSubmenuTriggerProps = Omit<
-  BaseMenu.SubmenuTrigger.Props,
-  "className" | "style" | "label"
->;
-
-/** The row that opens a submenu. Wraps `Menu.SubmenuTrigger` 1:1. */
-export function MenuSubmenuTrigger(props: MenuSubmenuTriggerProps) {
-  return <BaseMenu.SubmenuTrigger className={menuSubmenuTriggerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu-trigger.tsx b/packages/propel/src/ui/menu/menu-trigger.tsx
deleted file mode 100644
index 414cc5e4..00000000
--- a/packages/propel/src/ui/menu/menu-trigger.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-export type MenuTriggerProps = Omit<BaseMenu.Trigger.Props, "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
deleted file mode 100644
index edb1cfeb..00000000
--- a/packages/propel/src/ui/menu/menu-viewport.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-
-import { menuViewportVariants } from "./variants";
-
-export type MenuViewportProps = Omit<BaseMenu.Viewport.Props, "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={menuViewportVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menu/menu.stories.tsx b/packages/propel/src/ui/menu/menu.stories.tsx
deleted file mode 100644
index a48791c6..00000000
--- a/packages/propel/src/ui/menu/menu.stories.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, CircleDot, Copy, Pencil, Trash2 } from "lucide-react";
-import * as React from "react";
-import { expect, userEvent, waitFor } from "storybook/test";
-
-import {
-  Menu,
-  MenuCheckboxItem,
-  MenuCheckboxItemIndicator,
-  MenuGroup,
-  MenuGroupLabel,
-  MenuItem,
-  MenuItemContent,
-  MenuItemControl,
-  MenuItemIcon,
-  MenuItemMeta,
-  MenuItemSelectedIndicator,
-  MenuItemTitle,
-  MenuItemTitleRow,
-  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. Each row is
-// composed from its own single-element parts (icon slot, the title column, the
-// trailing check/meta), so the trigger and rows hold no raw layout. The
-// components-tier `Menu` story uses the ready-made `MenuContent` plus the rich
-// `MenuItem`/`MenuCheckboxItem` rows that compose these same parts for you.
-const meta = {
-  title: "UI/Menu",
-  component: Menu,
-  subcomponents: {
-    MenuTrigger,
-    MenuPortal,
-    MenuPositioner,
-    MenuPopup,
-    MenuItem,
-    MenuItemIcon,
-    MenuItemContent,
-    MenuItemTitleRow,
-    MenuItemTitle,
-    MenuItemMeta,
-    MenuItemSelectedIndicator,
-    MenuItemControl,
-    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 elevation="raised">
-            <MenuItem layout="default">
-              <MenuItemIcon>
-                <Pencil />
-              </MenuItemIcon>
-              <MenuItemContent>
-                <MenuItemTitleRow>
-                  <MenuItemTitle>Edit</MenuItemTitle>
-                </MenuItemTitleRow>
-              </MenuItemContent>
-              <MenuItemMeta>⌘E</MenuItemMeta>
-            </MenuItem>
-            <MenuItem layout="default">
-              <MenuItemIcon>
-                <Copy />
-              </MenuItemIcon>
-              <MenuItemContent>
-                <MenuItemTitleRow>
-                  <MenuItemTitle>Duplicate</MenuItemTitle>
-                </MenuItemTitleRow>
-              </MenuItemContent>
-              <MenuItemSelectedIndicator>
-                <Check />
-              </MenuItemSelectedIndicator>
-            </MenuItem>
-            <MenuSeparator />
-            <MenuItem layout="default">
-              <MenuItemIcon>
-                <Trash2 />
-              </MenuItemIcon>
-              <MenuItemContent>
-                <MenuItemTitleRow>
-                  <MenuItemTitle>Delete</MenuItemTitle>
-                </MenuItemTitleRow>
-              </MenuItemContent>
-            </MenuItem>
-          </MenuPopup>
-        </MenuPositioner>
-      </MenuPortal>
-    </Menu>
-  ),
-};
-
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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 elevation="raised">
-            <MenuGroup>
-              <MenuGroupLabel>Layout</MenuGroupLabel>
-              <MenuItem layout="default">
-                <MenuItemContent>
-                  <MenuItemTitleRow>
-                    <MenuItemTitle>List</MenuItemTitle>
-                  </MenuItemTitleRow>
-                </MenuItemContent>
-              </MenuItem>
-              <MenuItem layout="default">
-                <MenuItemContent>
-                  <MenuItemTitleRow>
-                    <MenuItemTitle>Board</MenuItemTitle>
-                  </MenuItemTitleRow>
-                </MenuItemContent>
-              </MenuItem>
-            </MenuGroup>
-            <MenuSeparator />
-            <MenuGroup>
-              <MenuGroupLabel>Density</MenuGroupLabel>
-              <MenuItem layout="default">
-                <MenuItemContent>
-                  <MenuItemTitleRow>
-                    <MenuItemTitle>Comfortable</MenuItemTitle>
-                  </MenuItemTitleRow>
-                </MenuItemContent>
-              </MenuItem>
-              <MenuItem layout="default">
-                <MenuItemContent>
-                  <MenuItemTitleRow>
-                    <MenuItemTitle>Compact</MenuItemTitle>
-                  </MenuItemTitleRow>
-                </MenuItemContent>
-              </MenuItem>
-            </MenuGroup>
-          </MenuPopup>
-        </MenuPositioner>
-      </MenuPortal>
-    </Menu>
-  ),
-};
-
-export const GroupedInteraction: Story = {
-  ...Grouped,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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 Render() {
-    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 elevation="raised">
-              {rows.map((row) => (
-                <MenuCheckboxItem
-                  key={row.key}
-                  checked={Boolean(checked[row.key])}
-                  onCheckedChange={(next) => setChecked((c) => ({ ...c, [row.key]: next }))}
-                  closeOnClick={false}
-                >
-                  <MenuItemContent>
-                    <MenuItemTitleRow>
-                      <MenuItemTitle>{row.label}</MenuItemTitle>
-                    </MenuItemTitleRow>
-                  </MenuItemContent>
-                  <MenuCheckboxItemIndicator>
-                    <CircleDot aria-hidden="true" />
-                  </MenuCheckboxItemIndicator>
-                </MenuCheckboxItem>
-              ))}
-            </MenuPopup>
-          </MenuPositioner>
-        </MenuPortal>
-      </Menu>
-    );
-  },
-};
-
-export const CheckboxesInteraction: Story = {
-  ...Checkboxes,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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/variants.ts b/packages/propel/src/ui/menu/variants.ts
deleted file mode 100644
index e161e272..00000000
--- a/packages/propel/src/ui/menu/variants.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { checkboxBoxVariants } from "../../internal/checkbox-box";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/** Positioner: anchors the popup at the pointer with overlay stacking. */
-export const menuPositionerVariants = cva("z-50 outline-none");
-
-/**
- * Popup: the menu surface.
- *
- * - `surface="raised"` is the standalone surface — its own elevation, radius, border and animated
- *   transform origin (used when the popup is the menu's outer chrome, e.g. the UI-tier story).
- * - `surface="inset"` is the padded list that sits _inside_ an `OverlayPanel` (the components-tier
- *   `MenuContent` provides the elevated, scrollable shell), so the popup only contributes padding.
- */
-export const menuPopupVariants = cva("outline-none", {
-  variants: {
-    elevation: {
-      raised: cx(
-        "min-w-40 rounded-lg border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100",
-        "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",
-      ),
-      flat: "p-1",
-    },
-  },
-});
-
-/** Viewport: content wrapper that morphs/clips during submenu transitions. */
-export const menuViewportVariants = cva("relative");
-
-// All interactive rows (item, link, radio, checkbox, submenu trigger) share one row base:
-// the same height, padding, radius, gap, text + disabled treatment. `variant` switches between
-// a single-line row and a taller top-aligned row that fits a description; `emphasis` switches
-// the hover/cursor affordance.
-const menuRowBase = 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",
-);
-
-/** Standalone `MenuItem` row: `layout` (single vs with-description) + `emphasis`. */
-export const menuRowVariants = cva(cx(menuRowBase, "data-highlighted:bg-layer-transparent-hover"), {
-  variants: {
-    layout: {
-      default: "h-[34px] items-center",
-      "with-description": "min-h-[34px] items-start py-1.5",
-    },
-  },
-});
-
-/**
- * CheckboxItem row: the shared row base, fixed to the single-line/default-emphasis pairing (a
- * checkbox row never carries a description).
- */
-export const menuCheckboxItemVariants = cva(
-  cx(
-    menuRowBase,
-    "h-[34px] cursor-default items-center data-highlighted:bg-layer-transparent-hover",
-  ),
-);
-
-/**
- * SubmenuTrigger row: the shared row base; also highlights while its submenu popup is open
- * (`data-popup-open`).
- */
-export const menuSubmenuTriggerVariants = cva(
-  cx(
-    menuRowBase,
-    "h-[34px] cursor-default items-center",
-    "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
-  ),
-);
-
-/** Leading icon slot inside a row: sizes its single child to the row's `--node-size` and tints it. */
-export const menuItemIconVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
-
-/**
- * The text column of a row. Grows to fill the row (so trailing nodes/indicators sit at the
- * inline-end), stacks the title row over an optional description, and clips overflow.
- */
-export const menuItemContentVariants = cva("flex min-w-0 flex-1 flex-col");
-
-/** The baseline-aligned row holding the title and any inline secondary text. */
-export const menuItemTitleRowVariants = cva("flex min-w-0 items-baseline gap-1.5");
-
-/** The row's primary label. Truncates rather than wrapping. */
-export const menuItemTitleVariants = cva("truncate");
-
-/** Muted text shown inline after the title (e.g. a translation, a hint). */
-export const menuItemSecondaryTextVariants = cva(
-  "shrink-0 truncate text-12 text-tertiary group-data-disabled/item:text-disabled",
-);
-
-/** A muted second line beneath the title (the item description). */
-export const menuItemDescriptionVariants = cva(
-  "truncate text-12 text-tertiary group-data-disabled/item:text-disabled",
-);
-
-/** Trailing muted metadata shown after the title column (e.g. a keyboard shortcut). */
-export const menuItemMetaVariants = cva("shrink-0 text-12 text-tertiary");
-
-/** A trailing slot for arbitrary content. Sizes an icon child to `--node-size`; adds no tint. */
-export const menuItemTrailingVariants = cva(nodeSlotClass);
-
-/**
- * The single-select check shown at a row's inline-end. Sizes its single child to `--node-size` and
- * tints it with the accent. Decorative — the row carries the selected state.
- */
-export const menuItemSelectedIndicatorVariants = cva(
-  cx(nodeSlotClass, "h-5 w-4 text-icon-accent-primary"),
-);
-
-/**
- * The chevron that marks a submenu trigger, pinned at the row's inline-end. Sizes its single child
- * to `--node-size`, tints it, and mirrors under RTL. Decorative; renders the glyph passed as its
- * child.
- */
-export const menuItemSubmenuIndicatorVariants = cva(
-  cx(
-    nodeSlotClass,
-    "text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100",
-  ),
-);
-
-/** The leading control slot of a checkbox/radio row, holding the visual toggle. */
-export const menuItemControlVariants = cva("flex shrink-0 items-center");
-
-/** Indicator slot inside a radio item: the accent dot shown when the row is selected. */
-export const menuRadioItemIndicatorVariants = cva(
-  "flex size-4 items-center justify-center text-icon-accent-primary",
-);
-
-/**
- * CheckboxItem indicator: the leading checkbox BOX. Composes the shared `checkboxBoxVariants` (the
- * 16px bordered square that fills the accent on `data-checked`) with the node-slot that sizes its
- * inner glyph. Kept mounted by `MenuCheckboxItemIndicator`, so the empty box shows when unchecked;
- * the glyph stays hidden until the box is checked (`data-unchecked:[&>*]:invisible`).
- */
-export const menuCheckboxItemIndicatorVariants = cva(
-  cx(checkboxBoxVariants(), nodeSlotClass, "data-unchecked:[&>*]:invisible"),
-);
-
-/** 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");
-
-/**
- * Label: a non-interactive section heading row that can carry inline-end metadata. Lays out a
- * growing `MenuLabelTitle` and an optional `MenuLabelMeta`.
- */
-export const menuLabelVariants = cva("flex items-center gap-1.5 px-2 py-1.5 text-12 text-tertiary");
-
-/** The growing title within a `MenuLabel`. */
-export const menuLabelTitleVariants = cva("min-w-0 flex-1 truncate");
-
-/** Trailing metadata pinned at the inline-end of a `MenuLabel`. */
-export const menuLabelMetaVariants = cva("shrink-0");
-
-/** Search: the sticky search row pinned above the popup list. */
-export const menuSearchVariants = cva(
-  "flex shrink-0 items-center gap-1.5 border-b border-subtle bg-surface-1 px-3 py-2",
-);
-
-/** Search icon: the leading magnifier glyph in `MenuSearch`. Sizes its child to `--node-size`. */
-export const menuSearchIconVariants = cva(
-  cx(nodeSlotClass, "text-icon-tertiary [--node-size:1rem]"),
-);
-
-/** Search input: the borderless text field in `MenuSearch`. */
-export const menuSearchInputVariants = cva(
-  "min-w-0 flex-1 bg-transparent text-13 text-secondary outline-none placeholder:text-placeholder",
-);
-
-/** Footer: a non-interactive footer pinned below the popup list. */
-export const menuFooterVariants = cva(
-  "shrink-0 border-t border-subtle bg-layer-2 px-3 py-2 text-12 text-tertiary",
-);
-
-/** Arrow: a small caret matching the popup surface color. */
-export const menuArrowVariants = cva("text-layer-1");
-
-export type MenuPopupVariantProps = StrictVariantProps<typeof menuPopupVariants>;
-
-export type MenuRowVariantProps = StrictVariantProps<typeof menuRowVariants>;
diff --git a/packages/propel/src/ui/menubar/index.tsx b/packages/propel/src/ui/menubar/index.tsx
deleted file mode 100644
index 2b71afed..00000000
--- a/packages/propel/src/ui/menubar/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./menubar";
-export * from "./menubar-trigger";
-export * from "./menubar-trigger-icon";
-export * from "./menubar-trigger-label";
diff --git a/packages/propel/src/ui/menubar/menubar-trigger-icon.tsx b/packages/propel/src/ui/menubar/menubar-trigger-icon.tsx
deleted file mode 100644
index ec00cf57..00000000
--- a/packages/propel/src/ui/menubar/menubar-trigger-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { menubarTriggerIconVariants } from "./variants";
-
-export type MenubarTriggerIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render, sized to the trigger's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * A decorative leading icon at a menu bar trigger's inline-start. Sizes its single child to the
- * trigger's `--node-size`, so callers pass a bare icon. Decorative (the trigger carries the
- * accessible name), so it is `aria-hidden`. Compose it only when the item has an icon — the
- * designer's "whether items have icons" axis.
- */
-export function MenubarTriggerIcon(props: MenubarTriggerIconProps) {
-  return <span aria-hidden className={menubarTriggerIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menubar/menubar-trigger-label.tsx b/packages/propel/src/ui/menubar/menubar-trigger-label.tsx
deleted file mode 100644
index a1edbe1a..00000000
--- a/packages/propel/src/ui/menubar/menubar-trigger-label.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { menubarTriggerLabelVariants } from "./variants";
-
-export type MenubarTriggerLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The trigger's label text. */
-  children?: React.ReactNode;
-};
-
-/** The label of a menu bar trigger. Truncates instead of overflowing the bar. */
-export function MenubarTriggerLabel(props: MenubarTriggerLabelProps) {
-  return <span className={menubarTriggerLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/menubar/menubar-trigger.tsx b/packages/propel/src/ui/menubar/menubar-trigger.tsx
deleted file mode 100644
index c3f0b9e5..00000000
--- a/packages/propel/src/ui/menubar/menubar-trigger.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { menubarTriggerVariants } from "./variants";
-
-export type MenubarTriggerProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
-
-/**
- * The styled trigger for a top-level menu item in the menu bar. A flex row that lays out its
- * anatomy parts — an optional leading `MenubarTriggerIcon` and a `MenubarTriggerLabel`. Bakes in
- * all the "always the same" chrome from the designer's spec: height, inline padding, font style,
- * focus ring, and the active/hover highlight when the popup is open. Renders a `<button>` by
- * default and stays icon-agnostic. It embeds no menu behavior, keeping `ui/menubar` independent of
- * the Menu primitive: a menubar composition grafts the disclosure/open behavior on by rendering it
- * as a menu trigger — `render={<Menu.Trigger />}` (the styled button stays the outer element) —
- * inside a `Menu` root within an enclosing `Menubar` that drives keyboard navigation.
- */
-export function MenubarTrigger({ render, ...props }: MenubarTriggerProps) {
-  return useRender({
-    defaultTagName: "button",
-    render,
-    props: mergeProps({ className: menubarTriggerVariants(), type: "button" }, props),
-  });
-}
diff --git a/packages/propel/src/ui/menubar/menubar.stories.tsx b/packages/propel/src/ui/menubar/menubar.stories.tsx
deleted file mode 100644
index 7de7a93f..00000000
--- a/packages/propel/src/ui/menubar/menubar.stories.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor } from "storybook/test";
-
-import {
-  Menu,
-  MenuItem,
-  MenuPopup,
-  MenuPortal,
-  MenuPositioner,
-  MenuSeparator,
-} from "../menu/index";
-import { Menubar, MenubarTrigger, MenubarTriggerLabel } 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). Each
-// trigger composes its own anatomy (`MenubarTriggerLabel`, plus an optional
-// `MenubarTriggerIcon`). The components-tier story swaps the popup assembly for the
-// ready-made `MenuContent`.
-const meta = {
-  title: "UI/Menubar",
-  component: Menubar,
-  subcomponents: {
-    MenubarTrigger,
-    MenubarTriggerLabel,
-    Menu,
-    MenuPortal,
-    MenuPositioner,
-    MenuPopup,
-    MenuItem,
-  },
-} satisfies Meta<typeof Menubar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** 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>
-        <MenubarTrigger render={<BaseMenu.Trigger />}>
-          <MenubarTriggerLabel>File</MenubarTriggerLabel>
-        </MenubarTrigger>
-        <MenuPortal>
-          <MenuPositioner sideOffset={4}>
-            <MenuPopup elevation="raised">
-              <MenuItem layout="default">New file</MenuItem>
-              <MenuItem layout="default">Open…</MenuItem>
-              <MenuSeparator />
-              <MenuItem layout="default">Save</MenuItem>
-            </MenuPopup>
-          </MenuPositioner>
-        </MenuPortal>
-      </Menu>
-      <Menu>
-        <MenubarTrigger render={<BaseMenu.Trigger />}>
-          <MenubarTriggerLabel>Edit</MenubarTriggerLabel>
-        </MenubarTrigger>
-        <MenuPortal>
-          <MenuPositioner sideOffset={4}>
-            <MenuPopup elevation="raised">
-              <MenuItem layout="default">Undo</MenuItem>
-              <MenuItem layout="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
deleted file mode 100644
index 5889d24f..00000000
--- a/packages/propel/src/ui/menubar/menubar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
-
-import { menubarVariants } from "./variants";
-
-export type MenubarProps = Omit<BaseMenubar.Props, "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
deleted file mode 100644
index e19d404c..00000000
--- a/packages/propel/src/ui/menubar/variants.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-
-// 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",
-);
-
-// MenubarTrigger: the styled button for each top-level menu in the bar.
-// Per the designer's spec (issue #133), all of the following are "always the same":
-//   – horizontal layout + height
-//   – item padding (horizontal and vertical)
-//   – font style
-//   – active/hover background highlight (`data-popup-open`)
-//   – focus ring style
-// The trigger is a flex row that lays out its anatomy parts (an optional leading
-// `MenubarTriggerIcon`, then the `MenubarTriggerLabel`); the spec's adjustable
-// "whether items have icons" axis is served by composing — or omitting — the icon
-// part, not by a cva variant. `--node-size` sizes any leading icon to 1rem.
-export const menubarTriggerVariants = cva(
-  cx(
-    "group inline-flex h-7 items-center gap-1.5 rounded-sm px-2.5 [--node-size:1rem]",
-    "text-13 text-secondary",
-    "cursor-default outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
-    "data-disabled:pointer-events-none data-disabled:text-disabled",
-  ),
-);
-
-// The decorative leading icon at the trigger's inline-start. Sizes its single child
-// to the trigger's `--node-size` (via the shared node-slot class) and tints it.
-export const menubarTriggerIconVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
-
-// The trigger's label. A single text element; `min-w-0` lets long labels truncate
-// instead of overflowing the bar.
-export const menubarTriggerLabelVariants = cva("min-w-0 truncate");
diff --git a/packages/propel/src/ui/meter/meter-indicator.tsx b/packages/propel/src/ui/meter/meter-indicator.tsx
deleted file mode 100644
index d85470c4..00000000
--- a/packages/propel/src/ui/meter/meter-indicator.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-
-import { meterIndicatorVariants, type MeterIndicatorVariantProps } from "./variants";
-
-export type MeterIndicatorLevel = "low" | "medium" | "high";
-
-export type MeterIndicatorProps = Omit<BaseMeter.Indicator.Props, "className" | "style"> &
-  MeterIndicatorVariantProps;
-
-/**
- * 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 color (via `level`) and the width transition. Maps 1:1 to
- * `Meter.Indicator`.
- */
-export function MeterIndicator({ level, ...props }: MeterIndicatorProps) {
-  return <BaseMeter.Indicator className={meterIndicatorVariants({ level })} {...props} />;
-}
diff --git a/packages/propel/src/ui/meter/meter-label.tsx b/packages/propel/src/ui/meter/meter-label.tsx
deleted file mode 100644
index 965428c7..00000000
--- a/packages/propel/src/ui/meter/meter-label.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-
-import { meterLabelVariants } from "./variants";
-
-export type MeterLabelProps = Omit<BaseMeter.Label.Props, "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
deleted file mode 100644
index 6583b020..00000000
--- a/packages/propel/src/ui/meter/meter-track.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-
-import { meterTrackVariants } from "./variants";
-
-export type MeterTrackProps = Omit<BaseMeter.Track.Props, "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
deleted file mode 100644
index 17f625a7..00000000
--- a/packages/propel/src/ui/meter/meter-value.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-
-import { meterValueVariants } from "./variants";
-
-export type MeterValueProps = Omit<BaseMeter.Value.Props, "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
deleted file mode 100644
index e606c029..00000000
--- a/packages/propel/src/ui/meter/meter.stories.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "./index";
-
-// UI-tier story: assembles the ATOMIC meter parts (`Meter` root + `MeterHeader` ›
-// `MeterLabel` + `MeterValue`, then `MeterTrack` › `MeterIndicator`). Each part renders a
-// single element; the header owns the label/value row layout. 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: { MeterHeader, 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 › (Header › Label + Value) + (Track › Indicator). */
-export const Default: Story = {
-  args: { value: 64 },
-  render: (args) => (
-    <Meter {...args}>
-      <MeterHeader>
-        <MeterLabel>Disk usage</MeterLabel>
-        <MeterValue />
-      </MeterHeader>
-      <MeterTrack>
-        <MeterIndicator level="medium" />
-      </MeterTrack>
-    </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}>
-          <MeterHeader>
-            <MeterLabel>Storage</MeterLabel>
-            <MeterValue />
-          </MeterHeader>
-          <MeterTrack>
-            <MeterIndicator level="medium" />
-          </MeterTrack>
-        </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">
-      <MeterHeader>
-        <MeterValue />
-      </MeterHeader>
-      <MeterTrack>
-        <MeterIndicator level="medium" />
-      </MeterTrack>
-    </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
deleted file mode 100644
index 0b3ca8b4..00000000
--- a/packages/propel/src/ui/meter/meter.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-
-import { meterVariants } from "./variants";
-
-export type MeterProps = Omit<BaseMeter.Root.Props, "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={meterVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/meter/variants.ts b/packages/propel/src/ui/meter/variants.ts
deleted file mode 100644
index 07a98cdf..00000000
--- a/packages/propel/src/ui/meter/variants.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { cva } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/** Root: a vertical stack holding the header row and the track. */
-export const meterVariants = cva("flex w-full flex-col gap-1");
-
-/**
- * Header: the row above the track that pairs the label and value. Per the spec the label sits at
- * the inline-start and the value text at the inline-end (`justify-between`), both vertically
- * centered — an anatomy extension beyond Base UI's parts so the components tier holds no raw
- * layout.
- */
-export const meterHeaderVariants = cva("flex items-center justify-between gap-2");
-
-/** 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 at the header's inline-end. */
-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.
- *
- * The `level` variant encodes the spec's color breakpoints: - `low` → value is in the suboptimal
- * low range → warning color - `medium` → value is in the optimal / default range → brand/accent
- * color - `high` → value is in the suboptimal high range → success color
- *
- * No `defaultVariants` — callers must supply `level` explicitly.
- */
-export const meterIndicatorVariants = cva("h-full rounded-full transition-[width] duration-200", {
-  variants: {
-    level: {
-      low: "bg-warning-primary",
-      medium: "bg-accent-primary",
-      high: "bg-success-primary",
-    },
-  },
-});
-
-// No `defaultVariants` today, so every axis is required.
-export type MeterIndicatorVariantProps = StrictVariantProps<typeof meterIndicatorVariants>;
diff --git a/packages/propel/src/ui/navigation-menu/index.tsx b/packages/propel/src/ui/navigation-menu/index.tsx
deleted file mode 100644
index ee44b553..00000000
--- a/packages/propel/src/ui/navigation-menu/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export * from "./navigation-menu";
-export * from "./navigation-menu-arrow";
-export * from "./navigation-menu-backdrop";
-export * from "./navigation-menu-content";
-export * from "./navigation-menu-content-list";
-export * from "./navigation-menu-icon";
-export * from "./navigation-menu-item";
-export * from "./navigation-menu-link";
-export * from "./navigation-menu-link-description";
-export * from "./navigation-menu-link-title";
-export * from "./navigation-menu-list";
-export * from "./navigation-menu-popup";
-export * from "./navigation-menu-portal";
-export * from "./navigation-menu-positioner";
-export * from "./navigation-menu-trigger";
-export * from "./navigation-menu-trigger-label";
-export * 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
deleted file mode 100644
index 7d3c0baa..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-arrow.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-export type NavigationMenuArrowProps = Omit<BaseNavigationMenu.Arrow.Props, "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
deleted file mode 100644
index aaea1090..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-backdrop.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuBackdropVariants } from "./variants";
-
-export type NavigationMenuBackdropProps = Omit<
-  BaseNavigationMenu.Backdrop.Props,
-  "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-list.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-content-list.tsx
deleted file mode 100644
index 6ff08f69..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-content-list.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { navigationMenuContentListVariants } from "./variants";
-
-export type NavigationMenuContentListProps = Omit<
-  React.ComponentPropsWithoutRef<"ul">,
-  "className" | "style"
-> & {
-  /** The list items — each link wrapped in its own `<li>`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The vertical list of links inside a `NavigationMenuContent` panel. Stacks its items with a
- * consistent gap; the surrounding `NavigationMenuPopup` owns the padding. Renders a `<ul>`, so each
- * child link belongs in its own `<li>`.
- */
-export function NavigationMenuContentList(props: NavigationMenuContentListProps) {
-  return <ul className={navigationMenuContentListVariants()} {...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
deleted file mode 100644
index 9342a8fc..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-content.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-export type NavigationMenuContentProps = Omit<
-  BaseNavigationMenu.Content.Props,
-  "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
deleted file mode 100644
index ec176b3f..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuIconVariants } from "./variants";
-
-export type NavigationMenuIconProps = Omit<BaseNavigationMenu.Icon.Props, "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
deleted file mode 100644
index 18fa7b5e..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-item.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-export type NavigationMenuItemProps = Omit<BaseNavigationMenu.Item.Props, "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-description.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-link-description.tsx
deleted file mode 100644
index f9f38370..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-link-description.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { navigationMenuLinkDescriptionVariants } from "./variants";
-
-export type NavigationMenuLinkDescriptionProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The muted description text shown below the `NavigationMenuLinkTitle`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The optional secondary line of a `presentation="card"` `NavigationMenuLink`: a muted description
- * shown below the `NavigationMenuLinkTitle`.
- */
-export function NavigationMenuLinkDescription(props: NavigationMenuLinkDescriptionProps) {
-  return <span className={navigationMenuLinkDescriptionVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-link-title.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-link-title.tsx
deleted file mode 100644
index b86d550e..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-link-title.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { navigationMenuLinkTitleVariants } from "./variants";
-
-export type NavigationMenuLinkTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The link's navigable label text. */
-  children?: React.ReactNode;
-};
-
-/**
- * The primary line of a `presentation="card"` `NavigationMenuLink`: the navigable label. Pairs with
- * an optional `NavigationMenuLinkDescription` below it.
- */
-export function NavigationMenuLinkTitle(props: NavigationMenuLinkTitleProps) {
-  return <span className={navigationMenuLinkTitleVariants()} {...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
deleted file mode 100644
index 362a6e81..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-link.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { type NavigationMenuLinkVariantProps, navigationMenuLinkVariants } from "./variants";
-
-export type NavigationMenuLinkProps = Omit<BaseNavigationMenu.Link.Props, "className" | "style"> &
-  NavigationMenuLinkVariantProps;
-
-/**
- * A navigable link. `presentation="item"` is a top-level pill that shares its chrome with
- * `Trigger`; `presentation="card"` is a stacked entry inside `Content`, pairing a
- * `NavigationMenuLinkTitle` with an optional `NavigationMenuLinkDescription`. Maps 1:1 to
- * `NavigationMenu.Link`.
- */
-export function NavigationMenuLink({ presentation, ...props }: NavigationMenuLinkProps) {
-  return (
-    <BaseNavigationMenu.Link className={navigationMenuLinkVariants({ presentation })} {...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
deleted file mode 100644
index eb802bfa..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-list.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuListVariants } from "./variants";
-
-export type NavigationMenuListProps = Omit<BaseNavigationMenu.List.Props, "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
deleted file mode 100644
index 01b85ca5..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-popup.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuPopupVariants } from "./variants";
-
-export type NavigationMenuPopupProps = Omit<BaseNavigationMenu.Popup.Props, "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
deleted file mode 100644
index 91f48309..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-portal.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-export type NavigationMenuPortalProps = Omit<
-  BaseNavigationMenu.Portal.Props,
-  "className" | "style"
->;
-
-/**
- * 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
deleted file mode 100644
index b15e8cbb..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-positioner.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuPositionerVariants } from "./variants";
-
-export type NavigationMenuPositionerProps = Omit<
-  BaseNavigationMenu.Positioner.Props,
-  "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-label.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-trigger-label.tsx
deleted file mode 100644
index 1b75dd2f..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-trigger-label.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { navigationMenuTriggerLabelVariants } from "./variants";
-
-export type NavigationMenuTriggerLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The trigger's label text. */
-  children?: React.ReactNode;
-};
-
-/**
- * The trigger's text label, sitting beside the disclosure `NavigationMenuIcon`. Splitting the label
- * into its own part keeps `NavigationMenuTrigger` a single styled element that composes parts
- * rather than baking in raw text.
- */
-export function NavigationMenuTriggerLabel(props: NavigationMenuTriggerLabelProps) {
-  return <span className={navigationMenuTriggerLabelVariants()} {...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
deleted file mode 100644
index 897ec0fe..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-trigger.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuTriggerVariants } from "./variants";
-
-export type NavigationMenuTriggerProps = Omit<
-  BaseNavigationMenu.Trigger.Props,
-  "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
deleted file mode 100644
index 4a11ed59..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu-viewport.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-import { navigationMenuViewportVariants } from "./variants";
-
-export type NavigationMenuViewportProps = Omit<
-  BaseNavigationMenu.Viewport.Props,
-  "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
deleted file mode 100644
index 94d34a95..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu.stories.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-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,
-  NavigationMenuContentList,
-  NavigationMenuIcon,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuLinkDescription,
-  NavigationMenuLinkTitle,
-  NavigationMenuList,
-  NavigationMenuPopup,
-  NavigationMenuPortal,
-  NavigationMenuPositioner,
-  NavigationMenuTrigger,
-  NavigationMenuTriggerLabel,
-  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,
-    NavigationMenuTrigger,
-    NavigationMenuTriggerLabel,
-    NavigationMenuIcon,
-    NavigationMenuContent,
-    NavigationMenuContentList,
-    NavigationMenuLink,
-    NavigationMenuLinkTitle,
-    NavigationMenuLinkDescription,
-    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.",
-  },
-];
-
-// The demo links carry real hrefs for correct anchor semantics, but cancel navigation:
-// the Vitest browser runner shares one page across story files, so an activated link
-// navigates the page, tears down the iframe, and fails unrelated stories.
-const cancelNavigation = (event: React.MouseEvent) => event.preventDefault();
-
-/** A rich content link pairing a title with a description, wrapped in its list item. */
-function ContentLink({ href, title, description }: (typeof PRODUCT_LINKS)[number]) {
-  return (
-    <li>
-      <NavigationMenuLink presentation="card" render={<a href={href} onClick={cancelNavigation} />}>
-        <NavigationMenuLinkTitle>{title}</NavigationMenuLinkTitle>
-        <NavigationMenuLinkDescription>{description}</NavigationMenuLinkDescription>
-      </NavigationMenuLink>
-    </li>
-  );
-}
-
-/** A trigger row that pairs the label with the rotating disclosure caret. */
-function NavigationMenuTriggerRow({ children }: { children: React.ReactNode }) {
-  return (
-    <NavigationMenuTrigger>
-      <NavigationMenuTriggerLabel>{children}</NavigationMenuTriggerLabel>
-      <NavigationMenuIcon>
-        <ChevronDown aria-hidden />
-      </NavigationMenuIcon>
-    </NavigationMenuTrigger>
-  );
-}
-
-/** A menu with two menu items and a bare top-level link. */
-export const Default: Story = {
-  render: () => (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTriggerRow>Product</NavigationMenuTriggerRow>
-          <NavigationMenuContent>
-            <ul className="grid w-md grid-cols-2 gap-1 p-2">
-              {PRODUCT_LINKS.map((item) => (
-                <ContentLink key={item.href} {...item} />
-              ))}
-            </ul>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-
-        <NavigationMenuItem>
-          <NavigationMenuTriggerRow>Resources</NavigationMenuTriggerRow>
-          <NavigationMenuContent>
-            <NavigationMenuContentList>
-              {RESOURCE_LINKS.map((item) => (
-                <ContentLink key={item.href} {...item} />
-              ))}
-            </NavigationMenuContentList>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-
-        <NavigationMenuItem>
-          <NavigationMenuLink
-            presentation="item"
-            render={<a href="#pricing" onClick={cancelNavigation} />}
-          >
-            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>
-            <NavigationMenuContentList>
-              {PRODUCT_LINKS.map((item) => (
-                <li key={item.href}>
-                  <NavigationMenuLink
-                    presentation="card"
-                    render={<a href={item.href} onClick={cancelNavigation} />}
-                  >
-                    <NavigationMenuLinkTitle>{item.title}</NavigationMenuLinkTitle>
-                  </NavigationMenuLink>
-                </li>
-              ))}
-            </NavigationMenuContentList>
-          </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");
-    });
-  },
-};
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu.tsx
deleted file mode 100644
index 42e52424..00000000
--- a/packages/propel/src/ui/navigation-menu/navigation-menu.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-export type NavigationMenuProps = Omit<BaseNavigationMenu.Root.Props, "className" | "style">;
-
-/**
- * The root of a navigation menu — a collection of links and 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
deleted file mode 100644
index 4b3108c4..00000000
--- a/packages/propel/src/ui/navigation-menu/variants.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// Navigation Menu wraps Base UI's parts and extends the anatomy with the styled regions
-// inside a menu item (TriggerLabel, ContentList, LinkTitle, LinkDescription). Base UI drives
-// open/active state through `data-*` attributes, so the only authored styling axis is the
-// `Link`'s `presentation` (an inline `item` pill vs a stacked content `card`). 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 a pill chrome: 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",
-  ),
-);
-
-// The trigger's text label, sitting beside the disclosure `Icon`. Mirrors the
-// `Title`/`Icon` split used by other triggers so the trigger renders parts, not raw text.
-export const navigationMenuTriggerLabelVariants = cva("min-w-0 truncate");
-
-// A `Link` is used two ways, so its arrangement is a required `presentation`: an `item`
-// pill (a top-level nav entry beside the triggers) or a stacked `card` (a rich entry
-// inside a `Content` panel, pairing a `Title` with an optional `Description`). The
-// shared chrome — radius, highlight, focus ring — is baked in for both.
-export const navigationMenuLinkVariants = cva(
-  cx(
-    "rounded-md 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",
-  ),
-  {
-    variants: {
-      presentation: {
-        item: "inline-flex h-8 items-center gap-1 px-3",
-        card: "flex flex-col gap-0.5 px-3 py-2 text-start",
-      },
-    },
-  },
-);
-
-// The link's primary line: the navigable label. Bold, primary-tinted, single line.
-export const navigationMenuLinkTitleVariants = cva(
-  "block truncate text-14 font-medium text-primary",
-);
-
-// The link's optional secondary line: a muted one- or two-line description below the title.
-export const navigationMenuLinkDescriptionVariants = cva("font-normal block text-12 text-tertiary");
-
-// The vertical stack of links inside a `Content` panel. Per the spec, nav items stack
-// vertically with a consistent gap; the surrounding `Popup` owns the padding.
-export const navigationMenuContentListVariants = cva("flex w-72 flex-col gap-1");
-
-// The disclosure caret slot inside a Trigger. Sizes its child SVG to `--node-size`
-// (default 1rem, matching the trigger's line-height) and rotates while the popup is
-// open; reads the parent Trigger's `group-data-popup-open` state.
-export const navigationMenuIconVariants = cva(
-  cx(
-    "inline-flex shrink-0 items-center justify-center [--node-size:1rem]",
-    "[&>svg]:size-(--node-size)",
-    "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",
-  ),
-);
-
-export type NavigationMenuLinkVariantProps = StrictVariantProps<typeof navigationMenuLinkVariants>;
diff --git a/packages/propel/src/ui/number-field/index.tsx b/packages/propel/src/ui/number-field/index.tsx
deleted file mode 100644
index d03751d7..00000000
--- a/packages/propel/src/ui/number-field/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./number-field";
-export * from "./number-field-decrement";
-export * from "./number-field-group";
-export * from "./number-field-increment";
-export * from "./number-field-input";
-export { type NumberFieldMagnitude } from "./variants";
diff --git a/packages/propel/src/ui/number-field/number-field-decrement.tsx b/packages/propel/src/ui/number-field/number-field-decrement.tsx
deleted file mode 100644
index 4280bdc2..00000000
--- a/packages/propel/src/ui/number-field/number-field-decrement.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-
-export type NumberFieldDecrementProps = Omit<
-  BaseNumberField.Decrement.Props,
-  "className" | "style"
->;
-
-/**
- * A behavior wrapper that decrements the number field value when activated. Use as the `render`
- * target of an `IconButton` so the styled primitive's look (and glyph scale) wins via
- * render-composition. Maps 1:1 to `NumberField.Decrement`.
- */
-export function NumberFieldDecrement(props: NumberFieldDecrementProps) {
-  return <BaseNumberField.Decrement {...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
deleted file mode 100644
index 8480ef40..00000000
--- a/packages/propel/src/ui/number-field/number-field-group.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-
-import { numberFieldGroupVariants } from "./variants";
-
-export type NumberFieldGroupProps = Omit<BaseNumberField.Group.Props, "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
deleted file mode 100644
index b87dbbcc..00000000
--- a/packages/propel/src/ui/number-field/number-field-increment.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-
-export type NumberFieldIncrementProps = Omit<
-  BaseNumberField.Increment.Props,
-  "className" | "style"
->;
-
-/**
- * A behavior wrapper that increments the number field value when activated. Use as the `render`
- * target of an `IconButton` so the styled primitive's look (and glyph scale) wins via
- * render-composition. Maps 1:1 to `NumberField.Increment`.
- */
-export function NumberFieldIncrement(props: NumberFieldIncrementProps) {
-  return <BaseNumberField.Increment {...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
deleted file mode 100644
index 0739ea83..00000000
--- a/packages/propel/src/ui/number-field/number-field-input.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-
-import { type NumberFieldInputVariantProps, numberFieldInputVariants } from "./variants";
-
-export type NumberFieldInputProps = Omit<BaseNumberField.Input.Props, "className" | "style"> &
-  NumberFieldInputVariantProps;
-
-export function NumberFieldInput({ magnitude, ...props }: NumberFieldInputProps) {
-  return <BaseNumberField.Input className={numberFieldInputVariants({ magnitude })} {...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
deleted file mode 100644
index 21d5ae9b..00000000
--- a/packages/propel/src/ui/number-field/number-field.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Minus, Plus } from "lucide-react";
-import { expect } from "storybook/test";
-
-import { IconButton, IconButtonIcon } from "../icon-button";
-import {
-  NumberField,
-  NumberFieldDecrement,
-  NumberFieldGroup,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from "./index";
-
-// UI-tier story: composes the atomic parts (root + group + decrement + input +
-// increment). The steppers are pure behavior wrappers, rendered as ghost `IconButton`s — you own
-// the glyphs 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
-          render={
-            <IconButton
-              prominence="ghost"
-              tone="neutral"
-              magnitude="xl"
-              aria-label="Decrease instances"
-            >
-              <IconButtonIcon>
-                <Minus />
-              </IconButtonIcon>
-            </IconButton>
-          }
-        />
-        <NumberFieldInput magnitude="xl" aria-label="Number of instances" />
-        <NumberFieldIncrement
-          render={
-            <IconButton
-              prominence="ghost"
-              tone="neutral"
-              magnitude="xl"
-              aria-label="Increase instances"
-            >
-              <IconButtonIcon>
-                <Plus />
-              </IconButtonIcon>
-            </IconButton>
-          }
-        />
-      </NumberFieldGroup>
-    </NumberField>
-  ),
-};
-
-/** The +/- buttons step the value within `min`/`max`. */
-export const IncrementAndDecrement: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 26e65244..00000000
--- a/packages/propel/src/ui/number-field/number-field.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-
-import { numberFieldVariants } from "./variants";
-
-export type NumberFieldProps = Omit<BaseNumberField.Root.Props, "className" | "style">;
-
-export function NumberField(props: NumberFieldProps) {
-  return <BaseNumberField.Root className={numberFieldVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/number-field/variants.ts b/packages/propel/src/ui/number-field/variants.ts
deleted file mode 100644
index 17f11f22..00000000
--- a/packages/propel/src/ui/number-field/variants.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { type VariantProps, cva, cx } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-export const numberFieldVariants = cva("flex min-w-0 flex-col gap-1.5");
-export const numberFieldGroupVariants = cva(
-  cx(
-    // Wraps a separate focusable input → `focus: within`.
-    fieldControlSurfaceVariants({ focus: "within" }),
-    "flex w-fit items-center overflow-hidden rounded-md",
-    "data-disabled:cursor-not-allowed data-disabled:border-subtle data-disabled:bg-layer-2",
-  ),
-);
-
-// Input geometry per magnitude. Heights match the stepper button square (the steppers render as
-// IconButtons whose `magnitude` matches) so the group container stays flush. The width is fixed to
-// accommodate up to ~4 digits.
-export const numberFieldInputVariants = cva(
-  "w-14 bg-transparent text-center text-14 text-primary outline-none disabled:text-disabled",
-  {
-    variants: {
-      magnitude: {
-        sm: "h-5",
-        md: "h-6",
-        lg: "h-7",
-        xl: "h-8",
-      },
-    },
-  },
-);
-
-export type NumberFieldInputVariantProps = StrictVariantProps<typeof numberFieldInputVariants>;
-
-// Shared magnitude type so all parts (input + the IconButton steppers) stay in sync.
-export type NumberFieldMagnitude = NonNullable<
-  VariantProps<typeof numberFieldInputVariants>["magnitude"]
->;
diff --git a/packages/propel/src/ui/otp-field/otp-field-input.tsx b/packages/propel/src/ui/otp-field/otp-field-input.tsx
deleted file mode 100644
index a0e26d9e..00000000
--- a/packages/propel/src/ui/otp-field/otp-field-input.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
-
-import {
-  otpFieldInputVariants,
-  type OTPFieldInputMagnitude,
-  type OTPFieldInputVariantProps,
-} from "./variants";
-
-export type { OTPFieldInputMagnitude };
-
-export type OTPFieldInputProps = Omit<BaseOTPField.Input.Props, "className" | "style"> &
-  OTPFieldInputVariantProps;
-
-/** A single OTP character input cell. Maps 1:1 to `OTPFieldPreview.Input`. */
-export function OTPFieldInput({ magnitude, ...props }: OTPFieldInputProps) {
-  return <BaseOTPField.Input className={otpFieldInputVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/otp-field/otp-field-label.tsx b/packages/propel/src/ui/otp-field/otp-field-label.tsx
deleted file mode 100644
index 85ec5e1b..00000000
--- a/packages/propel/src/ui/otp-field/otp-field-label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { otpFieldLabelVariants } from "./variants";
-
-export type OTPFieldLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The visually-hidden accessible name text for the first slot. */
-  children?: React.ReactNode;
-};
-
-/**
- * The visually-hidden accessible name for the field's first slot. Base UI ignores `aria-label` on
- * the first input and names it from `aria-labelledby` instead, so render this with an `id` and
- * point the first `OTPFieldInput`'s `aria-labelledby` at it. Without it the slot inputs fail axe's
- * "Form elements must have labels". Hidden via `sr-only`, so it stays available to assistive tech.
- */
-export function OTPFieldLabel(props: OTPFieldLabelProps) {
-  return <span className={otpFieldLabelVariants()} {...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
deleted file mode 100644
index 8cb9b9f1..00000000
--- a/packages/propel/src/ui/otp-field/otp-field-separator.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
-
-import { otpFieldSeparatorVariants } from "./variants";
-
-export type OTPFieldSeparatorProps = Omit<BaseOTPField.Separator.Props, "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
deleted file mode 100644
index 0a65986a..00000000
--- a/packages/propel/src/ui/otp-field/otp-field.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { OTPField, OTPFieldInput, OTPFieldLabel, 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, OTPFieldLabel, 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">
-      <OTPFieldLabel id={FIRST_SLOT_LABEL_ID}>Character 1</OTPFieldLabel>
-      {Array.from({ length: args.length }, (_, index) =>
-        index === 0 ? (
-          <OTPFieldInput key={index} magnitude="md" aria-labelledby={FIRST_SLOT_LABEL_ID} />
-        ) : (
-          <OTPFieldInput key={index} magnitude="md" aria-label={`Character ${index + 1}`} />
-        ),
-      )}
-    </OTPField>
-  ),
-};
-
-/**
- * Interaction test: the six slots each expose a textbox. Tagged out of the sidebar/docs/manifest
- * while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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">
-      <OTPFieldLabel id={FIRST_SLOT_LABEL_ID}>Character 1</OTPFieldLabel>
-      <OTPFieldInput magnitude="md" aria-labelledby={FIRST_SLOT_LABEL_ID} />
-      <OTPFieldInput magnitude="md" aria-label="Character 2" />
-      <OTPFieldInput magnitude="md" aria-label="Character 3" />
-      <OTPFieldSeparator>-</OTPFieldSeparator>
-      <OTPFieldInput magnitude="md" aria-label="Character 4" />
-      <OTPFieldInput magnitude="md" aria-label="Character 5" />
-      <OTPFieldInput magnitude="md" aria-label="Character 6" />
-    </OTPField>
-  ),
-};
-
-/**
- * Interaction test: the grouped slots each expose a textbox. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const GroupedInteraction: Story = {
-  ...Grouped,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas }) => {
-    await expect(canvas.getAllByRole("textbox")).toHaveLength(6);
-  },
-};
-
-/** All boxes show the danger border when the code is invalid. */
-export const Invalid: Story = {
-  args: { length: 6 },
-  render: (args) => (
-    <OTPField {...args} aria-label="Verification code">
-      <OTPFieldLabel id={FIRST_SLOT_LABEL_ID}>Character 1</OTPFieldLabel>
-      {Array.from({ length: args.length }, (_, index) =>
-        index === 0 ? (
-          <OTPFieldInput
-            key={index}
-            magnitude="md"
-            data-invalid
-            aria-labelledby={FIRST_SLOT_LABEL_ID}
-          />
-        ) : (
-          <OTPFieldInput
-            key={index}
-            magnitude="md"
-            data-invalid
-            aria-label={`Character ${index + 1}`}
-          />
-        ),
-      )}
-    </OTPField>
-  ),
-};
-
-/**
- * Interaction test: the invalid slots each expose a textbox. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const InvalidInteraction: Story = {
-  ...Invalid,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index e44a75c5..00000000
--- a/packages/propel/src/ui/otp-field/otp-field.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
-
-import { otpFieldVariants } from "./variants";
-
-export type OTPFieldProps = Omit<BaseOTPField.Root.Props, "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={otpFieldVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/otp-field/variants.ts b/packages/propel/src/ui/otp-field/variants.ts
deleted file mode 100644
index 918cd8fd..00000000
--- a/packages/propel/src/ui/otp-field/variants.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-/** Root: a horizontal row of character slots (and optional separators). */
-export const otpFieldVariants = cva("flex items-center gap-2");
-
-/**
- * Input: a single character cell with the shared field-control surface.
- *
- * Magnitude — controls the box size (sm/md/lg); required, no default. The error look isn't a prop:
- * the cell rests at the `subtle` border and recolors to `danger` off Base UI's `data-invalid` (set
- * on the digit when the field is wrapped in a `Field.Root invalid`), including the danger focus
- * ring — so there's no hand-rolled danger ring here.
- */
-export const otpFieldInputVariants = cva(
-  cx(
-    // Each digit cell is itself the focusable element → `focus: self`.
-    fieldControlSurfaceVariants({ focus: "self" }),
-    "rounded-md text-center text-primary outline-none data-disabled:cursor-not-allowed data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      magnitude: {
-        sm: "size-8 text-13",
-        md: "size-9 text-14",
-        lg: "size-10 text-16",
-      },
-    },
-  },
-);
-
-type OTPFieldInputVariantConfig = VariantProps<typeof otpFieldInputVariants>;
-
-export type OTPFieldInputMagnitude = NonNullable<OTPFieldInputVariantConfig["magnitude"]>;
-export type OTPFieldInputVariantProps = StrictVariantProps<typeof otpFieldInputVariants>;
-
-/** Separator: a visual divider between groups of slots (e.g. `123-456`). */
-export const otpFieldSeparatorVariants = cva("text-tertiary");
-
-/**
- * Label: the visually-hidden accessible name backing the first slot. Base UI ignores `aria-label`
- * on the first input and names it from `aria-labelledby` instead, so the field needs a real
- * (hidden) label element. Its `sr-only` styling lives here so neither the components tier nor a
- * direct composition carries a raw `className`.
- */
-export const otpFieldLabelVariants = cva("sr-only");
diff --git a/packages/propel/src/ui/pagination/pagination-arrow-button.tsx b/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
deleted file mode 100644
index 4668b4c9..00000000
--- a/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { paginationArrowButtonVariants } from "./variants";
-
-export type PaginationArrowButtonProps = Omit<
-  React.ComponentProps<"button">,
-  "className" | "style"
-> & {
-  /** The directional arrow icon to render (RTL-mirrored), sized to the slot's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * A styled prev/next arrow button. Applies `paginationArrowButtonVariants()`; 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={paginationArrowButtonVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination-ellipsis.tsx b/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
deleted file mode 100644
index 4f2edc6e..00000000
--- a/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { paginationEllipsisVariants } from "./variants";
-
-export type PaginationEllipsisProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The gap-marker icon to render (e.g. a Lucide `Ellipsis`), sized to the slot's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * A non-interactive gap marker between distant page numbers. Renders whatever icon you pass (sized
- * to the slot's `--node-size`, 14px) — never baking a specific glyph in. Decorative, so
- * `aria-hidden`.
- */
-export function PaginationEllipsis(props: PaginationEllipsisProps) {
-  return <span aria-hidden className={paginationEllipsisVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination-page-button.tsx b/packages/propel/src/ui/pagination/pagination-page-button.tsx
deleted file mode 100644
index 511ab909..00000000
--- a/packages/propel/src/ui/pagination/pagination-page-button.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { paginationPageButtonVariants } from "./variants";
-
-export type PaginationPageButtonProps = Omit<
-  React.ComponentPropsWithoutRef<"button">,
-  "className" | "style"
-> & {
-  /** The page number to render (or a loading spinner). */
-  children?: React.ReactNode;
-};
-
-/**
- * A styled page-number button. The current page is marked `aria-current="page"`, which the cva keys
- * the pressed/selected fill off of; pass the page number (or a loading spinner) as `children` and
- * wire `aria-current`/`onClick` through props.
- */
-export function PaginationPageButton(props: PaginationPageButtonProps) {
-  return <button type="button" className={paginationPageButtonVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-indicator.tsx b/packages/propel/src/ui/pagination/pagination-per-page-indicator.tsx
deleted file mode 100644
index 7f4d73e7..00000000
--- a/packages/propel/src/ui/pagination/pagination-per-page-indicator.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { paginationPerPageIndicatorVariants } from "./variants";
-
-export type PaginationPerPageIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The chevron icon to render (e.g. a Lucide `ChevronDown`), sized to `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The chevron inside the per-page trigger. Renders whatever icon you pass (sized to `--node-size`,
- * 14px) and rotates a half-turn while the menu is open. Decorative — the trigger carries the
- * accessible name and state — so `aria-hidden`.
- */
-export function PaginationPerPageIndicator(props: PaginationPerPageIndicatorProps) {
-  return <span aria-hidden className={paginationPerPageIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-label.tsx b/packages/propel/src/ui/pagination/pagination-per-page-label.tsx
deleted file mode 100644
index cba39029..00000000
--- a/packages/propel/src/ui/pagination/pagination-per-page-label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { paginationPerPageLabelVariants } from "./variants";
-
-export type PaginationPerPageLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The trailing text after the selector (e.g. "per page"). */
-  children?: React.ReactNode;
-};
-
-/**
- * The trailing "per page" text after the selector pill (Figma `50 v per page`). Decorative, so
- * `aria-hidden`.
- */
-export function PaginationPerPageLabel(props: PaginationPerPageLabelProps) {
-  return <span aria-hidden className={paginationPerPageLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination-range-current.tsx b/packages/propel/src/ui/pagination/pagination-range-current.tsx
deleted file mode 100644
index 7ec09111..00000000
--- a/packages/propel/src/ui/pagination/pagination-range-current.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { paginationRangeCurrentVariants } from "./variants";
-
-export type PaginationRangeCurrentProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The emphasized current-range text (e.g. `1-50`). */
-  children?: React.ReactNode;
-};
-
-/**
- * The emphasized current-range portion (e.g. `1-50`) inside `PaginationRange`, in the primary text
- * color.
- */
-export function PaginationRangeCurrent(props: PaginationRangeCurrentProps) {
-  return <span className={paginationRangeCurrentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination-spinner.tsx b/packages/propel/src/ui/pagination/pagination-spinner.tsx
deleted file mode 100644
index e3310e21..00000000
--- a/packages/propel/src/ui/pagination/pagination-spinner.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { paginationSpinnerVariants } from "./variants";
-
-export type PaginationSpinnerProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The spinner glyph to render (e.g. a Lucide `LoaderCircle`), sized to `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The in-flight indicator a page button shows in place of its number while navigating to it. Spins
- * whatever icon you pass, sized to `--node-size` (14px) and tinted the placeholder color.
- * Decorative, so `aria-hidden`.
- */
-export function PaginationSpinner(props: PaginationSpinnerProps) {
-  return <span aria-hidden className={paginationSpinnerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/pagination/pagination.stories.tsx b/packages/propel/src/ui/pagination/pagination.stories.tsx
deleted file mode 100644
index 58d6b90c..00000000
--- a/packages/propel/src/ui/pagination/pagination.stories.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Pagination,
-  PaginationArrowButton,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationList,
-  PaginationPageButton,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC pagination parts (each renders a single element).
-// 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: the `Pagination` nav wraps a
-// `PaginationList`, whose `PaginationItem`s hold prev/next arrows, page-number buttons (the
-// current one marked `aria-current="page"`, which drives the selected fill), and the
-// non-interactive ellipsis (an icon slot).
-const meta = {
-  title: "UI/Pagination",
-  component: PaginationPageButton,
-  subcomponents: {
-    Pagination,
-    PaginationList,
-    PaginationItem,
-    PaginationArrowButton,
-    PaginationEllipsis,
-  },
-  args: { 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: () => (
-    <Pagination aria-label="Pagination">
-      <PaginationList>
-        <PaginationItem>
-          <PaginationArrowButton aria-label="Go to previous page" disabled>
-            <ChevronLeft />
-          </PaginationArrowButton>
-        </PaginationItem>
-        {PAGES.map((n) => (
-          <PaginationItem key={n}>
-            <PaginationPageButton
-              aria-current={n === 1 ? "page" : undefined}
-              aria-label={`Go to page ${n}`}
-              disabled={n === 1}
-            >
-              {n}
-            </PaginationPageButton>
-          </PaginationItem>
-        ))}
-        <PaginationItem>
-          <PaginationArrowButton aria-label="Go to next page">
-            <ChevronRight />
-          </PaginationArrowButton>
-        </PaginationItem>
-      </PaginationList>
-    </Pagination>
-  ),
-};
-
-/**
- * Interaction test: page 1 is current (pressed fill + aria-current), the prev arrow is disabled at
- * the start, and the selected fill differs from a non-current page button. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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();
-    // The selected fill keys off `aria-current="page"`, not a prop: the current page's
-    // background differs from a non-current page button.
-    const page2 = canvas.getByRole("button", { name: "Go to page 2" });
-    await expect(getComputedStyle(page1).backgroundColor).not.toBe(
-      getComputedStyle(page2).backgroundColor,
-    );
-  },
-};
-
-/** A long run truncated with the `PaginationEllipsis` gap marker: `1 2 3 … 100`. */
-export const WithEllipsis: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Pagination aria-label="Pagination">
-      <PaginationList>
-        <PaginationItem>
-          <PaginationArrowButton aria-label="Go to previous page">
-            <ChevronLeft />
-          </PaginationArrowButton>
-        </PaginationItem>
-        {[1, 2, 3].map((n) => (
-          <PaginationItem key={n}>
-            <PaginationPageButton
-              aria-current={n === 2 ? "page" : undefined}
-              aria-label={`Go to page ${n}`}
-              disabled={n === 2}
-            >
-              {n}
-            </PaginationPageButton>
-          </PaginationItem>
-        ))}
-        <PaginationItem>
-          <PaginationEllipsis>
-            <MoreHorizontal />
-          </PaginationEllipsis>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationPageButton aria-label="Go to page 100">100</PaginationPageButton>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationArrowButton aria-label="Go to next page">
-            <ChevronRight />
-          </PaginationArrowButton>
-        </PaginationItem>
-      </PaginationList>
-    </Pagination>
-  ),
-};
-
-/**
- * The standalone page-number button. Its pressed/selected fill keys off `aria-current="page"` — the
- * current page is marked `aria-current` (and `disabled` to block re-navigation), so toggling that
- * attribute toggles the selected fill.
- */
-export const PageButton: Story = {
-  render: (args) => <PaginationPageButton {...args} aria-label="Go to page 1" />,
-};
diff --git a/packages/propel/src/ui/pill/icon-pill.tsx b/packages/propel/src/ui/pill/icon-pill.tsx
deleted file mode 100644
index 88bf5422..00000000
--- a/packages/propel/src/ui/pill/icon-pill.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react/button";
-
-import { iconPillVariants, type IconPillVariantProps } from "./variants";
-
-export type IconPillProps = Omit<BaseButton.Props, "className" | "style"> &
-  IconPillVariantProps & {
-    /** Accessible name — required because the content is an icon. */
-    "aria-label": string;
-  };
-
-/**
- * The icon-only square pill container. Renders a single Base UI `Button`; compose a `PillIcon` (or
- * `PillSpinner`) inside it. Requires an `aria-label` for the name.
- */
-export function IconPill({ magnitude, type = "button", ...props }: IconPillProps) {
-  return <BaseButton type={type} className={iconPillVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/pill/index.tsx b/packages/propel/src/ui/pill/index.tsx
deleted file mode 100644
index 44a18c45..00000000
--- a/packages/propel/src/ui/pill/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./icon-pill";
-export * from "./pill";
-export * from "./pill-icon";
-export * from "./pill-label";
-export * from "./pill-spinner";
-export * from "./pill-switch";
diff --git a/packages/propel/src/ui/pill/pill-icon.tsx b/packages/propel/src/ui/pill/pill-icon.tsx
deleted file mode 100644
index b3b297ca..00000000
--- a/packages/propel/src/ui/pill/pill-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { pillIconVariants } from "./variants";
-
-export type PillIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * A decorative leading or trailing node slot (the Figma inline-start / inline-end node). Sizes
- * whatever single child is passed to the pill's inherited `--node-size`, so callers pass a bare
- * icon. Decorative (the pill carries the accessible name), so it is `aria-hidden`.
- */
-export function PillIcon({ render, ...props }: PillIconProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: pillIconVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/pill/pill-spinner.tsx b/packages/propel/src/ui/pill/pill-spinner.tsx
deleted file mode 100644
index 88ec3962..00000000
--- a/packages/propel/src/ui/pill/pill-spinner.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { pillSpinnerVariants } from "./variants";
-
-export type PillSpinnerProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * The busy spinner shown in place of a leading/trailing node while a pill is loading. A node-slot:
- * it sizes and spins its single child (the ready-made pills pass a `LoaderCircle`), sized to the
- * pill's inherited `--node-size`. Decorative, so it is `aria-hidden`.
- */
-export function PillSpinner({ render, ...props }: PillSpinnerProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: pillSpinnerVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/pill/pill.stories.tsx b/packages/propel/src/ui/pill/pill.stories.tsx
deleted file mode 100644
index e610cff2..00000000
--- a/packages/propel/src/ui/pill/pill.stories.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Toggle } from "@base-ui/react/toggle";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, LoaderCircle, Tag, X } from "lucide-react";
-import { expect, userEvent } from "storybook/test";
-
-import { IconPill, PillButton, PillIcon, PillLabel, PillSpinner, PillSwitch } from "./index";
-
-const MAGNITUDES = ["sm", "md", "lg"] as const;
-
-// UI-tier story: composes the ATOMIC pill parts (each renders a single element) — the
-// container (PillButton / PillSwitch / IconPill), the leading/trailing node slot
-// (PillIcon), the single-line PillLabel, and the busy PillSpinner. The components-tier
-// `Pill` story shows the ready-made buttons (auto label + node slots + loading).
-const meta = {
-  title: "UI/Pill",
-  component: PillButton,
-  subcomponents: { PillSwitch, IconPill, PillIcon, PillLabel, PillSpinner },
-  args: { magnitude: "md" },
-  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>;
-
-/** Assemble the atomic parts: container › PillIcon › PillLabel. */
-export const Button: Story = {
-  args: { magnitude: "md" },
-  render: (args) => (
-    <PillButton {...args}>
-      <PillIcon>
-        <Tag />
-      </PillIcon>
-      <PillLabel>Add label</PillLabel>
-    </PillButton>
-  ),
-};
-
-/** Every magnitude (`sm` / `md` / `lg`) of the `PillButton` container. */
-export const Magnitudes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-3">
-      {MAGNITUDES.map((magnitude) => (
-        <PillButton key={magnitude} magnitude={magnitude}>
-          <PillIcon>
-            <Tag />
-          </PillIcon>
-          <PillLabel>{magnitude}</PillLabel>
-        </PillButton>
-      ))}
-    </div>
-  ),
-};
-
-/** The `PillSpinner` part replaces a node while busy; `aria-busy` carries the disabled look. */
-export const Spinner: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <PillButton magnitude="md" disabled aria-busy>
-      <PillSpinner>
-        <LoaderCircle />
-      </PillSpinner>
-      <PillLabel>Loading</PillLabel>
-    </PillButton>
-  ),
-};
-
-/**
- * `PillSwitch` container: the selected look is its pressed state. The toggle behavior is grafted on
- * by rendering the styled button as a Base UI `Toggle` (`render={<Toggle />}`).
- */
-export const Switch: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-3">
-      <PillSwitch magnitude="md" render={<Toggle />}>
-        <PillIcon>
-          <Tag />
-        </PillIcon>
-        <PillLabel>Off</PillLabel>
-      </PillSwitch>
-      <PillSwitch magnitude="md" render={<Toggle defaultPressed />}>
-        <PillIcon>
-          <Check />
-        </PillIcon>
-        <PillLabel>On</PillLabel>
-      </PillSwitch>
-    </div>
-  ),
-};
-
-/** Icon-only `IconPill` containers. Require an `aria-label`. */
-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}`}>
-          <PillIcon>
-            <X />
-          </PillIcon>
-        </IconPill>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * `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" render={<Toggle />}>
-      <PillIcon>
-        <Tag />
-      </PillIcon>
-      <PillLabel>Toggle me</PillLabel>
-    </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
deleted file mode 100644
index 0352cbeb..00000000
--- a/packages/propel/src/ui/pill/pill.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react/button";
-
-import { pillButtonVariants, type PillButtonVariantProps } from "./variants";
-
-export type { PillMagnitude } from "./variants";
-
-export type PillButtonProps = Omit<BaseButton.Props, "className" | "style"> &
-  PillButtonVariantProps;
-
-/**
- * The pill-shaped button container. Renders a single Base UI `Button`; compose a `PillLabel` and
- * optional leading/trailing `PillIcon` (or `PillSpinner`) inside it.
- */
-export function PillButton({ magnitude, type = "button", ...props }: PillButtonProps) {
-  return <BaseButton type={type} className={pillButtonVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/pill/variants.ts b/packages/propel/src/ui/pill/variants.ts
deleted file mode 100644
index dcaae841..00000000
--- a/packages/propel/src/ui/pill/variants.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { cva, cx } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// "Always the same" per Figma design spec (issue #142):
-// - Pill-shaped border-radius (fully rounded ends)
-// - Inline-flex layout with centered content
-// - Height, horizontal padding, font size per size step
-// - Font weight
-// - Single-line text (no wrapping)
-// - Hover/press/disabled/loading visual treatment
-// - Leading/trailing node position (inline-start / inline-end), sized per size step
-//
-// "Depends (adjustable)" → props: label (children), leading/trailing node, magnitude,
-// selected/unselected (PillSwitch pressed state), disabled, and which interactive part
-// (PillButton vs PillSwitch vs IconPill). magnitude has no sensible default, so it is a
-// required prop on every container part — no cva `defaultVariants`.
-
-// Shared structural base baked into every pill container cva below.
-const pillBase =
-  "inline-flex shrink-0 items-center justify-center rounded-full border-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent-strong";
-
-// Shared label-pill base (PillButton + PillSwitch): a 14px node scale, capped width, and
-// per-magnitude height/padding/font.
-const labelPillBase = cx(pillBase, "max-w-[120px] gap-1 py-1 [--node-size:0.875rem]");
-
-const labelPillMagnitude = {
-  sm: "h-5 px-1.5 text-12",
-  md: "h-6 px-1.5 text-13",
-  lg: "h-7 px-2 text-body-sm-regular",
-} as const;
-
-// ─── Containers (one styled element each) ────────────────────────────────────
-
-export const pillButtonVariants = cva(
-  [
-    labelPillBase,
-    "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",
-  ],
-  {
-    variants: { magnitude: labelPillMagnitude },
-  },
-);
-
-// No `defaultVariants` today, so every axis is required.
-export type PillButtonVariantProps = StrictVariantProps<typeof pillButtonVariants>;
-
-export const pillSwitchVariants = cva(
-  [
-    labelPillBase,
-    "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",
-  ],
-  {
-    variants: { magnitude: labelPillMagnitude },
-  },
-);
-
-// No `defaultVariants` today, so every axis is required.
-export type PillSwitchVariantProps = StrictVariantProps<typeof pillSwitchVariants>;
-
-export const iconPillVariants = cva(
-  [
-    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]",
-      },
-    },
-  },
-);
-
-// No `defaultVariants` today, so every axis is required.
-export type IconPillVariantProps = StrictVariantProps<typeof iconPillVariants>;
-
-// ─── Inline parts (one element each) ─────────────────────────────────────────
-
-// The single-line label inside a label pill. `min-w-0` lets it shrink and `truncate`
-// keeps it on one line per the Figma spec.
-export const pillLabelVariants = cva("min-w-0 truncate");
-
-// A decorative leading/trailing node slot (the Figma inline-start / inline-end node).
-// Sizes whatever single child is passed to the pill's inherited `--node-size`; the tint
-// comes from the container's text color, so no color is baked here.
-export const pillIconVariants = cva(nodeSlotClass);
-
-// The busy spinner slot that replaces a node while a pill is loading. A node-slot: it
-// sizes and spins its single svg child to the pill's `--node-size`; tinted by the
-// container text color. Bakes no glyph — the ready-made pills pass a `LoaderCircle`.
-export const pillSpinnerVariants = cva(
-  "inline-flex shrink-0 items-center justify-center [&>svg]:size-(--node-size) [&>svg]:animate-spin",
-);
-
-export type PillMagnitude = NonNullable<
-  NonNullable<Parameters<typeof pillButtonVariants>[0]>["magnitude"]
->;
diff --git a/packages/propel/src/ui/popover/index.tsx b/packages/propel/src/ui/popover/index.tsx
deleted file mode 100644
index 8c873c7c..00000000
--- a/packages/propel/src/ui/popover/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from "./popover";
-export * from "./popover-actions";
-export * from "./popover-arrow";
-export * from "./popover-backdrop";
-export * from "./popover-body";
-export * from "./popover-close";
-export * from "./popover-description";
-export * from "./popover-intro";
-export * from "./popover-panel-popup";
-export * from "./popover-popup";
-export * from "./popover-portal";
-export * from "./popover-positioner";
-export * from "./popover-title";
-export * from "./popover-trigger";
-export * from "./popover-viewport";
diff --git a/packages/propel/src/ui/popover/popover-actions.tsx b/packages/propel/src/ui/popover/popover-actions.tsx
deleted file mode 100644
index e1377528..00000000
--- a/packages/propel/src/ui/popover/popover-actions.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { popoverActionsVariants } from "./variants";
-
-/** Props for {@link PopoverActions}. */
-export type PopoverActionsProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The trailing controls (e.g. a `PopoverClose` styled as a `Button`). */
-  children?: React.ReactNode;
-};
-
-/**
- * The popup's trailing controls row (e.g. a `PopoverClose` styled as a `Button`). Pushes its
- * children to the inline-end and spaces them by a gap. Sits as a child of `PopoverBody`.
- */
-export function PopoverActions(props: PopoverActionsProps) {
-  return <div className={popoverActionsVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/popover/popover-arrow.tsx b/packages/propel/src/ui/popover/popover-arrow.tsx
deleted file mode 100644
index 818c2804..00000000
--- a/packages/propel/src/ui/popover/popover-arrow.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverArrowVariants } from "./variants";
-
-/** Props for {@link PopoverArrow}; 1:1 with Base UI `Popover.Arrow`. */
-export type PopoverArrowProps = Omit<BasePopover.Arrow.Props, "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
deleted file mode 100644
index 2577f06a..00000000
--- a/packages/propel/src/ui/popover/popover-backdrop.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverBackdropVariants } from "./variants";
-
-/** Props for {@link PopoverBackdrop}; 1:1 with Base UI `Popover.Backdrop`. */
-export type PopoverBackdropProps = Omit<BasePopover.Backdrop.Props, "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
deleted file mode 100644
index e0b0340a..00000000
--- a/packages/propel/src/ui/popover/popover-close.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverCloseVariants } from "./variants";
-
-/** Props for {@link PopoverClose}; 1:1 with Base UI `Popover.Close`. */
-export type PopoverCloseProps = Omit<BasePopover.Close.Props, "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
deleted file mode 100644
index 549015e6..00000000
--- a/packages/propel/src/ui/popover/popover-description.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverDescriptionVariants } from "./variants";
-
-/** Props for {@link PopoverDescription}; 1:1 with Base UI `Popover.Description`. */
-export type PopoverDescriptionProps = Omit<BasePopover.Description.Props, "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-panel-popup.tsx b/packages/propel/src/ui/popover/popover-panel-popup.tsx
deleted file mode 100644
index 7844f596..00000000
--- a/packages/propel/src/ui/popover/popover-panel-popup.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverPanelPopupVariants } from "./variants";
-
-/** Props for {@link PopoverPanelPopup}; 1:1 with Base UI `Popover.Popup`. */
-export type PopoverPanelPopupProps = Omit<BasePopover.Popup.Props, "className" | "style">;
-
-/**
- * The popup as the scroll body of an elevated panel surface. Carries only the inner padding +
- * focus-outline reset — the surrounding panel supplies the surface chrome (border, background,
- * shadow, radius), so this never doubles it up. Use {@link PopoverPopup} for a self-contained popup
- * that is its own surface.
- */
-export function PopoverPanelPopup(props: PopoverPanelPopupProps) {
-  return <BasePopover.Popup className={popoverPanelPopupVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/popover/popover-popup.tsx b/packages/propel/src/ui/popover/popover-popup.tsx
deleted file mode 100644
index 85d50d83..00000000
--- a/packages/propel/src/ui/popover/popover-popup.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverPopupVariants } from "./variants";
-
-/** Props for {@link PopoverPopup}; 1:1 with Base UI `Popover.Popup`. */
-export type PopoverPopupProps = Omit<BasePopover.Popup.Props, "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
deleted file mode 100644
index f394287d..00000000
--- a/packages/propel/src/ui/popover/popover-portal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-export type PopoverPortalProps = Omit<BasePopover.Portal.Props, "className" | "style">;
-
-/** 1:1 wrapper around Base UI `Popover.Portal`. */
-export function PopoverPortal(props: PopoverPortalProps) {
-  return <BasePopover.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/popover/popover-positioner.tsx b/packages/propel/src/ui/popover/popover-positioner.tsx
deleted file mode 100644
index 100fc6c1..00000000
--- a/packages/propel/src/ui/popover/popover-positioner.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverPositionerVariants } from "./variants";
-
-/** Props for {@link PopoverPositioner}; 1:1 with Base UI `Popover.Positioner`. */
-export type PopoverPositionerProps = Omit<BasePopover.Positioner.Props, "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
deleted file mode 100644
index c8ac87bf..00000000
--- a/packages/propel/src/ui/popover/popover-title.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverTitleVariants } from "./variants";
-
-/** Props for {@link PopoverTitle}; 1:1 with Base UI `Popover.Title`. */
-export type PopoverTitleProps = Omit<BasePopover.Title.Props, "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-viewport.tsx b/packages/propel/src/ui/popover/popover-viewport.tsx
deleted file mode 100644
index bf837af2..00000000
--- a/packages/propel/src/ui/popover/popover-viewport.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-
-import { popoverViewportVariants } from "./variants";
-
-/** Props for {@link PopoverViewport}; 1:1 with Base UI `Popover.Viewport`. */
-export type PopoverViewportProps = Omit<BasePopover.Viewport.Props, "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
deleted file mode 100644
index 44789667..00000000
--- a/packages/propel/src/ui/popover/popover.stories.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-
-import { Button } from "../button";
-import {
-  Popover,
-  PopoverActions,
-  PopoverArrow,
-  PopoverBackdrop,
-  PopoverBody,
-  PopoverClose,
-  PopoverDescription,
-  PopoverIntro,
-  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/Body/Intro/Actions/Title/Description/
-// Arrow/Close). The components-tier `PopoverContent` ready-made composes the
-// portal/positioner/panel surface for you. Trigger/Close compose the `Button`
-// primitive via Base UI's `render` prop — the styled primitive is the outer element
-// so its look wins, the popover part supplies the behavior.
-
-const meta = {
-  title: "UI/Popover",
-  component: Popover,
-  subcomponents: {
-    PopoverTrigger,
-    PopoverPortal,
-    PopoverBackdrop,
-    PopoverPositioner,
-    PopoverViewport,
-    PopoverPopup,
-    PopoverBody,
-    PopoverIntro,
-    PopoverActions,
-    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>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<PopoverTrigger />}
-      >
-        About
-      </Button>
-      <PopoverPortal>
-        <PopoverPositioner side="bottom" sideOffset={8}>
-          <PopoverPopup>
-            <PopoverViewport>
-              <PopoverBody>
-                <PopoverIntro>
-                  <PopoverTitle>Keyboard shortcuts</PopoverTitle>
-                  <PopoverDescription>
-                    Press <kbd>?</kbd> anywhere to see the full list.
-                  </PopoverDescription>
-                </PopoverIntro>
-              </PopoverBody>
-            </PopoverViewport>
-            <PopoverArrow />
-          </PopoverPopup>
-        </PopoverPositioner>
-      </PopoverPortal>
-    </Popover>
-  ),
-};
-
-export const AnatomyInteraction: Story = {
-  ...Anatomy,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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>
-      <Button
-        sizing="hug"
-        prominence="secondary"
-        tone="neutral"
-        magnitude="xl"
-        render={<PopoverTrigger />}
-      >
-        Open menu
-      </Button>
-      <PopoverPortal>
-        <PopoverBackdrop />
-        <PopoverPositioner side="bottom" sideOffset={8}>
-          <PopoverPopup>
-            {/*
-             * Two layout regions, separated by the body's gap (never a margin on a
-             * child): a `PopoverIntro` (title + description) and a `PopoverActions`
-             * row. `PopoverBody` owns the padding + column layout.
-             */}
-            <PopoverBody>
-              <PopoverIntro>
-                <PopoverTitle>Confirm</PopoverTitle>
-                <PopoverDescription>Focus is trapped while this is open.</PopoverDescription>
-              </PopoverIntro>
-              <PopoverActions>
-                <Button
-                  sizing="hug"
-                  prominence="secondary"
-                  tone="neutral"
-                  magnitude="xl"
-                  render={<PopoverClose />}
-                >
-                  Close
-                </Button>
-              </PopoverActions>
-            </PopoverBody>
-          </PopoverPopup>
-        </PopoverPositioner>
-      </PopoverPortal>
-    </Popover>
-  ),
-};
-
-export const ModalInteraction: Story = {
-  ...Modal,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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/variants.ts b/packages/propel/src/ui/popover/variants.ts
deleted file mode 100644
index 084e0886..00000000
--- a/packages/propel/src/ui/popover/variants.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const popoverPositionerVariants = cva("z-50 outline-none");
-// Spec "always the same": shadow/elevation, border-radius, max-width constraint, and
-// the open/close scale-fade. `max-w-xs` caps the popup at a readable column width.
-export const popoverPopupVariants = cva(
-  "max-w-xs 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",
-);
-// The padded content column inside the popup: stacks its children vertically and
-// supplies the internal padding (the bare popup carries only the surface chrome).
-// The gap spaces sibling layout regions — e.g. an intro from an actions row — so
-// regions are separated by the parent's gap, never a margin on a child.
-export const popoverBodyVariants = cva("flex flex-col gap-2 p-2");
-// The popup's leading text group: a `PopoverTitle` stacked over a
-// `PopoverDescription`, spaced by a tight gap.
-export const popoverIntroVariants = cva("flex flex-col gap-1");
-// The popup's trailing controls row (e.g. a `PopoverClose` styled as a button):
-// pushes its children to the inline-end and spaces them by a gap.
-export const popoverActionsVariants = cva("flex justify-end gap-2");
-// The bare scroll-body popup used inside an elevated panel surface (see the
-// components-tier `PopoverContent`, which supplies the surface chrome via the shared
-// overlay panel). Carries only the inner padding + focus outline reset — never the
-// border / bg / shadow / radius, which would double up with the panel surface. The
-// standalone `popoverPopupVariants` (above) is the self-contained surface used when
-// the popup is NOT wrapped in a panel.
-export const popoverPanelPopupVariants = cva("p-1 outline-none");
-export const popoverBackdropVariants = cva(
-  "fixed inset-0 bg-backdrop transition-opacity duration-200" +
-    " data-ending-style:opacity-0 data-starting-style:opacity-0",
-);
-export const popoverArrowVariants = cva(
-  "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");
-// PopoverClose is a bare button at the ui tier — no icon-button styles baked in.
-// To give it an icon-button look, compose it via `Button render={<PopoverClose />}`:
-// the outer Button element's className wins and the popover-close behavior is wired
-// through the render prop. See the Modal story for the usage pattern.
-export const popoverCloseVariants = cva(
-  "outline-none 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
deleted file mode 100644
index cd598e85..00000000
--- a/packages/propel/src/ui/preview-card/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export * from "./preview-card";
-export * from "./preview-card-arrow";
-export * from "./preview-card-backdrop";
-export * from "./preview-card-body";
-export * from "./preview-card-description";
-export * from "./preview-card-image";
-export * from "./preview-card-popup";
-export * from "./preview-card-portal";
-export * from "./preview-card-positioner";
-export * from "./preview-card-title";
-export * from "./preview-card-trigger";
-export * 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
deleted file mode 100644
index ad816c0b..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-arrow.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-import { previewCardArrowVariants } from "./variants";
-
-export type PreviewCardArrowProps = Omit<BasePreviewCard.Arrow.Props, "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 className={previewCardArrowVariants()} {...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
deleted file mode 100644
index 40ed443f..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-backdrop.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-import { previewCardBackdropVariants } from "./variants";
-
-export type PreviewCardBackdropProps = Omit<BasePreviewCard.Backdrop.Props, "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-body.tsx b/packages/propel/src/ui/preview-card/preview-card-body.tsx
deleted file mode 100644
index 2c9f30da..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-body.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { previewCardBodyVariants } from "./variants";
-
-export type PreviewCardBodyProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The card's text content — typically a `PreviewCardTitle` and `PreviewCardDescription`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The text content area of the card — typically holds a `PreviewCardTitle` and
- * `PreviewCardDescription` stacked in a column. Owns the padding so a full-bleed `PreviewCardImage`
- * can sit edge-to-edge above it; both the column layout and the padding are "always the same" per
- * the design spec.
- */
-export function PreviewCardBody(props: PreviewCardBodyProps) {
-  return <div className={previewCardBodyVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/preview-card/preview-card-description.tsx b/packages/propel/src/ui/preview-card/preview-card-description.tsx
deleted file mode 100644
index 14c4f138..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-description.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { previewCardDescriptionVariants } from "./variants";
-
-export type PreviewCardDescriptionProps = Omit<
-  React.ComponentPropsWithoutRef<"p">,
-  "className" | "style"
-> & {
-  /** The supporting description text beneath the title. */
-  children?: React.ReactNode;
-};
-
-/**
- * Supporting description text beneath the title. Bakes in the secondary text style — 13px in
- * secondary text colour — per the "always the same" items in the design spec.
- */
-export function PreviewCardDescription(props: PreviewCardDescriptionProps) {
-  return <p className={previewCardDescriptionVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/preview-card/preview-card-image.tsx b/packages/propel/src/ui/preview-card/preview-card-image.tsx
deleted file mode 100644
index 5b71c64a..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-image.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type * as React from "react";
-
-import { previewCardImageVariants } from "./variants";
-
-export type PreviewCardImageProps = Omit<
-  React.ComponentPropsWithoutRef<"img">,
-  "className" | "style"
->;
-
-/**
- * The thumbnail image shown inside the popup. Bakes in overflow-hidden and object-cover so the
- * thumbnail always clips and fills its container — these are "always the same" per the design spec.
- * Width and height are set by the consumer's layout.
- */
-export function PreviewCardImage(props: PreviewCardImageProps) {
-  return <img className={previewCardImageVariants()} {...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
deleted file mode 100644
index 9606adca..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-popup.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-import { previewCardPopupVariants } from "./variants";
-
-export type PreviewCardPopupProps = Omit<BasePreviewCard.Popup.Props, "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
deleted file mode 100644
index 35da765b..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-portal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-export type PreviewCardPortalProps = Omit<BasePreviewCard.Portal.Props, "className" | "style">;
-
-/** 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
deleted file mode 100644
index ea01a415..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-positioner.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-import { previewCardPositionerVariants } from "./variants";
-
-export type PreviewCardPositionerProps = Omit<
-  BasePreviewCard.Positioner.Props,
-  "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-title.tsx b/packages/propel/src/ui/preview-card/preview-card-title.tsx
deleted file mode 100644
index 675b4afa..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-title.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { previewCardTitleVariants } from "./variants";
-
-export type PreviewCardTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"p">,
-  "className" | "style"
-> & {
-  /** The card's heading text. */
-  children?: React.ReactNode;
-};
-
-/**
- * The card's primary heading. Bakes in the title font style — semibold 14px in primary text colour
- * — per the "always the same" items in the design spec.
- */
-export function PreviewCardTitle(props: PreviewCardTitleProps) {
-  return <p className={previewCardTitleVariants()} {...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
deleted file mode 100644
index ca226645..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-trigger.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-export type PreviewCardTriggerProps = Omit<BasePreviewCard.Trigger.Props, "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
deleted file mode 100644
index aa252783..00000000
--- a/packages/propel/src/ui/preview-card/preview-card-viewport.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-export type PreviewCardViewportProps = Omit<BasePreviewCard.Viewport.Props, "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
deleted file mode 100644
index 3808ef9d..00000000
--- a/packages/propel/src/ui/preview-card/preview-card.stories.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-
-import {
-  PreviewCard,
-  PreviewCardArrow,
-  PreviewCardBackdrop,
-  PreviewCardBody,
-  PreviewCardDescription,
-  PreviewCardPopup,
-  PreviewCardPortal,
-  PreviewCardPositioner,
-  PreviewCardTitle,
-  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,
-    PreviewCardBody,
-    PreviewCardTitle,
-    PreviewCardDescription,
-  },
-} 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={
-            // Real external href for link semantics, but cancel navigation: the Vitest
-            // browser runner shares one page across story files, so a real navigation
-            // tears down the iframe and fails unrelated stories.
-            <a
-              href="https://plane.so"
-              className="text-accent-strong underline"
-              onClick={(event) => event.preventDefault()}
-            />
-          }
-        >
-          Plane
-        </PreviewCardTrigger>
-        <PreviewCardPortal>
-          <PreviewCardBackdrop />
-          <PreviewCardPositioner side="top" sideOffset={4}>
-            <PreviewCardPopup>
-              <PreviewCardBody>
-                <PreviewCardTitle>Plane</PreviewCardTitle>
-                <PreviewCardDescription>
-                  Open-source project management for issues, sprints, and roadmaps.
-                </PreviewCardDescription>
-              </PreviewCardBody>
-              <PreviewCardArrow />
-            </PreviewCardPopup>
-          </PreviewCardPositioner>
-        </PreviewCardPortal>
-      </PreviewCard>{" "}
-      makes planning simple.
-    </p>
-  ),
-};
-
-export const AnatomyInteraction: Story = {
-  ...Anatomy,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 4171f701..00000000
--- a/packages/propel/src/ui/preview-card/preview-card.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-
-export type PreviewCardProps = Omit<BasePreviewCard.Root.Props, "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
deleted file mode 100644
index f7611c19..00000000
--- a/packages/propel/src/ui/preview-card/variants.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-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.
-//
-// The anatomy also includes four propel-extended parts — Body, Image, Title, and
-// Description — that have no Base UI counterpart. Their styles below encode the
-// "always the same" items from the design spec: the text content area's layout +
-// padding (Body), the image overflow/cover-fit (Image), and the title/description
-// font hierarchy (Title/Description).
-
-export const previewCardPositionerVariants = cva("z-50 outline-none");
-
-// The card surface. Padding lives on `PreviewCardBody` (per the spec, padding is
-// "within the text content area") rather than here, so the popup is the bare
-// surface: a `PreviewCardImage` clips itself (it carries its own overflow-hidden +
-// rounding) and the body supplies its own padding. The popup keeps no inner padding
-// so the arrow is never clipped. `max-w-80` keeps the link-preview content to a
-// comfortable width.
-export const previewCardPopupVariants = cva(
-  cx(
-    "max-w-80 origin-(--transform-origin) rounded-lg border-sm border-subtle bg-layer-1 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",
-  ),
-);
-
-// Body: the text content area. Per the spec, the content layout (a column with the
-// title above the description) and the padding around it are "always the same", so
-// they live here rather than in the consumer's composition.
-export const previewCardBodyVariants = cva("flex flex-col gap-1 p-3");
-
-export const previewCardBackdropVariants = cva(
-  cx(
-    "fixed inset-0 bg-backdrop transition-opacity duration-200",
-    "data-ending-style:opacity-0 data-starting-style:opacity-0",
-  ),
-);
-
-// Arrow inherits the popup's background so the caret blends with the card surface.
-export const previewCardArrowVariants = cva("text-layer-1");
-
-// Image: overflow-hidden + object-cover bake in the "always the same" thumbnail
-// treatment from the design spec (clip + cover-fit); the image rounds itself so it
-// can sit inside the popup without the popup needing overflow-hidden (which would
-// clip the arrow). Width/height are set by the consumer's layout.
-export const previewCardImageVariants = cva("overflow-hidden rounded-md object-cover");
-
-// Title: matches the heading hierarchy in the Figma spec.
-export const previewCardTitleVariants = cva("text-14 font-semibold text-primary");
-
-// Description: secondary supporting text beneath the title.
-export const previewCardDescriptionVariants = cva("text-13 text-secondary");
diff --git a/packages/propel/src/ui/radio/radio-group.tsx b/packages/propel/src/ui/radio/radio-group.tsx
deleted file mode 100644
index d29e0356..00000000
--- a/packages/propel/src/ui/radio/radio-group.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import type { RadioGroup as BaseRadioGroupTypes } from "@base-ui/react/radio-group";
-
-import { type RadioGroupVariantProps, radioGroupVariants } from "./variants";
-
-export type { RadioGroupDensity } from "./variants";
-
-// Mirror `BaseRadioGroup`'s own `Value` generic (default `any`); the typed/safe variant is the
-// components-tier `RadioGroupField`.
-export type RadioGroupProps<Value = any> = Omit<
-  BaseRadioGroupTypes.Props<Value>,
-  "className" | "style"
-> &
-  RadioGroupVariantProps;
-
-/** Groups a set of `Radio` options so at most one can be selected at a time. Renders a `radiogroup`. */
-export function RadioGroup<Value = any>({ 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
deleted file mode 100644
index a89b5543..00000000
--- a/packages/propel/src/ui/radio/radio-indicator.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-
-import { radioIndicatorVariants } from "./variants";
-
-export type RadioIndicatorProps = Omit<BaseRadio.Indicator.Props, "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
deleted file mode 100644
index c206bb70..00000000
--- a/packages/propel/src/ui/radio/radio.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-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>
-  ),
-};
-
-/**
- * Interaction test: the default-selected ring reports `aria-checked="true"`. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index cfc66432..00000000
--- a/packages/propel/src/ui/radio/radio.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-
-import { radioVariants } from "./variants";
-
-export type RadioProps = Omit<BaseRadio.Root.Props, "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
deleted file mode 100644
index 023f67d1..00000000
--- a/packages/propel/src/ui/radio/variants.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-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",
-    },
-  },
-});
-
-export type RadioGroupDensity = NonNullable<VariantProps<typeof radioGroupVariants>["density"]>;
-
-export type RadioGroupVariantProps = StrictVariantProps<typeof radioGroupVariants>;
diff --git a/packages/propel/src/ui/scroll-area/scroll-area-content.tsx b/packages/propel/src/ui/scroll-area/scroll-area-content.tsx
deleted file mode 100644
index a9722574..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area-content.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-import { scrollAreaContentVariants } from "./variants";
-
-/** Props for {@link ScrollAreaContent}; 1:1 with Base UI `ScrollArea.Content`. */
-export type ScrollAreaContentProps = Omit<BaseScrollArea.Content.Props, "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
deleted file mode 100644
index 69ff9661..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area-corner.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-import { scrollAreaCornerVariants } from "./variants";
-
-/** Props for {@link ScrollAreaCorner}; 1:1 with Base UI `ScrollArea.Corner`. */
-export type ScrollAreaCornerProps = Omit<BaseScrollArea.Corner.Props, "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
deleted file mode 100644
index a0a9931a..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area-scrollbar.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-import { scrollAreaScrollbarVariants, type ScrollAreaScrollbarVariantProps } from "./variants";
-
-/** Controls when the scrollbar track is visible. */
-export type ScrollAreaScrollbarVisibility = "auto" | "always";
-
-/** Controls the width (vertical) or height (horizontal) of the scrollbar gutter. */
-export type ScrollAreaScrollbarMagnitude = "thin" | "standard";
-
-/** Props for {@link ScrollAreaScrollbar}; extends Base UI `ScrollArea.Scrollbar`. */
-export type ScrollAreaScrollbarProps = Omit<BaseScrollArea.Scrollbar.Props, "className" | "style"> &
-  ScrollAreaScrollbarVariantProps;
-
-/** 1:1 wrapper around Base UI `ScrollArea.Scrollbar`. */
-export function ScrollAreaScrollbar({ visibility, magnitude, ...props }: ScrollAreaScrollbarProps) {
-  return (
-    <BaseScrollArea.Scrollbar
-      className={scrollAreaScrollbarVariants({ visibility, magnitude })}
-      {...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
deleted file mode 100644
index 456041f0..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area-thumb.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-import { scrollAreaThumbVariants } from "./variants";
-
-/** Props for {@link ScrollAreaThumb}; 1:1 with Base UI `ScrollArea.Thumb`. */
-export type ScrollAreaThumbProps = Omit<BaseScrollArea.Thumb.Props, "className" | "style">;
-
-/** 1:1 wrapper around Base UI `ScrollArea.Thumb`. */
-export function ScrollAreaThumb(props: ScrollAreaThumbProps) {
-  return <BaseScrollArea.Thumb className={scrollAreaThumbVariants()} {...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
deleted file mode 100644
index fc1e148b..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area-viewport.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-import { scrollAreaViewportVariants } from "./variants";
-
-/** Props for {@link ScrollAreaViewport}; 1:1 with Base UI `ScrollArea.Viewport`. */
-export type ScrollAreaViewportProps = Omit<BaseScrollArea.Viewport.Props, "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
deleted file mode 100644
index 6a6c666d..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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 (`visibility="auto"`).
- */
-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" visibility="auto" magnitude="thin">
-        <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" visibility="auto" magnitude="thin">
-        <ScrollAreaThumb />
-      </ScrollAreaScrollbar>
-      <ScrollAreaScrollbar orientation="horizontal" visibility="auto" magnitude="thin">
-        <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
deleted file mode 100644
index bc98a9ca..00000000
--- a/packages/propel/src/ui/scroll-area/scroll-area.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-import { scrollAreaVariants } from "./variants";
-
-/** Props for {@link ScrollArea}; 1:1 with Base UI `ScrollArea.Root`. */
-export type ScrollAreaProps = Omit<BaseScrollArea.Root.Props, "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={scrollAreaVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/select/index.tsx b/packages/propel/src/ui/select/index.tsx
deleted file mode 100644
index cb01ad28..00000000
--- a/packages/propel/src/ui/select/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from "./select";
-export * from "./select-field";
-export * from "./select-icon";
-export * from "./select-item";
-export * from "./select-item-indicator";
-export * from "./select-item-text";
-export * from "./select-label";
-export * from "./select-list";
-export * from "./select-popup";
-export * from "./select-portal";
-export * from "./select-positioner";
-export * from "./select-scroll-down-arrow";
-export * from "./select-scroll-up-arrow";
-export * from "./select-trigger";
-export * from "./select-value";
diff --git a/packages/propel/src/ui/select/select-icon.tsx b/packages/propel/src/ui/select/select-icon.tsx
deleted file mode 100644
index 9b0a1316..00000000
--- a/packages/propel/src/ui/select/select-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { selectIconVariants } from "./variants";
-
-export type SelectIconProps = Omit<BaseSelect.Icon.Props, "className" | "style">;
-
-/**
- * The trailing chevron slot inside a trigger. Renders whatever svg you pass as `children` (sized to
- * the trigger's `--node-size`). Decorative — the trigger carries the a11y state.
- */
-export function SelectIcon(props: SelectIconProps) {
-  return <BaseSelect.Icon className={selectIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-item-indicator.tsx b/packages/propel/src/ui/select/select-item-indicator.tsx
deleted file mode 100644
index 01bb82e4..00000000
--- a/packages/propel/src/ui/select/select-item-indicator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { selectItemIndicatorVariants } from "./variants";
-
-export type SelectItemIndicatorProps = Omit<BaseSelect.ItemIndicator.Props, "className" | "style">;
-
-/**
- * The selection checkmark slot inside an item. Renders whatever svg you pass as `children` (sized
- * to 1rem). Only visible when the item is selected.
- */
-export function SelectItemIndicator(props: SelectItemIndicatorProps) {
-  return <BaseSelect.ItemIndicator className={selectItemIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-item-text.tsx b/packages/propel/src/ui/select/select-item-text.tsx
deleted file mode 100644
index 4d90dc47..00000000
--- a/packages/propel/src/ui/select/select-item-text.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-export type SelectItemTextProps = Omit<BaseSelect.ItemText.Props, "className" | "style">;
-
-export function SelectItemText(props: SelectItemTextProps) {
-  return <BaseSelect.ItemText {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-item.tsx b/packages/propel/src/ui/select/select-item.tsx
deleted file mode 100644
index be3a67a8..00000000
--- a/packages/propel/src/ui/select/select-item.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { type SelectItemVariantProps, selectItemVariants } from "./variants";
-
-export type { SelectItemMagnitude } from "./variants";
-
-export type SelectItemProps = Omit<BaseSelect.Item.Props, "className" | "style"> &
-  SelectItemVariantProps;
-
-export function SelectItem({ magnitude, ...props }: SelectItemProps) {
-  return <BaseSelect.Item className={selectItemVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-label.tsx b/packages/propel/src/ui/select/select-label.tsx
deleted file mode 100644
index 5b6e6bc5..00000000
--- a/packages/propel/src/ui/select/select-label.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { selectLabelVariants } from "./variants";
-
-export type SelectLabelProps = Omit<BaseSelect.Label.Props, "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
deleted file mode 100644
index 7da58558..00000000
--- a/packages/propel/src/ui/select/select-list.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-export type SelectListProps = Omit<BaseSelect.List.Props, "className" | "style">;
-
-export function SelectList(props: SelectListProps) {
-  return <BaseSelect.List {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-popup.tsx b/packages/propel/src/ui/select/select-popup.tsx
deleted file mode 100644
index d5c82028..00000000
--- a/packages/propel/src/ui/select/select-popup.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { selectPopupVariants } from "./variants";
-
-export type SelectPopupProps = Omit<BaseSelect.Popup.Props, "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
deleted file mode 100644
index 30e60db5..00000000
--- a/packages/propel/src/ui/select/select-portal.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-export type SelectPortalProps = Omit<BaseSelect.Portal.Props, "className" | "style">;
-
-export function SelectPortal(props: SelectPortalProps) {
-  return <BaseSelect.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-positioner.tsx b/packages/propel/src/ui/select/select-positioner.tsx
deleted file mode 100644
index b506bba6..00000000
--- a/packages/propel/src/ui/select/select-positioner.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { selectPositionerVariants } from "./variants";
-
-export type SelectPositionerProps = Omit<BaseSelect.Positioner.Props, "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
deleted file mode 100644
index 71b38c0e..00000000
--- a/packages/propel/src/ui/select/select-scroll-down-arrow.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-export type SelectScrollDownArrowProps = Omit<
-  BaseSelect.ScrollDownArrow.Props,
-  "className" | "style"
->;
-
-export function SelectScrollDownArrow(props: SelectScrollDownArrowProps) {
-  return <BaseSelect.ScrollDownArrow {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-scroll-up-arrow.tsx b/packages/propel/src/ui/select/select-scroll-up-arrow.tsx
deleted file mode 100644
index 4e2deda1..00000000
--- a/packages/propel/src/ui/select/select-scroll-up-arrow.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-export type SelectScrollUpArrowProps = Omit<BaseSelect.ScrollUpArrow.Props, "className" | "style">;
-
-export function SelectScrollUpArrow(props: SelectScrollUpArrowProps) {
-  return <BaseSelect.ScrollUpArrow {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-trigger.tsx b/packages/propel/src/ui/select/select-trigger.tsx
deleted file mode 100644
index 91839bd5..00000000
--- a/packages/propel/src/ui/select/select-trigger.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-import { type SelectTriggerVariantProps, selectTriggerVariants } from "./variants";
-
-export type { SelectTriggerMagnitude } from "./variants";
-
-export type SelectTriggerProps = Omit<BaseSelect.Trigger.Props, "className" | "style"> &
-  SelectTriggerVariantProps;
-
-export function SelectTrigger({ magnitude, ...props }: SelectTriggerProps) {
-  return <BaseSelect.Trigger className={selectTriggerVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/select/select-value.tsx b/packages/propel/src/ui/select/select-value.tsx
deleted file mode 100644
index 3d0ceafd..00000000
--- a/packages/propel/src/ui/select/select-value.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-export type SelectValueProps = Omit<BaseSelect.Value.Props, "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
deleted file mode 100644
index 91773611..00000000
--- a/packages/propel/src/ui/select/select.stories.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { expect, within } from "storybook/test";
-
-import { Field, FieldError } from "../field/index";
-import {
-  Select,
-  SelectField,
-  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: {
-    SelectField,
-    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}>
-        <SelectField>
-          <SelectLabel>Server type</SelectLabel>
-          <SelectTrigger magnitude="md">
-            <SelectValue />
-            <SelectIcon>
-              <ChevronsUpDown />
-            </SelectIcon>
-          </SelectTrigger>
-        </SelectField>
-        <SelectPortal>
-          <SelectPositioner>
-            <SelectPopup>
-              <SelectList>
-                {SERVER_TYPES.map(({ label, value }) => (
-                  <SelectItem key={value} value={value} magnitude="md">
-                    <SelectItemIndicator>
-                      <Check />
-                    </SelectItemIndicator>
-                    <SelectItemText>{label}</SelectItemText>
-                  </SelectItem>
-                ))}
-              </SelectList>
-            </SelectPopup>
-          </SelectPositioner>
-        </SelectPortal>
-        <FieldError magnitude="md" />
-      </Select>
-    </Field>
-  ),
-};
-
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 47fb2de7..00000000
--- a/packages/propel/src/ui/select/select.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Select as BaseSelect } from "@base-ui/react/select";
-import type * as React from "react";
-
-export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<
-  BaseSelect.Root.Props<Value, Multiple>,
-  "className" | "style"
-> & {
-  /** The select's anatomy — a `SelectTrigger` and the `SelectPopup` of `SelectItem`s. */
-  children?: React.ReactNode;
-};
-
-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
deleted file mode 100644
index 1f1854ba..00000000
--- a/packages/propel/src/ui/select/variants.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// The field region that stacks the label over the trigger as a column. Holds the
-// gap between `SelectLabel` and `SelectTrigger`; sizes to its widest child (the
-// trigger carries `min-w-48`) so the label never forces the column wider.
-export const selectFieldVariants = cva("flex w-fit flex-col gap-1.5");
-
-export const selectLabelVariants = cva("text-14 font-medium text-primary");
-
-// The trigger wraps the selected value + trailing icon in a single flex row.
-// Height, text size, and icon size track the magnitude axis (Figma "Size").
-export const selectTriggerVariants = cva(
-  cx(
-    // The trigger is itself the focusable element → `focus: visible`.
-    fieldControlSurfaceVariants({ focus: "visible" }),
-    "flex min-w-48 items-center justify-between gap-2 rounded-md px-3 text-primary outline-none",
-    "hover:border-subtle-1 hover:bg-layer-2-hover",
-    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      // Figma "Size" axis: three trigger heights with matching text and icon sizes.
-      magnitude: {
-        sm: "h-7 text-13 [--node-size:0.875rem]",
-        md: "h-8 text-13 [--node-size:0.875rem]",
-        lg: "h-9 text-14 [--node-size:1rem]",
-      },
-    },
-  },
-);
-
-// The trailing chevron slot: a node-slot sized to `--node-size`. Always decorative;
-// the trigger carries the accessible state.
-export const selectIconVariants = cva(cx(nodeSlotClass, "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)",
-  ),
-);
-
-// Item rows: shared chrome + magnitude variants for height and text size.
-export const selectItemVariants = cva(
-  cx(
-    "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm px-2 text-primary outline-none",
-    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
-    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      // Figma "Size" axis: three row heights with matching text sizes.
-      magnitude: {
-        sm: "min-h-7 text-13",
-        md: "min-h-8 text-13",
-        lg: "min-h-9 text-14",
-      },
-    },
-  },
-);
-
-// The selection checkmark slot inside an item: a node-slot tinted to the accent.
-// Always left-aligned per the Figma spec; the 1rem grid column in selectItemVariants
-// reserves the space whether the indicator is visible or not.
-export const selectItemIndicatorVariants = cva(
-  cx(nodeSlotClass, "text-icon-accent-primary [--node-size:1rem]"),
-);
-
-export type SelectItemMagnitude = NonNullable<VariantProps<typeof selectItemVariants>["magnitude"]>;
-
-export type SelectItemVariantProps = StrictVariantProps<typeof selectItemVariants>;
-
-export type SelectTriggerMagnitude = NonNullable<
-  VariantProps<typeof selectTriggerVariants>["magnitude"]
->;
-
-export type SelectTriggerVariantProps = StrictVariantProps<typeof selectTriggerVariants>;
diff --git a/packages/propel/src/ui/separator/separator.stories.tsx b/packages/propel/src/ui/separator/separator.stories.tsx
deleted file mode 100644
index a1560161..00000000
--- a/packages/propel/src/ui/separator/separator.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-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. Both of its adjustable axes are required props (no silent defaults):
-// `orientation` and `decorative` (the spec's "Role" axis: semantic vs decorative).
-const meta = {
-  title: "UI/Separator",
-  component: Separator,
-  args: { orientation: "horizontal", decorative: false },
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Horizontal rule dividing stacked content. Semantic — announced to assistive technology. */
-export const Horizontal: Story = {
-  args: { orientation: "horizontal" },
-  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 = {
-  args: { orientation: "vertical" },
-  render: (args) => (
-    <div className="flex h-6 items-center gap-3">
-      <span className="text-13 text-secondary">Left</span>
-      <Separator {...args} />
-      <span className="text-13 text-secondary">Right</span>
-    </div>
-  ),
-};
-
-/**
- * A decorative separator is visual-only and hidden from assistive technology. Use this when the
- * separator adds rhythm to a layout but does not mark a meaningful content boundary.
- */
-export const Decorative: Story = {
-  args: { orientation: "horizontal", decorative: true },
-  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>
-  ),
-};
-
-/**
- * Behavior: the semantic separator exposes `role="separator"` and reflects its orientation via
- * `aria-orientation`. The decorative separator carries `role="none"` and `aria-hidden`. 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 orientation="horizontal" decorative={false} />
-      <Separator orientation="vertical" decorative={false} />
-      <Separator orientation="horizontal" decorative />
-    </div>
-  ),
-  play: async ({ canvas }) => {
-    const [horizontal, vertical] = canvas.getAllByRole("separator");
-    await expect(horizontal).toHaveAttribute("aria-orientation", "horizontal");
-    await expect(vertical).toHaveAttribute("aria-orientation", "vertical");
-    // The decorative separator is hidden from the a11y tree — it should NOT appear in getAllByRole.
-    await expect(canvas.getAllByRole("separator")).toHaveLength(2);
-  },
-};
diff --git a/packages/propel/src/ui/separator/separator.tsx b/packages/propel/src/ui/separator/separator.tsx
deleted file mode 100644
index 35367fe7..00000000
--- a/packages/propel/src/ui/separator/separator.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Separator as BaseSeparator } from "@base-ui/react/separator";
-
-import { separatorVariants } from "./variants";
-
-export type SeparatorProps = Omit<BaseSeparator.Props, "className" | "style" | "orientation"> & {
-  /**
-   * The axis the rule runs along — one of the spec's adjustable ("depends") axes, so it is required
-   * rather than silently defaulting. `"horizontal"` is a full-width rule between stacked content;
-   * `"vertical"` is a full-height rule between inline content. Base UI reflects it as
-   * `[data-orientation]` (the single source of truth the cva keys off) and sets
-   * `aria-orientation`.
-   */
-  orientation: NonNullable<BaseSeparator.Props["orientation"]>;
-  /**
-   * Whether the separator is purely decorative (visually present but hidden from assistive
-   * technology). The spec's adjustable "Role" axis, so it is required — make a conscious choice
-   * rather than relying on a silent default. Pass `true` for visual-only dividers; pass `false` for
-   * separators that mark a meaningful content boundary and should be announced to screen readers.
-   * Base UI sets `role="separator"` and `aria-orientation`; `decorative` overrides both.
-   */
-  decorative: boolean;
-};
-
-/**
- * A thin rule that visually divides content. Both adjustable axes from the design spec are
- * required: `orientation` (`"horizontal"` | `"vertical"`) and `decorative` (the "Role" axis —
- * semantic vs. visual-only). Spacing around the rule belongs to the surrounding layout, not the
- * separator. Maps 1:1 to Base UI's `Separator` with propel's vocabulary applied.
- */
-export function Separator({ decorative, ...props }: SeparatorProps) {
-  // A semantic separator keeps Base UI's `role="separator"` + `aria-orientation`. A decorative one
-  // is removed from the a11y tree: it takes `role="none"` and drops `aria-orientation` (an `<div>`
-  // without `role="separator"` may not carry it). We spread these only when decorative so we never
-  // clobber Base UI's defaults with `undefined` on the semantic path.
-  const a11y = decorative
-    ? { role: "none", "aria-orientation": undefined, "aria-hidden": true }
-    : null;
-  return <BaseSeparator className={separatorVariants()} {...props} {...a11y} />;
-}
diff --git a/packages/propel/src/ui/slider/slider-control.tsx b/packages/propel/src/ui/slider/slider-control.tsx
deleted file mode 100644
index 01693732..00000000
--- a/packages/propel/src/ui/slider/slider-control.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-
-import { type SliderControlVariantProps, sliderControlVariants } from "./variants";
-
-export type { SliderMagnitude } from "./variants";
-
-export type SliderControlProps = Omit<BaseSlider.Control.Props, "className" | "style"> &
-  SliderControlVariantProps;
-
-export function SliderControl({ magnitude, ...props }: SliderControlProps) {
-  return <BaseSlider.Control className={sliderControlVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/slider/slider-indicator.tsx b/packages/propel/src/ui/slider/slider-indicator.tsx
deleted file mode 100644
index db877f9f..00000000
--- a/packages/propel/src/ui/slider/slider-indicator.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-
-import { sliderIndicatorVariants } from "./variants";
-
-export type SliderIndicatorProps = Omit<BaseSlider.Indicator.Props, "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
deleted file mode 100644
index 6a566ea1..00000000
--- a/packages/propel/src/ui/slider/slider-label.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-
-import { sliderLabelVariants } from "./variants";
-
-export type SliderLabelProps = Omit<BaseSlider.Label.Props, "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
deleted file mode 100644
index 39db5d96..00000000
--- a/packages/propel/src/ui/slider/slider-thumb.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-
-import { type SliderThumbVariantProps, sliderThumbVariants } from "./variants";
-
-export type SliderThumbProps = Omit<BaseSlider.Thumb.Props, "className" | "style"> &
-  SliderThumbVariantProps;
-
-export function SliderThumb({ magnitude, ...props }: SliderThumbProps) {
-  return <BaseSlider.Thumb className={sliderThumbVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/slider/slider-track.tsx b/packages/propel/src/ui/slider/slider-track.tsx
deleted file mode 100644
index 6ea62eed..00000000
--- a/packages/propel/src/ui/slider/slider-track.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-
-import { sliderTrackVariants } from "./variants";
-
-export type SliderTrackProps = Omit<BaseSlider.Track.Props, "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
deleted file mode 100644
index dca018f0..00000000
--- a/packages/propel/src/ui/slider/slider-value.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-
-import { sliderValueVariants } from "./variants";
-
-export type SliderValueProps = Omit<BaseSlider.Value.Props, "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
deleted file mode 100644
index 08fabe64..00000000
--- a/packages/propel/src/ui/slider/slider.stories.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import {
-  Slider,
-  SliderControl,
-  SliderHeader,
-  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: {
-    SliderHeader,
-    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}>
-      <SliderHeader>
-        <SliderLabel>Volume</SliderLabel>
-        <SliderValue />
-      </SliderHeader>
-      <SliderControl magnitude="md">
-        <SliderTrack>
-          <SliderIndicator />
-          <SliderThumb magnitude="md" aria-label="Volume" />
-        </SliderTrack>
-      </SliderControl>
-    </Slider>
-  ),
-};
-
-/**
- * Interaction test: the single-thumb slider exposes its `slider` role. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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}>
-      <SliderHeader>
-        <SliderLabel>Scaling threshold</SliderLabel>
-        <SliderValue />
-      </SliderHeader>
-      <SliderControl magnitude="md">
-        <SliderTrack>
-          <SliderIndicator />
-          <SliderThumb magnitude="md" index={0} aria-label="Minimum threshold" />
-          <SliderThumb magnitude="md" index={1} aria-label="Maximum threshold" />
-        </SliderTrack>
-      </SliderControl>
-    </Slider>
-  ),
-};
-
-/**
- * Interaction test: the range slider exposes both thumb `slider` roles. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const RangeInteraction: Story = {
-  ...Range,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index b8bf4478..00000000
--- a/packages/propel/src/ui/slider/slider.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 6520d3b3..00000000
--- a/packages/propel/src/ui/slider/variants.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// The root only stacks the (optional) header row over the control; the label/value layout
-// lives on `SliderHeader`, not here.
-export const sliderVariants = cva("flex w-full flex-col gap-2");
-
-// The header row above the control: label at the inline-start, value readout at the inline-end.
-export const sliderHeaderVariants = cva("flex items-center justify-between gap-3");
-
-export const sliderValueVariants = cva("text-13 text-secondary");
-
-// Control height must accommodate the thumb. The track bar height is always the same (h-1),
-// but the thumb and its surrounding hit-area grow with `magnitude`.
-export const sliderControlVariants = cva("flex items-center", {
-  variants: {
-    magnitude: {
-      sm: "h-4",
-      md: "h-5",
-      lg: "h-6",
-    },
-  },
-});
-
-// Track height is always the same (thin bar) per the design spec.
-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");
-
-// Thumb size is fixed per size variant. Focus ring, disabled state, and shape are always the same.
-export const sliderThumbVariants = cva(
-  [
-    "block 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",
-  ].join(" "),
-  {
-    variants: {
-      magnitude: {
-        sm: "size-3",
-        md: "size-4",
-        lg: "size-5",
-      },
-    },
-  },
-);
-
-export const sliderLabelVariants = cva("text-14 font-medium text-primary");
-
-export type SliderMagnitude = NonNullable<VariantProps<typeof sliderControlVariants>["magnitude"]>;
-export type SliderControlVariantProps = StrictVariantProps<typeof sliderControlVariants>;
-export type SliderThumbVariantProps = StrictVariantProps<typeof sliderThumbVariants>;
diff --git a/packages/propel/src/ui/switch/switch-thumb.tsx b/packages/propel/src/ui/switch/switch-thumb.tsx
deleted file mode 100644
index d37b8dbe..00000000
--- a/packages/propel/src/ui/switch/switch-thumb.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Switch as BaseSwitch } from "@base-ui/react/switch";
-
-import { switchThumbVariants } from "./variants";
-
-export type SwitchThumbProps = Omit<BaseSwitch.Thumb.Props, "className" | "style">;
-
-/**
- * The switch knob (Base UI `Switch.Thumb`). Rendered inside a `Switch`; it slides between the
- * off/on gutters when the track is checked. Its diameter and travel come from the parent `Switch`'s
- * `magnitude` (published as CSS variables on the track), so the thumb takes no size prop of its
- * own.
- */
-export function SwitchThumb(props: SwitchThumbProps) {
-  return <BaseSwitch.Thumb className={switchThumbVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/switch/switch.stories.tsx b/packages/propel/src/ui/switch/switch.stories.tsx
deleted file mode 100644
index 0b81507d..00000000
--- a/packages/propel/src/ui/switch/switch.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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 sizes
-// itself from the track's `magnitude`. The components-tier story shows the ready-made
-// `Switch` that composes 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; the thumb sizes itself from the track's magnitude. */
-export const Default: Story = {
-  args: { magnitude: "md", defaultChecked: true },
-  render: (args) => (
-    <Switch {...args}>
-      <SwitchThumb />
-    </Switch>
-  ),
-};
-
-/**
- * Interaction test: clicking the switch flips its checked state. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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; each thumb sizes itself from its track. */
-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 />
-        </Switch>
-      ))}
-    </div>
-  ),
-};
diff --git a/packages/propel/src/ui/switch/switch.tsx b/packages/propel/src/ui/switch/switch.tsx
deleted file mode 100644
index 6de03865..00000000
--- a/packages/propel/src/ui/switch/switch.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Switch as BaseSwitch } from "@base-ui/react/switch";
-
-import { type SwitchVariantProps, switchVariants } from "./variants";
-
-export type { SwitchMagnitude } from "./variants";
-
-export type SwitchProps = Omit<BaseSwitch.Root.Props, "className" | "style"> & SwitchVariantProps;
-
-/**
- * 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` as its child; the thumb sizes itself from this track's `magnitude`.
- *
- * 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={switchVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/index.tsx b/packages/propel/src/ui/table/index.tsx
deleted file mode 100644
index 5a3811cd..00000000
--- a/packages/propel/src/ui/table/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export * from "./table";
-export * from "./table-scroll-area";
-export * from "./table-scroll-area-viewport";
-export * from "./table-body";
-export * from "./table-cell";
-export * from "./table-cell-content";
-export * from "./table-cell-layout";
-export * from "./table-cell-slot";
-export * from "./table-cell-trigger";
-export * from "./table-cell-trigger-indicator";
-export * from "./table-cell-trigger-label";
-export * from "./table-head";
-export * from "./table-head-sort-indicator";
-export * from "./table-head-sort-trigger";
-export * from "./table-head-title";
-export * from "./table-header";
-export * from "./table-row";
diff --git a/packages/propel/src/ui/table/table-cell-content.tsx b/packages/propel/src/ui/table/table-cell-content.tsx
deleted file mode 100644
index 44f2cc0a..00000000
--- a/packages/propel/src/ui/table/table-cell-content.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { tableCellContentVariants } from "./variants";
-
-export type TableCellContentProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The cell's text content; truncates instead of overflowing. */
-  children?: React.ReactNode;
-};
-
-/** The growing text region inside a `TableCellLayout`. Truncates instead of overflowing. */
-export function TableCellContent(props: TableCellContentProps) {
-  return <div className={tableCellContentVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-cell-layout.tsx b/packages/propel/src/ui/table/table-cell-layout.tsx
deleted file mode 100644
index f39da8c0..00000000
--- a/packages/propel/src/ui/table/table-cell-layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type * as React from "react";
-
-import { tableCellLayoutVariants } from "./variants";
-
-export type TableCellLayoutProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /**
-   * The inline layout — a leading `TableCellSlot`, a `TableCellContent`, and a trailing
-   * `TableCellSlot`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The inline layout inside a plain `TableCell`: a leading `TableCellSlot`, a growing
- * `TableCellContent`, and a trailing `TableCellSlot`. Sets the slot `--node-size`.
- */
-export function TableCellLayout(props: TableCellLayoutProps) {
-  return <div className={tableCellLayoutVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-cell-slot.tsx b/packages/propel/src/ui/table/table-cell-slot.tsx
deleted file mode 100644
index 069479f7..00000000
--- a/packages/propel/src/ui/table/table-cell-slot.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { tableCellSlotVariants } from "./variants";
-
-export type TableCellSlotProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare node to render (an icon or `Avatar`), sized to the cell's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * A leading/trailing slot beside cell content (an icon or an `Avatar`). Sizes its single child to
- * the cell's `--node-size`; callers pass a bare node.
- */
-export function TableCellSlot(props: TableCellSlotProps) {
-  return <span className={tableCellSlotVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-cell-trigger-indicator.tsx b/packages/propel/src/ui/table/table-cell-trigger-indicator.tsx
deleted file mode 100644
index 29aa4a7e..00000000
--- a/packages/propel/src/ui/table/table-cell-trigger-indicator.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type * as React from "react";
-
-import { tableCellTriggerIndicatorVariants } from "./variants";
-
-export type TableCellTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /**
-   * The trailing glyph to render (e.g. a chevron or ellipsis), sized to the trigger's
-   * `--node-size`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The trailing glyph slot inside a `TableCellTrigger` (the editable chevron, the action ellipsis).
- * Sizes its single child to the trigger's `--node-size` and tints it, dimming when the trigger is
- * disabled. Decorative, so it is `aria-hidden`.
- */
-export function TableCellTriggerIndicator(props: TableCellTriggerIndicatorProps) {
-  return <span aria-hidden className={tableCellTriggerIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-cell-trigger-label.tsx b/packages/propel/src/ui/table/table-cell-trigger-label.tsx
deleted file mode 100644
index 65c22904..00000000
--- a/packages/propel/src/ui/table/table-cell-trigger-label.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { tableCellTriggerLabelVariants } from "./variants";
-
-export type TableCellTriggerLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The cell's value text; truncates instead of overflowing. */
-  children?: React.ReactNode;
-};
-
-/** The truncating value text inside an editable `TableCellTrigger`. */
-export function TableCellTriggerLabel(props: TableCellTriggerLabelProps) {
-  return <span className={tableCellTriggerLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-cell-trigger.tsx b/packages/propel/src/ui/table/table-cell-trigger.tsx
deleted file mode 100644
index ed161198..00000000
--- a/packages/propel/src/ui/table/table-cell-trigger.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type * as React from "react";
-
-import { tableCellTriggerVariants } from "./variants";
-
-export type TableCellTriggerLayout = "editable" | "action";
-
-export type TableCellTriggerProps = Omit<
-  React.ComponentPropsWithoutRef<"button">,
-  "className" | "style" | "type"
-> & {
-  /** `editable` lays out a value + trailing chevron; `action` centers an icon. */
-  layout: TableCellTriggerLayout;
-  /** Keeps the active editable cell tinted. @default false */
-  selected?: boolean;
-};
-
-/**
- * The full-cell `<button>` inside an editable/action cell. Built as the styled outer of a Base UI
- * Menu trigger via its `render` prop, so the trigger's behavior projects onto this look. Carries a
- * `cell-trigger` group so its indicator can dim while disabled.
- */
-export function TableCellTrigger({ layout, selected = false, ...props }: TableCellTriggerProps) {
-  return (
-    <button type="button" className={tableCellTriggerVariants({ layout, selected })} {...props} />
-  );
-}
diff --git a/packages/propel/src/ui/table/table-head-sort-indicator.tsx b/packages/propel/src/ui/table/table-head-sort-indicator.tsx
deleted file mode 100644
index ae558aad..00000000
--- a/packages/propel/src/ui/table/table-head-sort-indicator.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { tableHeadSortIndicatorVariants } from "./variants";
-
-export type TableHeadSortIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The sort-direction glyph to render, sized to the trigger's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The sort chevron at the trailing edge of a `TableHeadSortTrigger`. Sizes its single glyph child
- * to the trigger's `--node-size`; the caller passes the direction glyph. Decorative (the `<th>`
- * carries `aria-sort`), so it is `aria-hidden`.
- */
-export function TableHeadSortIndicator(props: TableHeadSortIndicatorProps) {
-  return <span aria-hidden className={tableHeadSortIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-head-sort-trigger.tsx b/packages/propel/src/ui/table/table-head-sort-trigger.tsx
deleted file mode 100644
index 953a22e4..00000000
--- a/packages/propel/src/ui/table/table-head-sort-trigger.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { tableHeadSortTriggerVariants } from "./variants";
-
-export type TableHeadSortTriggerProps = Omit<
-  React.ComponentPropsWithoutRef<"button">,
-  "className" | "style" | "type"
-> & {
-  /** The trigger's contents — a `TableHeadTitle` and a trailing `TableHeadSortIndicator`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The sort control inside a sortable `TableHead`: a `<button>` wrapping the `TableHeadTitle` and a
- * trailing `TableHeadSortIndicator`. Clicking it cycles the column's sort order.
- */
-export function TableHeadSortTrigger(props: TableHeadSortTriggerProps) {
-  return <button type="button" className={tableHeadSortTriggerVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-head-title.tsx b/packages/propel/src/ui/table/table-head-title.tsx
deleted file mode 100644
index cdd9f7f4..00000000
--- a/packages/propel/src/ui/table/table-head-title.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { tableHeadTitleVariants } from "./variants";
-
-export type TableHeadTitleProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The column title text; truncates instead of overflowing. */
-  children?: React.ReactNode;
-};
-
-/** The column title inside a `TableHead`. Truncates instead of overflowing the cell. */
-export function TableHeadTitle(props: TableHeadTitleProps) {
-  return <span className={tableHeadTitleVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/table/table-scroll-area-viewport.tsx b/packages/propel/src/ui/table/table-scroll-area-viewport.tsx
deleted file mode 100644
index d26007a1..00000000
--- a/packages/propel/src/ui/table/table-scroll-area-viewport.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { tableScrollAreaViewportVariants } from "./variants";
-
-export type TableScrollAreaViewportProps = Omit<
-  useRender.ComponentProps<"div">,
-  "className" | "style"
->;
-
-/**
- * The scroll viewport inside a `TableScrollArea` that holds the `<table>` — a single styled
- * `<div>`. It bakes no scroll behavior: the ready-made `components/table` grafts the Base UI
- * `ScrollArea.Viewport` on by rendering it as this part's `render` target (the styled viewport
- * stays the outer element so its className wins).
- */
-export function TableScrollAreaViewport({ render, ...props }: TableScrollAreaViewportProps) {
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps({ className: tableScrollAreaViewportVariants() }, props),
-  });
-}
diff --git a/packages/propel/src/ui/table/table-scroll-area.tsx b/packages/propel/src/ui/table/table-scroll-area.tsx
deleted file mode 100644
index c84a22ce..00000000
--- a/packages/propel/src/ui/table/table-scroll-area.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { tableScrollAreaVariants } from "./variants";
-
-export type TableScrollAreaProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The rounded, hairline-bordered scroll frame around a `Table` — a single styled `<div>`. It bakes
- * no scroll behavior: the ready-made `components/table` grafts the Base UI `ScrollArea.Root` on by
- * rendering it as this part's `render` target (the styled frame stays the outer element so its
- * className wins and its context reaches the viewport/scrollbars), alongside the
- * `TableScrollAreaViewport`, the `<table>`, and the scrollbars.
- */
-export function TableScrollArea({ render, ...props }: TableScrollAreaProps) {
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps({ className: tableScrollAreaVariants() }, props),
-  });
-}
diff --git a/packages/propel/src/ui/table/table.stories.tsx b/packages/propel/src/ui/table/table.stories.tsx
deleted file mode 100644
index 11078e39..00000000
--- a/packages/propel/src/ui/table/table.stories.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
-import * as React from "react";
-import { expect, userEvent } from "storybook/test";
-
-import { Avatar, AvatarFallback } from "../avatar/index";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableCellContent,
-  TableCellLayout,
-  TableCellSlot,
-  TableHead,
-  TableHeader,
-  TableHeadSortIndicator,
-  TableHeadSortTrigger,
-  TableHeadTitle,
-  TableRow,
-} 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 `TableHead`/`TableCell` (which compose
-// these parts), the editable/action cells (which compose propel's Menu), plus Pagination. Here you
-// assemble the raw structure — Table › Header/Body › Row › Head/Cell — and wire the sort control by
-// hand from `TableHeadSortTrigger` + `TableHeadSortIndicator`.
-const meta = {
-  title: "UI/Table",
-  component: Table,
-  subcomponents: {
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableHead,
-    TableHeadTitle,
-    TableHeadSortTrigger,
-    TableHeadSortIndicator,
-    TableCell,
-    TableCellLayout,
-    TableCellContent,
-    TableCellSlot,
-  },
-} 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` mode: rounded outer border with row dividers only. */
-export const Default: Story = {
-  render: () => (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          {COLUMNS.map((c) => (
-            <TableHead mode="table" pinned="none" key={c}>
-              <TableHeadTitle>{c}</TableHeadTitle>
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {PEOPLE.map((person) => (
-          <TableRow key={person.email}>
-            <TableCell mode="table" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellSlot>
-                  <Avatar magnitude="xs" role="img" aria-label={person.name}>
-                    <AvatarFallback tone="indigo">{person.name.charAt(0)}</AvatarFallback>
-                  </Avatar>
-                </TableCellSlot>
-                <TableCellContent>{person.name}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-            <TableCell mode="table" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.display}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-            <TableCell mode="table" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.email}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-            <TableCell mode="table" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.role}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
-
-/**
- * Interaction test: the standard table exposes 4 column headers and 1 header + 3 data rows. Tagged
- * out of the sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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` mode: every cell is fully bordered to form a grid. */
-export const Spreadsheet: Story = {
-  render: () => (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          {COLUMNS.map((c) => (
-            <TableHead mode="spreadsheet" pinned="none" key={c}>
-              <TableHeadTitle>{c}</TableHeadTitle>
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {PEOPLE.map((person) => (
-          <TableRow key={person.email}>
-            <TableCell mode="spreadsheet" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.name}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-            <TableCell mode="spreadsheet" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.display}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-            <TableCell mode="spreadsheet" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.email}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-            <TableCell mode="spreadsheet" pinned="none" padding="cell">
-              <TableCellLayout>
-                <TableCellContent>{person.role}</TableCellContent>
-              </TableCellLayout>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
-
-const sortGlyph = { asc: ChevronUp, desc: ChevronDown, none: ChevronsUpDown } as const;
-const ariaSort = { asc: "ascending", desc: "descending", none: "none" } as const;
-type Sort = keyof typeof sortGlyph;
-
-/**
- * A sortable header, assembled from the atomic parts: a `TableHeadSortTrigger` button wrapping a
- * `TableHeadTitle` and a `TableHeadSortIndicator` chevron, with `aria-sort` on the `<th>`. Clicking
- * cycles none → asc → desc.
- */
-export const Sortable: Story = {
-  render: function Render() {
-    const [sort, setSort] = React.useState<Sort>("none");
-    const cycle = () => setSort((s) => (s === "none" ? "asc" : s === "asc" ? "desc" : "none"));
-    const SortGlyph = sortGlyph[sort];
-    const sorted =
-      sort === "none"
-        ? PEOPLE
-        : [...PEOPLE].sort((a, b) => a.name.localeCompare(b.name) * (sort === "asc" ? 1 : -1));
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead mode="table" pinned="none" aria-sort={ariaSort[sort]}>
-              <TableHeadSortTrigger onClick={cycle}>
-                <TableHeadTitle>Name</TableHeadTitle>
-                <TableHeadSortIndicator>
-                  <SortGlyph />
-                </TableHeadSortIndicator>
-              </TableHeadSortTrigger>
-            </TableHead>
-            <TableHead mode="table" pinned="none">
-              <TableHeadTitle>Email</TableHeadTitle>
-            </TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {sorted.map((person) => (
-            <TableRow key={person.email}>
-              <TableCell mode="table" pinned="none" padding="cell">
-                <TableCellLayout>
-                  <TableCellContent>{person.name}</TableCellContent>
-                </TableCellLayout>
-              </TableCell>
-              <TableCell mode="table" pinned="none" padding="cell">
-                <TableCellLayout>
-                  <TableCellContent>{person.email}</TableCellContent>
-                </TableCellLayout>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-/**
- * Interaction test: clicking the sort trigger cycles `aria-sort` none → ascending → descending.
- * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const SortableInteraction: Story = {
-  ...Sortable,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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: () => (
-    <div className="w-100">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead mode="table" pinned="start">
-              <TableHeadTitle>Name</TableHeadTitle>
-            </TableHead>
-            <TableHead mode="table" pinned="none">
-              <TableHeadTitle>Display name</TableHeadTitle>
-            </TableHead>
-            <TableHead mode="table" pinned="none">
-              <TableHeadTitle>Email</TableHeadTitle>
-            </TableHead>
-            <TableHead mode="table" pinned="none">
-              <TableHeadTitle>Account type</TableHeadTitle>
-            </TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {PEOPLE.map((person) => (
-            <TableRow key={person.email}>
-              <TableCell mode="table" pinned="start" padding="cell">
-                <TableCellLayout>
-                  <TableCellSlot>
-                    <Avatar magnitude="xs" role="img" aria-label={person.name}>
-                      <AvatarFallback tone="indigo">{person.name.charAt(0)}</AvatarFallback>
-                    </Avatar>
-                  </TableCellSlot>
-                  <TableCellContent>{person.name}</TableCellContent>
-                </TableCellLayout>
-              </TableCell>
-              <TableCell mode="table" pinned="none" padding="cell">
-                <TableCellLayout>
-                  <TableCellContent>{person.display}</TableCellContent>
-                </TableCellLayout>
-              </TableCell>
-              <TableCell mode="table" pinned="none" padding="cell">
-                <TableCellLayout>
-                  <TableCellContent>{person.email}</TableCellContent>
-                </TableCellLayout>
-              </TableCell>
-              <TableCell mode="table" pinned="none" padding="cell">
-                <TableCellLayout>
-                  <TableCellContent>{person.role}</TableCellContent>
-                </TableCellLayout>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  ),
-};
diff --git a/packages/propel/src/ui/table/variants.ts b/packages/propel/src/ui/table/variants.ts
deleted file mode 100644
index 545b48ef..00000000
--- a/packages/propel/src/ui/table/variants.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// Table is a structural data primitive. The designer locked two layout looks (Figma
-// "Table" vs "Spreadsheet") as the only `mode` axis, and baked everything else
-// (header chrome, cell padding, row hover, sort-indicator position, focus ring) into
-// the component so every table stays consistent. Every part's className lives here as
-// a cva pairing, so no part takes a `className` at its boundary.
-
-// The rounded, hairline scroll frame around the `<table>`. The ready-made grafts the Base UI
-// ScrollArea.Root onto this styled frame via `render`.
-export const tableScrollAreaVariants = cva(
-  "relative flex max-h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1",
-);
-
-// The scroll viewport that the `<table>` lives in.
-export const tableScrollAreaViewportVariants = cva(
-  cx(
-    "min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-inset",
-  ),
-);
-
-// The `<table>` element itself.
-export const tableModes = cva("w-full caption-bottom border-collapse text-13 text-primary");
-
-// `<thead>` / `<tbody>` carry no chrome of their own; the cva keeps every part styled
-// in one place even when the pairing is empty.
-export const tableHeaderVariants = cva("");
-
-export const tableBodyVariants = cva("");
-
-// A body `<tr>`: the row hover tint (an "always" per the designer) and a hover group so
-// pinned cells can react to the row's hover.
-export const tableRowVariants = cva("group/body-row bg-layer-2 hover:bg-layer-2-hover");
-
-// A header cell (`<th>`). `mode` is the table look; the row/edge borders come from
-// the surrounding `Table`'s mode via `pinned`/`edge`. Sticky to the top so the
-// header stays visible while the body scrolls (an "always").
-export const tableHeadVariants = cva(
-  cx(
-    "sticky top-0 h-[38px] px-4 py-2 text-start align-middle",
-    "bg-layer-1 text-12 font-semibold text-tertiary",
-  ),
-  {
-    variants: {
-      // The surrounding table look, which decides this cell's borders.
-      mode: {
-        table: "border-b border-subtle",
-        spreadsheet: "border-e-[0.5px] border-b-[0.5px] border-subtle last:border-e-0",
-      },
-      // Pin this header to an inline edge while the body scrolls sideways.
-      pinned: {
-        none: "z-20",
-        start: "sticky inset-s-0 z-30 border-e-[0.5px] border-subtle",
-        end: "sticky inset-e-0 z-30 border-s-[0.5px] border-subtle",
-      },
-    },
-  },
-);
-
-// A data cell (`<td>`). `mode` decides its borders; `pinned` makes it stick to an
-// inline edge (carrying its own background so scrolled content does not show through).
-export const tableCellVariants = cva("h-11 align-middle", {
-  variants: {
-    mode: {
-      table: "border-b-[0.5px] border-subtle group-last/body-row:border-b-0",
-      spreadsheet:
-        "border-e-[0.5px] border-b-[0.5px] border-subtle group-last/body-row:border-b-0 last:border-e-0",
-    },
-    pinned: {
-      none: "",
-      start:
-        "sticky inset-s-0 z-10 border-e-[0.5px] border-subtle bg-layer-2 group-hover/body-row:bg-layer-2-hover",
-      end: "sticky inset-e-0 z-10 border-s-[0.5px] border-subtle bg-layer-2 group-hover/body-row:bg-layer-2-hover",
-    },
-    // Cells that host a full-cell trigger (editable/action) drop their own padding so
-    // the trigger fills the cell; plain cells keep the standard padding.
-    padding: {
-      cell: "px-4 py-2",
-      trigger: "p-0",
-    },
-  },
-});
-
-// Per-axis types derive from the cvas (the single source of truth). `mode`/`pinned` are shared by
-// head + cell; `padding` is cell-only. The `<Name>VariantProps` bundles stay PRIVATE — a part
-// imports its own for `Props` (rule 10) and never re-exports it.
-type TableCellVariantConfig = VariantProps<typeof tableCellVariants>;
-
-/** The two table looks: `table` (row dividers only) and `spreadsheet` (full grid). */
-export type TableMode = NonNullable<TableCellVariantConfig["mode"]>;
-
-/** Which inline edge a header/cell pins to (or `none`) while the table scrolls sideways. */
-export type TablePinned = NonNullable<TableCellVariantConfig["pinned"]>;
-
-/** A cell's inner spacing: `cell` pads the content; `trigger` drops it for a full-cell trigger. */
-export type TableCellPadding = NonNullable<TableCellVariantConfig["padding"]>;
-
-export type TableCellVariantProps = StrictVariantProps<typeof tableCellVariants>;
-export type TableHeadVariantProps = StrictVariantProps<typeof tableHeadVariants>;
-
-// The inline flex layout inside a plain cell: leading slot, growing content, trailing
-// slot. Padding lives on the `<td>` (`TableCell`), not here.
-export const tableCellLayoutVariants = cva("flex items-center gap-2 [--node-size:1.25rem]");
-
-// The growing text region of a cell; truncates instead of overflowing.
-export const tableCellContentVariants = cva("min-w-0 flex-1 truncate");
-
-// A leading/trailing slot beside cell content (icon or Avatar). Sizes its single child
-// via the shared node-slot class; never bakes a size onto the child.
-export const tableCellSlotVariants = cva(nodeSlotClass);
-
-// The label region inside a `TableHead`: truncates the column title.
-export const tableHeadTitleVariants = cva("truncate");
-
-// The sort control inside a sortable `TableHead`: a button that wraps the title + the
-// sort indicator. The chevron sits to the inline-end of the text (an "always").
-export const tableHeadSortTriggerVariants = cva(
-  cx(
-    "-mx-1 inline-flex items-center gap-1.5 rounded-sm px-1 [--node-size:0.875rem]",
-    "text-tertiary hover:text-secondary",
-    "outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "cursor-pointer",
-  ),
-);
-
-// The sort chevron at the trailing edge of a sort control. Sizes its single glyph via
-// the node-slot class and tints it; the caller passes the direction glyph.
-export const tableHeadSortIndicatorVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
-
-// The full-cell trigger inside an editable/action cell (rendered as the styled outer of
-// a Base UI Menu trigger). `layout` picks the editable (text + trailing chevron) or
-// action (centered icon) layout; `selected` keeps the active editable cell tinted.
-export const tableCellTriggerVariants = cva(
-  cx(
-    "group/cell-trigger flex h-11 w-full items-center outline-none [--node-size:1.25rem]",
-    "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",
-  ),
-  {
-    variants: {
-      layout: {
-        editable: "justify-between gap-1 px-4 text-start",
-        action: "justify-center px-4",
-      },
-      selected: {
-        true: "bg-layer-transparent-selected",
-        false: "",
-      },
-    },
-  },
-);
-
-// The truncating value text inside an editable cell trigger.
-export const tableCellTriggerLabelVariants = cva("min-w-0 truncate");
-
-// The trailing glyph slot inside a cell trigger (the editable chevron, the action
-// ellipsis). Sizes its single child via the node-slot class and tints it, dimming when
-// the trigger is disabled.
-export const tableCellTriggerIndicatorVariants = cva(
-  cx(nodeSlotClass, "text-icon-secondary group-disabled/cell-trigger:text-icon-disabled"),
-);
diff --git a/packages/propel/src/ui/tabs/tab-underline-bar-track.tsx b/packages/propel/src/ui/tabs/tab-underline-bar-track.tsx
deleted file mode 100644
index 7bbeba6b..00000000
--- a/packages/propel/src/ui/tabs/tab-underline-bar-track.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type * as React from "react";
-
-import { underlineBarTrackVariants } from "./variants";
-
-export type TabUnderlineBarTrackProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
->;
-
-/**
- * The padded track that holds an `underline`-appearance tab's sliding bar. Renders its bar child
- * via `{...props}` so the underline track cva stays internal; compose `<TabUnderlineBar />` inside
- * it.
- */
-export function TabUnderlineBarTrack(props: TabUnderlineBarTrackProps) {
-  return <span className={underlineBarTrackVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/tabs/tab-underline-bar.tsx b/packages/propel/src/ui/tabs/tab-underline-bar.tsx
deleted file mode 100644
index 69c7a73d..00000000
--- a/packages/propel/src/ui/tabs/tab-underline-bar.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type * as React from "react";
-
-import { underlineBarVariants } from "./variants";
-
-export type TabUnderlineBarProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
->;
-
-/**
- * The decorative bar beneath an `underline`-appearance tab's label: tints on hover and goes
- * transparent when active (the shared `TabsIndicator` takes over). Sits inside a
- * `TabUnderlineBarTrack`. Owns the styled `<span>` so the underline cva stays internal.
- */
-export function TabUnderlineBar(props: TabUnderlineBarProps) {
-  return <span aria-hidden className={underlineBarVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/tabs/tab-underline-label.tsx b/packages/propel/src/ui/tabs/tab-underline-label.tsx
deleted file mode 100644
index b881c1f5..00000000
--- a/packages/propel/src/ui/tabs/tab-underline-label.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from "react";
-
-import { underlineLabelVariants } from "./variants";
-
-export type TabUnderlineLabelProps = {
-  children?: React.ReactNode;
-};
-
-/**
- * The label row of an `underline`-appearance 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
deleted file mode 100644
index a6e22142..00000000
--- a/packages/propel/src/ui/tabs/tab.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-
-import { type TabVariantProps, tabVariants } from "./variants";
-
-export type TabProps = Omit<BaseTabs.Tab.Props, "className" | "style"> & TabVariantProps;
-
-/** A single tab button. `value` ties it to the `TabsPanel` of the same `value`. */
-export function Tab({ appearance, ...props }: TabProps) {
-  return <BaseTabs.Tab className={tabVariants({ appearance })} {...props} />;
-}
diff --git a/packages/propel/src/ui/tabs/tabs-indicator.tsx b/packages/propel/src/ui/tabs/tabs-indicator.tsx
deleted file mode 100644
index 0188ab09..00000000
--- a/packages/propel/src/ui/tabs/tabs-indicator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-
-import { tabsIndicatorVariants } from "./variants";
-
-export type TabsIndicatorProps = Omit<BaseTabs.Indicator.Props, "className" | "style">;
-
-/**
- * The underline bar. Surfaced for callers composing a custom list; the built-in `TabsList` already
- * renders it for the `underline` appearance.
- */
-export function TabsIndicator(props: TabsIndicatorProps) {
-  return <BaseTabs.Indicator className={tabsIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/tabs/tabs-list-scroll-area.tsx b/packages/propel/src/ui/tabs/tabs-list-scroll-area.tsx
deleted file mode 100644
index 5a45e6fc..00000000
--- a/packages/propel/src/ui/tabs/tabs-list-scroll-area.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { tabsListScrollAreaVariants } from "./variants";
-
-export type TabsListScrollAreaProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The horizontal scroll frame around a `TabsList` — a single styled `<div>` by default. It bakes in
- * NO scroll behavior, keeping `ui/tabs` independent of the ScrollArea primitive: the ready-made
- * `components/tabs` `TabsList` grafts the behavior on by rendering it as a scroll root —
- * `render={<ScrollArea.Root />}` (the styled div stays the outer element) — and composes the list
- * (as the scroll viewport) plus a scrollbar so a long row of tabs scrolls sideways.
- */
-export function TabsListScrollArea({ render, ...props }: TabsListScrollAreaProps) {
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps({ className: tabsListScrollAreaVariants() }, props),
-  });
-}
diff --git a/packages/propel/src/ui/tabs/tabs-list.tsx b/packages/propel/src/ui/tabs/tabs-list.tsx
deleted file mode 100644
index 84da6b1c..00000000
--- a/packages/propel/src/ui/tabs/tabs-list.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-
-import { type TabsListVariantProps, tabsListVariants } from "./variants";
-
-export type TabsListProps = Omit<BaseTabs.List.Props, "className" | "style"> & TabsListVariantProps;
-
-/**
- * The row of tabs (Base UI `Tabs.List`) — a single element. The ready-made `components/tabs`
- * `TabsList` adds the horizontal scroller and the underline `TabsIndicator`.
- */
-export function TabsList({ appearance, ...props }: TabsListProps) {
-  return <BaseTabs.List className={tabsListVariants({ appearance })} {...props} />;
-}
diff --git a/packages/propel/src/ui/tabs/tabs-panel.tsx b/packages/propel/src/ui/tabs/tabs-panel.tsx
deleted file mode 100644
index 02147c1c..00000000
--- a/packages/propel/src/ui/tabs/tabs-panel.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-
-import { tabsPanelVariants } from "./variants";
-
-export type TabsPanelProps = Omit<BaseTabs.Panel.Props, "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
deleted file mode 100644
index 25fc0b04..00000000
--- a/packages/propel/src/ui/tabs/tabs.stories.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import {
-  Tab,
-  TabUnderlineBar,
-  TabUnderlineBarTrack,
-  TabUnderlineLabel,
-  Tabs,
-  TabsIndicator,
-  TabsList,
-  TabsPanel,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC tab parts (each a single, prop-driven element). `Tabs`,
-// `TabsList`, and each `Tab` take the `appearance` explicitly — the ready-made `components/tabs` sets
-// it once and shares it via context (and adds the scroll frame + indicator) so you don't repeat it.
-const meta = {
-  title: "UI/Tabs",
-  component: Tabs,
-  subcomponents: { TabsList, Tab, TabsIndicator, TabsPanel },
-  args: { appearance: "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 appearance). */
-export const Default: Story = {
-  render: () => (
-    <Tabs appearance="contained" defaultValue="overview">
-      <TabsList appearance="contained">
-        {TAB_ITEMS.map((item) => (
-          <Tab key={item.value} appearance="contained" value={item.value}>
-            {item.label}
-          </Tab>
-        ))}
-      </TabsList>
-      {TAB_ITEMS.map((item) => (
-        <TabsPanel key={item.value} value={item.value}>
-          {item.panel}
-        </TabsPanel>
-      ))}
-    </Tabs>
-  ),
-};
-
-/**
- * Interaction test: clicking a tab activates it and swaps the panel. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
- * sees the active tab/panel change on its own.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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 appearance: compose the shared `TabsIndicator` inside the `TabsList` (the
- * ready-made `components/tabs` adds it for you). Each `Tab` decorates its body with the atomic
- * `TabUnderlineLabel` (the rounded label box) and a `TabUnderlineBarTrack` wrapping a
- * `TabUnderlineBar` (the padded track plus the per-tab hover bar).
- */
-export const Underline: Story = {
-  render: () => (
-    <Tabs appearance="underline" defaultValue="overview">
-      <TabsList appearance="underline">
-        {TAB_ITEMS.map((item) => (
-          <Tab key={item.value} appearance="underline" value={item.value}>
-            <TabUnderlineLabel>{item.label}</TabUnderlineLabel>
-            <TabUnderlineBarTrack>
-              <TabUnderlineBar />
-            </TabUnderlineBarTrack>
-          </Tab>
-        ))}
-        <TabsIndicator />
-      </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
deleted file mode 100644
index 0ca5ff13..00000000
--- a/packages/propel/src/ui/tabs/tabs.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-
-import { type TabsVariantProps, tabsVariants } from "./variants";
-
-export type { TabsAppearance } from "./variants";
-
-export type TabsProps = Omit<BaseTabs.Root.Props, "className" | "style"> & TabsVariantProps;
-
-/**
- * Root of a tab set (Base UI `Tabs.Root`) — a single element. Groups a `TabsList` of `Tab`s with
- * their `TabsPanel`s and tracks the active tab. The appearance-sharing context (so the list/tabs
- * pick up the set's `appearance`) is the ready-made `components/tabs`.
- */
-export function Tabs({ appearance, ...props }: TabsProps) {
-  return <BaseTabs.Root className={tabsVariants({ appearance })} {...props} />;
-}
diff --git a/packages/propel/src/ui/tabs/variants.ts b/packages/propel/src/ui/tabs/variants.ts
deleted file mode 100644
index 913969ea..00000000
--- a/packages/propel/src/ui/tabs/variants.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// `contained` wraps the tabs in a pill and lifts the active tab onto a raised card; `underline`
-// keeps them flat and slides a dark bar under the active one.
-export type TabsAppearance = NonNullable<VariantProps<typeof tabsVariants>["appearance"]>;
-
-export const tabsVariants = cva("inline-flex max-w-full flex-col items-start gap-3", {
-  variants: {
-    appearance: {
-      contained: "",
-      underline: "",
-    },
-  },
-});
-
-export type TabsVariantProps = StrictVariantProps<typeof tabsVariants>;
-
-export const tabsListVariants = cva(
-  "relative inline-flex max-w-full overscroll-x-contain outline-none",
-  {
-    variants: {
-      appearance: {
-        contained: "items-center gap-px rounded-lg bg-layer-3 p-0.5",
-        underline: "items-start gap-px px-0.5",
-      },
-    },
-  },
-);
-
-export type TabsListVariantProps = StrictVariantProps<typeof tabsListVariants>;
-
-// The horizontal scroll frame around a `TabsList` so a long tab row scrolls.
-export const tabsListScrollAreaVariants = cva("relative max-w-full");
-
-export const tabVariants = cva(
-  // `--node-size` sizes any leading icon slot (the tab owns its node sizing in one place,
-  // like Button does); the slot inherits it.
-  "cursor-pointer font-medium whitespace-nowrap transition-colors outline-none select-none [--node-size:1rem] focus-visible:ring-2 focus-visible:ring-accent-strong disabled:cursor-not-allowed disabled:text-disabled",
-  {
-    variants: {
-      appearance: {
-        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 type TabVariantProps = StrictVariantProps<typeof tabVariants>;
-
-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/text-area.stories.tsx b/packages/propel/src/ui/text-area/text-area.stories.tsx
deleted file mode 100644
index 05fe3b58..00000000
--- a/packages/propel/src/ui/text-area/text-area.stories.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { Field, FieldError, FieldLabel } from "../field/index";
-import { TextArea } from "./index";
-import { TextAreaGroup } from "./text-area-group";
-
-// UI-tier story: composes the atomic text-area parts — the bordered `TextAreaGroup` frame
-// (border/radius/padding/focus + error treatments) wrapping the `TextArea` leaf, so the box
-// holds the chrome and the leaf holds no frame styling.
-const meta = {
-  title: "UI/TextArea",
-  component: TextArea,
-  subcomponents: { TextAreaGroup },
-  decorators: [
-    (Story) => (
-      <div className="w-80">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof TextArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Styled textarea leaf framed by `TextAreaGroup`. Uses the Base UI-backed primitive for Field
- * wiring.
- */
-export const Default: Story = {
-  args: {
-    magnitude: "md",
-    surface: "field",
-    resize: "vertical",
-    "aria-label": "Comment",
-    placeholder: "Leave a comment...",
-    rows: 4,
-  },
-  render: (args) => (
-    <TextAreaGroup>
-      <TextArea {...args} />
-    </TextAreaGroup>
-  ),
-};
-
-export const FieldComposition: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { magnitude: "md", surface: "field", resize: "vertical", rows: 3 },
-  render: (args) => (
-    <Field name="comment">
-      <FieldLabel magnitude="md" inset={false}>
-        Comment
-      </FieldLabel>
-      <TextAreaGroup>
-        <TextArea {...args} placeholder="Leave a comment..." />
-      </TextAreaGroup>
-    </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", resize: "vertical", rows: 3 },
-  render: (args) => (
-    <Field name="comment" invalid>
-      <FieldLabel magnitude="md" inset={false}>
-        Comment
-      </FieldLabel>
-      <TextAreaGroup>
-        <TextArea {...args} defaultValue="No" />
-      </TextAreaGroup>
-      <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
deleted file mode 100644
index 51b528cf..00000000
--- a/packages/propel/src/ui/text-area/text-area.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { BaseTextArea, type BaseTextAreaProps } from "../../base/text-area";
-import {
-  textAreaVariants,
-  type TextAreaMagnitude,
-  type TextAreaResize,
-  type TextAreaSurface,
-} from "./variants";
-
-export type { TextAreaMagnitude, TextAreaResize, 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;
-  /** Controls whether the user can resize the textarea (none, vertical, both). */
-  resize: TextAreaResize;
-};
-
-/** Multi-line native textarea element. Compose it with `Field` for labels and validation. */
-export function TextArea({ magnitude, surface, resize, ...props }: TextAreaProps) {
-  return <BaseTextArea className={textAreaVariants({ magnitude, surface, resize })} {...props} />;
-}
diff --git a/packages/propel/src/ui/text-area/variants.ts b/packages/propel/src/ui/text-area/variants.ts
deleted file mode 100644
index 074c9eff..00000000
--- a/packages/propel/src/ui/text-area/variants.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { fieldControlSurfaceVariants } from "../../internal/field-control-surface";
-
-// The bordered frame around the textarea leaf. Per the Figma "Text area" spec the border
-// style/width, radius, padding, and the focus/error border treatments are "always the same",
-// so they are static chrome. Composes the shared field-box chrome so the input and textarea
-// frames stay in lockstep; danger isn't a prop — the surface recolors its border off the
-// wrapped control's `data-invalid`.
-export const textAreaGroupVariants = cva(
-  cx(
-    fieldControlSurfaceVariants({ focus: "within" }),
-    "flex w-full items-stretch gap-1.5 transition-[color,background-color,border-color,box-shadow]",
-    "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-subtle has-[:disabled]:bg-layer-2 has-[:disabled]:ring-0 has-[:disabled]:hover:border-subtle",
-    "rounded-lg py-2",
-    "hover:border-subtle-1 hover:bg-layer-2-hover",
-    "focus-within:bg-layer-2 focus-within:hover:border-accent-strong focus-within:hover:bg-layer-2",
-  ),
-);
-
-export const textAreaVariants = cva(
-  cx(
-    "scrollbar-sm min-w-0 flex-1 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: "p-3 leading-snug",
-        inline: "leading-tight",
-      },
-      /** Controls whether the user can resize the textarea. */
-      resize: {
-        none: "resize-none",
-        vertical: "resize-y",
-        both: "resize",
-      },
-    },
-    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"]>;
-export type TextAreaResize = NonNullable<TextAreaVariantProps["resize"]>;
diff --git a/packages/propel/src/ui/toast/index.tsx b/packages/propel/src/ui/toast/index.tsx
deleted file mode 100644
index 6094b56b..00000000
--- a/packages/propel/src/ui/toast/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export * from "./toast";
-export * from "./toast-status-icon";
-export * from "./toast-provider";
-export * from "./toast-portal";
-export * from "./toast-viewport";
-export * from "./toast-content";
-export * from "./toast-text-group";
-export * from "./toast-title";
-export * from "./toast-description";
-export * from "./toast-actions";
-export * from "./toast-action-group";
-export * from "./toast-action-button";
-export * from "./toast-action";
-export * from "./toast-close";
-export * from "./toast-close-slot";
-export * from "./manager";
diff --git a/packages/propel/src/ui/toast/manager.ts b/packages/propel/src/ui/toast/manager.ts
deleted file mode 100644
index 6055d4e1..00000000
--- a/packages/propel/src/ui/toast/manager.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-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/toast-action-button.tsx b/packages/propel/src/ui/toast/toast-action-button.tsx
deleted file mode 100644
index 27eec2e5..00000000
--- a/packages/propel/src/ui/toast/toast-action-button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { toastActionVariants } from "./variants";
-
-export type ToastActionButtonProps = Omit<
-  React.ComponentPropsWithoutRef<"button">,
-  "className" | "style"
-> & {
-  /** The button's label (e.g. "Undo"). */
-  children?: React.ReactNode;
-};
-
-/**
- * A plain action button for the inline-start `ToastActionGroup` cluster. Shares the toast
- * action-button styling with `ToastAction`, but unlike `ToastAction` it does not participate in
- * Base UI's toast focus management or dismiss the toast — use it for secondary actions (e.g. Undo)
- * that should not close the toast. Defaults to `type="button"` so it never submits a form.
- */
-export function ToastActionButton({ type = "button", ...props }: ToastActionButtonProps) {
-  return <button type={type} className={toastActionVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/toast-action-group.tsx b/packages/propel/src/ui/toast/toast-action-group.tsx
deleted file mode 100644
index 0b16c824..00000000
--- a/packages/propel/src/ui/toast/toast-action-group.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { toastActionGroupVariants } from "./variants";
-
-export type ToastActionGroupProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The cluster of plain action buttons (e.g. `ToastActionButton`s). */
-  children?: React.ReactNode;
-};
-
-/**
- * The inline-start cluster of plain action buttons inside a `ToastActions` row. Grows to fill the
- * row so a trailing `ToastAction` pins to the inline-end edge.
- */
-export function ToastActionGroup(props: ToastActionGroupProps) {
-  return <div className={toastActionGroupVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/toast-action.tsx b/packages/propel/src/ui/toast/toast-action.tsx
deleted file mode 100644
index 62da61da..00000000
--- a/packages/propel/src/ui/toast/toast-action.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-import { toastActionVariants } from "./variants";
-
-export type ToastActionProps = Omit<BaseToast.Action.Props, "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-slot.tsx b/packages/propel/src/ui/toast/toast-close-slot.tsx
deleted file mode 100644
index 3160788b..00000000
--- a/packages/propel/src/ui/toast/toast-close-slot.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { toastCloseSlotVariants } from "./variants";
-
-export type ToastCloseSlotProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The dismiss `IconButton` (whose render target is a `ToastClose`). */
-  children?: React.ReactNode;
-};
-
-/**
- * The positioned slot that pins the dismiss button to the toast's inline-end corner. Holds only the
- * 4px corner offset against the `relative` toast popup; the button's chrome comes from the composed
- * `IconButton`.
- */
-export function ToastCloseSlot(props: ToastCloseSlotProps) {
-  return <div className={toastCloseSlotVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/toast-close.tsx b/packages/propel/src/ui/toast/toast-close.tsx
deleted file mode 100644
index 63256edb..00000000
--- a/packages/propel/src/ui/toast/toast-close.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-export type ToastCloseProps = Omit<BaseToast.Close.Props, "className" | "style">;
-
-/**
- * A behavior wrapper that dismisses the toast when activated. Use as the render target of an
- * `IconButton`; the positioned `ToastCloseSlot` anchors it in the toast's inline-end corner. Maps
- * 1:1 to `Toast.Close`.
- */
-export function ToastClose(props: ToastCloseProps) {
-  return <BaseToast.Close {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/toast-content.tsx b/packages/propel/src/ui/toast/toast-content.tsx
deleted file mode 100644
index fed0002b..00000000
--- a/packages/propel/src/ui/toast/toast-content.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-import { toastContentVariants } from "./variants";
-
-export type ToastContentProps = Omit<BaseToast.Content.Props, "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
deleted file mode 100644
index c8bc58a7..00000000
--- a/packages/propel/src/ui/toast/toast-description.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-import { toastDescriptionVariants } from "./variants";
-
-export type ToastDescriptionProps = Omit<BaseToast.Description.Props, "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
deleted file mode 100644
index 5b4bd9cc..00000000
--- a/packages/propel/src/ui/toast/toast-portal.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-export type ToastPortalProps = Omit<BaseToast.Portal.Props, "className" | "style">;
-
-/**
- * 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
deleted file mode 100644
index 6cb1e733..00000000
--- a/packages/propel/src/ui/toast/toast-provider.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-import type * as React from "react";
-
-export type ToastProviderProps = BaseToast.Provider.Props & {
-  /** The app subtree that can queue and render toasts. */
-  children?: React.ReactNode;
-};
-
-/**
- * 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
deleted file mode 100644
index 81dd4972..00000000
--- a/packages/propel/src/ui/toast/toast-status-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { type ToastStatusIconVariantProps, toastStatusIconVariants } from "./variants";
-
-export type { ToastTone } from "./variants";
-
-export type ToastStatusIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> &
-  ToastStatusIconVariantProps;
-
-/**
- * The tone-colored status-icon slot at a toast's inline-start. A single styled `<span>` that sizes
- * and colors its bare `<svg>` glyph child (passed as `children`); the tone→glyph mapping is a
- * `components` concern (see `components/toast`).
- */
-export function ToastStatusIcon({ tone, ...props }: ToastStatusIconProps) {
-  return <span aria-hidden className={toastStatusIconVariants({ tone })} {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/toast-text-group.tsx b/packages/propel/src/ui/toast/toast-text-group.tsx
deleted file mode 100644
index adf4713e..00000000
--- a/packages/propel/src/ui/toast/toast-text-group.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { toastTextGroupVariants } from "./variants";
-
-export type ToastTextGroupProps = Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "className" | "style"
-> & {
-  /** The paired `ToastTitle` and `ToastDescription`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The tight vertical pairing of `ToastTitle` and `ToastDescription` at the top of a `ToastContent`.
- * Keeps the title and description close together while sitting in the content column's wider rhythm
- * alongside an optional progress bar and action row.
- */
-export function ToastTextGroup(props: ToastTextGroupProps) {
-  return <div className={toastTextGroupVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/toast-title.tsx b/packages/propel/src/ui/toast/toast-title.tsx
deleted file mode 100644
index 90e05b19..00000000
--- a/packages/propel/src/ui/toast/toast-title.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-import { toastTitleVariants } from "./variants";
-
-export type ToastTitleProps = Omit<BaseToast.Title.Props, "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
deleted file mode 100644
index 2c8281fa..00000000
--- a/packages/propel/src/ui/toast/toast-viewport.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-import { toastViewportVariants } from "./variants";
-
-export type ToastViewportProps = Omit<BaseToast.Viewport.Props, "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
deleted file mode 100644
index 08aeefe0..00000000
--- a/packages/propel/src/ui/toast/toast.stories.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Info, X } from "lucide-react";
-import { expect, within } from "storybook/test";
-
-import { IconButton, IconButtonIcon } from "../icon-button";
-import {
-  Toast,
-  ToastAction,
-  ToastActionButton,
-  ToastActionGroup,
-  ToastActions,
-  ToastClose,
-  ToastCloseSlot,
-  ToastContent,
-  ToastDescription,
-  ToastPortal,
-  ToastProvider,
-  ToastStatusIcon,
-  ToastTextGroup,
-  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}>
-        {/* The ui slot is icon-agnostic — it sizes/colors whatever glyph child it's given. */}
-        <ToastStatusIcon tone={tone}>
-          <Info />
-        </ToastStatusIcon>
-        <ToastContent>
-          <ToastTextGroup>
-            <ToastTitle />
-            <ToastDescription />
-          </ToastTextGroup>
-          <ToastActions>
-            <ToastActionGroup>
-              <ToastActionButton>Undo</ToastActionButton>
-            </ToastActionGroup>
-            <ToastAction>View</ToastAction>
-          </ToastActions>
-        </ToastContent>
-        <ToastCloseSlot>
-          <IconButton
-            prominence="ghost"
-            tone="neutral"
-            magnitude="sm"
-            aria-label="Dismiss"
-            render={<ToastClose />}
-          >
-            <IconButtonIcon>
-              <X />
-            </IconButtonIcon>
-          </IconButton>
-        </ToastCloseSlot>
-      </Toast>
-    );
-  });
-}
-
-const meta = {
-  title: "UI/Toast",
-  component: ToastProvider,
-  subcomponents: {
-    Toast,
-    ToastViewport,
-    ToastContent,
-    ToastTextGroup,
-    ToastTitle,
-    ToastDescription,
-    ToastActions,
-    ToastActionGroup,
-    ToastActionButton,
-    ToastAction,
-    ToastCloseSlot,
-    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>
-  ),
-};
-
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index 10106a61..00000000
--- a/packages/propel/src/ui/toast/toast.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-
-import { toastVariants } from "./variants";
-
-export type ToastProps = Omit<BaseToast.Root.Props, "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={toastVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toast/variants.ts b/packages/propel/src/ui/toast/variants.ts
deleted file mode 100644
index 469d5743..00000000
--- a/packages/propel/src/ui/toast/variants.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { surfaceVariants } from "../../internal/surface";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// 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 toastVariants = 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");
-
-// The tight vertical pairing of the title and description, sitting at the top of the
-// content column. A separate part so `ToastContent` can also hold a progress bar and an
-// action row as siblings with the wider `gap-3` rhythm, while title+description keep a
-// closer `gap-1`.
-export const toastTextGroupVariants = cva("flex flex-col gap-1");
-
-export const toastTitleVariants = cva("text-14 font-medium text-primary");
-
-export const toastDescriptionVariants = cva("text-13 text-tertiary");
-
-// The full-width action row beneath the text/progress (Figma node 1146-61689). Holds the
-// inline-start `ToastActionGroup` cluster and an optional inline-end `ToastAction`.
-export const toastActionsVariants = cva("flex w-full gap-1.5");
-
-// The inline-start cluster of 1–2 plain action buttons. Grows to fill the row so a
-// trailing `ToastAction` pins to the inline-end edge. `-ms-2` pulls each button's
-// transparent `px-2` pill flush with the title text while letting the hover fill bleed
-// toward the inline-start. RTL-safe via logical utilities.
-export const toastActionGroupVariants = cva("-ms-2 flex min-w-0 flex-1 items-center gap-1.5");
-
-// 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",
-  ),
-);
-
-// The positioned slot that pins the dismiss `IconButton` to the toast's inline-end corner. Holds
-// only the 4px corner offset (`absolute inset-e-1 top-1`) against the `relative` toast popup; the
-// button's chrome (size/radius/hover) comes from the composed `IconButton`.
-export const toastCloseSlotVariants = cva("absolute inset-e-1 top-1");
-
-// Status-icon slot: a single styled `<span>` that sizes and tone-colors a bare `<svg>`
-// glyph child (`[&>svg]:size-full` makes the glyph fill the 16px box; `fill="currentColor"`
-// inherits the per-tone color). The slot is the only tone-colored element; surface/border/
-// text stay neutral, matching Figma. `mt-0.5` nudges it 2px down so it aligns with the title
-// baseline when the toast root uses `items-start` — eliminates the need for a wrapper span.
-export const toastStatusIconVariants = cva("mt-0.5 size-4 shrink-0 [&>svg]:size-full", {
-  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 toastStatusIconVariants>["tone"]>;
-export type ToastStatusIconVariantProps = StrictVariantProps<typeof toastStatusIconVariants>;
diff --git a/packages/propel/src/ui/toggle-group/toggle-group.stories.tsx b/packages/propel/src/ui/toggle-group/toggle-group.stories.tsx
deleted file mode 100644
index fc36cbfb..00000000
--- a/packages/propel/src/ui/toggle-group/toggle-group.stories.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
-import { expect, fn } from "storybook/test";
-
-import { Toggle, ToggleIcon } from "../toggle/index";
-import { ToggleGroup } from "./index";
-
-// UI-tier story: the atomic `ToggleGroup` (single/multi-select state + roving focus) composed with
-// atomic `Toggle` items. `ToggleGroup` is a single element; the shared-`magnitude` context is wired
-// here explicitly (the components-tier `ToggleGroup` does this via its provider) so every `Toggle`
-// inherits one size.
-const meta = {
-  title: "UI/ToggleGroup",
-  component: ToggleGroup,
-  subcomponents: { Toggle, ToggleIcon },
-  parameters: {
-    a11y: {
-      // Base UI's ToggleGroup renders `role="group"` with `aria-orientation`, which axe's
-      // aria-allowed-attr flags. This is Base UI's intended roving-focus markup, so suppress it.
-      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: { defaultValue: ["left"], onValueChange: fn() },
-  render: (args) => (
-    <ToggleGroup {...args} aria-label="Text alignment">
-      <Toggle magnitude="md" value="left" aria-label="Align left">
-        <ToggleIcon>
-          <AlignLeft />
-        </ToggleIcon>
-      </Toggle>
-      <Toggle magnitude="md" value="center" aria-label="Align center">
-        <ToggleIcon>
-          <AlignCenter />
-        </ToggleIcon>
-      </Toggle>
-      <Toggle magnitude="md" value="right" aria-label="Align right">
-        <ToggleIcon>
-          <AlignRight />
-        </ToggleIcon>
-      </Toggle>
-    </ToggleGroup>
-  ),
-};
-
-/**
- * Interaction test: selecting another toggle moves the pressed state and fires `onValueChange`.
- * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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: { multiple: true, defaultValue: [] },
-  render: (args) => (
-    <ToggleGroup {...args} aria-label="Text formatting">
-      <Toggle magnitude="md" value="bold" aria-label="Bold">
-        <ToggleIcon>
-          <AlignLeft />
-        </ToggleIcon>
-      </Toggle>
-      <Toggle magnitude="md" value="italic" aria-label="Italic">
-        <ToggleIcon>
-          <AlignCenter />
-        </ToggleIcon>
-      </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
deleted file mode 100644
index cddc6d7d..00000000
--- a/packages/propel/src/ui/toggle-group/toggle-group.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
-
-import { toggleGroupVariants } from "./variants";
-
-export type ToggleGroupProps<Value extends string = string> = Omit<
-  BaseToggleGroup.Props<Value>,
-  "className" | "style"
->;
-
-/**
- * Groups related `Toggle`s, managing single- or multi-select state and roving focus. Pass `value` +
- * `onValueChange` (array; `multiple` to allow more than one pressed). Maps 1:1 to Base UI's
- * `ToggleGroup`. The shared-`magnitude` behavior is the ready-made `components/toggle-group`, which
- * wraps this in the `ToggleGroupContext` provider.
- */
-export function ToggleGroup<Value extends string = string>(props: ToggleGroupProps<Value>) {
-  return <BaseToggleGroup className={toggleGroupVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toggle/index.tsx b/packages/propel/src/ui/toggle/index.tsx
deleted file mode 100644
index f7e92a57..00000000
--- a/packages/propel/src/ui/toggle/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./toggle";
-export * from "./toggle-icon";
-export { type ToggleMagnitude } from "./variants";
diff --git a/packages/propel/src/ui/toggle/toggle-icon.tsx b/packages/propel/src/ui/toggle/toggle-icon.tsx
deleted file mode 100644
index 93be7bfe..00000000
--- a/packages/propel/src/ui/toggle/toggle-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { toggleIconVariants } from "./variants";
-
-export type ToggleIconProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * The icon slot inside a `Toggle`. Sizes its single child to the toggle's `--node-size` (set by the
- * toggle's `magnitude`), so callers pass a bare icon with no sizing class. Decorative (the `Toggle`
- * carries the accessible name via `aria-label`), so it is `aria-hidden`.
- */
-export function ToggleIcon({ render, ...props }: ToggleIconProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: toggleIconVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/ui/toggle/toggle.stories.tsx b/packages/propel/src/ui/toggle/toggle.stories.tsx
deleted file mode 100644
index 8e9067af..00000000
--- a/packages/propel/src/ui/toggle/toggle.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Bold } from "lucide-react";
-import { expect } from "storybook/test";
-
-import { Toggle, ToggleIcon, 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]` — with its `ToggleIcon` glyph slot
-// (sizes a bare icon to the toggle's `--node-size`). The components-tier story re-exports
-// the same parts (no extra composition). `magnitude` is the only visual axis.
-const meta = {
-  title: "UI/Toggle",
-  component: Toggle,
-  subcomponents: { ToggleIcon },
-  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}>
-      <ToggleIcon>
-        <Bold />
-      </ToggleIcon>
-    </Toggle>
-  ),
-};
-
-/**
- * Interaction test: clicking the toggle flips its pressed state on and off. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
- */
-export const DefaultInteraction: Story = {
-  ...Default,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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}`}>
-          <ToggleIcon>
-            <Bold />
-          </ToggleIcon>
-        </Toggle>
-      ))}
-    </div>
-  ),
-};
diff --git a/packages/propel/src/ui/toggle/toggle.tsx b/packages/propel/src/ui/toggle/toggle.tsx
deleted file mode 100644
index e0bf0d12..00000000
--- a/packages/propel/src/ui/toggle/toggle.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Toggle as BaseToggle } from "@base-ui/react/toggle";
-import type { Toggle as BaseToggleTypes } from "@base-ui/react/toggle";
-
-import { type ToggleVariantProps, toggleVariants } from "./variants";
-
-export type ToggleProps<Value extends string = string> = Omit<
-  BaseToggleTypes.Props<Value>,
-  "className" | "style"
-> &
-  ToggleVariantProps;
-
-/**
- * A two-state button (pressed / not pressed) — typically wrapping an icon. Built on Base UI's
- * `Toggle`; pressed/disabled are control state. Only `magnitude` is a visual axis. Maps 1:1 to
- * `Toggle`.
- */
-export function Toggle<Value extends string = string>({ magnitude, ...props }: ToggleProps<Value>) {
-  return <BaseToggle className={toggleVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/src/ui/toggle/variants.ts b/packages/propel/src/ui/toggle/variants.ts
deleted file mode 100644
index dafac755..00000000
--- a/packages/propel/src/ui/toggle/variants.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// 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 the `ToggleIcon` slot sizes
-// its child to match.
-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"]>;
-
-export type ToggleVariantProps = StrictVariantProps<typeof toggleVariants>;
-
-// The icon slot inside a `Toggle`. Sizes its single child to the toggle's `--node-size`
-// (via the shared node-slot class) so callers pass a bare icon — no sizing class at the
-// call site. The toggle's `magnitude` sets `--node-size`, which this inherits.
-export const toggleIconVariants = cva(nodeSlotClass);
diff --git a/packages/propel/src/ui/toolbar/index.tsx b/packages/propel/src/ui/toolbar/index.tsx
deleted file mode 100644
index 7dbf9a29..00000000
--- a/packages/propel/src/ui/toolbar/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from "./toolbar";
-export * from "./toolbar-button";
-export * from "./toolbar-menu-trigger-button";
-export * from "./toolbar-menu-trigger-indicator";
-export * from "./toolbar-menu-trigger-label";
-export * from "./toolbar-group";
-export * from "./toolbar-item-icon";
-export * from "./toolbar-separator";
-export * from "./toolbar-toggle-group";
-export { type ToolbarDensity, type ToolbarElevation } from "./variants";
diff --git a/packages/propel/src/ui/toolbar/toolbar-button.tsx b/packages/propel/src/ui/toolbar/toolbar-button.tsx
deleted file mode 100644
index c68d12aa..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-button.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-
-import { type ToolbarItemVariantProps, toolbarItemVariants } from "./variants";
-
-export type ToolbarButtonProps = Omit<BaseToolbar.Button.Props, "className" | "style"> &
-  ToolbarItemVariantProps & {
-    /** Accessible name for the icon button. */
-    "aria-label": string;
-  };
-
-/** A plain action button in the toolbar. */
-export function ToolbarButton({ density, ...props }: ToolbarButtonProps) {
-  return <BaseToolbar.Button className={toolbarItemVariants({ density })} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-group.tsx b/packages/propel/src/ui/toolbar/toolbar-group.tsx
deleted file mode 100644
index 3c1e9b2e..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-group.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-
-import { toolbarGroupVariants } from "./variants";
-
-export type ToolbarGroupProps = Omit<BaseToolbar.Group.Props, "className" | "style">;
-
-/** Groups related controls with a small gap between them. */
-export function ToolbarGroup(props: ToolbarGroupProps) {
-  return <BaseToolbar.Group className={toolbarGroupVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-item-icon.tsx b/packages/propel/src/ui/toolbar/toolbar-item-icon.tsx
deleted file mode 100644
index 7979def7..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-item-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { toolbarItemIconVariants } from "./variants";
-
-export type ToolbarItemIconProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The bare icon to render, sized to the control's `--node-size`. */
-  children?: React.ReactNode;
-};
-
-/**
- * The glyph inside a `ToolbarButton` or `ToolbarToggle`. Sizes its single child to the control's
- * `--node-size` (driven by the toolbar's density), so callers pass a bare icon. Decorative (the
- * control carries the accessible name via `aria-label`), so it is `aria-hidden`.
- */
-export function ToolbarItemIcon(props: ToolbarItemIconProps) {
-  return <span aria-hidden className={toolbarItemIconVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-menu-trigger-button.tsx b/packages/propel/src/ui/toolbar/toolbar-menu-trigger-button.tsx
deleted file mode 100644
index fb8c2581..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-menu-trigger-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-
-import {
-  type ToolbarMenuTriggerButtonVariantProps,
-  toolbarMenuTriggerButtonVariants,
-} from "./variants";
-
-export type ToolbarMenuTriggerButtonProps = Omit<BaseToolbar.Button.Props, "className" | "style"> &
-  ToolbarMenuTriggerButtonVariantProps;
-
-/** The styled chrome for a toolbar menu trigger: a text label slot with density-aware sizing. */
-export function ToolbarMenuTriggerButton({ density, ...props }: ToolbarMenuTriggerButtonProps) {
-  return (
-    <BaseToolbar.Button className={toolbarMenuTriggerButtonVariants({ density })} {...props} />
-  );
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-menu-trigger-indicator.tsx b/packages/propel/src/ui/toolbar/toolbar-menu-trigger-indicator.tsx
deleted file mode 100644
index bc0447a6..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-menu-trigger-indicator.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type * as React from "react";
-
-import { toolbarMenuTriggerIndicatorVariants } from "./variants";
-
-export type ToolbarMenuTriggerIndicatorProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /**
-   * The disclosure caret to render (e.g. a Lucide `ChevronDown`), sized to the trigger's
-   * `--node-size`.
-   */
-  children?: React.ReactNode;
-};
-
-/**
- * The disclosure caret slot at the inline-end of a toolbar menu trigger. Renders whatever svg you
- * pass (sized to the trigger's `--node-size`) and tints it. Decorative (the trigger button carries
- * the a11y state), so it is `aria-hidden`.
- */
-export function ToolbarMenuTriggerIndicator(props: ToolbarMenuTriggerIndicatorProps) {
-  return <span aria-hidden className={toolbarMenuTriggerIndicatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-menu-trigger-label.tsx b/packages/propel/src/ui/toolbar/toolbar-menu-trigger-label.tsx
deleted file mode 100644
index 34b651e9..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-menu-trigger-label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type * as React from "react";
-
-import { toolbarMenuTriggerLabelVariants } from "./variants";
-
-export type ToolbarMenuTriggerLabelProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The trigger's label text (e.g. "Text", "Aa"). */
-  children?: React.ReactNode;
-};
-
-/**
- * The text label of a toolbar menu trigger (e.g. "Text", "Aa"). Its own part so the trigger button
- * holds no raw typography — the button is the control, this is its label region.
- */
-export function ToolbarMenuTriggerLabel(props: ToolbarMenuTriggerLabelProps) {
-  return <span className={toolbarMenuTriggerLabelVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-separator.tsx b/packages/propel/src/ui/toolbar/toolbar-separator.tsx
deleted file mode 100644
index b7b38aee..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-separator.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-
-import { toolbarSeparatorVariants } from "./variants";
-
-export type ToolbarSeparatorProps = Omit<BaseToolbar.Separator.Props, "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={toolbarSeparatorVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar-toggle-group.tsx b/packages/propel/src/ui/toolbar/toolbar-toggle-group.tsx
deleted file mode 100644
index ddd5e839..00000000
--- a/packages/propel/src/ui/toolbar/toolbar-toggle-group.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { toolbarToggleGroupVariants } from "./variants";
-
-export type ToolbarToggleGroupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * A set of `ToolbarToggle`s that share state. Renders a `<div>` by default and bakes in only the
- * cluster layout, keeping `ui/toolbar` independent of the ToggleGroup primitive: a composition
- * grafts the shared-state behavior on by rendering it as a toggle group — `render={<ToggleGroup
- * />}` (the styled div stays the outer element).
- */
-export function ToolbarToggleGroup({ render, ...props }: ToolbarToggleGroupProps) {
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps({ className: toolbarToggleGroupVariants() }, props),
-  });
-}
diff --git a/packages/propel/src/ui/toolbar/toolbar.stories.tsx b/packages/propel/src/ui/toolbar/toolbar.stories.tsx
deleted file mode 100644
index 5cbfd568..00000000
--- a/packages/propel/src/ui/toolbar/toolbar.stories.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { Toggle } from "@base-ui/react/toggle";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  ChevronDown,
-  Image,
-  Italic,
-  Link,
-  Strikethrough,
-  Underline,
-} from "lucide-react";
-import { expect } from "storybook/test";
-
-import {
-  Toolbar,
-  ToolbarButton,
-  ToolbarMenuTriggerButton,
-  ToolbarMenuTriggerIndicator,
-  ToolbarMenuTriggerLabel,
-  ToolbarGroup,
-  ToolbarItemIcon,
-  ToolbarSeparator,
-  ToolbarToggleGroup,
-} from "./index";
-
-// UI-tier story: composes the ATOMIC toolbar parts (each a single, prop-driven element). `Toolbar`
-// and each control take `density` explicitly — the ready-made `components/toolbar` sets it once and
-// shares it via context (so you don't repeat it). Every control's icon is its own `ToolbarItemIcon`.
-const meta = {
-  title: "UI/Toolbar",
-  component: Toolbar,
-  subcomponents: {
-    ToolbarGroup,
-    ToolbarButton,
-    ToolbarItemIcon,
-    ToolbarToggleGroup,
-    ToolbarSeparator,
-    ToolbarMenuTriggerButton,
-    ToolbarMenuTriggerLabel,
-    ToolbarMenuTriggerIndicator,
-  },
-  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 menu-trigger surface (label + caret), 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}>
-      <ToolbarMenuTriggerButton density={args.density} aria-label="Text style">
-        <ToolbarMenuTriggerLabel>Text</ToolbarMenuTriggerLabel>
-        <ToolbarMenuTriggerIndicator>
-          <ChevronDown />
-        </ToolbarMenuTriggerIndicator>
-      </ToolbarMenuTriggerButton>
-      <ToolbarSeparator />
-      <ToolbarGroup aria-label="Text formatting">
-        <ToolbarButton density={args.density} aria-label="Bold" render={<Toggle />}>
-          <ToolbarItemIcon>
-            <Bold />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-        <ToolbarButton density={args.density} aria-label="Italic" render={<Toggle />}>
-          <ToolbarItemIcon>
-            <Italic />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-        <ToolbarButton density={args.density} aria-label="Underline" render={<Toggle />}>
-          <ToolbarItemIcon>
-            <Underline />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-        <ToolbarButton density={args.density} aria-label="Strikethrough" render={<Toggle />}>
-          <ToolbarItemIcon>
-            <Strikethrough />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-      </ToolbarGroup>
-      <ToolbarSeparator />
-      <ToolbarToggleGroup
-        render={<ToggleGroup defaultValue={["left"]} aria-label="Text alignment" />}
-      >
-        <ToolbarButton
-          density={args.density}
-          aria-label="Align left"
-          render={<Toggle value="left" />}
-        >
-          <ToolbarItemIcon>
-            <AlignLeft />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-        <ToolbarButton
-          density={args.density}
-          aria-label="Align center"
-          render={<Toggle value="center" />}
-        >
-          <ToolbarItemIcon>
-            <AlignCenter />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-        <ToolbarButton
-          density={args.density}
-          aria-label="Align right"
-          render={<Toggle value="right" />}
-        >
-          <ToolbarItemIcon>
-            <AlignRight />
-          </ToolbarItemIcon>
-        </ToolbarButton>
-      </ToolbarToggleGroup>
-      <ToolbarSeparator />
-      <ToolbarButton density={args.density} aria-label="Insert link">
-        <ToolbarItemIcon>
-          <Link />
-        </ToolbarItemIcon>
-      </ToolbarButton>
-      <ToolbarButton density={args.density} aria-label="Insert image">
-        <ToolbarItemIcon>
-          <Image />
-        </ToolbarItemIcon>
-      </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 key={elevation} {...args} elevation={elevation}>
-          <ToolbarButton density={args.density} aria-label="Bold" render={<Toggle />}>
-            <ToolbarItemIcon>
-              <Bold />
-            </ToolbarItemIcon>
-          </ToolbarButton>
-          <ToolbarButton density={args.density} aria-label="Italic" render={<Toggle />}>
-            <ToolbarItemIcon>
-              <Italic />
-            </ToolbarItemIcon>
-          </ToolbarButton>
-          <ToolbarSeparator />
-          <ToolbarButton density={args.density} aria-label="Insert link">
-            <ToolbarItemIcon>
-              <Link />
-            </ToolbarItemIcon>
-          </ToolbarButton>
-        </Toolbar>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * The `density` axis: `compact` packs the controls to 24px hit targets, `comfortable` gives them
- * 28px.
- */
-export const Densities: Story = {
-  argTypes: { density: { control: false } },
-  render: (args) => (
-    <div className="flex flex-col gap-6">
-      {(["compact", "comfortable"] as const).map((density) => (
-        <Toolbar key={density} {...args} density={density}>
-          <ToolbarButton density={density} aria-label="Bold" render={<Toggle />}>
-            <ToolbarItemIcon>
-              <Bold />
-            </ToolbarItemIcon>
-          </ToolbarButton>
-          <ToolbarButton density={density} aria-label="Italic" render={<Toggle />}>
-            <ToolbarItemIcon>
-              <Italic />
-            </ToolbarItemIcon>
-          </ToolbarButton>
-          <ToolbarSeparator />
-          <ToolbarButton density={density} aria-label="Insert link">
-            <ToolbarItemIcon>
-              <Link />
-            </ToolbarItemIcon>
-          </ToolbarButton>
-        </Toolbar>
-      ))}
-    </div>
-  ),
-};
diff --git a/packages/propel/src/ui/toolbar/toolbar.tsx b/packages/propel/src/ui/toolbar/toolbar.tsx
deleted file mode 100644
index adc994dd..00000000
--- a/packages/propel/src/ui/toolbar/toolbar.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-
-import { type ToolbarVariantProps, toolbarVariants } from "./variants";
-
-export type { ToolbarDensity, ToolbarElevation } from "./variants";
-
-export type ToolbarProps = Omit<BaseToolbar.Root.Props, "className" | "style"> &
-  ToolbarVariantProps;
-
-/**
- * A row of controls built on Base UI's `Toolbar` — a single element. The density-sharing behavior
- * (so the controls inside pick up the toolbar's `density`) is the ready-made `components/toolbar`,
- * which wraps this in the `ToolbarDensityContext` provider.
- */
-export function Toolbar({ elevation, density, ...props }: ToolbarProps) {
-  return <BaseToolbar.Root className={toolbarVariants({ density, elevation })} {...props} />;
-}
diff --git a/packages/propel/src/ui/toolbar/variants.ts b/packages/propel/src/ui/toolbar/variants.ts
deleted file mode 100644
index 65e3edf9..00000000
--- a/packages/propel/src/ui/toolbar/variants.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-
-import { nodeSlotClass } from "../../internal/node-slot";
-import { surfaceVariants } from "../../internal/surface";
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-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 toolbarGroupVariants = cva("flex items-center gap-0.5");
-
-export const toolbarSeparatorVariants = cva("mx-1 h-5 w-0 shrink-0 border-s-sm border-subtle-1");
-
-export const toolbarToggleGroupVariants = cva("flex items-center gap-0.5");
-
-// The square hit target for an icon control (button or toggle). Holds only the box,
-// chrome, and the `--node-size` the child icon scales to via `ToolbarItemIcon` — the
-// glyph itself is a separate node-slot part, never sized by a descendant selector here.
-export const toolbarItemVariants = 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",
-  ),
-  {
-    variants: {
-      density: {
-        compact: "size-6 [--node-size:0.875rem]", // 24px box, 14px glyph
-        comfortable: "size-7 [--node-size:1rem]", // 28px box, 16px glyph
-      },
-    },
-  },
-);
-
-// The decorative glyph inside an icon control. Sizes its single child to the item's
-// `--node-size` (via the shared node-slot class) and tints it. A slot — bakes no size
-// or className onto the child.
-export const toolbarItemIconVariants = cva(cx(nodeSlotClass, "text-current"));
-
-// The styled chrome for a toolbar menu trigger: a horizontal control that pairs a
-// text label with a disclosure indicator. The label's typography lives on the label
-// part, not here.
-export const toolbarMenuTriggerButtonVariants = cva(
-  cx(
-    "inline-flex shrink-0 items-center gap-1 rounded-md px-2",
-    "bg-layer-transparent 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 [--node-size:0.875rem]", // 24px tall, 14px caret
-        comfortable: "h-7 [--node-size:1rem]", // 28px tall, 16px caret
-      },
-    },
-  },
-);
-
-// The text label region of a menu trigger (e.g. "Text", "Aa"). Its own part so the
-// trigger button holds no raw typography.
-export const toolbarMenuTriggerLabelVariants = cva("text-13");
-
-// The disclosure caret at the trigger's inline-end. Sizes its single child to the
-// trigger's `--node-size` and tints it; a slot, like `ToolbarItemIcon`.
-export const toolbarMenuTriggerIndicatorVariants = cva(cx(nodeSlotClass, "text-icon-secondary"));
-
-/** Whether the toolbar draws its own surface (`raised`) or sits flush (`flat`). */
-export type ToolbarElevation = NonNullable<VariantProps<typeof toolbarVariants>["elevation"]>;
-
-/** How tightly the controls pack: `compact` (24px) or `comfortable` (28px). */
-export type ToolbarDensity = NonNullable<VariantProps<typeof toolbarVariants>["density"]>;
-
-export type ToolbarVariantProps = StrictVariantProps<typeof toolbarVariants>;
-
-export type ToolbarItemVariantProps = StrictVariantProps<typeof toolbarItemVariants>;
-
-export type ToolbarMenuTriggerButtonVariantProps = StrictVariantProps<
-  typeof toolbarMenuTriggerButtonVariants
->;
diff --git a/packages/propel/src/ui/tooltip/index.tsx b/packages/propel/src/ui/tooltip/index.tsx
deleted file mode 100644
index 6b1962c7..00000000
--- a/packages/propel/src/ui/tooltip/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./tooltip";
-export * from "./tooltip-arrow";
-export * from "./tooltip-popup";
-export * from "./tooltip-portal";
-export * from "./tooltip-positioner";
-export * from "./tooltip-provider";
-export * from "./tooltip-shortcut";
-export * from "./tooltip-trigger";
-export * from "./tooltip-viewport";
diff --git a/packages/propel/src/ui/tooltip/tooltip-arrow.tsx b/packages/propel/src/ui/tooltip/tooltip-arrow.tsx
deleted file mode 100644
index ef38bc44..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-arrow.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-import { tooltipArrowVariants } from "./variants";
-
-/** Props for {@link TooltipArrow}; 1:1 with Base UI `Tooltip.Arrow`. */
-export type TooltipArrowProps = Omit<BaseTooltip.Arrow.Props, "className" | "style">;
-
-/** 1:1 wrapper around Base UI `Tooltip.Arrow`. Renders a rotated square clipped per `data-side`. */
-export function TooltipArrow(props: TooltipArrowProps) {
-  return <BaseTooltip.Arrow className={tooltipArrowVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/tooltip/tooltip-popup.tsx b/packages/propel/src/ui/tooltip/tooltip-popup.tsx
deleted file mode 100644
index 18f11a56..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-popup.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-import { tooltipPopupVariants } from "./variants";
-
-/** Props for {@link TooltipPopup}; 1:1 with Base UI `Tooltip.Popup`. */
-export type TooltipPopupProps = Omit<BaseTooltip.Popup.Props, "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
deleted file mode 100644
index 79c084c6..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-portal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-export type TooltipPortalProps = Omit<BaseTooltip.Portal.Props, "className" | "style">;
-
-/** 1:1 wrapper around Base UI `Tooltip.Portal`. */
-export function TooltipPortal(props: TooltipPortalProps) {
-  return <BaseTooltip.Portal {...props} />;
-}
diff --git a/packages/propel/src/ui/tooltip/tooltip-positioner.tsx b/packages/propel/src/ui/tooltip/tooltip-positioner.tsx
deleted file mode 100644
index 09d4ab49..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-positioner.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-import { tooltipPositionerVariants } from "./variants";
-
-/** Props for {@link TooltipPositioner}; 1:1 with Base UI `Tooltip.Positioner`. */
-export type TooltipPositionerProps = Omit<BaseTooltip.Positioner.Props, "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-shortcut.tsx b/packages/propel/src/ui/tooltip/tooltip-shortcut.tsx
deleted file mode 100644
index 8cc6b734..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-shortcut.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { tooltipShortcutVariants } from "./variants";
-
-/** Props for {@link TooltipShortcut}. */
-export type TooltipShortcutProps = Omit<
-  React.ComponentPropsWithoutRef<"span">,
-  "className" | "style"
-> & {
-  /** The keyboard-shortcut hint text (e.g. "⌘K"). */
-  children?: React.ReactNode;
-};
-
-/**
- * A dimmed caption-scale label for a keyboard-shortcut hint shown to the inline-end of the tooltip
- * content — the Figma "Cmd + K" slot. Omit it for a plain tooltip.
- */
-export function TooltipShortcut(props: TooltipShortcutProps) {
-  return <span className={tooltipShortcutVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/tooltip/tooltip-trigger.tsx b/packages/propel/src/ui/tooltip/tooltip-trigger.tsx
deleted file mode 100644
index 914956b8..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-trigger.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-/** Props for {@link TooltipTrigger}; 1:1 with Base UI `Tooltip.Trigger`. */
-export type TooltipTriggerProps = Omit<BaseTooltip.Trigger.Props, "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
deleted file mode 100644
index 533b1d92..00000000
--- a/packages/propel/src/ui/tooltip/tooltip-viewport.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-import { tooltipViewportVariants } from "./variants";
-
-/** Props for {@link TooltipViewport}; 1:1 with Base UI `Tooltip.Viewport`. */
-export type TooltipViewportProps = Omit<BaseTooltip.Viewport.Props, "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
deleted file mode 100644
index 8e9ce905..00000000
--- a/packages/propel/src/ui/tooltip/tooltip.stories.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipPopup,
-  TooltipPortal,
-  TooltipPositioner,
-  TooltipProvider,
-  TooltipShortcut,
-  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,
-    TooltipShortcut,
-  },
-} 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 that holds the
- * label, an optional `TooltipShortcut` hint, and the 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
-            <TooltipShortcut>⌘ S</TooltipShortcut>
-            <TooltipArrow />
-          </TooltipPopup>
-        </TooltipPositioner>
-      </TooltipPortal>
-    </Tooltip>
-  ),
-};
-
-export const AnatomyInteraction: Story = {
-  ...Anatomy,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvas }) => {
-    await userEvent.tab();
-    await expect(canvas.getByRole("button", { name: "Hover or focus me" })).toHaveFocus();
-    const tooltip = await within(document.body).findByRole("tooltip");
-    await expect(tooltip).toHaveTextContent("Saves automatically");
-    await expect(tooltip).toHaveTextContent("⌘ S");
-  },
-};
-
-/**
- * `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>
-  ),
-};
-
-export const SharedProviderInteraction: Story = {
-  ...SharedProvider,
-  tags: ["!dev", "!autodocs", "!manifest"],
-  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
deleted file mode 100644
index c71e9d5b..00000000
--- a/packages/propel/src/ui/tooltip/tooltip.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-/** Props for {@link Tooltip} (the Base UI `Tooltip.Root`). */
-export type TooltipProps = Omit<BaseTooltip.Root.Props, "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
deleted file mode 100644
index 78c7b9a8..00000000
--- a/packages/propel/src/ui/tooltip/variants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { cva, cx } 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");
-export const tooltipArrowVariants = cva(
-  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%)]",
-  ),
-);
-// Keyboard-shortcut hint rendered to the inline-end of the tooltip label (Figma "Cmd + K"):
-// one notch smaller than the label and tinted `text/tertiary` so it reads as a dimmer,
-// secondary cue while still meeting text-contrast on the popup surface.
-export const tooltipShortcutVariants = cva("text-caption-sm-regular text-tertiary");
diff --git a/packages/propel/src/ui/workspace-avatar/variants.ts b/packages/propel/src/ui/workspace-avatar/variants.ts
deleted file mode 100644
index 93a6184f..00000000
--- a/packages/propel/src/ui/workspace-avatar/variants.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { type StrictVariantProps } from "../../internal/variant-props";
-
-// 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.
-// `bg-layer-1` is the avatar's own neutral backdrop (shows behind a transparent fallback).
-// The rounded-square shape (never circular) is always the same: it reads as a
-// workspace, not a person.
-export const workspaceAvatarVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center overflow-clip border-subtle bg-layer-1",
-  {
-    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",
-      },
-    },
-  },
-);
-
-// The workspace logo image. Fills and crops to the square frame so non-square
-// logos never stretch.
-export const workspaceAvatarImageVariants = cva("size-full object-cover");
-
-// The fallback's `tone` colors the initials surface. `none` (the default) is the
-// anonymous/icon state — neutral layer + muted text. The named tones are the Figma
-// avatar label colors (initials on a solid tone, white text). The same palette as
-// `avatarFallbackVariants` in `ui/avatar`, specialised for workspace avatars.
-export const workspaceAvatarFallbackVariants = cva(
-  "flex size-full items-center justify-center leading-none",
-  {
-    variants: {
-      tone: {
-        none: "bg-layer-1 text-primary",
-        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",
-      },
-    },
-  },
-);
-
-export type WorkspaceAvatarMagnitude = NonNullable<
-  VariantProps<typeof workspaceAvatarVariants>["magnitude"]
->;
-
-export type WorkspaceAvatarVariantProps = StrictVariantProps<typeof workspaceAvatarVariants>;
-
-export type WorkspaceAvatarFallbackVariantProps = StrictVariantProps<
-  typeof workspaceAvatarFallbackVariants
->;
diff --git a/packages/propel/src/ui/workspace-avatar/workspace-avatar-fallback.tsx b/packages/propel/src/ui/workspace-avatar/workspace-avatar-fallback.tsx
deleted file mode 100644
index 8fdad699..00000000
--- a/packages/propel/src/ui/workspace-avatar/workspace-avatar-fallback.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-
-import {
-  type WorkspaceAvatarFallbackVariantProps,
-  workspaceAvatarFallbackVariants,
-} from "./variants";
-
-/** Props for {@link WorkspaceAvatarFallback}; 1:1 with Base UI `Avatar.Fallback`, plus a `tone`. */
-export type WorkspaceAvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, "className" | "style"> &
-  WorkspaceAvatarFallbackVariantProps;
-
-/** 1:1 wrapper around Base UI `Avatar.Fallback` — the workspace initials surface. */
-export function WorkspaceAvatarFallback({ tone, ...props }: WorkspaceAvatarFallbackProps) {
-  return <BaseAvatar.Fallback className={workspaceAvatarFallbackVariants({ tone })} {...props} />;
-}
diff --git a/packages/propel/src/ui/workspace-avatar/workspace-avatar-image.tsx b/packages/propel/src/ui/workspace-avatar/workspace-avatar-image.tsx
deleted file mode 100644
index 6f1563b2..00000000
--- a/packages/propel/src/ui/workspace-avatar/workspace-avatar-image.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-
-import { workspaceAvatarImageVariants } from "./variants";
-
-/** Props for {@link WorkspaceAvatarImage}; 1:1 with Base UI `Avatar.Image`. */
-export type WorkspaceAvatarImageProps = Omit<BaseAvatar.Image.Props, "className" | "style">;
-
-/** 1:1 wrapper around Base UI `Avatar.Image` — the workspace logo, cropped to the square frame. */
-export function WorkspaceAvatarImage(props: WorkspaceAvatarImageProps) {
-  return <BaseAvatar.Image className={workspaceAvatarImageVariants()} {...props} />;
-}
diff --git a/packages/propel/src/ui/workspace-avatar/workspace-avatar.stories.tsx b/packages/propel/src/ui/workspace-avatar/workspace-avatar.stories.tsx
deleted file mode 100644
index 2cc9c427..00000000
--- a/packages/propel/src/ui/workspace-avatar/workspace-avatar.stories.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect } from "storybook/test";
-
-import { AVATAR_TONES } from "../avatar/index";
-import {
-  WorkspaceAvatar,
-  WorkspaceAvatarFallback,
-  WorkspaceAvatarImage,
-  type WorkspaceAvatarMagnitude,
-} from "./index";
-
-const MAGNITUDES: WorkspaceAvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
-
-// UI-tier story: composes the ATOMIC workspace-avatar parts — `WorkspaceAvatar` (root)
-// holding a `WorkspaceAvatarImage` and/or `WorkspaceAvatarFallback`. The components-tier
-// story uses the ready-made avatar (`src` → initials), which assembles these parts.
-const meta = {
-  title: "UI/WorkspaceAvatar",
-  component: WorkspaceAvatar,
-  // `magnitude` is required; the iterating stories override it per element.
-  args: { magnitude: "md" },
-  subcomponents: { WorkspaceAvatarImage, WorkspaceAvatarFallback },
-} satisfies Meta<typeof WorkspaceAvatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Root holding a logo, with initials as the fallback while the logo loads/fails. */
-export const Default: Story = {
-  render: (args) => (
-    <WorkspaceAvatar {...args} role="img" aria-label="Plane workspace">
-      <WorkspaceAvatarImage src="https://avatars.githubusercontent.com/u/73642778?s=128" alt="" />
-      <WorkspaceAvatarFallback tone="orange">PV</WorkspaceAvatarFallback>
-    </WorkspaceAvatar>
-  ),
-};
-
-/** Every workspace-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) => (
-        <WorkspaceAvatar key={magnitude} magnitude={magnitude} role="img" aria-label={magnitude}>
-          <WorkspaceAvatarFallback tone="indigo">PV</WorkspaceAvatarFallback>
-        </WorkspaceAvatar>
-      ))}
-    </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) => (
-        <WorkspaceAvatar key={tone} magnitude="lg" role="img" aria-label={tone}>
-          <WorkspaceAvatarFallback tone={tone}>{tone[0]?.toUpperCase()}</WorkspaceAvatarFallback>
-        </WorkspaceAvatar>
-      ))}
-    </div>
-  ),
-};
-
-/** The two states side by side: logo and the initial fallback. */
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-3">
-      <WorkspaceAvatar magnitude="lg" role="img" aria-label="Logo">
-        <WorkspaceAvatarImage src="https://avatars.githubusercontent.com/u/73642778?s=128" alt="" />
-        <WorkspaceAvatarFallback tone="orange">PV</WorkspaceAvatarFallback>
-      </WorkspaceAvatar>
-      <WorkspaceAvatar magnitude="lg" role="img" aria-label="Initials">
-        <WorkspaceAvatarFallback tone="emerald">PV</WorkspaceAvatarFallback>
-      </WorkspaceAvatar>
-    </div>
-  ),
-};
-
-/**
- * The single project-wide CSS check: an `md` workspace 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: () => (
-    <WorkspaceAvatar magnitude="md" role="img" aria-label="Plane workspace">
-      <WorkspaceAvatarFallback tone="indigo">PV</WorkspaceAvatarFallback>
-    </WorkspaceAvatar>
-  ),
-  play: async ({ canvas }) => {
-    await expect(canvas.getByRole("img", { name: "Plane workspace" })).toHaveStyle({
-      width: "28px",
-    });
-    const initials = canvas.getByText("PV");
-    await expect(getComputedStyle(initials).backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
-  },
-};
diff --git a/packages/propel/src/ui/workspace-avatar/workspace-avatar.tsx b/packages/propel/src/ui/workspace-avatar/workspace-avatar.tsx
deleted file mode 100644
index d31b4613..00000000
--- a/packages/propel/src/ui/workspace-avatar/workspace-avatar.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-
-import { type WorkspaceAvatarVariantProps, workspaceAvatarVariants } from "./variants";
-
-export type { WorkspaceAvatarMagnitude } from "./variants";
-
-/** Props for {@link WorkspaceAvatar} (the Base UI `Avatar.Root`), plus a `magnitude`. */
-export type WorkspaceAvatarProps = Omit<BaseAvatar.Root.Props, "className" | "style"> &
-  WorkspaceAvatarVariantProps;
-
-/**
- * The styled `Avatar.Root` for a workspace — a single element that holds a `WorkspaceAvatarImage`
- * and/or `WorkspaceAvatarFallback`. Maps 1:1 to Base UI's `Avatar.Root`. The rounded-square shape
- * distinguishes a workspace from a (circular) person avatar. For the ready-made image+initials
- * avatar, use the `WorkspaceAvatar` from `@plane/propel/components/workspace-avatar`.
- */
-export function WorkspaceAvatar({ magnitude, ...props }: WorkspaceAvatarProps) {
-  return <BaseAvatar.Root className={workspaceAvatarVariants({ magnitude })} {...props} />;
-}
diff --git a/packages/propel/vite.config.ts b/packages/propel/vite.config.ts
index 0cbf9ce0..129b1e0c 100644
--- a/packages/propel/vite.config.ts
+++ b/packages/propel/vite.config.ts
@@ -2,9 +2,9 @@
 import { existsSync, readdirSync } from "node:fs";
 // 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.
+// `elements` (styled intrinsic elements via useRender), and `components` (ready-made
+// compositions of `elements`) — e.g. `@plane/propel/elements/<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 `.`
@@ -24,7 +24,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 ["base", "ui", "components", "hooks"]) {
+  for (const group of ["base", "elements", "components", "hooks"]) {
     const dir = `src/${group}`;
     if (!existsSync(dir)) continue;
     for (const dirent of readdirSync(dir, {
@@ -44,8 +44,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/ui/button/index.ts` exposes
-// `@plane/propel/ui/button` with no config or manifest edits.
+// so adding `src/elements/button/index.ts` exposes
+// `@plane/propel/elements/button` with no config or manifest edits.
 export default defineConfig({
   pack: {
     entry: subpathEntries(),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90f3fe26..6aac8b7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,30 @@ settings:
 
 catalogs:
   default:
+    '@base-ui/react':
+      specifier: ^1.6.0
+      version: 1.6.0
+    '@oxlint/plugins':
+      specifier: 1.72.0
+      version: 1.72.0
+    '@tailwindcss/vite':
+      specifier: ^4.3.2
+      version: 4.3.2
+    '@typescript/native-preview':
+      specifier: 7.0.0-dev.20260701.1
+      version: 7.0.0-dev.20260701.1
+    lucide-react:
+      specifier: ^1.23.0
+      version: 1.23.0
+    oxlint:
+      specifier: 1.72.0
+      version: 1.72.0
+    playwright:
+      specifier: ^1.61.1
+      version: 1.61.1
+    tailwindcss:
+      specifier: ^4.3.2
+      version: 4.3.2
     vite-plus:
       specifier: 0.2.1
       version: 0.2.1
@@ -39,14 +63,14 @@ importers:
   packages/propel:
     dependencies:
       '@base-ui/react':
-        specifier: ^1.5.0
-        version: 1.5.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        specifier: 'catalog:'
+        version: 1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
       lucide-react:
-        specifier: ^1.18.0
-        version: 1.18.0(react@19.2.7)
+        specifier: 'catalog:'
+        version: 1.23.0(react@19.2.7)
       react-day-picker:
         specifier: ^10.0.1
         version: 10.0.1(@types/react@19.2.17)(react@19.2.7)
@@ -73,8 +97,8 @@ importers:
         specifier: ^10.4.6
         version: 10.4.6(@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.6(@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.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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@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))
+        specifier: 'catalog:'
+        version: 4.3.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       '@types/node':
         specifier: ^25.6.2
         version: 25.9.3
@@ -85,17 +109,17 @@ importers:
         specifier: ^19.2.3
         version: 19.2.3(@types/react@19.2.17)
       '@typescript/native-preview':
-        specifier: 7.0.0-dev.20260509.2
-        version: 7.0.0-dev.20260509.2
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260701.1
       '@vitest/browser-playwright':
         specifier: 4.1.9
-        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)
+        version: 4.1.9(playwright@1.61.1)(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.9
         version: 4.1.9(@vitest/browser@4.1.9)(vitest@4.1.9)
       playwright:
-        specifier: ^1.61.0
-        version: 1.61.0
+        specifier: 'catalog:'
+        version: 1.61.1
       react:
         specifier: ^19.2.7
         version: 19.2.7
@@ -109,8 +133,8 @@ importers:
         specifier: ^10.4.6
         version: 10.4.6(storybook@10.4.6(@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.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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)))
       tailwindcss:
-        specifier: ^4.3.1
-        version: 4.3.1
+        specifier: 'catalog:'
+        version: 4.3.2
       typescript:
         specifier: ^6.0.3
         version: 6.0.3
@@ -121,27 +145,27 @@ importers:
         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.9)(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
+        specifier: 4.106.0
+        version: 4.106.0
 
   tools/oxlint-plugin-propel:
     dependencies:
       '@oxlint/plugins':
-        specifier: 1.61.0
-        version: 1.61.0
+        specifier: 'catalog:'
+        version: 1.72.0
     devDependencies:
       '@types/node':
         specifier: ^25.6.2
         version: 25.9.3
       '@typescript/native-preview':
-        specifier: 7.0.0-dev.20260509.2
-        version: 7.0.0-dev.20260509.2
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260701.1
       bumpp:
         specifier: ^11.1.0
         version: 11.1.0
       oxlint:
-        specifier: 1.67.0
-        version: 1.67.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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))
+        specifier: 'catalog:'
+        version: 1.72.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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
@@ -232,8 +256,8 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
-  '@base-ui/react@1.5.0':
-    resolution: {integrity: sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==}
+  '@base-ui/react@1.6.0':
+    resolution: {integrity: sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@date-fns/tz': ^1.2.0
@@ -249,8 +273,8 @@ packages:
       date-fns:
         optional: true
 
-  '@base-ui/utils@0.2.9':
-    resolution: {integrity: sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==}
+  '@base-ui/utils@0.3.1':
+    resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==}
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
       react: ^17 || ^18 || ^19
@@ -337,32 +361,32 @@ packages:
       workerd:
         optional: true
 
-  '@cloudflare/workerd-darwin-64@1.20260611.1':
-    resolution: {integrity: sha512-iJICldmi4sBGgi7IrQles8cStOGXM/Tmv95C4OODVs6VIbMsJPqThUM5h3uYVQNULuJ8I/aVvnJ3Eh/wZCKwuA==}
+  '@cloudflare/workerd-darwin-64@1.20260630.1':
+    resolution: {integrity: sha512-oEVsD2NZtPAMaEvFeH2Y6N63yiFuOnPDKeAM+l8AkRbLAbFk462uWOq6/ZLn8ouY4P4coMkgsOPqcT1mkuzvzg==}
     engines: {node: '>=16'}
     cpu: [x64]
     os: [darwin]
 
-  '@cloudflare/workerd-darwin-arm64@1.20260611.1':
-    resolution: {integrity: sha512-yBbVXvbZyltR3I7NJdC4C4ItkItjZSiabcA/3HzEWOUQjLVKFqRh4so6ToHr70VCYh8VGeR8EDZL23igLhXqFQ==}
+  '@cloudflare/workerd-darwin-arm64@1.20260630.1':
+    resolution: {integrity: sha512-tar1vcQSzM+27Agrlv28BhtN1tIFKw2YHrzldEMyQJOJB/885TU8Z3oO1c/a9YOmsKABhD6I4dGFhsmXyrbK1g==}
     engines: {node: '>=16'}
     cpu: [arm64]
     os: [darwin]
 
-  '@cloudflare/workerd-linux-64@1.20260611.1':
-    resolution: {integrity: sha512-PfNjpxOlaIgZFYuhD7+neEEewCN2Ud993wEEN0fmbtSOax1AK53LGqmXUDvFhnbkHxJLFAxYCSNISW8QbzaAIg==}
+  '@cloudflare/workerd-linux-64@1.20260630.1':
+    resolution: {integrity: sha512-mhjIg91+ikWw5v9tY4BYO7N9vLOZBhn7EnVFvxCdxcpuUUFBKATxUYHUy1kkgYxnmiI6s93PRNbzBz1NpYQ3IQ==}
     engines: {node: '>=16'}
     cpu: [x64]
     os: [linux]
 
-  '@cloudflare/workerd-linux-arm64@1.20260611.1':
-    resolution: {integrity: sha512-GEp4XbuIKjlF8pakqXcUDJfKiJosD/Q7S83J0d+r+z9XIlYGfF3ntm08e2aiF5TFTwp3fnG4yMoPUAKNhNJpvQ==}
+  '@cloudflare/workerd-linux-arm64@1.20260630.1':
+    resolution: {integrity: sha512-7g0iGvMCwGct+vE3FOKXtFWMAIGHzK2Ei9oALp44gXuL4lBcs3PPJISeTp5itquW2JwS1fw4Hnq7zrT7N/dgPw==}
     engines: {node: '>=16'}
     cpu: [arm64]
     os: [linux]
 
-  '@cloudflare/workerd-windows-64@1.20260611.1':
-    resolution: {integrity: sha512-S6JkS0kEbcCKs19RGqEPhjCRbP8GBkQwqYLp2fhBJtD/KTlwqLzOJ9E6PQ7gQKgWHtxy1NBG3oXarlNFRNU/dw==}
+  '@cloudflare/workerd-windows-64@1.20260630.1':
+    resolution: {integrity: sha512-J5KF9VF8yRpRBib/cPSuEp6iR9q3/cKgeDVhg1ZtuwpkzwnmCb+rxMF5WFLxAN8bI2x2FMG1v6o4vVFOGZ0fOQ==}
     engines: {node: '>=16'}
     cpu: [x64]
     os: [win32]
@@ -790,6 +814,12 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1197,22 +1227,16 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxlint/binding-android-arm-eabi@1.67.0':
-    resolution: {integrity: sha512-VrSi571rDv1N8HaEDM+DEX8nmT0y9jJo8tzzW13vsOWTx59xQczCIJx68n2zWOXRT5YKZsOZXp4qkHN/10x4mw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    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==}
+  '@oxlint/binding-android-arm-eabi@1.72.0':
+    resolution: {integrity: sha512-zhCmvn+1Mj3UchAc/90i99S0t7jJUsHmFVSPg4UWrjO8b8eaSGwscgO6QAUtvHBstkjQwBttQNswEnAF1mIQdA==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
+    cpu: [arm]
     os: [android]
 
   '@oxlint/binding-android-arm64@1.70.0':
@@ -1221,11 +1245,11 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@oxlint/binding-darwin-arm64@1.67.0':
-    resolution: {integrity: sha512-jOzXxS1AxFxhImLIRbtGIMrEwaXcgMw3gR57WB1cRk8ai+vpr6726kxXqVvlNsrXtJ/FrmOm8RxlC0m8SW24Qg==}
+  '@oxlint/binding-android-arm64@1.72.0':
+    resolution: {integrity: sha512-mtH+aY/ozv1eZoCUC2owjFAtyNBKHpJHygKeEu9zXXnQGW1Q2/qOpvx+I+Lf23+TvTz66F4iiXUbl2cGvoLPCQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
-    os: [darwin]
+    os: [android]
 
   '@oxlint/binding-darwin-arm64@1.70.0':
     resolution: {integrity: sha512-8KjgVVHI5F9nVwHCRwwA78Ty7zNKP4Wd9OeN5PSv3iu/F/u1RVXoOCgLhWqust6HmwQG6xc8c+RCyaWENy24+w==}
@@ -1233,10 +1257,10 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint/binding-darwin-x64@1.67.0':
-    resolution: {integrity: sha512-3DFAVY94OqjIZHXIPz37yGRSWwOFTAqChQ64/M69GYLawzP0KiwdhDNfqdKKYT0bTR/DNxmMnQsj3ns+8+X/Lg==}
+  '@oxlint/binding-darwin-arm64@1.72.0':
+    resolution: {integrity: sha512-EvnajNPDtfknB3ZieeOOyDTwJn9QXDiwfnF4ZDQqART6RG6hjY4WigQcZdGoK2dkB3e1vrmEzN9aYbQCUkh/gQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
+    cpu: [arm64]
     os: [darwin]
 
   '@oxlint/binding-darwin-x64@1.70.0':
@@ -1245,11 +1269,11 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint/binding-freebsd-x64@1.67.0':
-    resolution: {integrity: sha512-e4dDKZuLu8TR9DEBssWSDahlPgZBwojTTHZUvnjBRJfJJbpxYCjfjKfi0Z1+CSLMiJBwI2yCDtRM1XJQaARjmg==}
+  '@oxlint/binding-darwin-x64@1.72.0':
+    resolution: {integrity: sha512-ZkCdEa/G80A7vEHfeCDz/+L3m33DE73v32mDKhgOIgz8Uwf0DFcK7+uu6qC+7LEhmz5fpOe1osWKyjSNMydFIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
-    os: [freebsd]
+    os: [darwin]
 
   '@oxlint/binding-freebsd-x64@1.70.0':
     resolution: {integrity: sha512-hJucmUf8OlinHNb1R7fI4Fw6WsAstOz7i8nmkWQfiHoZXtbufNm+MxiDTIMk1ggh2Ro4vLzgQ+bKvRY54MZoRA==}
@@ -1257,11 +1281,11 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.67.0':
-    resolution: {integrity: sha512-BKytFdcQzbITV3xlnzDUDTEDtbUMCCiC4EaNTDZ4FyT8gdNvBC4gfiLucXp/sQl0XU3p7syTlorUWVVVBZab2g==}
+  '@oxlint/binding-freebsd-x64@1.72.0':
+    resolution: {integrity: sha512-NroXv2vh+sxVY1uya/rM5pjhx1hm8BzlYpx9q67QP0Xhw5MH2bf5GJylpvLEC+781p1Xli/317EoV9AlGwViag==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
+    cpu: [x64]
+    os: [freebsd]
 
   '@oxlint/binding-linux-arm-gnueabihf@1.70.0':
     resolution: {integrity: sha512-1BnS7wbCYDSXwWzJJ+mc3NURoha6m6m6RT5c6vgAY3oz7C3OVXP+S0awo2mRq97arrJkVvO3qRQfyAHL+76xtQ==}
@@ -1269,8 +1293,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm-musleabihf@1.67.0':
-    resolution: {integrity: sha512-XYAv0esBDX7BpTzRDjVX2Vdj+zndd8ll2dFQiaeQ6zTZr7A8GRDTN7fH3FP3jU+O0vCDx85oH/EtG7BzPgAXuw==}
+  '@oxlint/binding-linux-arm-gnueabihf@1.72.0':
+    resolution: {integrity: sha512-0NDywYgfj279Ou/BcQuCYSj7NJwBfmWn5qc5uGO/Ny7fUWmXyIpvawqX/8acQlWG6IXelJsJhj+JAy6sjsKj0A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
@@ -1281,12 +1305,11 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm64-gnu@1.67.0':
-    resolution: {integrity: sha512-zizRMjA0i6u/2B0evgda04iycu+MoNuf1pBy6Eh+1CjC5wMEG7qN5zdDKTCvFc0KSYSDM9QTG3gjZHirgtQuKg==}
+  '@oxlint/binding-linux-arm-musleabihf@1.72.0':
+    resolution: {integrity: sha512-4vpXB06h65Ezsy4hRyrGjGrfa1SkVPii09yaajiYhmVpgsFiLD+KNxIx/BNAY+XiO+i1yqp9HHdwqM8VTqa5XQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
+    cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-arm64-gnu@1.70.0':
     resolution: {integrity: sha512-0A5XJ4alvmqFUFP/4oYSyaO+qLto/HrKEWTSaegiVl+HOufFngK2BjYw9x4RbwBt/du5QG6l5q1zeWiJYYG5yg==}
@@ -1295,12 +1318,12 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-arm64-musl@1.67.0':
-    resolution: {integrity: sha512-zB/Tf6sUjmmvvbva9Gj3JTJ8rJ9t4I8/U0o6vSRtd0DRIsIuyegBwJAzhSUFQHdMijIRJkW0exs/yBhpw2S20w==}
+  '@oxlint/binding-linux-arm64-gnu@1.72.0':
+    resolution: {integrity: sha512-immaN4g2ZGFiOkKrvRX9LvzZdd2GkQM5wR+UyzYyUuyhUTXGQ4HKUJH18xp4G8OfhCVaVAJfKZxwE1r8+4hhaQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
+    libc: [glibc]
 
   '@oxlint/binding-linux-arm64-musl@1.70.0':
     resolution: {integrity: sha512-JiylyurlB0CLSedNtx1gzv3FvfWPF1h/2Y3BJszPLNt5XQFlBsH5ke0Jle3iJb3uqu5m2e7A/DwzpuCAHdiU+A==}
@@ -1309,12 +1332,12 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-ppc64-gnu@1.67.0':
-    resolution: {integrity: sha512-kgU40Gt74CK0TCsF51KZymkIwN9U0BajKsMijB52zPqOeZU9NAHkA/NSQkZDHEaCakx42DxhXkODiAqf2b4Gug==}
+  '@oxlint/binding-linux-arm64-musl@1.72.0':
+    resolution: {integrity: sha512-JGHS9Mnr7iWyyLDxgCv1MhzVpAckgptg00F2gnxt/GD7lQ2SW1BRcxHqhSTaSdDpjWRrBkBxMMh4+Hn3aVtExg==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
+    cpu: [arm64]
     os: [linux]
-    libc: [glibc]
+    libc: [musl]
 
   '@oxlint/binding-linux-ppc64-gnu@1.70.0':
     resolution: {integrity: sha512-J8VPG7I3/HmgaU4u8pNU2kFx2+0U+vPLS1dXFxXOaR/2TQ0f8AC7DRz0SRGRI1bfphnX2hVYTTtLuhL4nYKL+Q==}
@@ -1323,10 +1346,10 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-gnu@1.67.0':
-    resolution: {integrity: sha512-tOYhkk/iaG9aD3FvGpBFd1Lrw0x0RaVoJBxjUkfNzS50rC5NS5BteNCwgr8A2zCdADrIIoze6D7u6U5Ic++/iQ==}
+  '@oxlint/binding-linux-ppc64-gnu@1.72.0':
+    resolution: {integrity: sha512-AOYgBZqxNshrg83P9v0RYv+m8s10Cqkj4/PxXFDhcS3k7FqsIG5+CxErshZCIN7G8iy4Y+VGfAsuEdar8AcbBg==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
+    cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
@@ -1337,12 +1360,12 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-musl@1.67.0':
-    resolution: {integrity: sha512-sEtywrPb+0b+tHYl1SDCrw903fiC4eyKoNqzP3v+f2JT3Xcv4NEYG+P8rj+eEnX7IWhqV/xj8/JmcmVj21CXaA==}
+  '@oxlint/binding-linux-riscv64-gnu@1.72.0':
+    resolution: {integrity: sha512-QMybPS5ij3/vrKG67mqzHwW++91sYxK/PPUVi6SBtNCEzW4niS52fVBdXbQ6nou0wWbUPEpx8Sl/ZjtgE3clXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
+    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-musl@1.70.0':
     resolution: {integrity: sha512-1e2L7cFCvx9QDzq6NPP+0tABKb5z6nWHyddWTNKprEsjO9xNrAtPowuCGpjNXxkTdsMiZ4jc8YQ5SstZd4XK6g==}
@@ -1351,12 +1374,12 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-s390x-gnu@1.67.0':
-    resolution: {integrity: sha512-BvR8Moa0zCLxroOx4vZaZN9nUfwAUpSTwjZdxZyKy4bv3PrzrXrxKR/ZQ0L9wNSvlPhnMJeZfa3q5w6ZCTuN6Q==}
+  '@oxlint/binding-linux-riscv64-musl@1.72.0':
+    resolution: {integrity: sha512-gOc3W7JV0PXRpIL7stUlLe3Wa9Gp0Kdlup87IT3gHDvPKck2xNgMIl/Gs2lldYY2lyXZDC4rWi3hmoLUobkgbQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
+    cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
+    libc: [musl]
 
   '@oxlint/binding-linux-s390x-gnu@1.70.0':
     resolution: {integrity: sha512-Kwu/l/8GcYibCWA9m9N5pRXMIKVSsL/YbgpLzYkqDhWTiqdRfnNJ/+nqIKRKQiFbHWsdlHEhzMwruJK+qcEruA==}
@@ -1365,10 +1388,10 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-gnu@1.67.0':
-    resolution: {integrity: sha512-mm2cxM6fksOpq6l0uFws8BUGKAR4dNa/cZCn37Npq7PFbhD5HDJqWfnoIvTaeRKMy5XdS2tO0MA0qbHDrnXAAA==}
+  '@oxlint/binding-linux-s390x-gnu@1.72.0':
+    resolution: {integrity: sha512-rpGxph+FjjHcYI5q6uxB3Az+tnfmEnDbSA8+PK9ZE/VzyUAkvBOMeuY7ZQMhu5mpZH7YQDsTdW6Cx4kV/msc6w==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
+    cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
@@ -1379,12 +1402,12 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-musl@1.67.0':
-    resolution: {integrity: sha512-WmbMuLapKyDlobMkXAaAL0Y+Uczh4LETfIfQsUpbId4Ip8Ai82/jqeYTOoUCkuuhBFapgqP253+d83tLKOksJg==}
+  '@oxlint/binding-linux-x64-gnu@1.72.0':
+    resolution: {integrity: sha512-WND+uhf/Ko13SLqQMWQUgsZuLvYYEvL0ZKgg0tgGYfLqxG7l8Ju123fHDMJyYSDl5E3bUbpFUuii/OvMreFQzw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
+    libc: [glibc]
 
   '@oxlint/binding-linux-x64-musl@1.70.0':
     resolution: {integrity: sha512-hzJa/WgvtJpbBD9rgfy0qe+MjbxOXNUT0bfR1S6EQQzfTtBFA9xg5q8KSwRrQ2QfSS+TaP4j+4mVPQrfNc6UNg==}
@@ -1393,11 +1416,12 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-openharmony-arm64@1.67.0':
-    resolution: {integrity: sha512-9g/PqxYJelzzTAOR5Y+RiRqdeydhEuXv2KxNeFcAKQ7UsvnWSY1OP4MsuPMbTO2Pf70tz7mFhl1j13H3fyh+8g==}
+  '@oxlint/binding-linux-x64-musl@1.72.0':
+    resolution: {integrity: sha512-SrpbrUL70nG9vh6zP4/oKHWgLuHquwsr7MW9XOn0olBVgh10Uqr8qscKhQoBGEn6olK/IUpn5GSKcdQ5AjUhGA==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-openharmony-arm64@1.70.0':
     resolution: {integrity: sha512-xbsaNSNzVSnaJACCUYr1HQMyY/Q/Q1LkePmHG3UvZPvGCYGNxrsZp9OmtA6ick8xH47ltRRbRrPCM1YXYcyC+A==}
@@ -1405,11 +1429,11 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxlint/binding-win32-arm64-msvc@1.67.0':
-    resolution: {integrity: sha512-2VhwE6Gatb0vJGnN0TBuQMbKCOiZlSQ/zJvVWYLK4a9d4iDiJOen/yVQkGpmsJ90MuH66fzi0kEKI0jRQMDxGA==}
+  '@oxlint/binding-openharmony-arm64@1.72.0':
+    resolution: {integrity: sha512-qkrsEn6NmgFKr7U/QnezQMb+q/vzAy0Dd9Y95gQGQTyjzDLN+HRZMuM5u70iyH4nBLCfKBzhjMsYCehKay2jyg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
-    os: [win32]
+    os: [openharmony]
 
   '@oxlint/binding-win32-arm64-msvc@1.70.0':
     resolution: {integrity: sha512-icAEsUI7JbW1TMRdEXV83mVAInhRVQYuuAlPpxdGwJ95chNdnCzjloRW8GglT0WvzOEZSio6fnYSk2DJ2Hv7LQ==}
@@ -1417,10 +1441,10 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint/binding-win32-ia32-msvc@1.67.0':
-    resolution: {integrity: sha512-EQ3VExXfeM1InbE5+JjufhZZTWy+kHUwgt3yZR7gQ47Je/mE0WspQPan0OJznh493L5anM210YNJtH1PXjTSFg==}
+  '@oxlint/binding-win32-arm64-msvc@1.72.0':
+    resolution: {integrity: sha512-LWR6ZlFZph+KPjXv8opgZsXRDCdrdQe8VL8Cg9zxCoBS73h6znzZpydVgmdnwj8mB9AuSM5jxEgDJDpQkjboeg==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
+    cpu: [arm64]
     os: [win32]
 
   '@oxlint/binding-win32-ia32-msvc@1.70.0':
@@ -1429,10 +1453,10 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@oxlint/binding-win32-x64-msvc@1.67.0':
-    resolution: {integrity: sha512-bw24y+/1MHS4QDkons3YyHkPT9uCMoLHHgQhb+mb8NOjTYwub1CZ+K9Ngr8aO5DMrDrkqHwTzlTwFP2vS8Y/ZQ==}
+  '@oxlint/binding-win32-ia32-msvc@1.72.0':
+    resolution: {integrity: sha512-yt6HEh7IsHvtjRWtmeZRX134eaXKHq5Gnqlf1xBJdJl1JtdoRUEJw3nAxpZoUDS860cX/foKbztO441anVBtVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
+    cpu: [ia32]
     os: [win32]
 
   '@oxlint/binding-win32-x64-msvc@1.70.0':
@@ -1441,14 +1465,20 @@ packages:
     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/binding-win32-x64-msvc@1.72.0':
+    resolution: {integrity: sha512-b2eKFD2hX7tIwmo/cyH6TDq8vzWRZ2qNHrzoGntUTmq0h3zQh/uX3eTSHCwI8OB/ADQfJCRelLItK8BsxuucDA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
 
   '@oxlint/plugins@1.68.0':
     resolution: {integrity: sha512-titLmukUt/h8ho7Svlf0xSBjoy2ccZKrXjpXpZCj+v6V4CJccC2KyP45BLSCMx8YIpifMyiDyUptM4+5sruKbQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@oxlint/plugins@1.72.0':
+    resolution: {integrity: sha512-TF6+ruuIwUpT64deU2JvoDs78m1QjYuMB7IP9AZ2p05fkUesumy+3aqKERE5sYd1C8CmL+yt0swwfXlR3/YluQ==}
+    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==}
 
@@ -1721,69 +1751,69 @@ packages:
       typescript:
         optional: true
 
-  '@tailwindcss/node@4.3.1':
-    resolution: {integrity: sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==}
+  '@tailwindcss/node@4.3.2':
+    resolution: {integrity: sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==}
 
-  '@tailwindcss/oxide-android-arm64@4.3.1':
-    resolution: {integrity: sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==}
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    resolution: {integrity: sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.3.1':
-    resolution: {integrity: sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==}
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    resolution: {integrity: sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.3.1':
-    resolution: {integrity: sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==}
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    resolution: {integrity: sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.3.1':
-    resolution: {integrity: sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==}
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    resolution: {integrity: sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1':
-    resolution: {integrity: sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    resolution: {integrity: sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==}
     engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.3.1':
-    resolution: {integrity: sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    resolution: {integrity: sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.3.1':
-    resolution: {integrity: sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    resolution: {integrity: sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.3.1':
-    resolution: {integrity: sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    resolution: {integrity: sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.3.1':
-    resolution: {integrity: sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==}
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    resolution: {integrity: sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.3.1':
-    resolution: {integrity: sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==}
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    resolution: {integrity: sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
@@ -1794,24 +1824,24 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.3.1':
-    resolution: {integrity: sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    resolution: {integrity: sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.3.1':
-    resolution: {integrity: sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    resolution: {integrity: sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.3.1':
-    resolution: {integrity: sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==}
+  '@tailwindcss/oxide@4.3.2':
+    resolution: {integrity: sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==}
     engines: {node: '>= 20'}
 
-  '@tailwindcss/vite@4.3.1':
-    resolution: {integrity: sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ==}
+  '@tailwindcss/vite@4.3.2':
+    resolution: {integrity: sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==}
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
@@ -1852,6 +1882,9 @@ packages:
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -1899,50 +1932,50 @@ packages:
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
 
-  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-oG9KahiCpx4q70Ood/rRJhYio4oIMHEHfX0g0LhfenlSIjIonitZWjUmUVG9N9q1ev9QWcM8pWpDrGGP0Osp3Q==}
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-rm3v+3Mcrj91NPwG0mjaLfbJjydCDX/skF82cQw0K6XWsEK7wHmpLEF1xPOWGnV05RhTYJac9VoKUjgcADkbXA==}
     engines: {node: '>=16.20.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-xdEkp23Gu8I7PJCMmSMYtSLX76NKODWj74AoWFPi6MM59ICsjnTSqZf/HmXKSvuNZ5MGb4CMpP3c40dLjGB2PQ==}
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-jtbtV3A+cmkmDuqs56Qj3Hb+NmOAMHFX+FTLhCagJybjsng1lOl1h8vYaYg3F6EMgSiZI66hIpB9TMi3n8jFEw==}
     engines: {node: '>=16.20.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-rd+bMRtUAFBClOAKi9p2rOu6jPmnrjZVljoFyxHw+6bIRLerEQlxP+nIH1olC3HOZPyZ6/x75WtfzTHYeqffiQ==}
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-SPEfXZhCRff6kPYrqJIkKkKBy1rxPk0Wmam7U0AOuMQtXTNPmqCtx54J/F6nfGR89ATTDTDr69MujFAG+lFQVg==}
     engines: {node: '>=16.20.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@typescript/native-preview-linux-arm@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-ar5HN/V/4HLF4FZCoVVFj+ET1Soi758hb4WhhzYQfSUXQ/bpVGUGP86JAy8EhVMoeN6qxqWet93MkLSszJOIVg==}
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-c22PWjLMecd2xsAZRlpC1mnr8GZUjnFS32URPd2NhKOEx/6Dp7bPZvI+7NNXDXTew/fkgAaZvhLTWHGG64gqGw==}
     engines: {node: '>=16.20.0'}
     cpu: [arm]
     os: [linux]
 
-  '@typescript/native-preview-linux-x64@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-lB26mGzdolYIZiOdBII8roVJCxCUR8zkYszvvHyjB1IPs7d5fmOhT6OzI1zYPYujiSRJi4HVYM1iXTcIfp7KDg==}
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-Y9NX6qGOCQD4zdCXJCABB8TL3IkFsWVlwMQ3OGtQ8A/OzyIFN01QyHWFgB5AJFZQoasryb+nnhu9r2IY5KpBwA==}
     engines: {node: '>=16.20.0'}
     cpu: [x64]
     os: [linux]
 
-  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-gH3UmtyxHiRNEP0LgQXCVlB5+ZN/U+/Z7jM/zULQtTOxIIFK3Y4b8gbGLvP7uW3u2cqYOg2hc2nuN8OdsCmOig==}
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-7IRD34O2Kp7mIplQEC/HgLyehmKL1FGlTYhlAqxxZfKhSt694yytd2dCCnxMMA/aPHjcqBke04wNPOOhQ2ezcA==}
     engines: {node: '>=16.20.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@typescript/native-preview-win32-x64@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-kZV0Vh64hp10saOghPlFZE1qahonqvRgU3iubt8pUY4XLe8IQIofwWCN5vzNNeULE4W4mRtAJbHuvP/muOFomw==}
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-zVfayHxvFZAQ0hJbegDcfhJamyQpLn6ahMDATAra+EkA3+/nbTW3VjCJ3h1V2PSNTY9rTPzGroFURV5cvErh3A==}
     engines: {node: '>=16.20.0'}
     cpu: [x64]
     os: [win32]
 
-  '@typescript/native-preview@7.0.0-dev.20260509.2':
-    resolution: {integrity: sha512-JAJpEX0yBaEle2zzbX5z9QAhmEfML1SyQafLwbKCdcOtnkGdk5xD8NKIVxq+nTwYjRwuV7kKnQ+fqU3gpWY0qQ==}
+  '@typescript/native-preview@7.0.0-dev.20260701.1':
+    resolution: {integrity: sha512-eXPtWsAj0s06kHWVDlBj7ABwoyNDHuW2gCbQ+bYGlyymDYteiAydelhyhyzUsenzGraPLdd/OPwEUB8/KUdpBw==}
     engines: {node: '>=16.20.0'}
     hasBin: true
 
@@ -2662,8 +2695,8 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@1.18.0:
-    resolution: {integrity: sha512-LZDb7H/0YfM+RJncD0hDQRCAu+vSGODqpe35TuVI8EuXaRjkczbsx7p8dY4J87F/MUSj6bpYqeI8nw8qXaAdmA==}
+  lucide-react@1.23.0:
+    resolution: {integrity: sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -2693,8 +2726,8 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  miniflare@4.20260611.0:
-    resolution: {integrity: sha512-i+JwEo8vN96naz1WL3ntFgFyRluBDYL408zwhHKvR2jefJ464KsZ/gCmJAQ5k+oaWeb5Ug+s7yne5AyiAEswjg==}
+  miniflare@4.20260630.0:
+    resolution: {integrity: sha512-lyRplDrSJJWVpzSSQPBSQtNmUuxScCZyOOkXFs37uSbdTfWRDDmw6DyFKVS2s1eYtA/i4u2xR/0FyPIsTl/HJw==}
     engines: {node: '>=22.0.0'}
     hasBin: true
 
@@ -2764,8 +2797,8 @@ packages:
     resolution: {integrity: sha512-3mBv3CoPbh8dFbzfDGIWa2ytZjn2v+3EX4aKRXjIhsoGFzG8GCjfRirz3rwZf1wYbZzsNLTSgpw8VjQuWdp/jA==}
     hasBin: true
 
-  oxlint@1.67.0:
-    resolution: {integrity: sha512-blwwaHPdoH8piQ5/z0KHeoHFR7FZgl12WluKJfu4qFLPkZl6mK04PkLE45Fw1NxfBRSlh40Gu7MkxHUw++ociQ==}
+  oxlint@1.70.0:
+    resolution: {integrity: sha512-D6JgHtzkhRwvEC+A0Nw5AEc5bk8x5i1pHzvZIEf/a0C4hOzmAACNGtkDGPyFaxxX3ZVGxCPeig3P3rMM8XU3/g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -2777,8 +2810,8 @@ packages:
       vite-plus:
         optional: true
 
-  oxlint@1.70.0:
-    resolution: {integrity: sha512-D6JgHtzkhRwvEC+A0Nw5AEc5bk8x5i1pHzvZIEf/a0C4hOzmAACNGtkDGPyFaxxX3ZVGxCPeig3P3rMM8XU3/g==}
+  oxlint@1.72.0:
+    resolution: {integrity: sha512-1rhdZIP/EvoI91ABIwNU5Q8+bWf8mjrS5UzIOZld4d4bXxJvtlUhlQvaoTogIGin/qdErMOrwaIJvCSIAKTLhA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -2816,6 +2849,9 @@ packages:
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
+  package-manager-detector@1.7.0:
+    resolution: {integrity: sha512-xg1eHpwYL/D/HEdWw2goFZP6vV0FH7W+PZ5rFkGjdIDLtxq7EkzBUeT3m+lndYCt8wKbmofUu1MUdMCXkCk9ZQ==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -2863,13 +2899,13 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  playwright-core@1.61.0:
-    resolution: {integrity: sha512-caX7TrY3Ml6egyDX0WUcTHDxodl/b51y5wJOdCEA36QviK/s2g081hvmGs8eaE3DWb6NYZQ6BjO/QkNRPenoPA==}
+  playwright-core@1.61.1:
+    resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.61.0:
-    resolution: {integrity: sha512-Z+7BeeqQPRRzklHsVFP4KTGIyMxKUmfeRA4WisM6G3/XW6nwGeX6fX9qYaDa+CiUqpOkb2f6X3nar05R3kSuJQ==}
+  playwright@1.61.1:
+    resolution: {integrity: sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -2881,6 +2917,10 @@ packages:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.16:
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -3094,8 +3134,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  tailwindcss@4.3.1:
-    resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
+  tailwindcss@4.3.2:
+    resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
 
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
@@ -3176,8 +3216,8 @@ packages:
   undici-types@7.24.6:
     resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
 
-  undici@7.24.8:
-    resolution: {integrity: sha512-6KQ/+QxK49Z/p3HO6E5ZCZWNnCasyZLa5ExaVYyvPxUwKtbCPMKELJOqh7EqOle0t9cH/7d2TaaTRRa6Nhs4YQ==}
+  undici@7.28.0:
+    resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
     engines: {node: '>=20.18.1'}
 
   unenv@2.0.0-rc.24:
@@ -3327,17 +3367,17 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  workerd@1.20260611.1:
-    resolution: {integrity: sha512-CS/640T7pIJ2HYX6x2DwKFGbcSckAWN3tgcdq+ptB6SaqjWUhlzIgA/YhPuwIU+/NnMnGpqOFX/hC18Oyge63w==}
+  workerd@1.20260630.1:
+    resolution: {integrity: sha512-7M0AA4l14hmPGtzQ5YPHyXosIKI/uz3TdcPHeiFDbgb7/0c8ECVMzIaodSV5bZIVhDHL0OlzqITAdPiwAr+dTg==}
     engines: {node: '>=16'}
     hasBin: true
 
-  wrangler@4.100.0:
-    resolution: {integrity: sha512-dSQO7DO+mD6XDzkVWIWBoGLO3yw+lacWSc/KhFvd7pgfpth+kX98qb5SGRHZN8ACCDhhfwzDLXwB6qHsIHhfBg==}
+  wrangler@4.106.0:
+    resolution: {integrity: sha512-b6EVbsvbmAUY4bUQXT3+f8oFP8x+J5rEa5z3Akeh+6vyKiN4x8+PyZ53DPpnqdxhIihhq/a00Yq5chGJ19QXBQ==}
     engines: {node: '>=22.0.0'}
     hasBin: true
     peerDependencies:
-      '@cloudflare/workers-types': ^4.20260611.1
+      '@cloudflare/workers-types': ^4.20260630.1
     peerDependenciesMeta:
       '@cloudflare/workers-types':
         optional: true
@@ -3493,10 +3533,10 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@base-ui/react@1.5.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@base-ui/react@1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@babel/runtime': 7.29.7
-      '@base-ui/utils': 0.2.9(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@base-ui/utils': 0.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@floating-ui/utils': 0.2.11
       react: 19.2.7
@@ -3507,7 +3547,7 @@ snapshots:
       '@types/react': 19.2.17
       date-fns: 4.4.0
 
-  '@base-ui/utils@0.2.9(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@base-ui/utils@0.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@floating-ui/utils': 0.2.11
@@ -3670,25 +3710,25 @@ snapshots:
 
   '@cloudflare/kv-asset-handler@0.5.0': {}
 
-  '@cloudflare/unenv-preset@2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260611.1)':
+  '@cloudflare/unenv-preset@2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260630.1)':
     dependencies:
       unenv: 2.0.0-rc.24
     optionalDependencies:
-      workerd: 1.20260611.1
+      workerd: 1.20260630.1
 
-  '@cloudflare/workerd-darwin-64@1.20260611.1':
+  '@cloudflare/workerd-darwin-64@1.20260630.1':
     optional: true
 
-  '@cloudflare/workerd-darwin-arm64@1.20260611.1':
+  '@cloudflare/workerd-darwin-arm64@1.20260630.1':
     optional: true
 
-  '@cloudflare/workerd-linux-64@1.20260611.1':
+  '@cloudflare/workerd-linux-64@1.20260630.1':
     optional: true
 
-  '@cloudflare/workerd-linux-arm64@1.20260611.1':
+  '@cloudflare/workerd-linux-arm64@1.20260630.1':
     optional: true
 
-  '@cloudflare/workerd-windows-64@1.20260611.1':
+  '@cloudflare/workerd-windows-64@1.20260630.1':
     optional: true
 
   '@cspotcode/source-map-support@0.8.1':
@@ -4020,6 +4060,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4240,124 +4287,124 @@ snapshots:
   '@oxlint-tsgolint/win32-x64@0.23.0':
     optional: true
 
-  '@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':
+  '@oxlint/binding-android-arm-eabi@1.72.0':
     optional: true
 
   '@oxlint/binding-android-arm64@1.70.0':
     optional: true
 
-  '@oxlint/binding-darwin-arm64@1.67.0':
+  '@oxlint/binding-android-arm64@1.72.0':
     optional: true
 
   '@oxlint/binding-darwin-arm64@1.70.0':
     optional: true
 
-  '@oxlint/binding-darwin-x64@1.67.0':
+  '@oxlint/binding-darwin-arm64@1.72.0':
     optional: true
 
   '@oxlint/binding-darwin-x64@1.70.0':
     optional: true
 
-  '@oxlint/binding-freebsd-x64@1.67.0':
+  '@oxlint/binding-darwin-x64@1.72.0':
     optional: true
 
   '@oxlint/binding-freebsd-x64@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.67.0':
+  '@oxlint/binding-freebsd-x64@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-arm-gnueabihf@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-musleabihf@1.67.0':
+  '@oxlint/binding-linux-arm-gnueabihf@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-arm-musleabihf@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-gnu@1.67.0':
+  '@oxlint/binding-linux-arm-musleabihf@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-arm64-gnu@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-musl@1.67.0':
+  '@oxlint/binding-linux-arm64-gnu@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-arm64-musl@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-ppc64-gnu@1.67.0':
+  '@oxlint/binding-linux-arm64-musl@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-ppc64-gnu@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-gnu@1.67.0':
+  '@oxlint/binding-linux-ppc64-gnu@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-riscv64-gnu@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-musl@1.67.0':
+  '@oxlint/binding-linux-riscv64-gnu@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-riscv64-musl@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-s390x-gnu@1.67.0':
+  '@oxlint/binding-linux-riscv64-musl@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-s390x-gnu@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-gnu@1.67.0':
+  '@oxlint/binding-linux-s390x-gnu@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-x64-gnu@1.70.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-musl@1.67.0':
+  '@oxlint/binding-linux-x64-gnu@1.72.0':
     optional: true
 
   '@oxlint/binding-linux-x64-musl@1.70.0':
     optional: true
 
-  '@oxlint/binding-openharmony-arm64@1.67.0':
+  '@oxlint/binding-linux-x64-musl@1.72.0':
     optional: true
 
   '@oxlint/binding-openharmony-arm64@1.70.0':
     optional: true
 
-  '@oxlint/binding-win32-arm64-msvc@1.67.0':
+  '@oxlint/binding-openharmony-arm64@1.72.0':
     optional: true
 
   '@oxlint/binding-win32-arm64-msvc@1.70.0':
     optional: true
 
-  '@oxlint/binding-win32-ia32-msvc@1.67.0':
+  '@oxlint/binding-win32-arm64-msvc@1.72.0':
     optional: true
 
   '@oxlint/binding-win32-ia32-msvc@1.70.0':
     optional: true
 
-  '@oxlint/binding-win32-x64-msvc@1.67.0':
+  '@oxlint/binding-win32-ia32-msvc@1.72.0':
     optional: true
 
   '@oxlint/binding-win32-x64-msvc@1.70.0':
     optional: true
 
-  '@oxlint/plugins@1.61.0': {}
+  '@oxlint/binding-win32-x64-msvc@1.72.0':
+    optional: true
 
   '@oxlint/plugins@1.68.0': {}
 
+  '@oxlint/plugins@1.72.0': {}
+
   '@polka/url@1.0.0-next.29': {}
 
   '@poppinss/colors@4.1.6':
@@ -4421,7 +4468,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@rolldown/binding-win32-arm64-msvc@1.0.3':
@@ -4507,7 +4554,7 @@ snapshots:
       storybook: 10.4.6(@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.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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:
       '@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-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-playwright': 4.1.9(playwright@1.61.1)(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: 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.9)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
     transitivePeerDependencies:
@@ -4599,7 +4646,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tailwindcss/node@4.3.1':
+  '@tailwindcss/node@4.3.2':
     dependencies:
       '@jridgewell/remapping': 2.3.5
       enhanced-resolve: 5.21.6
@@ -4607,64 +4654,64 @@ snapshots:
       lightningcss: 1.32.0
       magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.3.1
+      tailwindcss: 4.3.2
 
-  '@tailwindcss/oxide-android-arm64@4.3.1':
+  '@tailwindcss/oxide-android-arm64@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.3.1':
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.3.1':
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.3.1':
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.3.1':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.3.1':
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.3.1':
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.3.1':
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.3.1':
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.3.1':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.3.1':
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
     optional: true
 
-  '@tailwindcss/oxide@4.3.1':
+  '@tailwindcss/oxide@4.3.2':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.3.1
-      '@tailwindcss/oxide-darwin-arm64': 4.3.1
-      '@tailwindcss/oxide-darwin-x64': 4.3.1
-      '@tailwindcss/oxide-freebsd-x64': 4.3.1
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.1
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.1
-      '@tailwindcss/oxide-linux-arm64-musl': 4.3.1
-      '@tailwindcss/oxide-linux-x64-gnu': 4.3.1
-      '@tailwindcss/oxide-linux-x64-musl': 4.3.1
-      '@tailwindcss/oxide-wasm32-wasi': 4.3.1
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.1
-      '@tailwindcss/oxide-win32-x64-msvc': 4.3.1
-
-  '@tailwindcss/vite@4.3.1(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
-    dependencies:
-      '@tailwindcss/node': 4.3.1
-      '@tailwindcss/oxide': 4.3.1
-      tailwindcss: 4.3.1
+      '@tailwindcss/oxide-android-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-x64': 4.3.2
+      '@tailwindcss/oxide-freebsd-x64': 4.3.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.2
+
+  '@tailwindcss/vite@4.3.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.2
+      '@tailwindcss/oxide': 4.3.2
+      tailwindcss: 4.3.2
       vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)
 
   '@testing-library/dom@10.4.1':
@@ -4713,6 +4760,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@tybys/wasm-util@0.10.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -4765,46 +4817,46 @@ snapshots:
 
   '@types/resolve@1.20.6': {}
 
-  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview-linux-arm@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview-linux-x64@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview-win32-x64@7.0.0-dev.20260509.2':
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260701.1':
     optional: true
 
-  '@typescript/native-preview@7.0.0-dev.20260509.2':
+  '@typescript/native-preview@7.0.0-dev.20260701.1':
     optionalDependencies:
-      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260509.2
-      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260509.2
-      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260509.2
-      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260509.2
-      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260509.2
-      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260509.2
-      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260509.2
+      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260701.1
+      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260701.1
+      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260701.1
+      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260701.1
+      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260701.1
+      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260701.1
+      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260701.1
 
   '@valibot/to-json-schema@1.7.1(valibot@1.4.1(typescript@6.0.3))':
     dependencies:
       valibot: 1.4.1(typescript@6.0.3)
 
-  '@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-playwright@4.1.9(playwright@1.61.1)(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(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
+      playwright: 1.61.1
       tinyrainbow: 3.1.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.9)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
     transitivePeerDependencies:
@@ -5403,7 +5455,7 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@1.18.0(react@19.2.7):
+  lucide-react@1.23.0(react@19.2.7):
     dependencies:
       react: 19.2.7
 
@@ -5432,12 +5484,12 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  miniflare@4.20260611.0:
+  miniflare@4.20260630.0:
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       sharp: 0.34.5
-      undici: 7.24.8
-      workerd: 1.20260611.1
+      undici: 7.28.0
+      workerd: 1.20260630.1
       ws: 8.21.0
       youch: 4.1.0-beta.10
     transitivePeerDependencies:
@@ -5554,30 +5606,6 @@ 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.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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
-      '@oxlint/binding-darwin-arm64': 1.67.0
-      '@oxlint/binding-darwin-x64': 1.67.0
-      '@oxlint/binding-freebsd-x64': 1.67.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.67.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.67.0
-      '@oxlint/binding-linux-arm64-gnu': 1.67.0
-      '@oxlint/binding-linux-arm64-musl': 1.67.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.67.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.67.0
-      '@oxlint/binding-linux-riscv64-musl': 1.67.0
-      '@oxlint/binding-linux-s390x-gnu': 1.67.0
-      '@oxlint/binding-linux-x64-gnu': 1.67.0
-      '@oxlint/binding-linux-x64-musl': 1.67.0
-      '@oxlint/binding-openharmony-arm64': 1.67.0
-      '@oxlint/binding-win32-arm64-msvc': 1.67.0
-      '@oxlint/binding-win32-ia32-msvc': 1.67.0
-      '@oxlint/binding-win32-x64-msvc': 1.67.0
-      oxlint-tsgolint: 0.23.0
-      vite-plus: 0.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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
@@ -5602,6 +5630,30 @@ snapshots:
       oxlint-tsgolint: 0.23.0
       vite-plus: 0.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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.72.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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.72.0
+      '@oxlint/binding-android-arm64': 1.72.0
+      '@oxlint/binding-darwin-arm64': 1.72.0
+      '@oxlint/binding-darwin-x64': 1.72.0
+      '@oxlint/binding-freebsd-x64': 1.72.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.72.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.72.0
+      '@oxlint/binding-linux-arm64-gnu': 1.72.0
+      '@oxlint/binding-linux-arm64-musl': 1.72.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.72.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.72.0
+      '@oxlint/binding-linux-riscv64-musl': 1.72.0
+      '@oxlint/binding-linux-s390x-gnu': 1.72.0
+      '@oxlint/binding-linux-x64-gnu': 1.72.0
+      '@oxlint/binding-linux-x64-musl': 1.72.0
+      '@oxlint/binding-openharmony-arm64': 1.72.0
+      '@oxlint/binding-win32-arm64-msvc': 1.72.0
+      '@oxlint/binding-win32-ia32-msvc': 1.72.0
+      '@oxlint/binding-win32-x64-msvc': 1.72.0
+      oxlint-tsgolint: 0.23.0
+      vite-plus: 0.2.1(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@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:
       p-map: 2.1.0
@@ -5624,6 +5676,9 @@ snapshots:
 
   package-manager-detector@1.6.0: {}
 
+  package-manager-detector@1.7.0:
+    optional: true
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -5653,11 +5708,11 @@ snapshots:
 
   pify@4.0.1: {}
 
-  playwright-core@1.61.0: {}
+  playwright-core@1.61.1: {}
 
-  playwright@1.61.0:
+  playwright@1.61.1:
     dependencies:
-      playwright-core: 1.61.0
+      playwright-core: 1.61.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -5669,6 +5724,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.16:
+    dependencies:
+      nanoid: 3.3.15
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prettier@2.8.8: {}
 
   pretty-format@27.5.1:
@@ -5680,7 +5741,7 @@ snapshots:
   publint@0.3.21:
     dependencies:
       '@publint/pack': 0.1.5
-      package-manager-detector: 1.6.0
+      package-manager-detector: 1.7.0
       picocolors: 1.1.1
       sade: 1.8.1
     optional: true
@@ -5918,7 +5979,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  tailwindcss@4.3.1: {}
+  tailwindcss@4.3.2: {}
 
   tapable@2.3.3: {}
 
@@ -5989,7 +6050,7 @@ snapshots:
 
   undici-types@7.24.6: {}
 
-  undici@7.24.8: {}
+  undici@7.28.0: {}
 
   unenv@2.0.0-rc.24:
     dependencies:
@@ -6042,7 +6103,7 @@ snapshots:
       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.9)(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)
+      '@vitest/browser-playwright': 4.1.9(playwright@1.61.1)(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.1
       '@voidzero-dev/vite-plus-darwin-x64': 0.2.1
       '@voidzero-dev/vite-plus-linux-arm64-gnu': 0.2.1
@@ -6088,7 +6149,7 @@ snapshots:
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
-      postcss: 8.5.15
+      postcss: 8.5.16
       rolldown: 1.0.3
       tinyglobby: 0.2.17
     optionalDependencies:
@@ -6122,7 +6183,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.9.3
-      '@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-playwright': 4.1.9(playwright@1.61.1)(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.9(@vitest/browser@4.1.9)(vitest@4.1.9)
     transitivePeerDependencies:
@@ -6139,24 +6200,24 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  workerd@1.20260611.1:
+  workerd@1.20260630.1:
     optionalDependencies:
-      '@cloudflare/workerd-darwin-64': 1.20260611.1
-      '@cloudflare/workerd-darwin-arm64': 1.20260611.1
-      '@cloudflare/workerd-linux-64': 1.20260611.1
-      '@cloudflare/workerd-linux-arm64': 1.20260611.1
-      '@cloudflare/workerd-windows-64': 1.20260611.1
+      '@cloudflare/workerd-darwin-64': 1.20260630.1
+      '@cloudflare/workerd-darwin-arm64': 1.20260630.1
+      '@cloudflare/workerd-linux-64': 1.20260630.1
+      '@cloudflare/workerd-linux-arm64': 1.20260630.1
+      '@cloudflare/workerd-windows-64': 1.20260630.1
 
-  wrangler@4.100.0:
+  wrangler@4.106.0:
     dependencies:
       '@cloudflare/kv-asset-handler': 0.5.0
-      '@cloudflare/unenv-preset': 2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260611.1)
+      '@cloudflare/unenv-preset': 2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260630.1)
       blake3-wasm: 2.1.5
       esbuild: 0.28.1
-      miniflare: 4.20260611.0
+      miniflare: 4.20260630.0
       path-to-regexp: 6.3.0
       unenv: 2.0.0-rc.24
-      workerd: 1.20260611.1
+      workerd: 1.20260630.1
     optionalDependencies:
       fsevents: 2.3.3
     transitivePeerDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3ede5472..4069e5dd 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -14,6 +14,14 @@ catalog:
   vite: npm:@voidzero-dev/vite-plus-core@0.2.1
   vitest: 4.1.9
   vite-plus: 0.2.1
+  "@tailwindcss/vite": ^4.3.2
+  "@typescript/native-preview": 7.0.0-dev.20260701.1
+  playwright: ^1.61.1
+  tailwindcss: ^4.3.2
+  "@base-ui/react": ^1.6.0
+  lucide-react: ^1.23.0
+  oxlint: 1.72.0
+  "@oxlint/plugins": 1.72.0
 
 overrides:
   vite: "catalog:"
diff --git a/tools/oxlint-plugin-propel/package.json b/tools/oxlint-plugin-propel/package.json
index 20bd0383..7535f640 100644
--- a/tools/oxlint-plugin-propel/package.json
+++ b/tools/oxlint-plugin-propel/package.json
@@ -30,13 +30,13 @@
     "prepublishOnly": "vp run build"
   },
   "dependencies": {
-    "@oxlint/plugins": "1.61.0"
+    "@oxlint/plugins": "catalog:"
   },
   "devDependencies": {
     "@types/node": "^25.6.2",
-    "@typescript/native-preview": "7.0.0-dev.20260509.2",
+    "@typescript/native-preview": "catalog:",
     "bumpp": "^11.1.0",
-    "oxlint": "1.67.0",
+    "oxlint": "catalog:",
     "typescript": "^6.0.3",
     "vite-plus": "catalog:"
   }