From 6c30e5f1ff087ccf18a83206e63ae44404ed57fc Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Tue, 16 Jun 2026 21:11:56 +0700
Subject: [PATCH 1/6] Enable oxfmt sorting + JSDoc formatting

Turn on oxfmt's sorting/normalization in the root `vite.config.ts` `fmt` block so
`vp check` keeps these consistent automatically:

- sortTailwindcss: sort Tailwind classes. `functions: ["cva", "cx"]` (propel writes
  classes inside those, incl. cva's `class:` key). `stylesheet` points at a new
  tooling-only Tailwind entry (see below) so base + custom utilities sort canonically.
- sortImports: group + sort imports. `sortSideEffects` stays false (default), so CSS
  side-effect imports like `import "./preview.css"` keep their position.
- sortPackageJson: canonical key order for package.json (script order left as-is).
- jsdoc: normalize JSDoc/TSDoc blocks (tag aliases, capitalization, wrapping).

Add `packages/propel/tailwind.css` as the single tooling Tailwind entry
(`@import "tailwindcss"` + propel's tokens). `src/styles/propel.css` deliberately
does not import Tailwind (the consumer owns that), so it can't drive a sorter on its
own; the tooling entry can. It lives at the package root so the build never publishes
it, and `.storybook/preview.css` now imports it too (one source of truth).

The rest of the diff is the one-time reformat. Behavior-preserving: `vp check` clean
and `vp run -r test` 700/700 across the four themes.
---
 packages/propel/.storybook/main.ts            |   2 +-
 packages/propel/.storybook/preview.css        |   9 +-
 packages/propel/.storybook/preview.tsx        |   1 +
 .../accordion/accordion.stories.tsx           |  30 ++--
 .../propel/src/components/accordion/index.tsx |  20 +--
 .../avatar-group/avatar-group.stories.tsx     |   5 +-
 .../src/components/avatar-group/index.tsx     |   1 +
 .../src/components/avatar/avatar.stories.tsx  |  17 ++-
 .../propel/src/components/avatar/index.tsx    |  10 +-
 .../src/components/badge/badge.stories.tsx    |   5 +-
 .../propel/src/components/badge/index.tsx     |   8 +-
 .../src/components/banner/banner.stories.tsx  |  18 +--
 .../propel/src/components/banner/index.tsx    |  17 +--
 .../breadcrumb/breadcrumb.stories.tsx         |  37 +++--
 .../src/components/breadcrumb/index.tsx       |  63 ++++----
 .../src/components/button/button.stories.tsx  |  31 ++--
 .../propel/src/components/button/index.tsx    |  27 ++--
 .../components/calendar/calendar.stories.tsx  |  31 ++--
 .../propel/src/components/calendar/index.tsx  |  14 +-
 .../components/checkbox/checkbox.stories.tsx  |  47 +++---
 .../propel/src/components/checkbox/index.tsx  |  23 ++-
 .../components/dropdown/dropdown.stories.tsx  |  68 ++++-----
 .../propel/src/components/dropdown/index.tsx  | 142 +++++++++---------
 .../icon-button/icon-button.stories.tsx       |  23 +--
 .../src/components/icon-button/index.tsx      |  15 +-
 .../propel/src/components/input/index.tsx     |  55 +++----
 .../src/components/input/input.stories.tsx    |  40 ++---
 .../propel/src/components/nav-item/index.tsx  |  47 +++---
 .../components/nav-item/nav-item.stories.tsx  |  19 +--
 .../src/components/pagination/index.tsx       |  32 ++--
 .../pagination/pagination.stories.tsx         |  41 ++---
 .../propel/src/components/popover/index.tsx   |  42 +++---
 .../components/popover/popover.stories.tsx    |  34 ++---
 .../propel/src/components/progress/index.tsx  |  12 +-
 .../components/progress/progress.stories.tsx  |   6 +-
 .../propel/src/components/radio/index.tsx     |  18 +--
 .../src/components/radio/radio.stories.tsx    |  31 ++--
 .../src/components/scroll-area/index.tsx      |  16 +-
 .../scroll-area/scroll-area.stories.tsx       |   7 +-
 .../propel/src/components/search/index.tsx    |  21 ++-
 .../src/components/search/search.stories.tsx  |  21 ++-
 .../propel/src/components/switch/index.tsx    |  20 +--
 .../src/components/switch/switch.stories.tsx  |  13 +-
 packages/propel/src/components/tabs/index.tsx |  36 ++---
 .../src/components/tabs/tabs.stories.tsx      |  39 +++--
 .../propel/src/components/toast/index.tsx     |  54 ++++---
 .../src/components/toast/toast.stories.tsx    |  72 +++++----
 .../propel/src/components/toolbar/index.tsx   |  89 ++++++-----
 .../components/toolbar/toolbar.stories.tsx    |  28 ++--
 .../propel/src/components/tooltip/index.tsx   |  54 +++----
 .../components/tooltip/tooltip.stories.tsx    |  53 ++++---
 .../src/components/workspace-avatar/index.tsx |   1 +
 .../workspace-avatar.stories.tsx              |   1 +
 .../propel/src/internal/loading-button.ts     |   9 +-
 packages/propel/src/internal/node-slot.ts     |   2 +-
 .../propel/src/internal/overlay-panel.tsx     |   5 +-
 packages/propel/src/internal/scrollbar.ts     |   2 +-
 .../propel/src/patterns/comment.stories.tsx   |  29 ++--
 .../propel/src/storybook/icon-control.tsx     |  13 +-
 packages/propel/tailwind.css                  |  15 ++
 packages/propel/vite.config.ts                |   5 +-
 vite.config.ts                                |  16 ++
 62 files changed, 838 insertions(+), 824 deletions(-)
 create mode 100644 packages/propel/tailwind.css

diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts
index 49dd3b4b..5163d9d3 100644
--- a/packages/propel/.storybook/main.ts
+++ b/packages/propel/.storybook/main.ts
@@ -1,5 +1,5 @@
-import tailwindcss from "@tailwindcss/vite";
 import type { StorybookConfig } from "@storybook/react-vite";
+import tailwindcss from "@tailwindcss/vite";
 
 const config: StorybookConfig = {
   framework: "@storybook/react-vite",
diff --git a/packages/propel/.storybook/preview.css b/packages/propel/.storybook/preview.css
index 66c6f1f8..bc4cabd7 100644
--- a/packages/propel/.storybook/preview.css
+++ b/packages/propel/.storybook/preview.css
@@ -1,8 +1,7 @@
-/* Storybook's Tailwind entry: pull in Tailwind, then propel's tokens + styles.
-   propel.css's `@source "../"` makes Tailwind scan src/ (components + stories),
-   so the utility classes propel uses are generated for the preview. */
-@import "tailwindcss";
-@import "../src/styles/propel.css";
+/* Storybook's Tailwind entry: the shared tooling entry (Tailwind + propel's tokens).
+   propel.css's `@source "../"` makes Tailwind scan src/ (components + stories), so
+   the utility classes propel uses are generated for the preview. */
+@import "../tailwind.css";
 
 /* Make the preview canvas adapt to the active theme so the toolbar toggle is
    visually meaningful (bg + text follow light/dark/contrast). */
diff --git a/packages/propel/.storybook/preview.tsx b/packages/propel/.storybook/preview.tsx
index bcc60225..92d1d769 100644
--- a/packages/propel/.storybook/preview.tsx
+++ b/packages/propel/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Decorator, Preview } from "@storybook/react-vite";
 import { useLayoutEffect } from "react";
+
 import "./preview.css";
 import { type Theme, THEMES } from "./themes";
 
diff --git a/packages/propel/src/components/accordion/accordion.stories.tsx b/packages/propel/src/components/accordion/accordion.stories.tsx
index 5eff34da..00a6411a 100644
--- a/packages/propel/src/components/accordion/accordion.stories.tsx
+++ b/packages/propel/src/components/accordion/accordion.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircleHelp } from "lucide-react";
 import { expect } from "storybook/test";
+
 import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./index";
 
 // Design-review convention — when to add a pseudo-states "States" story:
@@ -87,16 +88,16 @@ export const WithIcon: Story = {
 };
 
 /**
- * The trigger's interaction states side by side. The accordion trigger styles
- * interaction purely with CSS utilities (`hover:bg-layer-transparent-hover` and
- * `focus-visible:ring-2 focus-visible:ring-accent-strong`), so
- * storybook-addon-pseudo-states can force them statically — no real pointer/keyboard.
+ * The trigger's interaction states side by side. The accordion trigger styles interaction purely
+ * with CSS utilities (`hover:bg-layer-transparent-hover` and `focus-visible:ring-2
+ * focus-visible:ring-accent-strong`), so storybook-addon-pseudo-states can force them statically —
+ * no real pointer/keyboard.
  *
- * One accordion with a row per state: each trigger `<button>` carries a unique id
- * (Base UI forwards it from `AccordionTrigger`), and `parameters.pseudo` maps that id
- * to the pseudo-class to force. A single `Accordion` root keeps a single `region`
- * landmark (multiple roots would collide on the axe `landmark-unique` rule). The Hover
- * row should show the transparent-hover background; the Focus row the accent focus ring.
+ * One accordion with a row per state: each trigger `<button>` carries a unique id (Base UI forwards
+ * it from `AccordionTrigger`), and `parameters.pseudo` maps that id to the pseudo-class to force. A
+ * single `Accordion` root keeps a single `region` landmark (multiple roots would collide on the axe
+ * `landmark-unique` rule). The Hover row should show the transparent-hover background; the Focus
+ * row the accent focus ring.
  */
 export const States: Story = {
   parameters: {
@@ -141,8 +142,8 @@ export const MultipleItems: Story = {
 };
 
 /**
- * Behavior test: clicking a collapsed trigger expands its panel and flips
- * `aria-expanded` to true (a `region` appears); clicking again collapses it.
+ * Behavior test: clicking a collapsed trigger expands its panel and flips `aria-expanded` to true
+ * (a `region` appears); clicking again collapses it.
  */
 export const Interaction: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -177,10 +178,9 @@ export const Interaction: Story = {
 };
 
 /**
- * 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 sidebar/docs/manifest while still running under the
- * default `test` tag.
+ * 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
+ * sidebar/docs/manifest while still running under the default `test` tag.
  */
 export const KeyboardToggle: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/accordion/index.tsx b/packages/propel/src/components/accordion/index.tsx
index 3f4cf2b7..e3dcfced 100644
--- a/packages/propel/src/components/accordion/index.tsx
+++ b/packages/propel/src/components/accordion/index.tsx
@@ -16,9 +16,9 @@ export type AccordionProps = Omit<
 >;
 
 /**
- * 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.
+ * Groups a set of `AccordionItem`s. Single-open by default; pass `multiple` to allow several panels
+ * open at once. Use `defaultValue` (uncontrolled) or `value` + `onValueChange` (controlled) to
+ * drive which items are expanded.
  */
 export function Accordion(props: AccordionProps) {
   return <BaseAccordion.Root className="flex w-full flex-col" {...props} />;
@@ -39,17 +39,17 @@ export type AccordionTriggerProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Optional icon shown before the label, matching the Figma header icon. Named
-   * `leadingIcon` (not `icon`) to match Button/Input, so a `trailingIcon` can be
-   * added later without a breaking rename.
+   * Optional icon shown before the label, matching the Figma header icon. Named `leadingIcon` (not
+   * `icon`) to match Button/Input, so a `trailingIcon` can be added later without a breaking
+   * rename.
    */
   leadingIcon?: React.ReactNode;
 };
 
 /**
- * The clickable header that opens and closes its panel. Renders an optional
- * `leadingIcon`, the label, and a chevron that rotates when the panel is open. Base
- * UI sets `aria-expanded` and `aria-controls` for you.
+ * The clickable header that opens and closes its panel. Renders an optional `leadingIcon`, the
+ * label, and a chevron that rotates when the panel is open. Base UI sets `aria-expanded` and
+ * `aria-controls` for you.
  */
 export function AccordionTrigger({ leadingIcon, children, ...props }: AccordionTriggerProps) {
   return (
@@ -95,7 +95,7 @@ export function AccordionPanel({ children, ...props }: AccordionPanelProps) {
         "h-[var(--accordion-panel-height)] overflow-hidden",
         "text-14 text-secondary",
         "transition-[height] duration-200 ease-out",
-        "data-[starting-style]:h-0 data-[ending-style]:h-0",
+        "data-[ending-style]:h-0 data-[starting-style]:h-0",
       )}
       {...props}
     >
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 8ee81dc7..4fb6325c 100644
--- a/packages/propel/src/components/avatar-group/avatar-group.stories.tsx
+++ b/packages/propel/src/components/avatar-group/avatar-group.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
+
 import { Avatar } from "../avatar/index";
 import { AvatarGroup } from "./index";
 
@@ -50,8 +51,8 @@ export const ThreeMembers: Story = {
 };
 
 /**
- * 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`.
+ * 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`.
  */
 export const OverflowCount: Story = {
   render: (args) => (
diff --git a/packages/propel/src/components/avatar-group/index.tsx b/packages/propel/src/components/avatar-group/index.tsx
index b6f4e798..ee12ed49 100644
--- a/packages/propel/src/components/avatar-group/index.tsx
+++ b/packages/propel/src/components/avatar-group/index.tsx
@@ -1,4 +1,5 @@
 import type * as React from "react";
+
 import { AvatarGroupContext, type AvatarMagnitude } from "../avatar";
 
 // Figma's "Avatar Groups" component only defines three sizes (Small/Base/Large =
diff --git a/packages/propel/src/components/avatar/avatar.stories.tsx b/packages/propel/src/components/avatar/avatar.stories.tsx
index e1ccf386..dcfbca1a 100644
--- a/packages/propel/src/components/avatar/avatar.stories.tsx
+++ b/packages/propel/src/components/avatar/avatar.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
+
 import { AVATAR_TONES, Avatar, type AvatarMagnitude } from "./index";
 
 const MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
@@ -39,8 +40,8 @@ export const Magnitudes: Story = {
 };
 
 /**
- * The initials background follows `tone`. When `tone` is omitted it's derived
- * from `alt`, so every person gets a stable color automatically.
+ * The initials background follows `tone`. When `tone` is omitted it's derived from `alt`, so every
+ * person gets a stable color automatically.
  */
 export const Tones: Story = {
   args: { src: undefined },
@@ -69,12 +70,12 @@ export const States: Story = {
 };
 
 /**
- * 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 Tailwind + propel's tokens — a plain render would pass
- * even with no styles loaded. Tagged `!dev`/`!autodocs`/`!manifest` so it's hidden
- * from the sidebar, the docs page, and the AI/MCP manifest — it's a test canary,
- * not a designer- or agent-facing example — but still runs via the default `test` tag.
+ * 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
+ * Tailwind + propel's tokens — a plain render would pass even with no styles loaded. Tagged
+ * `!dev`/`!autodocs`/`!manifest` so it's hidden from the sidebar, the docs page, and the AI/MCP
+ * manifest — it's a test canary, not a designer- or agent-facing example — but still runs via the
+ * default `test` tag.
  */
 export const CssCheck: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/avatar/index.tsx b/packages/propel/src/components/avatar/index.tsx
index e29f67ad..8fe11dab 100644
--- a/packages/propel/src/components/avatar/index.tsx
+++ b/packages/propel/src/components/avatar/index.tsx
@@ -26,8 +26,8 @@ const avatarVariants = cva(
 export type AvatarMagnitude = NonNullable<VariantProps<typeof avatarVariants>["magnitude"]>;
 
 /**
- * Set by `AvatarGroup` to give every avatar inside it the same `magnitude`, so a
- * group stays consistently sized. An avatar's own `magnitude` prop takes precedence.
+ * Set by `AvatarGroup` to give every avatar inside it the same `magnitude`, so a group stays
+ * consistently sized. An avatar's own `magnitude` prop takes precedence.
  */
 export const AvatarGroupContext = React.createContext<AvatarMagnitude | undefined>(undefined);
 
@@ -47,9 +47,9 @@ export const initialsToneClass: Record<AvatarTone, string> = {
 };
 
 /**
- * Deterministically pick a tone from a seed (e.g. a name or user id) so the same
- * person always gets the same color — the "system picks it" behavior. Used as the
- * default when `tone` is not set; pass `tone` to override.
+ * Deterministically pick a tone from a seed (e.g. a name or user id) so the same person always gets
+ * the same color — the "system picks it" behavior. Used as the default when `tone` is not set; pass
+ * `tone` to override.
  */
 export function getAvatarTone(seed: string): AvatarTone {
   let hash = 0;
diff --git a/packages/propel/src/components/badge/badge.stories.tsx b/packages/propel/src/components/badge/badge.stories.tsx
index d6883838..2d42e6ab 100644
--- a/packages/propel/src/components/badge/badge.stories.tsx
+++ b/packages/propel/src/components/badge/badge.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check } from "lucide-react";
+
 import { iconControl } from "../../storybook/icon-control";
 import { Badge, type BadgeMagnitude, type BadgeTone } from "./index";
 
@@ -117,8 +118,8 @@ const PLAN_TONES = { paid: "brand", free: "grey" } as const satisfies Record<
 >;
 
 /**
- * The "Plan Badges" treatment: `paid` reads as a `brand`/upgrade accent, `free`
- * as neutral `grey`. These are plain Badge tones, shown here at every magnitude.
+ * The "Plan Badges" treatment: `paid` reads as a `brand`/upgrade accent, `free` as neutral `grey`.
+ * These are plain Badge tones, shown here at every magnitude.
  */
 export const PlanBadges: Story = {
   parameters: {
diff --git a/packages/propel/src/components/badge/index.tsx b/packages/propel/src/components/badge/index.tsx
index 62d02cdb..510cb6f1 100644
--- a/packages/propel/src/components/badge/index.tsx
+++ b/packages/propel/src/components/badge/index.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 // t-shirt scale by their label text size (S 12px, Base 13px, Large 14px), consistent
 // with how Avatar names its steps. Height/padding/radius track Figma per step.
 const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap font-medium leading-none",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 leading-none font-medium whitespace-nowrap",
   {
     variants: {
       magnitude: {
@@ -56,9 +56,9 @@ export type BadgeProps = Omit<React.ComponentProps<"span">, "className" | "style
   /** Size of the badge. */
   magnitude: BadgeMagnitude;
   /**
-   * Optional leading icon (e.g. a lucide icon), sized to the magnitude and tinted to
-   * the tone. Named `leadingIcon` (not `icon`) to match Button/Input and leave room
-   * for a future `trailingIcon`.
+   * Optional leading icon (e.g. a lucide icon), sized to the magnitude and tinted to the tone.
+   * Named `leadingIcon` (not `icon`) to match Button/Input and leave room for a future
+   * `trailingIcon`.
    */
   leadingIcon?: React.ReactNode;
 };
diff --git a/packages/propel/src/components/banner/banner.stories.tsx b/packages/propel/src/components/banner/banner.stories.tsx
index 1f0dca25..73e5119e 100644
--- a/packages/propel/src/components/banner/banner.stories.tsx
+++ b/packages/propel/src/components/banner/banner.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, fn } from "storybook/test";
-import { Button } from "../button/index";
+
 import { iconControl } from "../../storybook/icon-control";
+import { Button } from "../button/index";
 import { Banner, type BannerTone } from "./index";
 
 const TONES: BannerTone[] = ["neutral", "info", "accent", "warning", "danger"];
@@ -57,10 +58,9 @@ export const Variants: Story = {
 };
 
 /**
- * The full page banner from Figma (see the meta's design link): a message with trailing
- * actions and a dismiss control. `actions` takes any nodes, so the banner composes propel
- * `Button`s, here a ghost, a secondary, and a primary, matching the three buttons plus
- * the close in the design.
+ * The full page banner from Figma (see the meta's design link): a message with trailing actions and
+ * a dismiss control. `actions` takes any nodes, so the banner composes propel `Button`s, here a
+ * ghost, a secondary, and a primary, matching the three buttons plus the close in the design.
  */
 export const WithActions: Story = {
   parameters: { controls: { disable: true } },
@@ -94,10 +94,10 @@ export const Dismissible: Story = {
 };
 
 /**
- * Real interaction test: clicking the dismiss button invokes `onDismiss`. The spy
- * comes from a Storybook `fn()`; the button is queried by its `aria-label`. Tagged
- * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and AI
- * manifest, but still runs under the default `test` tag.
+ * Real interaction test: clicking the dismiss button invokes `onDismiss`. The spy comes from a
+ * Storybook `fn()`; the button is queried by its `aria-label`. Tagged
+ * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and AI manifest, but still
+ * runs under the default `test` tag.
  */
 export const DismissCallsHandler: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/banner/index.tsx b/packages/propel/src/components/banner/index.tsx
index 81c7b7ae..7a1a0497 100644
--- a/packages/propel/src/components/banner/index.tsx
+++ b/packages/propel/src/components/banner/index.tsx
@@ -25,12 +25,12 @@ const bannerVariants = cva("flex items-center overflow-clip", {
   // Per Figma the neutral page banner sits on the page surface, while the colored
   // tones use their soft tone surface; inline neutral uses the layered surface.
   compoundVariants: [
-    { variant: "page", tone: "neutral", class: "bg-surface-1 border-subtle" },
-    { variant: "inline", tone: "neutral", class: "bg-surface-2 border-subtle" },
-    { tone: "info", class: "bg-info-subtle border-info-subtle" },
-    { tone: "accent", class: "bg-accent-subtle border-accent-subtle" },
-    { tone: "warning", class: "bg-warning-subtle border-warning-subtle" },
-    { tone: "danger", class: "bg-danger-subtle border-danger-subtle" },
+    { variant: "page", tone: "neutral", class: "border-subtle bg-surface-1" },
+    { variant: "inline", tone: "neutral", class: "border-subtle bg-surface-2" },
+    { tone: "info", class: "border-info-subtle bg-info-subtle" },
+    { tone: "accent", class: "border-accent-subtle bg-accent-subtle" },
+    { tone: "warning", class: "border-warning-subtle bg-warning-subtle" },
+    { tone: "danger", class: "border-danger-subtle bg-danger-subtle" },
   ],
 });
 
@@ -84,9 +84,8 @@ export type BannerProps = Omit<React.ComponentProps<"div">, "className" | "style
   /** Figma Intent: the banner's meaning/color. */
   tone: BannerTone;
   /**
-   * Leading icon. Defaults to a tone-appropriate lucide icon; pass `null` to hide it.
-   * Named `leadingIcon` (not `icon`) to match Button/Input and leave room for a future
-   * `trailingIcon`.
+   * Leading icon. Defaults to a tone-appropriate lucide icon; pass `null` to hide it. Named
+   * `leadingIcon` (not `icon`) to match Button/Input and leave room for a future `trailingIcon`.
    */
   leadingIcon?: React.ReactNode;
   /** The banner's headline. Rendered as its own block above any `children` body. */
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
index c54cda3e..0c4f5513 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Layers } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
+
 import {
   Breadcrumb,
   BreadcrumbDropdown,
@@ -74,8 +75,8 @@ export const Default: Story = {
 };
 
 /**
- * When the trail is too long, collapse the middle crumbs behind a dropdown. The
- * ellipsis trigger opens a menu of the hidden crumbs.
+ * When the trail is too long, collapse the middle crumbs behind a dropdown. The ellipsis trigger
+ * opens a menu of the hidden crumbs.
  */
 export const WithDropdown: Story = {
   render: () => (
@@ -103,10 +104,9 @@ export const WithDropdown: Story = {
 };
 
 /**
- * Play test for the collapsed crumb: clicking the ellipsis trigger opens the
- * menu and its items become visible as `menuitem`s. Hidden from the sidebar,
- * docs, and the AI manifest — it's a behavior canary, not a designer example —
- * but still runs under the default `test` tag.
+ * Play test for the collapsed crumb: clicking the ellipsis trigger opens the menu and its items
+ * become visible as `menuitem`s. Hidden from the sidebar, docs, and the AI manifest — it's a
+ * behavior canary, not a designer example — but still runs under the default `test` tag.
  */
 export const DropdownInteraction: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -145,10 +145,10 @@ export const DropdownInteraction: Story = {
 };
 
 /**
- * A crumb that *is* a dropdown — the Figma "Dropdown" crumb. The crumb label opens a
- * menu to switch the current step between sibling pages/contexts (here, switching the
- * "Plane Design" project to a sibling project) without leaving the trail. The trailing
- * chevron points right and rotates down while the menu is open.
+ * A crumb that _is_ a dropdown — the Figma "Dropdown" crumb. The crumb label opens a menu to switch
+ * the current step between sibling pages/contexts (here, switching the "Plane Design" project to a
+ * sibling project) without leaving the trail. The trailing chevron points right and rotates down
+ * while the menu is open.
  */
 export const WithMenuCrumb: Story = {
   render: () => (
@@ -180,9 +180,9 @@ export const WithMenuCrumb: Story = {
 };
 
 /**
- * The menu crumb composes propel's `Dropdown` rows, so it supports the full row
- * vocabulary — here a single-select list (the current sibling carries `selected`,
- * showing the trailing check) for switching the active view.
+ * The menu crumb composes propel's `Dropdown` rows, so it supports the full row vocabulary — here a
+ * single-select list (the current sibling carries `selected`, showing the trailing check) for
+ * switching the active view.
  */
 export const MenuCrumbSelected: Story = {
   render: () => (
@@ -211,12 +211,11 @@ export const MenuCrumbSelected: Story = {
 };
 
 /**
- * Keyboard a11y canary for the breadcrumb (deferred from the keyboard pass). Tabs
- * through the crumbs — links are focusable, the current page is not — then drives the
- * menu crumb entirely from the keyboard: ArrowDown opens it, arrow-nav + Enter
- * selects, Escape closes and returns focus to the trigger. Hidden from the sidebar,
- * docs, and the AI manifest; runs under the default `test` tag. Flake-safe via
- * `waitFor` for the portaled menu opening/closing.
+ * Keyboard a11y canary for the breadcrumb (deferred from the keyboard pass). Tabs through the
+ * crumbs — links are focusable, the current page is not — then drives the menu crumb entirely from
+ * the keyboard: ArrowDown opens it, arrow-nav + Enter selects, Escape closes and returns focus to
+ * the trigger. Hidden from the sidebar, docs, and the AI manifest; runs under the default `test`
+ * tag. Flake-safe via `waitFor` for the portaled menu opening/closing.
  */
 export const KeyboardNavigation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/breadcrumb/index.tsx b/packages/propel/src/components/breadcrumb/index.tsx
index df4a8eb9..8a908076 100644
--- a/packages/propel/src/components/breadcrumb/index.tsx
+++ b/packages/propel/src/components/breadcrumb/index.tsx
@@ -2,6 +2,7 @@ import { Menu } from "@base-ui/react/menu";
 import { cva, cx } from "class-variance-authority";
 import { ChevronRight, Ellipsis } from "lucide-react";
 import * as React from "react";
+
 import { OverlayPanel } from "../../internal/overlay-panel";
 import {
   Dropdown,
@@ -23,7 +24,7 @@ import {
 // single-line flex row the box should hug the glyphs (`leading-none`) and `items-center`
 // does the vertical centering; `py-0.5` restores the crumb/hover-pill height.
 const crumbVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 font-medium leading-none text-tertiary",
+  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary",
   {
     variants: {
       // The hoverable crumbs (links, dropdown trigger) get the transparent-hover
@@ -39,9 +40,8 @@ const crumbVariants = cva(
 export type BreadcrumbProps = Omit<React.ComponentProps<"nav">, "className" | "style">;
 
 /**
- * Breadcrumb trail: a `<nav aria-label="Breadcrumb">` wrapping an ordered list.
- * Compose the trail from `BreadcrumbItem`s — the number of crumbs is content the
- * consumer provides, not a prop.
+ * Breadcrumb trail: a `<nav aria-label="Breadcrumb">` wrapping an ordered list. Compose the trail
+ * from `BreadcrumbItem`s — the number of crumbs is content the consumer provides, not a prop.
  */
 export function Breadcrumb({ children, ...props }: BreadcrumbProps) {
   return (
@@ -68,8 +68,8 @@ export function BreadcrumbLink(props: BreadcrumbLinkProps) {
 export type BreadcrumbPageProps = Omit<React.ComponentProps<"span">, "className" | "style">;
 
 /**
- * The current page — the last, non-navigable crumb. Marked `aria-current="page"`
- * so assistive tech announces it, and styled with the stronger `text/primary` token.
+ * The current page — the last, non-navigable crumb. Marked `aria-current="page"` so assistive tech
+ * announces it, and styled with the stronger `text/primary` token.
  */
 export function BreadcrumbPage(props: BreadcrumbPageProps) {
   return (
@@ -111,9 +111,8 @@ export type BreadcrumbDropdownProps = Omit<
 };
 
 /**
- * A collapsed/overflow crumb: an ellipsis trigger that opens a menu of the
- * crumbs hidden to save space. Built on Base UI's `Menu` so it's keyboard- and
- * screen-reader-accessible out of the box.
+ * A collapsed/overflow crumb: an ellipsis trigger that opens a menu of the crumbs hidden to save
+ * space. Built on Base UI's `Menu` so it's keyboard- and screen-reader-accessible out of the box.
  */
 export function BreadcrumbDropdown({
   children,
@@ -149,9 +148,9 @@ export type BreadcrumbDropdownItemProps = Omit<
 >;
 
 /**
- * A single item inside `BreadcrumbDropdown` — a thin wrapper over Base UI's
- * `Menu.Item` with propel's menu-row styling. Render a link inside it (or pass
- * `render`) to make the collapsed crumb navigable.
+ * A single item inside `BreadcrumbDropdown` — a thin wrapper over Base UI's `Menu.Item` with
+ * propel's menu-row styling. Render a link inside it (or pass `render`) to make the collapsed crumb
+ * navigable.
  */
 export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
   return (
@@ -163,13 +162,12 @@ export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
 }
 
 /**
- * A breadcrumb crumb that opens a dropdown menu — the Figma "Dropdown" property
- * of a breadcrumb crumb (default / hover / current). Unlike `BreadcrumbDropdown`
- * (the overflow ellipsis that hides middle crumbs), this is a *real* crumb in the
- * trail whose menu lets the user switch the current step between sibling pages or
- * contexts — e.g. jumping between projects, sub-pages, or views without leaving the
- * breadcrumb. It composes propel's `Dropdown`, so the portaled menu is keyboard- and
- * screen-reader-accessible.
+ * A breadcrumb crumb that opens a dropdown menu — the Figma "Dropdown" property of a breadcrumb
+ * crumb (default / hover / current). Unlike `BreadcrumbDropdown` (the overflow ellipsis that hides
+ * middle crumbs), this is a _real_ crumb in the trail whose menu lets the user switch the current
+ * step between sibling pages or contexts — e.g. jumping between projects, sub-pages, or views
+ * without leaving the breadcrumb. It composes propel's `Dropdown`, so the portaled menu is
+ * keyboard- and screen-reader-accessible.
  *
  * ```tsx
  * <BreadcrumbItem>
@@ -180,7 +178,7 @@ export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
  *       <BreadcrumbMenuItem render={<a href="#" />}>Plane Web</BreadcrumbMenuItem>
  *     </BreadcrumbMenuContent>
  *   </BreadcrumbMenu>
- * </BreadcrumbItem>
+ * </BreadcrumbItem>;
  * ```
  */
 export const BreadcrumbMenu = Dropdown;
@@ -197,14 +195,13 @@ export type BreadcrumbMenuTriggerProps = Omit<
 };
 
 /**
- * The crumb that opens the menu: a hoverable pill (icon + label) with a trailing
- * chevron. That chevron IS the breadcrumb chevron (the same glyph as
- * `BreadcrumbSeparator`): it points right when closed and rotates down
- * (`data-[popup-open]`) while the menu is open, matching the Figma "Dropdown" crumb's
- * default and hover/open states. Because it already serves as the divider to the next
- * crumb, do NOT place a `BreadcrumbSeparator` after a menu crumb, or it renders a
- * second, redundant arrow. It's the `Dropdown`/`Menu` trigger `<button>`, so it keeps
- * the menu's keyboard a11y (Enter / ArrowDown to open) out of the box.
+ * The crumb that opens the menu: a hoverable pill (icon + label) with a trailing chevron. That
+ * chevron IS the breadcrumb chevron (the same glyph as `BreadcrumbSeparator`): it points right when
+ * closed and rotates down (`data-[popup-open]`) while the menu is open, matching the Figma
+ * "Dropdown" crumb's default and hover/open states. Because it already serves as the divider to the
+ * next crumb, do NOT place a `BreadcrumbSeparator` after a menu crumb, or it renders a second,
+ * redundant arrow. It's the `Dropdown`/`Menu` trigger `<button>`, so it keeps the menu's keyboard
+ * a11y (Enter / ArrowDown to open) out of the box.
  */
 export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMenuTriggerProps) {
   return (
@@ -236,8 +233,8 @@ export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMe
 export type BreadcrumbMenuContentProps = DropdownContentProps;
 
 /**
- * The menu surface for a `BreadcrumbMenu` — propel's `DropdownContent`, portaled and
- * positioned under the crumb. Place `BreadcrumbMenuItem`s inside it.
+ * The menu surface for a `BreadcrumbMenu` — propel's `DropdownContent`, portaled and positioned
+ * under the crumb. Place `BreadcrumbMenuItem`s inside it.
  */
 export function BreadcrumbMenuContent(props: BreadcrumbMenuContentProps) {
   return <DropdownContent {...props} />;
@@ -246,9 +243,9 @@ export function BreadcrumbMenuContent(props: BreadcrumbMenuContentProps) {
 export type BreadcrumbMenuItemProps = DropdownItemProps;
 
 /**
- * A row in a `BreadcrumbMenu` — propel's `DropdownItem`. Render a link inside it (via
- * `render`) to make the sibling crumb navigable. `variant` is required (the Dropdown
- * row layout axis); use `"default"` for the single-line sibling list.
+ * A row in a `BreadcrumbMenu` — propel's `DropdownItem`. Render a link inside it (via `render`) to
+ * make the sibling crumb navigable. `variant` is required (the Dropdown row layout axis); use
+ * `"default"` for the single-line sibling list.
  */
 export function BreadcrumbMenuItem(props: BreadcrumbMenuItemProps) {
   return <DropdownItem {...props} />;
diff --git a/packages/propel/src/components/button/button.stories.tsx b/packages/propel/src/components/button/button.stories.tsx
index aa9d7c5d..68466269 100644
--- a/packages/propel/src/components/button/button.stories.tsx
+++ b/packages/propel/src/components/button/button.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Plus, Search, Settings } from "lucide-react";
 import { expect, fn } from "storybook/test";
+
 import { iconControl } from "../../storybook/icon-control";
 import { Button, type ButtonMagnitude, type ButtonVariant } from "./index";
 
@@ -48,8 +49,8 @@ export const Variants: Story = {
 };
 
 /**
- * Tone selects the palette: `neutral` (default) or `danger` (Figma "Error").
- * Danger is shown as a solid fill and a bordered outline.
+ * Tone selects the palette: `neutral` (default) or `danger` (Figma "Error"). Danger is shown as a
+ * solid fill and a bordered outline.
  */
 export const Tones: Story = {
   parameters: { controls: { disable: true } },
@@ -69,9 +70,9 @@ export const Tones: Story = {
 };
 
 /**
- * `emphasis` is link-only (Figma "Emphasis"): `solid` is the blue `link/primary`
- * affordance, `subtle` is the muted gray inline link (uses `text-secondary`).
- * Every non-link variant ignores it.
+ * `emphasis` is link-only (Figma "Emphasis"): `solid` is the blue `link/primary` affordance,
+ * `subtle` is the muted gray inline link (uses `text-secondary`). Every non-link variant ignores
+ * it.
  */
 export const LinkEmphasis: Story = {
   // Iterates `emphasis` (link-only, so `variant` is pinned to link) and labels each
@@ -146,9 +147,9 @@ export const Loading: Story = {
 };
 
 /**
- * Clicking a button fires `onClick`. 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 the default `test` tag.
+ * Clicking a button fires `onClick`. 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 the
+ * default `test` tag.
  */
 export const ClickFiresOnClick: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -161,8 +162,8 @@ export const ClickFiresOnClick: Story = {
 };
 
 /**
- * Tab moves focus onto the button, then **Enter** activates it (fires `onClick`).
- * Native `<button>` semantics — the test guards that the wrapper keeps them.
+ * Tab moves focus onto the button, then **Enter** activates it (fires `onClick`). Native `<button>`
+ * semantics — the test guards that the wrapper keeps them.
  */
 export const EnterActivates: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -202,8 +203,8 @@ export const DisabledBlocksClick: Story = {
 };
 
 /**
- * A `disabled` button is removed from the tab order: Tab does not land on it and
- * keyboard activation (Enter/Space) never fires `onClick`.
+ * A `disabled` button is removed from the tab order: Tab does not land on it and keyboard
+ * activation (Enter/Space) never fires `onClick`.
  */
 export const DisabledNotKeyboardActivatable: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -234,9 +235,9 @@ export const LoadingNotKeyboardActivatable: Story = {
 };
 
 /**
- * A `loading` button shows the spinner, is `aria-busy` + `aria-disabled`, and
- * blocks clicks — but stays a real, focusable button (NOT natively `disabled`)
- * so assistive tech can land on it and announce the busy state.
+ * A `loading` button shows the spinner, is `aria-busy` + `aria-disabled`, and blocks clicks — but
+ * stays a real, focusable button (NOT natively `disabled`) so assistive tech can land on it and
+ * announce the busy state.
  */
 export const LoadingBlocksClick: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/button/index.tsx b/packages/propel/src/components/button/index.tsx
index 2f41628f..bc899754 100644
--- a/packages/propel/src/components/button/index.tsx
+++ b/packages/propel/src/components/button/index.tsx
@@ -1,6 +1,7 @@
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { LoaderCircle } from "lucide-react";
 import * as React from "react";
+
 import { getLoadingButtonProps } from "../../internal/loading-button";
 import { nodeSlotClass } from "../../internal/node-slot";
 
@@ -13,7 +14,7 @@ export const buttonVariants = cva(
   // accent token, real disabled affordance, and a snug medium label.
   cx(
     "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-md font-medium",
-    "whitespace-nowrap outline-none transition-colors",
+    "whitespace-nowrap transition-colors outline-none",
     "focus-visible:ring-2 focus-visible:ring-accent-strong",
     "disabled:cursor-not-allowed aria-busy:cursor-default",
   ),
@@ -164,20 +165,19 @@ type ButtonOwnProps = {
   tone: ButtonTone;
   magnitude: ButtonMagnitude;
   /**
-   * Link-only: picks the `link` look. `solid` is the blue `link/primary` style;
-   * `subtle` is the muted gray inline link. Optional and additive — it only
-   * affects `variant="link"`, so it has no default and every other `variant`
-   * ignores it.
+   * Link-only: picks the `link` look. `solid` is the blue `link/primary` style; `subtle` is the
+   * muted gray inline link. Optional and additive — it only affects `variant="link"`, so it has no
+   * default and every other `variant` ignores it.
    */
   emphasis?: ButtonEmphasis;
   /**
-   * Node rendered before the label (inline-start). An icon, avatar, or any node;
-   * it is sized to the button's `--node-size`. Decorative, kept out of the name.
+   * Node rendered before the label (inline-start). An icon, avatar, or any node; it is sized to the
+   * button's `--node-size`. Decorative, kept out of the name.
    */
   inlineStartNode?: React.ReactNode;
   /**
-   * Node rendered after the label (inline-end). An icon, avatar, or any node; it is
-   * sized to the button's `--node-size`. Decorative, kept out of the name.
+   * Node rendered after the label (inline-end). An icon, avatar, or any node; it is sized to the
+   * button's `--node-size`. Decorative, kept out of the name.
    */
   inlineEndNode?: React.ReactNode;
   /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
@@ -188,11 +188,10 @@ export type ButtonProps = Omit<React.ComponentProps<"button">, "className" | "st
   ButtonOwnProps;
 
 /**
- * A plain accessible button built on propel's design tokens. Pick a look with
- * `variant` (Figma Type), select the error palette with `tone`, and size it with
- * `magnitude` — all required, so consumers choose explicitly. For
- * `variant="link"` only, optionally choose `solid` (blue) or `subtle` (gray)
- * with `emphasis`. Content — `children`, `inlineStartNode`/`inlineEndNode`,
+ * A plain accessible button built on propel's design tokens. Pick a look with `variant` (Figma
+ * Type), select the error palette with `tone`, and size it with `magnitude` — all required, so
+ * consumers choose explicitly. For `variant="link"` only, optionally choose `solid` (blue) or
+ * `subtle` (gray) with `emphasis`. Content — `children`, `inlineStartNode`/`inlineEndNode`,
  * `loading` — is not a variant.
  */
 export function Button({
diff --git a/packages/propel/src/components/calendar/calendar.stories.tsx b/packages/propel/src/components/calendar/calendar.stories.tsx
index fa560bdb..101eb7b7 100644
--- a/packages/propel/src/components/calendar/calendar.stories.tsx
+++ b/packages/propel/src/components/calendar/calendar.stories.tsx
@@ -2,6 +2,7 @@ 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").
@@ -22,8 +23,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Single-date selection. The picker is controlled here so clicking a day updates
- * the highlighted selection.
+ * Single-date selection. The picker is controlled here so clicking a day updates the highlighted
+ * selection.
  */
 export const Default: Story = {
   render: () => {
@@ -40,8 +41,8 @@ export const Default: Story = {
 };
 
 /**
- * Range selection (`mode="range"`): the two endpoints get the solid accent fill
- * and the days between them get the soft in-range background.
+ * 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: () => {
@@ -56,8 +57,8 @@ export const RangeSelection: Story = {
 };
 
 /**
- * Some days are disabled (here: weekends) and cannot be selected. Disabled days
- * render in muted text.
+ * Some days are disabled (here: weekends) and cannot be selected. Disabled days render in muted
+ * text.
  */
 export const WithDisabledDays: Story = {
   render: () => {
@@ -75,10 +76,10 @@ export const WithDisabledDays: Story = {
 };
 
 /**
- * Behavior tests: the month grid renders day buttons, clicking a day selects it,
- * and a disabled day stays unselectable. Tagged out of the sidebar/docs/manifest
- * — it's a test canary, not a designer- or agent-facing example — but still runs
- * under the default `test` tag. A fixed `defaultMonth` keeps the grid deterministic.
+ * 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"],
@@ -121,11 +122,11 @@ export const Behavior: Story = {
 };
 
 /**
- * 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.
+ * 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"],
diff --git a/packages/propel/src/components/calendar/index.tsx b/packages/propel/src/components/calendar/index.tsx
index 5a08bae1..7286f0cd 100644
--- a/packages/propel/src/components/calendar/index.tsx
+++ b/packages/propel/src/components/calendar/index.tsx
@@ -1,6 +1,7 @@
 import { cx } from "class-variance-authority";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker, type DayPickerProps } from "react-day-picker";
+
 import { surfaceVariants } from "../../internal/surface";
 
 // Propel-token class map for react-day-picker's UI parts. We never import its
@@ -67,9 +68,9 @@ const calendarClassNames: Partial<NonNullable<DayPickerProps["classNames"]>> = {
 };
 
 /**
- * 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.
+ * 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
@@ -78,10 +79,9 @@ type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K>
 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.
+ * A date picker built on react-day-picker and styled entirely with propel tokens. Supports `single`
+ * and `range` selection via the `mode` prop and is fully keyboard- and screen-reader-accessible
+ * (react-day-picker owns the grid semantics). Pass `selected`/`onSelect` to control the selection.
  */
 export function Calendar(props: CalendarProps) {
   return (
diff --git a/packages/propel/src/components/checkbox/checkbox.stories.tsx b/packages/propel/src/components/checkbox/checkbox.stories.tsx
index af8b7264..f23abd35 100644
--- a/packages/propel/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Repeat } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent } from "storybook/test";
+
 import { Checkbox } from "./index";
 
 const meta = {
@@ -23,9 +24,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Interactive, label-less checkbox — just the box. Toggle it from the controls
- * or by clicking. With no visible `label`, the accessible name comes from
- * `aria-label`.
+ * Interactive, label-less checkbox — just the box. Toggle it from the controls or by clicking. With
+ * no visible `label`, the accessible name comes from `aria-label`.
  */
 export const Default: Story = {
   play: async ({ canvas, userEvent }) => {
@@ -60,9 +60,8 @@ export const States: Story = {
 };
 
 /**
- * Label-less usage: omit `label` to render the bare box. Give it an accessible
- * name with `aria-label` (or `aria-labelledby`) — e.g. a checkbox in a table
- * row that selects the row.
+ * Label-less usage: omit `label` to render the bare box. Give it an accessible name with
+ * `aria-label` (or `aria-labelledby`) — e.g. a checkbox in a table row that selects the row.
  */
 export const WithoutLabel: Story = {
   parameters: { controls: { disable: true } },
@@ -76,8 +75,8 @@ export const WithLabel: Story = {
 };
 
 /**
- * An optional `leadingIcon` sits between the box and the label, matching the Figma
- * "checkbox with label" icon slot.
+ * An optional `leadingIcon` sits between the box and the label, matching the Figma "checkbox with
+ * label" icon slot.
  */
 export const WithIcon: Story = {
   parameters: { controls: { disable: true } },
@@ -101,8 +100,8 @@ export const Indeterminate: Story = {
 };
 
 /**
- * The Figma "Error" state. The danger tone only colors the *unchecked* border
- * red; once checked, the fill is the same accent blue as every other tone.
+ * The Figma "Error" state. The danger tone only colors the _unchecked_ border red; once checked,
+ * the fill is the same accent blue as every other tone.
  */
 export const Error: Story = {
   parameters: { controls: { disable: true } },
@@ -124,10 +123,10 @@ export const Error: Story = {
 };
 
 /**
- * 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 checkbox). Tagged out of the sidebar/docs/manifest — it's a
- * behavior test — but still runs under the default `test` tag.
+ * 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
+ * checkbox). Tagged out of the sidebar/docs/manifest — it's a behavior test — but still runs under
+ * the default `test` tag.
  */
 export const KeyboardToggle: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -155,14 +154,14 @@ export const KeyboardToggle: Story = {
 };
 
 /**
- * Regression test for the box-shift fix (the `align-top` change). A bare
- * `inline-flex` box baseline-aligns to its line box differently when empty vs.
- * when it contains the check/dash indicator, which used to nudge the box down
- * ~2px on toggle. This asserts the box's `getBoundingClientRect()` is identical
- * across unchecked / checked / indeterminate so that shift can't regress.
+ * Regression test for the box-shift fix (the `align-top` change). A bare `inline-flex` box
+ * baseline-aligns to its line box differently when empty vs. when it contains the check/dash
+ * indicator, which used to nudge the box down ~2px on toggle. This asserts the box's
+ * `getBoundingClientRect()` is identical across unchecked / checked / indeterminate so that shift
+ * can't regress.
  *
- * Tagged `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs,
- * and the AI/MCP manifest, but still runs under the default `test` tag.
+ * Tagged `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and the AI/MCP
+ * manifest, but still runs under the default `test` tag.
  */
 export const BoxDoesNotShiftOnToggle: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -215,9 +214,9 @@ export const BoxDoesNotShiftOnToggle: Story = {
 };
 
 /**
- * Pure interaction test: a disabled checkbox does not toggle when clicked.
- * Tagged `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs,
- * and the AI/MCP manifest, but still runs under the default `test` tag.
+ * Pure interaction test: a disabled checkbox does not toggle when clicked. Tagged
+ * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and the AI/MCP manifest, but
+ * still runs under the default `test` tag.
  */
 export const DisabledDoesNotToggle: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/checkbox/index.tsx b/packages/propel/src/components/checkbox/index.tsx
index 77a26314..d0dda1d9 100644
--- a/packages/propel/src/components/checkbox/index.tsx
+++ b/packages/propel/src/components/checkbox/index.tsx
@@ -14,7 +14,7 @@ const checkboxVariants = cva(
     // surrounding text differently; pinning the alignment makes the box geometry
     // identical across unchecked / checked / indeterminate (no shift).
     "inline-flex size-4 shrink-0 items-center justify-center rounded-sm border-sm align-top",
-    "outline-none transition-colors",
+    "transition-colors outline-none",
     "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-1",
     // Unchecked: just the tone-specific border (see the `tone` variants).
     // Checked / indeterminate: the accent-primary fill is identical for every
@@ -70,10 +70,10 @@ export type CheckboxVisualProps = {
 
 /**
  * A purely presentational copy of the `Checkbox` box — same tokens and states, but a
- * non-interactive `<span>` with no `role`/focus. Use it when a checkbox *appearance*
- * is needed inside another interactive control (e.g. a menu `menuitemcheckbox` row),
- * where nesting a real checkbox would be an ARIA `nested-interactive` violation. The
- * parent control owns the state and the a11y semantics.
+ * non-interactive `<span>` with no `role`/focus. Use it when a checkbox _appearance_ is needed
+ * inside another interactive control (e.g. a menu `menuitemcheckbox` row), where nesting a real
+ * checkbox would be an ARIA `nested-interactive` violation. The parent control owns the state and
+ * the a11y semantics.
  */
 export function CheckboxVisual({ tone, checked, indeterminate, disabled }: CheckboxVisualProps) {
   return (
@@ -98,16 +98,15 @@ export type CheckboxProps = Omit<
   /** Resting color of the box. `danger` is the Figma "Error" state. */
   tone: CheckboxTone;
   /**
-   * Optional text shown beside the box; the whole row becomes the clickable
-   * label. Omit it for a bare checkbox (just the box) — in that case give the
-   * box an accessible name with `aria-label` or `aria-labelledby`.
+   * Optional text shown beside the box; the whole row becomes the clickable label. Omit it for a
+   * bare checkbox (just the box) — in that case give the box an accessible name with `aria-label`
+   * or `aria-labelledby`.
    */
   label?: React.ReactNode;
   /**
-   * Optional icon shown between the box and the label, matching the Figma "checkbox
-   * with label" icon slot. Only rendered when `label` is present. Named `leadingIcon`
-   * (not `icon`) to match Button/Input, so a `trailingIcon` can be added later without
-   * a breaking rename.
+   * Optional icon shown between the box and the label, matching the Figma "checkbox with label"
+   * icon slot. Only rendered when `label` is present. Named `leadingIcon` (not `icon`) to match
+   * Button/Input, so a `trailingIcon` can be added later without a breaking rename.
    */
   leadingIcon?: React.ReactNode;
 };
diff --git a/packages/propel/src/components/dropdown/dropdown.stories.tsx b/packages/propel/src/components/dropdown/dropdown.stories.tsx
index 9fb70620..2fe2cab5 100644
--- a/packages/propel/src/components/dropdown/dropdown.stories.tsx
+++ b/packages/propel/src/components/dropdown/dropdown.stories.tsx
@@ -21,6 +21,7 @@ import {
 } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
+
 import { Avatar } from "../avatar/index";
 import { Badge } from "../badge/index";
 import {
@@ -141,9 +142,9 @@ const STATUSES = [
 // Priority glyphs (Figma "Priority" demo).
 const PRIORITIES = [
   { key: "urgent", label: "Urgent", icon: <span className="text-12">⛔</span> },
-  { key: "high", label: "High", icon: <SignalHigh className="size-4 text-orange-500" /> },
-  { key: "medium", label: "Medium", icon: <SignalMedium className="size-4 text-amber-500" /> },
-  { key: "low", label: "Low", icon: <SignalLow className="size-4 text-blue-500" /> },
+  { key: "high", label: "High", icon: <SignalHigh className="text-orange-500 size-4" /> },
+  { key: "medium", label: "Medium", icon: <SignalMedium className="text-amber-500 size-4" /> },
+  { key: "low", label: "Low", icon: <SignalLow className="text-blue-500 size-4" /> },
   { key: "none", label: "None", icon: <span className="text-tertiary">—</span> },
 ] as const;
 
@@ -189,8 +190,8 @@ function initials(name: string) {
 }
 
 /**
- * Demo 1 — **Status**. Single-select with status icons, a sticky search header, and
- * a leading checkmark on the selected row only.
+ * Demo 1 — **Status**. Single-select with status icons, a sticky search header, and a leading
+ * checkmark on the selected row only.
  */
 export const Status: Story = {
   render: function StatusStory() {
@@ -234,10 +235,10 @@ export const Status: Story = {
 };
 
 /**
- * Demo 2 — **Labels**. Multi-select: each row is a `DropdownCheckboxItem` (the propel
- * `Checkbox` as the leading control) plus a color swatch, with a search header. When
- * the typed query has no exact match, an "Add label" option (Figma `64-626`) appears,
- * separated from the search by a single divider line.
+ * Demo 2 — **Labels**. Multi-select: each row is a `DropdownCheckboxItem` (the propel `Checkbox` as
+ * the leading control) plus a color swatch, with a search header. When the typed query has no exact
+ * match, an "Add label" option (Figma `64-626`) appears, separated from the search by a single
+ * divider line.
  */
 export const Labels: Story = {
   render: function LabelsStory() {
@@ -302,8 +303,8 @@ export const Labels: Story = {
 };
 
 /**
- * Demo 3 — **ActionMenu**. Icon items, a trailing keyboard shortcut (⌘L), a disabled
- * item with a description, a destructive Delete, and separators between groups.
+ * Demo 3 — **ActionMenu**. Icon items, a trailing keyboard shortcut (⌘L), a disabled item with a
+ * description, a destructive Delete, and separators between groups.
  */
 export const ActionMenu: Story = {
   render: () => (
@@ -390,8 +391,8 @@ export const ActionMenu: Story = {
 };
 
 /**
- * Demo 4 — **Description**. Single-select with a two-line label + muted description,
- * laid out in a wider menu.
+ * Demo 4 — **Description**. Single-select with a two-line label + muted description, laid out in a
+ * wider menu.
  */
 export const Description: Story = {
   render: function DescriptionStory() {
@@ -437,8 +438,8 @@ export const Description: Story = {
 };
 
 /**
- * Demo 5 — **Assignees**. Multi-select: a `DropdownCheckboxItem` (propel `Checkbox`)
- * with a propel `Avatar` as the leading content, a search header, and a disabled row.
+ * Demo 5 — **Assignees**. Multi-select: a `DropdownCheckboxItem` (propel `Checkbox`) with a propel
+ * `Avatar` as the leading content, a search header, and a disabled row.
  */
 export const Assignees: Story = {
   render: function AssigneesStory() {
@@ -485,8 +486,8 @@ export const Assignees: Story = {
 };
 
 /**
- * Demo 6 — **LanguagePicker**. Single-select; each row pairs a label with muted
- * secondary text inline (the English name), a search header, and a selected checkmark.
+ * Demo 6 — **LanguagePicker**. Single-select; each row pairs a label with muted secondary text
+ * inline (the English name), a search header, and a selected checkmark.
  */
 export const LanguagePicker: Story = {
   render: function LanguagePickerStory() {
@@ -536,8 +537,8 @@ export const LanguagePicker: Story = {
 };
 
 /**
- * Demo 7 — **Priority**. Multi-select: a `DropdownCheckboxItem` (propel `Checkbox`)
- * with a leading priority glyph, plus a search header.
+ * Demo 7 — **Priority**. Multi-select: a `DropdownCheckboxItem` (propel `Checkbox`) with a leading
+ * priority glyph, plus a search header.
  */
 export const Priority: Story = {
   render: function PriorityStory() {
@@ -581,12 +582,11 @@ export const Priority: Story = {
 const VIEW_ALL_PREVIEW = 2;
 
 /**
- * Regression — **CheckedFillVisible**. Locks in the fix for the invisible
- * checked checkbox: a tone-less `CheckboxVisual` (as rendered by
- * `DropdownCheckboxItem`) used to inherit no fill, so the white check sat on a
- * transparent box and disappeared. Toggling a row to CHECKED must give its box a
- * VISIBLE `bg-accent-primary` fill — a non-transparent background-color equal to
- * the accent-primary token. Not a documented demo; this is a test-only fixture.
+ * Regression — **CheckedFillVisible**. Locks in the fix for the invisible checked checkbox: a
+ * tone-less `CheckboxVisual` (as rendered by `DropdownCheckboxItem`) used to inherit no fill, so
+ * the white check sat on a transparent box and disappeared. Toggling a row to CHECKED must give its
+ * box a VISIBLE `bg-accent-primary` fill — a non-transparent background-color equal to the
+ * accent-primary token. Not a documented demo; this is a test-only fixture.
  */
 export const CheckedFillVisible: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -650,11 +650,11 @@ export const CheckedFillVisible: Story = {
 };
 
 /**
- * Demo 8 — **Filters**. Multi-select across several titled, collapsible sections
- * (Priority, State, Assignee, …). Each item carries a leading icon; a chevron on the
- * heading collapses/expands the category; categories are separated by a divider; and
- * a long category previews only its first few rows with a "View all" toggle that
- * expands the remaining rows inline (and collapses back to "Show less").
+ * Demo 8 — **Filters**. Multi-select across several titled, collapsible sections (Priority, State,
+ * Assignee, …). Each item carries a leading icon; a chevron on the heading collapses/expands the
+ * category; categories are separated by a divider; and a long category previews only its first few
+ * rows with a "View all" toggle that expands the remaining rows inline (and collapses back to "Show
+ * less").
  */
 export const Filters: Story = {
   render: function FiltersStory() {
@@ -802,8 +802,8 @@ export const Filters: Story = {
 };
 
 /**
- * Demo 9 — **EmptyState**. Searching filters the list; when nothing matches, the menu
- * shows a "No matching results" message instead of items.
+ * Demo 9 — **EmptyState**. Searching filters the list; when nothing matches, the menu shows a "No
+ * matching results" message instead of items.
  */
 export const EmptyState: Story = {
   render: function EmptyStateStory() {
@@ -850,8 +850,8 @@ export const EmptyState: Story = {
 };
 
 /**
- * Demo 10 — **Submenu**. Rows carry a trailing count `Badge` and a chevron; hovering
- * one opens a nested submenu of options (built on `DropdownSub`).
+ * Demo 10 — **Submenu**. Rows carry a trailing count `Badge` and a chevron; hovering one opens a
+ * nested submenu of options (built on `DropdownSub`).
  */
 export const Submenu: Story = {
   parameters: {
diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
index f48473e5..b08a2144 100644
--- a/packages/propel/src/components/dropdown/index.tsx
+++ b/packages/propel/src/components/dropdown/index.tsx
@@ -2,13 +2,14 @@ import { Menu } from "@base-ui/react/menu";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { Check, ChevronRight, Search } from "lucide-react";
 import * as React from "react";
+
 import { nodeSlotClass } from "../../internal/node-slot";
 import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
 import { CheckboxVisual } from "../checkbox/index";
 
 /**
- * The dropdown menu root — a Base UI `Menu.Root`. Holds open state and wires the
- * trigger to the content. Compose it with `DropdownTrigger` + `DropdownContent`:
+ * The dropdown menu root — a Base UI `Menu.Root`. Holds open state and wires the trigger to the
+ * content. Compose it with `DropdownTrigger` + `DropdownContent`:
  *
  * ```tsx
  * <Dropdown>
@@ -18,7 +19,7 @@ import { CheckboxVisual } from "../checkbox/index";
  *     <DropdownSeparator />
  *     <DropdownItem label="Delete" />
  *   </DropdownContent>
- * </Dropdown>
+ * </Dropdown>;
  * ```
  */
 type BaseMenuRootProps = React.ComponentProps<typeof Menu.Root>;
@@ -34,8 +35,9 @@ export type DropdownProps = Omit<
   /** Called with the next open state when the menu opens or closes. */
   onOpenChange?: BaseMenuRootProps["onOpenChange"];
   /**
-   * Modal behavior while open: `true` locks page scroll and blocks outside pointer
-   * interaction. @default false
+   * Modal behavior while open: `true` locks page scroll and blocks outside pointer interaction.
+   *
+   * @default false
    */
   modal?: BaseMenuRootProps["modal"];
   /** The trigger and menu surface (`DropdownTrigger`, `DropdownContent`). */
@@ -52,8 +54,8 @@ export type DropdownTriggerProps = Omit<
 >;
 
 /**
- * The element that opens the menu. Renders a `<button>` by default; pass `render`
- * to project the trigger onto your own element (e.g. an icon button).
+ * The element that opens the menu. Renders a `<button>` by default; pass `render` to project the
+ * trigger onto your own element (e.g. an icon button).
  */
 export function DropdownTrigger(props: DropdownTriggerProps) {
   return <Menu.Trigger {...props} />;
@@ -77,29 +79,29 @@ export type DropdownContentProps = Omit<
   /** Alignment of the menu relative to the trigger along `side`. @default "start" */
   align?: React.ComponentProps<typeof Menu.Positioner>["align"];
   /**
-   * Fixed menu width. `anchor` matches the trigger; `sm`/`md`/`lg` are the picker
-   * widths from Figma (256 / 288 / 384px). @default "anchor"
+   * Fixed menu width. `anchor` matches the trigger; `sm`/`md`/`lg` are the picker widths from Figma
+   * (256 / 288 / 384px). @default "anchor"
    */
   width?: DropdownContentWidth;
   /**
-   * A sticky `DropdownSearch` pinned above the list, *outside* the `role="menu"`
-   * element so the menu only contains menu items (ARIA `aria-required-children`).
+   * A sticky `DropdownSearch` pinned above the list, _outside_ the `role="menu"` element so the
+   * menu only contains menu items (ARIA `aria-required-children`).
    */
   search?: React.ReactNode;
   /**
-   * A sticky `DropdownFooter` pinned below the list, *outside* the `role="menu"`
-   * element (same ARIA reasoning as `search`).
+   * A sticky `DropdownFooter` pinned below the list, _outside_ the `role="menu"` element (same ARIA
+   * reasoning as `search`).
    */
   footer?: React.ReactNode;
 };
 
 /**
- * The menu surface. Bundles Base UI's `Portal` + `Positioner` + `Popup` so the menu
- * renders in a portal, positioned against the trigger, with propel's popover styling.
- * Place `DropdownItem`/`DropdownCheckboxItem`/`DropdownSeparator`/`DropdownGroup` as
- * children — they become the `role="menu"` list. Non-menuitem chrome (a search input,
- * a footer note) must go through the `search`/`footer` props so it sits outside the
- * menu role and keeps the surface ARIA-valid.
+ * The menu surface. Bundles Base UI's `Portal` + `Positioner` + `Popup` so the menu renders in a
+ * portal, positioned against the trigger, with propel's popover styling. Place
+ * `DropdownItem`/`DropdownCheckboxItem`/`DropdownSeparator`/`DropdownGroup` as children — they
+ * become the `role="menu"` list. Non-menuitem chrome (a search input, a footer note) must go
+ * through the `search`/`footer` props so it sits outside the menu role and keeps the surface
+ * ARIA-valid.
  */
 export function DropdownContent({
   children,
@@ -132,7 +134,7 @@ const dropdownItemVariants = cva(
   cx(
     // Items are 34px tall (Figma); `rounded-md` radius per design. `--node-size` sizes
     // the icons dropped into the inline-start/end node slots (16px), like Button.
-    "group/item flex w-full select-none gap-2 rounded-md px-2 text-13 outline-none [--node-size:1rem]",
+    "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",
   ),
@@ -164,15 +166,14 @@ export type DropdownItemProps = Omit<
   "className" | "style" | "label"
 > & {
   /**
-   * Row layout (required). `default` is a single line; `with-description` stacks a
-   * muted second line under the label. Selected/disabled are state props, not
-   * variants.
+   * Row layout (required). `default` is a single line; `with-description` stacks a muted second
+   * line under the label. Selected/disabled are state props, not variants.
    */
   variant: DropdownItemVariant;
   /**
-   * Leading content before the label — an icon (sized to 16px), or a full-size control
-   * such as a `Checkbox`, `Radio`, `Avatar`, or a color swatch. Single-select rows
-   * should use `selected` instead. (Logical node slot, like Button's `inlineStartNode`.)
+   * Leading content before the label — an icon (sized to 16px), or a full-size control such as a
+   * `Checkbox`, `Radio`, `Avatar`, or a color swatch. Single-select rows should use `selected`
+   * instead. (Logical node slot, like Button's `inlineStartNode`.)
    */
   inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
@@ -180,34 +181,34 @@ export type DropdownItemProps = Omit<
   /** Muted secondary line under the label (use with `variant="with-description"`). */
   description?: React.ReactNode;
   /**
-   * Muted text shown inline after the label (e.g. a language's English name). Sits
-   * between the label and the trailing node, on the same line as the label.
+   * Muted text shown inline after the label (e.g. a language's English name). Sits between the
+   * label and the trailing node, on the same line as the label.
    */
   secondaryText?: React.ReactNode;
   /**
-   * Trailing content after the label — a `Badge` count, a keyboard shortcut, value
-   * text, or an icon (sized to 16px). (Logical node slot, like Button's `inlineEndNode`.)
+   * Trailing content after the label — a `Badge` count, a keyboard shortcut, value text, or an icon
+   * (sized to 16px). (Logical node slot, like Button's `inlineEndNode`.)
    */
   inlineEndNode?: React.ReactNode;
   /**
-   * Single-select selected state: keeps the row's own icon and marks the selection
-   * with a trailing checkmark (the row's icon is never replaced). Distinct from the
-   * multi-select `DropdownCheckboxItem`, which shows a `Checkbox` on every row.
+   * Single-select selected state: keeps the row's own icon and marks the selection with a trailing
+   * checkmark (the row's icon is never replaced). Distinct from the multi-select
+   * `DropdownCheckboxItem`, which shows a `Checkbox` on every row.
    */
   selected?: boolean;
   /**
-   * Row emphasis. `default` is a normal selectable row (highlights on hover/keyboard
-   * focus). `link` is a "View all"-style affordance — a pointer cursor and no hover
-   * background. @default "default"
+   * Row emphasis. `default` is a normal selectable row (highlights on hover/keyboard focus). `link`
+   * is a "View all"-style affordance — a pointer cursor and no hover background. @default
+   * "default"
    */
   emphasis?: DropdownItemEmphasis;
 };
 
 /**
- * A selectable menu row: an optional `inlineStartNode` (icon or full-size control) +
- * label (+ optional description / inline secondary text / `inlineEndNode`) — all of it
- * content, laid out by `variant`. Closes the menu when clicked (Base UI default). Pass
- * `selected` for the single-select trailing-checkmark pattern.
+ * A selectable menu row: an optional `inlineStartNode` (icon or full-size control) + label (+
+ * optional description / inline secondary text / `inlineEndNode`) — all of it content, laid out by
+ * `variant`. Closes the menu when clicked (Base UI default). Pass `selected` for the single-select
+ * trailing-checkmark pattern.
  */
 export function DropdownItem({
   variant,
@@ -257,9 +258,9 @@ export type DropdownCheckboxItemProps = Omit<
   "className" | "style" | "label"
 > & {
   /**
-   * Leading content shown after the checkbox — an icon (16px), a color swatch, an
-   * `Avatar`, or a priority glyph (Avatar for assignees, swatch for labels, etc.).
-   * (Logical node slot, like Button's `inlineStartNode`.)
+   * Leading content shown after the checkbox — an icon (16px), a color swatch, an `Avatar`, or a
+   * priority glyph (Avatar for assignees, swatch for labels, etc.). (Logical node slot, like
+   * Button's `inlineStartNode`.)
    */
   inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
@@ -269,11 +270,11 @@ export type DropdownCheckboxItemProps = Omit<
 };
 
 /**
- * A toggleable multi-select menu row. The leading control is the propel `Checkbox`
- * component (driven by this row's Base UI checkbox-item state, so the box reflects
- * `checked`/`indeterminate`/`disabled` without owning its own state). The row keeps
- * the `role="menuitemcheckbox"` a11y semantics and stays open on click. Control it
- * with `checked` + `onCheckedChange`, or leave it uncontrolled with `defaultChecked`.
+ * A toggleable multi-select menu row. The leading control is the propel `Checkbox` component
+ * (driven by this row's Base UI checkbox-item state, so the box reflects
+ * `checked`/`indeterminate`/`disabled` without owning its own state). The row keeps the
+ * `role="menuitemcheckbox"` a11y semantics and stays open on click. Control it with `checked` +
+ * `onCheckedChange`, or leave it uncontrolled with `defaultChecked`.
  */
 export function DropdownCheckboxItem({
   inlineStartNode,
@@ -296,7 +297,7 @@ export function DropdownCheckboxItem({
   return (
     <Menu.CheckboxItem
       className={cx(
-        "group/item flex h-[34px] w-full cursor-default select-none items-center gap-2 rounded-md px-2 text-13 outline-none [--node-size:1rem]",
+        "group/item flex h-[34px] w-full cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
         "text-secondary",
         "data-highlighted:bg-layer-transparent-hover",
         "data-disabled:pointer-events-none data-disabled:text-disabled",
@@ -344,8 +345,8 @@ export type DropdownGroupProps = Omit<
 >;
 
 /**
- * Groups related items so a `DropdownLabel` can title them with the correct
- * accessibility relationship. Place a `DropdownLabel` first, then the items.
+ * Groups related items so a `DropdownLabel` can title them with the correct accessibility
+ * relationship. Place a `DropdownLabel` first, then the items.
  */
 export function DropdownGroup(props: DropdownGroupProps) {
   return <Menu.Group {...props} />;
@@ -356,18 +357,17 @@ export type DropdownLabelProps = Omit<
   "className" | "style"
 > & {
   /**
-   * Optional trailing content on the heading row — e.g. a "View all" link or a count.
-   * Sits at the end of the label line (the Figma "Dropdown header" trailing slot).
+   * Optional trailing content on the heading row — e.g. a "View all" link or a count. Sits at the
+   * end of the label line (the Figma "Dropdown header" trailing slot).
    */
   inlineEndNode?: React.ReactNode;
   children?: React.ReactNode;
 };
 
 /**
- * A non-interactive section heading for a group of items (the Figma "Dropdown
- * header": `text/12`, `text/tertiary`, title-case). Must be rendered inside a
- * `DropdownGroup`, as the first child, to label the items that follow it. Pass
- * `inlineEndNode` for a trailing "View all" link or count.
+ * A non-interactive section heading for a group of items (the Figma "Dropdown header": `text/12`,
+ * `text/tertiary`, title-case). Must be rendered inside a `DropdownGroup`, as the first child, to
+ * label the items that follow it. Pass `inlineEndNode` for a trailing "View all" link or count.
  */
 export function DropdownLabel({ inlineEndNode, children, ...props }: DropdownLabelProps) {
   return (
@@ -398,10 +398,10 @@ export type DropdownSearchProps = Omit<
 };
 
 /**
- * A sticky search input pinned to the top of a `DropdownContent`. Use it as the
- * first child of the content for filterable menus (Status, Labels, Assignees, …).
- * It keeps focus inside the menu and does not steal Base UI's typeahead because it
- * is a real text input. Drive filtering with `value` + `onValueChange`.
+ * A sticky search input pinned to the top of a `DropdownContent`. Use it as the first child of the
+ * content for filterable menus (Status, Labels, Assignees, …). It keeps focus inside the menu and
+ * does not steal Base UI's typeahead because it is a real text input. Drive filtering with `value`
+ * + `onValueChange`.
  */
 export function DropdownSearch({
   value,
@@ -430,8 +430,8 @@ export function DropdownSearch({
 export type DropdownFooterProps = Omit<React.ComponentProps<"div">, "className" | "style">;
 
 /**
- * A non-interactive footer pinned to the bottom of a `DropdownContent` — e.g.
- * "Type to add a new label." Render it as the last child of the content.
+ * A non-interactive footer pinned to the bottom of a `DropdownContent` — e.g. "Type to add a new
+ * label." Render it as the last child of the content.
  */
 export function DropdownFooter(props: DropdownFooterProps) {
   return (
@@ -443,8 +443,8 @@ export function DropdownFooter(props: DropdownFooterProps) {
 }
 
 /**
- * A submenu root. Wrap a `DropdownSubTrigger` + `DropdownSubContent` in it to nest
- * a second menu that opens from a row. Built on Base UI `Menu.SubmenuRoot`.
+ * A submenu root. Wrap a `DropdownSubTrigger` + `DropdownSubContent` in it to nest a second menu
+ * that opens from a row. Built on Base UI `Menu.SubmenuRoot`.
  */
 type BaseSubmenuRootProps = React.ComponentProps<typeof Menu.SubmenuRoot>;
 
@@ -479,9 +479,9 @@ export type DropdownSubTriggerProps = Omit<
 };
 
 /**
- * The row that opens a submenu. Looks like a `DropdownItem` with a trailing chevron;
- * pass `inlineEndNode` for a count `Badge` before the chevron. Must be rendered inside
- * a `DropdownSub`, paired with a `DropdownSubContent`.
+ * The row that opens a submenu. Looks like a `DropdownItem` with a trailing chevron; pass
+ * `inlineEndNode` for a count `Badge` before the chevron. Must be rendered inside a `DropdownSub`,
+ * paired with a `DropdownSubContent`.
  */
 export function DropdownSubTrigger({
   inlineStartNode,
@@ -493,7 +493,7 @@ export function DropdownSubTrigger({
   return (
     <Menu.SubmenuTrigger
       className={cx(
-        "group/item flex h-[34px] w-full cursor-default select-none items-center gap-2 rounded-md px-2 text-13 outline-none [--node-size:1rem]",
+        "group/item flex h-[34px] w-full cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
         "text-secondary",
         "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
         "data-disabled:pointer-events-none data-disabled:text-disabled",
@@ -512,8 +512,8 @@ export function DropdownSubTrigger({
 }
 
 /**
- * The floating surface for a submenu. Same styling as `DropdownContent` but defaults
- * to opening to the right (`side="right"`). Place submenu items inside it.
+ * The floating surface for a submenu. Same styling as `DropdownContent` but defaults to opening to
+ * the right (`side="right"`). Place submenu items inside it.
  */
 export function DropdownSubContent({
   children,
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 959882c6..495a7bb1 100644
--- a/packages/propel/src/components/icon-button/icon-button.stories.tsx
+++ b/packages/propel/src/components/icon-button/icon-button.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Plus } from "lucide-react";
 import { expect, fn } from "storybook/test";
+
 import { iconControl } from "../../storybook/icon-control";
 import { IconButton, type IconButtonMagnitude, type IconButtonVariant } from "./index";
 
@@ -33,9 +34,9 @@ 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}.
+ * Every Figma "Type" side by side. The neutral fills are `primary`/`secondary`/ `tertiary`/`ghost`;
+ * the two Error types are the `danger` tone of `primary` (Error fill) and `secondary` (Error
+ * outline) — see {@link Tones}.
  */
 export const Variants: Story = {
   argTypes: { variant: { control: false }, "aria-label": { control: false } },
@@ -49,8 +50,8 @@ export const Variants: Story = {
 };
 
 /**
- * Tone selects the palette: `neutral` (default) or `danger` (Figma "Error").
- * Danger shows as a solid fill (Error fill) and a bordered outline (Error outline).
+ * 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 } },
@@ -112,8 +113,8 @@ export const Disabled: Story = {
 
 /**
  * An IconButton exposes its `aria-label` as the accessible name. Tagged
- * `!dev`/`!autodocs`/`!manifest` so it's hidden from the sidebar, docs, and AI
- * manifest — it's a behavior test, not an example — but still runs under `test`.
+ * `!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"],
@@ -128,8 +129,8 @@ export const HasAccessibleName: Story = {
 };
 
 /**
- * Tab moves focus onto the icon button (queryable by its `aria-label`), then
- * **Enter** activates it (fires `onClick`).
+ * Tab moves focus onto the icon button (queryable by its `aria-label`), then **Enter** activates it
+ * (fires `onClick`).
  */
 export const EnterActivates: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -157,8 +158,8 @@ export const SpaceActivates: Story = {
 };
 
 /**
- * A `disabled` icon button is removed from the tab order: Tab does not land on it
- * and keyboard activation (Enter/Space) never fires `onClick`.
+ * A `disabled` icon button is removed from the tab order: Tab does not land on it and keyboard
+ * activation (Enter/Space) never fires `onClick`.
  */
 export const DisabledNotKeyboardActivatable: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/icon-button/index.tsx b/packages/propel/src/components/icon-button/index.tsx
index 111e4cfe..feb9d30e 100644
--- a/packages/propel/src/components/icon-button/index.tsx
+++ b/packages/propel/src/components/icon-button/index.tsx
@@ -1,6 +1,7 @@
 import { cx } from "class-variance-authority";
 import { LoaderCircle } from "lucide-react";
 import * as React from "react";
+
 import { getLoadingButtonProps } from "../../internal/loading-button";
 import { nodeSlotClass } from "../../internal/node-slot";
 import {
@@ -53,9 +54,9 @@ export type IconButtonProps = Omit<
 > & {
   variant: IconButtonVariant;
   /**
-   * The single node to render (an icon, an avatar, ...), sized to the button's
-   * `--node-size`. It is the button's only content, so it is `children`; decorative,
-   * the accessible name comes from `aria-label`.
+   * The single node to render (an icon, an avatar, ...), sized to the button's `--node-size`. It is
+   * the button's only content, so it is `children`; decorative, the accessible name comes from
+   * `aria-label`.
    */
   children: React.ReactNode;
   /** Required: icon-only buttons have no visible text, so they must be labeled. */
@@ -63,10 +64,10 @@ export type IconButtonProps = Omit<
 };
 
 /**
- * The icon-only form of {@link Button}: a square button with a single glyph and
- * no label. It shares Button's design tokens (`variant`/`tone`/`magnitude`) but
- * is its own component/export. There is no `link` icon button, so `variant`
- * excludes it. An `aria-label` is REQUIRED for the accessible name.
+ * The icon-only form of {@link Button}: a square button with a single glyph and no label. It shares
+ * Button's design tokens (`variant`/`tone`/`magnitude`) but is its own component/export. There is
+ * no `link` icon button, so `variant` excludes it. An `aria-label` is REQUIRED for the accessible
+ * name.
  */
 export function IconButton({
   children,
diff --git a/packages/propel/src/components/input/index.tsx b/packages/propel/src/components/input/index.tsx
index b01842fb..31e4819b 100644
--- a/packages/propel/src/components/input/index.tsx
+++ b/packages/propel/src/components/input/index.tsx
@@ -81,26 +81,23 @@ export type InputMagnitude = NonNullable<VariantProps<typeof labelVariants>["mag
 export type InputTone = "neutral" | "danger";
 
 /**
- * The box chrome shared by `Input` and `TextArea`: background and 1px border.
- * Horizontal padding is not part of the shared chrome -> each component adds it
- * itself (`Input` pads the box, `TextArea` pads the control; see the class
- * comment below). The border color is owned entirely by the `tone` variant
- * (rather than overriding a base color, which is order-fragile in Tailwind) so
- * the error treatment always wins:
+ * The box chrome shared by `Input` and `TextArea`: background and 1px border. Horizontal padding is
+ * not part of the shared chrome -> each component adds it itself (`Input` pads the box, `TextArea`
+ * pads the control; see the class comment below). The border color is owned entirely by the `tone`
+ * variant (rather than overriding a base color, which is order-fragile in Tailwind) so the error
+ * treatment always wins:
  *
- *   neutral → subtle border; hover darkens it; on `:focus-within` it becomes
- *             `accent-strong` plus a 2px accent ring at 20% opacity (Figma's
- *             "active" state: border-accent-strong + 0 0 0 2px rgba(accent,.2)).
- *             Hovering the active field must NOT change the chrome, so the accent
- *             border + resting background are re-asserted at the higher
- *             `:focus-within:hover` specificity, which beats the plain `:hover`
- *             styles when both apply (the ring is focus-only, so it already holds).
- *   danger  → `danger-strong` border at ALL times — resting, hover, and focus —
- *             with no accent ring (Figma's "error" state).
+ * Neutral → subtle border; hover darkens it; on `:focus-within` it becomes `accent-strong` plus a
+ * 2px accent ring at 20% opacity (Figma's "active" state: border-accent-strong + 0 0 0 2px
+ * rgba(accent,.2)). Hovering the active field must NOT change the chrome, so the accent border +
+ * resting background are re-asserted at the higher `:focus-within:hover` specificity, which beats
+ * the plain `:hover` styles when both apply (the ring is focus-only, so it already holds). danger →
+ * `danger-strong` border at ALL times — resting, hover, and focus — with no accent ring (Figma's
+ * "error" state).
  *
- * Disabled resets the border to subtle and removes hover/ring affordances. The
- * radius and vertical rhythm differ between Input and TextArea, so they are
- * passed in by each component rather than baked in here.
+ * Disabled resets the border to subtle and removes hover/ring affordances. The radius and vertical
+ * rhythm differ between Input and TextArea, so they are passed in by each component rather than
+ * baked in here.
  */
 const boxVariants = cva(
   cx(
@@ -249,11 +246,10 @@ function FieldHelperText({
 }
 
 /**
- * The shared field chrome, exposed as a compound so callers can build custom
- * controls (e.g. a Select) with the same label/helper/error treatment that
- * `Input` and `TextArea` use. `Field` itself is `Field.Root` (it groups the
- * parts); the label/control/helper/error parts hang off it and map onto Base
- * UI's `Field` parts.
+ * The shared field chrome, exposed as a compound so callers can build custom controls (e.g. a
+ * Select) with the same label/helper/error treatment that `Input` and `TextArea` use. `Field`
+ * itself is `Field.Root` (it groups the parts); the label/control/helper/error parts hang off it
+ * and map onto Base UI's `Field` parts.
  */
 export const Field = Object.assign(
   // The component is `Field.Root`, so `<Field>…</Field>` groups a custom field.
@@ -304,10 +300,10 @@ export type InputProps = Omit<FieldControlProps, "className" | "render" | "style
   };
 
 /**
- * Single-line text field built on Base UI `Field`. Supports leading/trailing
- * icon slots and a `horizontal` variant where the label sits beside the control.
- * States are element-driven (hover / focus / filled / disabled / invalid), not
- * props — only `tone="danger"` forces the error treatment.
+ * Single-line text field built on Base UI `Field`. Supports leading/trailing icon slots and a
+ * `horizontal` variant where the label sits beside the control. States are element-driven (hover /
+ * focus / filled / disabled / invalid), not props — only `tone="danger"` forces the error
+ * treatment.
  */
 export function Input({
   magnitude,
@@ -394,9 +390,8 @@ const textAreaMinHeight: Record<InputMagnitude, string> = {
 };
 
 /**
- * Multi-line text field built on Base UI `Field`, rendering the control as a
- * `<textarea>`. Vertical layout only (no `variant`); `resize-none` by default
- * with a magnitude-driven min-height.
+ * Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical
+ * layout only (no `variant`); `resize-none` by default with a magnitude-driven min-height.
  */
 export function TextArea({
   magnitude,
diff --git a/packages/propel/src/components/input/input.stories.tsx b/packages/propel/src/components/input/input.stories.tsx
index bfa22be3..d6e5984b 100644
--- a/packages/propel/src/components/input/input.stories.tsx
+++ b/packages/propel/src/components/input/input.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Mail, Search } from "lucide-react";
 import { expect, fn, userEvent } from "storybook/test";
+
 import { iconControl } from "../../storybook/icon-control";
 import { Field, Input, type InputMagnitude, TextArea } from "./index";
 
@@ -27,8 +28,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Vertical layout: the `description` sits directly below the label, and the `hint`
- * (helper text) sits below the control.
+ * Vertical layout: the `description` sits directly below the label, and the `hint` (helper text)
+ * sits below the control.
  */
 export const Default: Story = {
   args: {
@@ -54,9 +55,9 @@ export const Horizontal: Story = {
 };
 
 /**
- * The horizontal layout across every magnitude. The `description` stacks below the
- * label in the left column, the `hint` sits below the control, and the error state
- * (which overrides the hint) shows in danger.
+ * The horizontal layout across every magnitude. The `description` stacks below the label in the
+ * left column, the `hint` sits below the control, and the error state (which overrides the hint)
+ * shows in danger.
  */
 export const HorizontalShowcase: Story = {
   // Required axes for the args table; the custom `render` ignores them.
@@ -107,9 +108,9 @@ export const WithIcons: Story = {
 };
 
 /**
- * The element-driven states side by side. Hover/focus/filled aren't props —
- * they come from interacting with the control; `disabled` and the error
- * treatment (`tone="danger"`) are shown statically.
+ * The element-driven states side by side. Hover/focus/filled aren't props — they come from
+ * interacting with the control; `disabled` and the error treatment (`tone="danger"`) are shown
+ * statically.
  */
 export const States: Story = {
   // Required axes for the args table; the custom `render` ignores them.
@@ -192,9 +193,9 @@ export const TextAreaStory: Story = {
 };
 
 /**
- * `TextArea` across every magnitude (`md` / `lg` / `xl`). Magnitude steps the
- * value font-size (13 / 14 / 16) and the box min-height (82 / 100 / 100px); the
- * 12px side / 8px vertical padding and 8px radius stay constant (Figma).
+ * `TextArea` across every magnitude (`md` / `lg` / `xl`). Magnitude steps the value font-size (13 /
+ * 14 / 16) and the box min-height (82 / 100 / 100px); the 12px side / 8px vertical padding and 8px
+ * radius stay constant (Figma).
  */
 export const TextAreaMagnitudes: Story = {
   name: "TextArea Magnitudes",
@@ -216,9 +217,8 @@ export const TextAreaMagnitudes: Story = {
 };
 
 /**
- * Overflowing `TextArea` content scrolls with a native scrollbar that only
- * appears once the text exceeds the box (matching the Dropdown popup), rather
- * than reserving a permanent gutter.
+ * Overflowing `TextArea` content scrolls with a native scrollbar that only appears once the text
+ * exceeds the box (matching the Dropdown popup), rather than reserving a permanent gutter.
  */
 export const TextAreaScroll: Story = {
   name: "TextArea Scroll",
@@ -252,10 +252,10 @@ export const Error: Story = {
 };
 
 /**
- * RTL smoke check: the same stories rendered inside `dir="rtl"`. Text aligns to
- * the right, the leading (start) icon sits on the right edge and the trailing
- * (end) icon on the left, and the horizontal label sits to the right of its
- * control. Excluded from autodocs/manifest — it exists for visual review.
+ * RTL smoke check: the same stories rendered inside `dir="rtl"`. Text aligns to the right, the
+ * leading (start) icon sits on the right edge and the trailing (end) icon on the left, and the
+ * horizontal label sits to the right of its control. Excluded from autodocs/manifest — it exists
+ * for visual review.
  */
 export const RtlVerify: Story = {
   name: "RTL Verify",
@@ -349,8 +349,8 @@ export const LtrVerify: Story = {
 };
 
 /**
- * Typing into the control updates its value. Query by role (`textbox`) and drive
- * it with `userEvent`; an `onChange` spy proves the change handler fires.
+ * Typing into the control updates its value. Query by role (`textbox`) and drive it with
+ * `userEvent`; an `onChange` spy proves the change handler fires.
  */
 export const TypingUpdatesValue: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/nav-item/index.tsx b/packages/propel/src/components/nav-item/index.tsx
index 5bbf264f..445ac8a3 100644
--- a/packages/propel/src/components/nav-item/index.tsx
+++ b/packages/propel/src/components/nav-item/index.tsx
@@ -25,8 +25,8 @@ import * as React from "react";
 
 const navItemVariants = cva(
   cx(
-    "group/nav-item flex h-8 w-full items-center gap-2 rounded-lg pe-2 ps-2 text-start",
-    "bg-layer-transparent text-secondary outline-none transition-colors",
+    "group/nav-item flex h-8 w-full items-center gap-2 rounded-lg ps-2 pe-2 text-start",
+    "bg-layer-transparent text-secondary transition-colors outline-none",
     "cursor-pointer select-none",
     "hover:bg-layer-transparent-hover active:bg-layer-transparent-active active:text-primary",
     "focus-visible:ring-2 focus-visible:ring-accent-strong",
@@ -65,35 +65,34 @@ export type NavItemProps = Omit<useRender.ComponentProps<"button">, "className"
   /** Size of the row label: `lg` (14px, default sidebar) or `md` (13px, compact). */
   magnitude: NavItemMagnitude;
   /**
-   * Nesting depth (1–5). Higher levels indent the row further from the inline-start
-   * so children sit under their parent. Defaults to `1`.
+   * Nesting depth (1–5). Higher levels indent the row further from the inline-start so children sit
+   * under their parent. Defaults to `1`.
    */
   level?: NavItemLevel;
   /**
-   * Whether this row is the current/selected item. Applies the selected surface and
-   * marks the element with `aria-current="page"` for assistive tech.
+   * Whether this row is the current/selected item. Applies the selected surface and marks the
+   * element with `aria-current="page"` for assistive tech.
    */
   active?: boolean;
   /**
-   * Leading icon (e.g. a lucide icon), shown at the inline-start. Sized to 16px and
-   * `aria-hidden` (the label is the accessible name). Named `leadingIcon` (not `icon`)
-   * to match Button/Input; `trailing` already covers the inline-end.
+   * Leading icon (e.g. a lucide icon), shown at the inline-start. Sized to 16px and `aria-hidden`
+   * (the label is the accessible name). Named `leadingIcon` (not `icon`) to match Button/Input;
+   * `trailing` already covers the inline-end.
    */
   leadingIcon?: React.ReactNode;
   /**
-   * Optional trailing content placed after the label — typically a `NavItemCount`
-   * and/or a `NavItemChevron`. Sits at the inline-end. A generic content slot (not just
-   * an icon), so it stays `trailing` rather than `trailingIcon`.
+   * Optional trailing content placed after the label — typically a `NavItemCount` and/or a
+   * `NavItemChevron`. Sits at the inline-end. A generic content slot (not just an icon), so it
+   * stays `trailing` rather than `trailingIcon`.
    */
   trailing?: React.ReactNode;
 };
 
 /**
- * A single sidebar navigation row — a leading icon, a label, and an optional trailing
- * slot (count / chevron). Renders a `<button>` by default; pass `render={<a href=… />}`
- * to make it a link while keeping it keyboard- and screen-reader-accessible. Mark the
- * current page with `active` (sets `aria-current="page"`). Faithful to Figma node
- * 1329-396.
+ * A single sidebar navigation row — a leading icon, a label, and an optional trailing slot (count /
+ * chevron). Renders a `<button>` by default; pass `render={<a href=… />}` to make it a link while
+ * keeping it keyboard- and screen-reader-accessible. Mark the current page with `active` (sets
+ * `aria-current="page"`). Faithful to Figma node 1329-396.
  */
 export function NavItem({
   children,
@@ -119,7 +118,7 @@ export function NavItem({
               className={cx(
                 "flex size-4 shrink-0 items-center justify-center text-icon-placeholder [&>svg]:size-full",
                 // Selected/pressed pull the leading icon up to the primary tone.
-                "group-data-[active]/nav-item:text-icon-primary group-active/nav-item:text-icon-primary",
+                "group-active/nav-item:text-icon-primary group-data-[active]/nav-item:text-icon-primary",
                 // Disabled dims the icon to match the dimmed label.
                 "group-disabled/nav-item:text-icon-disabled group-aria-disabled/nav-item:text-icon-disabled",
               )}
@@ -127,7 +126,7 @@ export function NavItem({
               {leadingIcon}
             </span>
           ) : null}
-          <span className="min-w-0 flex-1 truncate font-medium leading-snug">{children}</span>
+          <span className="min-w-0 flex-1 truncate leading-snug font-medium">{children}</span>
           {trailing ? <span className="flex shrink-0 items-center gap-2">{trailing}</span> : null}
         </>
       ),
@@ -142,8 +141,8 @@ export function NavItem({
 }
 
 /**
- * A small count chip for a nav row's trailing slot (e.g. unread / item counts). Uses
- * the Figma count style: `layer-3` surface, `radius/sm` corners, `text/11`.
+ * A small count chip for a nav row's trailing slot (e.g. unread / item counts). Uses the Figma
+ * count style: `layer-3` surface, `radius/sm` corners, `text/11`.
  */
 export function NavItemCount({
   children,
@@ -163,9 +162,9 @@ export function NavItemCount({
 }
 
 /**
- * The disclosure chevron for an expandable nav row. Decorative (`aria-hidden`); mirror
- * any directional rotation with the writing direction via the `open` prop. As a
- * directional glyph it is flipped under RTL with `rtl:-scale-x-100`.
+ * The disclosure chevron for an expandable nav row. Decorative (`aria-hidden`); mirror any
+ * directional rotation with the writing direction via the `open` prop. As a directional glyph it is
+ * flipped under RTL with `rtl:-scale-x-100`.
  */
 export function NavItemChevron({
   open = false,
diff --git a/packages/propel/src/components/nav-item/nav-item.stories.tsx b/packages/propel/src/components/nav-item/nav-item.stories.tsx
index 3427e973..f42d2eba 100644
--- a/packages/propel/src/components/nav-item/nav-item.stories.tsx
+++ b/packages/propel/src/components/nav-item/nav-item.stories.tsx
@@ -2,6 +2,7 @@ import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronDown, Inbox } from "lucide-react";
 import { expect, fn, userEvent, within } from "storybook/test";
+
 import { iconControl } from "../../storybook/icon-control";
 import { NavItem, NavItemChevron, NavItemCount, type NavItemMagnitude } from "./index";
 
@@ -74,10 +75,10 @@ export const AsLink: Story = {
 };
 
 /**
- * Keyboard ARIA pattern: NavItem renders a native `<button>`, so Tab moves focus to
- * the row and both **Enter** and **Space** activate it (fire its click handler). The
- * active row also exposes `aria-current="page"`. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
+ * Keyboard ARIA pattern: NavItem renders a native `<button>`, so Tab moves focus to the row and
+ * both **Enter** and **Space** activate it (fire its click handler). The active row also exposes
+ * `aria-current="page"`. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
  */
 export const KeyboardActivation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -103,8 +104,8 @@ export const KeyboardActivation: Story = {
 };
 
 /**
- * The prop-driven states side by side at both magnitudes. Hover and pressed are
- * CSS-driven (`hover:` / `active:`) — interact with the rows above to see them.
+ * The prop-driven states side by side at both magnitudes. Hover and pressed are CSS-driven
+ * (`hover:` / `active:`) — interact with the rows above to see them.
  */
 export const States: Story = {
   parameters: { controls: { disable: true } },
@@ -112,7 +113,7 @@ export const States: Story = {
     <div className="flex flex-col gap-6">
       {MAGNITUDES.map((magnitude) => (
         <div key={magnitude} className="flex flex-col gap-1">
-          <p className="text-11 uppercase text-tertiary">{magnitude}</p>
+          <p className="text-11 text-tertiary uppercase">{magnitude}</p>
           <NavItem {...args} magnitude={magnitude} trailing={<NavItemCount>6</NavItemCount>}>
             Default
           </NavItem>
@@ -143,8 +144,8 @@ export const Levels: Story = {
 };
 
 /**
- * RTL: the leading icon moves to the inline-start (visually the right edge) and the
- * disclosure chevron mirrors. Wrapped in Base UI's `DirectionProvider`.
+ * RTL: the leading icon moves to the inline-start (visually the right edge) and the disclosure
+ * chevron mirrors. Wrapped in Base UI's `DirectionProvider`.
  */
 export const RightToLeft: Story = {
   parameters: { controls: { disable: true } },
diff --git a/packages/propel/src/components/pagination/index.tsx b/packages/propel/src/components/pagination/index.tsx
index c2982d82..da1dc89f 100644
--- a/packages/propel/src/components/pagination/index.tsx
+++ b/packages/propel/src/components/pagination/index.tsx
@@ -1,6 +1,7 @@
 import { cva, cx } from "class-variance-authority";
 import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle, MoreHorizontal } from "lucide-react";
 import * as React from "react";
+
 import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "../dropdown/index";
 
 // Pagination is a single composite navigation control rather than a variant matrix:
@@ -142,8 +143,8 @@ export type PaginationLabels = {
   /** Accessible name for the next-page button. */
   next: string;
   /**
-   * Accessible name for a page button, given its number. Defaults to e.g.
-   * `"Go to page 3"`; the current page is additionally marked `aria-current`.
+   * Accessible name for a page button, given its number. Defaults to e.g. `"Go to page 3"`; the
+   * current page is additionally marked `aria-current`.
    */
   page: (page: number) => string;
   /** Visible text on the per-page selector trigger, given the size. Defaults to `"50"`. */
@@ -172,13 +173,13 @@ export type PaginationProps = Omit<
   /** Called with the target page (1-based) when a control is activated. */
   onPageChange: (page: number) => void;
   /**
-   * The current page is rendered as a loading spinner instead of its number — for
-   * when navigating to that page is in flight.
+   * The current page is rendered as a loading spinner instead of its number — for when navigating
+   * to that page is in flight.
    */
   loading?: boolean;
   /**
-   * Optional per-page size selector (Figma `50 v  per page`). Provide `value`, the
-   * `options`, and `onChange`; omit to hide the selector entirely.
+   * Optional per-page size selector (Figma `50 v per page`). Provide `value`, the `options`, and
+   * `onChange`; omit to hide the selector entirely.
    */
   pageSize?: {
     /** Currently selected page size. */
@@ -189,8 +190,8 @@ export type PaginationProps = Omit<
     onChange: (pageSize: number) => void;
   };
   /**
-   * Optional range label shown before the controls (Figma `1-50 of 250`). Provide
-   * the already-formatted `current` range and `total`.
+   * Optional range label shown before the controls (Figma `1-50 of 250`). Provide the
+   * already-formatted `current` range and `total`.
    */
   range?: {
     /** The visible range, e.g. `"1-50"` (rendered in the primary text color). */
@@ -203,12 +204,11 @@ export type PaginationProps = Omit<
 };
 
 /**
- * Page navigation for a paginated list or table. Renders a `<nav>` landmark holding
- * an optional per-page selector and range label plus an ordered list of page
- * controls: a previous button, first/last anchors with ellipses around a window of
- * pages near the current one, and a next button. The current page is marked
- * `aria-current="page"`; the prev/next ends disable at the bounds and their arrows
- * mirror under RTL.
+ * Page navigation for a paginated list or table. Renders a `<nav>` landmark holding an optional
+ * per-page selector and range label plus an ordered list of page controls: a previous button,
+ * first/last anchors with ellipses around a window of pages near the current one, and a next
+ * button. The current page is marked `aria-current="page"`; the prev/next ends disable at the
+ * bounds and their arrows mirror under RTL.
  */
 export function Pagination({
   page,
@@ -255,14 +255,14 @@ export function Pagination({
               ))}
             </DropdownContent>
           </Dropdown>
-          <span aria-hidden className="whitespace-nowrap text-13 text-tertiary">
+          <span aria-hidden className="text-13 whitespace-nowrap text-tertiary">
             {l.perPage}
           </span>
         </div>
       ) : null}
 
       {range ? (
-        <p className="whitespace-nowrap text-12 text-tertiary">
+        <p className="text-12 whitespace-nowrap text-tertiary">
           <span className="text-primary">{range.current}</span>
           <span>{" of "}</span>
           <span>{range.total}</span>
diff --git a/packages/propel/src/components/pagination/pagination.stories.tsx b/packages/propel/src/components/pagination/pagination.stories.tsx
index 93ae94b4..59cf701f 100644
--- a/packages/propel/src/components/pagination/pagination.stories.tsx
+++ b/packages/propel/src/components/pagination/pagination.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+
 import { Pagination } from "./index";
 
 const meta = {
@@ -42,10 +43,10 @@ export const WithSelectorAndRange: Story = {
 };
 
 /**
- * The page-size selector is a propel Dropdown: its `layer-3` pill trigger is labeled
- * "50 per page"; clicking it opens the portaled menu of sizes (the current one marked
- * with a check), and picking one reports it through `pageSize.onChange` and updates the
- * trigger. Keyboard works too — ArrowDown opens the menu and arrow+Enter selects.
+ * The page-size selector is a propel Dropdown: its `layer-3` pill trigger is labeled "50 per page";
+ * clicking it opens the portaled menu of sizes (the current one marked with a check), and picking
+ * one reports it through `pageSize.onChange` and updates the trigger. Keyboard works too —
+ * ArrowDown opens the menu and arrow+Enter selects.
  */
 export const PageSizeSelector: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -126,9 +127,9 @@ export const PageSizeSelector: Story = {
 };
 
 /**
- * The four truncation layouts the design derives from where the current page sits:
- * all pages visible, near the start, in the middle, and near the end — shown here
- * with the selector + range to match the Figma frame exactly.
+ * The four truncation layouts the design derives from where the current page sits: all pages
+ * visible, near the start, in the middle, and near the end — shown here with the selector + range
+ * to match the Figma frame exactly.
  */
 export const Variants: Story = {
   parameters: { controls: { disable: true } },
@@ -171,8 +172,8 @@ export const Variants: Story = {
 };
 
 /**
- * Three-digit page numbers must render in full. The slot keeps its 24px minimum so
- * single digits stay square, but grows to fit wider content — `100` is not clipped.
+ * Three-digit page numbers must render in full. The slot keeps its 24px minimum so single digits
+ * stay square, but grows to fit wider content — `100` is not clipped.
  */
 export const ThreeDigit: Story = {
   args: { page: 100, pageCount: 100 },
@@ -184,10 +185,10 @@ export const Loading: Story = {
 };
 
 /**
- * A single skipped page is rendered as its own number rather than hidden behind an
- * ellipsis: with `pageCount=8, page=4` the gap on the leading side is exactly one
- * page (page 2), so the run reads `1 2 3 4 5 … 8` — page 2 stays reachable and only
- * the 2+-page trailing gap (pages 6, 7) collapses to a `…`.
+ * A single skipped page is rendered as its own number rather than hidden behind an ellipsis: with
+ * `pageCount=8, page=4` the gap on the leading side is exactly one page (page 2), so the run reads
+ * `1 2 3 4 5 … 8` — page 2 stays reachable and only the 2+-page trailing gap (pages 6, 7) collapses
+ * to a `…`.
  */
 export const SingleGap: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -206,9 +207,9 @@ export const SingleGap: Story = {
 };
 
 /**
- * Behavioral checks: the nav landmark is named, the current page is marked
- * `aria-current` and disabled, the previous button is disabled at the first page,
- * and activating a page number reports the new page through `onPageChange`.
+ * Behavioral checks: the nav landmark is named, the current page is marked `aria-current` and
+ * disabled, the previous button is disabled at the first page, and activating a page number reports
+ * the new page through `onPageChange`.
  */
 export const Behavior: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -233,10 +234,10 @@ export const Behavior: Story = {
 };
 
 /**
- * Keyboard operation: Tab reaches the prev button and the page-number buttons, and
- * Enter / Space activate a focused page button — each reporting the target page
- * through `onPageChange`. The disabled current page and the disabled prev/next ends
- * are skipped by Tab (not focusable) and never fire `onPageChange`.
+ * Keyboard operation: Tab reaches the prev button and the page-number buttons, and Enter / Space
+ * activate a focused page button — each reporting the target page through `onPageChange`. The
+ * disabled current page and the disabled prev/next ends are skipped by Tab (not focusable) and
+ * never fire `onPageChange`.
  */
 export const KeyboardNavigation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/popover/index.tsx b/packages/propel/src/components/popover/index.tsx
index fb57156f..cd67e80b 100644
--- a/packages/propel/src/components/popover/index.tsx
+++ b/packages/propel/src/components/popover/index.tsx
@@ -1,10 +1,11 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import * as React from "react";
+
 import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
 
 /**
- * The popover root — a Base UI `Popover.Root`. Holds open state and wires the trigger
- * to the floating panel. Compose it with `PopoverTrigger` + `PopoverContent`:
+ * The popover root — a Base UI `Popover.Root`. Holds open state and wires the trigger to the
+ * floating panel. Compose it with `PopoverTrigger` + `PopoverContent`:
  *
  * ```tsx
  * <Popover>
@@ -13,12 +14,12 @@ import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-pan
  *     <RadioGroup>…</RadioGroup>
  *     <Checkbox label="Show empty groups" />
  *   </PopoverContent>
- * </Popover>
+ * </Popover>;
  * ```
  *
- * Unlike `Dropdown`, the surface is a generic floating panel (NOT a `role="menu"`), so
- * it can host arbitrary settings-panel content — radios, checkboxes, pills, forms — as
- * valid children. Reach for `Dropdown` when you need an actual ARIA menu of actions.
+ * Unlike `Dropdown`, the surface is a generic floating panel (NOT a `role="menu"`), so it can host
+ * arbitrary settings-panel content — radios, checkboxes, pills, forms — as valid children. Reach
+ * for `Dropdown` when you need an actual ARIA menu of actions.
  */
 type BasePopoverRootProps = React.ComponentProps<typeof BasePopover.Root>;
 
@@ -33,8 +34,8 @@ export type PopoverProps = Omit<
   /** Called with the next open state when the popover opens or closes. */
   onOpenChange?: BasePopoverRootProps["onOpenChange"];
   /**
-   * Modal behavior while open: `true` locks page scroll and blocks outside pointer
-   * interaction; `'trap-focus'` only traps focus. @default false
+   * Modal behavior while open: `true` locks page scroll and blocks outside pointer interaction;
+   * `'trap-focus'` only traps focus. @default false
    */
   modal?: BasePopoverRootProps["modal"];
   /** The popover's trigger and panel (`PopoverTrigger`, `PopoverContent`). */
@@ -51,8 +52,8 @@ export type PopoverTriggerProps = Omit<
 >;
 
 /**
- * The element that opens the popover. Renders a `<button>` by default; pass `render`
- * to project the trigger onto your own element (e.g. an icon button).
+ * The element that opens the popover. Renders a `<button>` by default; pass `render` to project the
+ * trigger onto your own element (e.g. an icon button).
  */
 export function PopoverTrigger(props: PopoverTriggerProps) {
   return <BasePopover.Trigger {...props} />;
@@ -74,23 +75,22 @@ export type PopoverContentProps = Omit<
   /** Alignment of the panel relative to the trigger along `side`. @default "start" */
   align?: React.ComponentProps<typeof BasePopover.Positioner>["align"];
   /**
-   * Fixed panel width. `anchor` matches the trigger; `sm`/`md`/`lg` are the panel
-   * widths from Figma (256 / 288 / 384px). @default "anchor"
+   * Fixed panel width. `anchor` matches the trigger; `sm`/`md`/`lg` are the panel widths from Figma
+   * (256 / 288 / 384px). @default "anchor"
    */
   width?: PopoverContentWidth;
 };
 
 /**
- * The floating panel surface. Bundles Base UI's `Portal` + `Positioner` + `Popup` so the
- * panel renders in a portal, positioned against the trigger, with propel's overlay
- * styling. Place arbitrary content inside — radios, checkboxes, pills, forms — it is a
- * generic container (no `role="menu"`), so those controls are valid children and the
- * surface stays ARIA-clean. Give it an accessible name with `aria-label` /
- * `aria-labelledby` when the panel needs one.
+ * The floating panel surface. Bundles Base UI's `Portal` + `Positioner` + `Popup` so the panel
+ * renders in a portal, positioned against the trigger, with propel's overlay styling. Place
+ * arbitrary content inside — radios, checkboxes, pills, forms — it is a generic container (no
+ * `role="menu"`), so those controls are valid children and the surface stays ARIA-clean. Give it an
+ * accessible name with `aria-label` / `aria-labelledby` when the panel needs one.
  *
- * Base UI handles the a11y wiring: focus moves into the panel on open and returns to the
- * trigger on close, `Esc` and outside-clicks dismiss it, and the positioner uses logical
- * sides so it is RTL-safe out of the box.
+ * Base UI handles the a11y wiring: focus moves into the panel on open and returns to the trigger on
+ * close, `Esc` and outside-clicks dismiss it, and the positioner uses logical sides so it is
+ * RTL-safe out of the box.
  */
 export function PopoverContent({
   children,
diff --git a/packages/propel/src/components/popover/popover.stories.tsx b/packages/propel/src/components/popover/popover.stories.tsx
index 44eb52ce..259c23aa 100644
--- a/packages/propel/src/components/popover/popover.stories.tsx
+++ b/packages/propel/src/components/popover/popover.stories.tsx
@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
+
 import { Checkbox } from "../checkbox/index";
 import { Radio, RadioGroup } from "../radio/index";
 import { Popover, PopoverContent, PopoverTrigger } from "./index";
@@ -80,10 +81,10 @@ function PanelRadioRow({ value, label }: { value: string; label: string }) {
 }
 
 /**
- * The default popover: a trigger plus a generic floating panel. The panel hosts arbitrary
- * content (here a couple of checkbox toggles) — it is NOT a `role="menu"`, so these
- * controls are valid children. Open it by clicking the trigger; dismiss with `Esc`, an
- * outside click, or by toggling the trigger again.
+ * The default popover: a trigger plus a generic floating panel. The panel hosts arbitrary content
+ * (here a couple of checkbox toggles) — it is NOT a `role="menu"`, so these controls are valid
+ * children. Open it by clicking the trigger; dismiss with `Esc`, an outside click, or by toggling
+ * the trigger again.
  */
 export const Default: Story = {
   render: function DefaultStory() {
@@ -141,13 +142,13 @@ export const Default: Story = {
 };
 
 /**
- * **DisplayProperties** — the settings panel that used to live in the Dropdown stories
- * (and had to disable `aria-allowed-attr`). On the non-menu Popover surface the pill
- * group, single-select `Radio` section, and checkbox-toggle footer are all valid
- * children, so axe passes with no suppressions.
+ * **DisplayProperties** — the settings panel that used to live in the Dropdown stories (and had to
+ * disable `aria-allowed-attr`). On the non-menu Popover surface the pill group, single-select
+ * `Radio` section, and checkbox-toggle footer are all valid children, so axe passes with no
+ * suppressions.
  *
- * NOTE: the selectable pill/chip group is a minimal local primitive — propel has no
- * "chip" component yet (flagged in the PR).
+ * NOTE: the selectable pill/chip group is a minimal local primitive — propel has no "chip"
+ * component yet (flagged in the PR).
  */
 export const DisplayProperties: Story = {
   render: function DisplayPropertiesStory() {
@@ -229,9 +230,9 @@ export const DisplayProperties: Story = {
 };
 
 /**
- * **DisplayAccordion** — the other settings panel that used to disable `aria-allowed-attr`
- * in the Dropdown stories. Collapsible sections with an expanded single-select `Radio`
- * sort list and checkbox toggles, all valid on the non-menu Popover surface.
+ * **DisplayAccordion** — the other settings panel that used to disable `aria-allowed-attr` in the
+ * Dropdown stories. Collapsible sections with an expanded single-select `Radio` sort list and
+ * checkbox toggles, all valid on the non-menu Popover surface.
  */
 export const DisplayAccordion: Story = {
   render: function DisplayAccordionStory() {
@@ -324,10 +325,9 @@ export const DisplayAccordion: Story = {
 };
 
 /**
- * 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 `dir="rtl"` on the root, since the panel portals to `<body>`)
- * to mirror a real RTL app.
+ * 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
+ * `dir="rtl"` on the root, since the panel portals to `<body>`) to mirror a real RTL app.
  */
 export const RTL: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/progress/index.tsx b/packages/propel/src/components/progress/index.tsx
index aae6f448..318c230e 100644
--- a/packages/propel/src/components/progress/index.tsx
+++ b/packages/propel/src/components/progress/index.tsx
@@ -33,17 +33,17 @@ export type ProgressProps = Omit<
   /** Show the trailing percentage label. @default true */
   showValue?: boolean;
   /**
-   * Accessible name for the bar. Required: a progress bar needs a name for assistive
-   * tech (the visible percentage is not a substitute).
+   * Accessible name for the bar. Required: a progress bar needs a name for assistive tech (the
+   * visible percentage is not a substitute).
    */
   "aria-label": string;
 };
 
 /**
- * A linear progress bar — task completion over time (uploads, imports, the Toast
- * auto-dismiss countdown). Drive it with `value` (0–`max`, default max 100); the
- * filled indicator and `aria-valuenow` follow. The trailing `%` label shows by
- * default; hide it with `showValue={false}`.
+ * A linear progress bar — task completion over time (uploads, imports, the Toast auto-dismiss
+ * countdown). Drive it with `value` (0–`max`, default max 100); the filled indicator and
+ * `aria-valuenow` follow. The trailing `%` label shows by default; hide it with
+ * `showValue={false}`.
  */
 export function Progress({ value, magnitude, showValue = true, ...props }: ProgressProps) {
   return (
diff --git a/packages/propel/src/components/progress/progress.stories.tsx b/packages/propel/src/components/progress/progress.stories.tsx
index 07f8682b..ac544fde 100644
--- a/packages/propel/src/components/progress/progress.stories.tsx
+++ b/packages/propel/src/components/progress/progress.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, within } from "storybook/test";
+
 import { Progress } from "./index";
 
 const meta = {
@@ -57,9 +58,8 @@ export const WithoutLabel: Story = {
 };
 
 /**
- * The bar exposes the `progressbar` role with `aria-valuenow`, and the label renders
- * the rounded percentage. Tagged out of the sidebar/docs/manifest but still run under
- * the default `test` tag.
+ * The bar exposes the `progressbar` role with `aria-valuenow`, and the label renders the rounded
+ * percentage. Tagged out of the sidebar/docs/manifest but still run under the default `test` tag.
  */
 export const Semantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/radio/index.tsx b/packages/propel/src/components/radio/index.tsx
index 9134d53a..19bbc3ac 100644
--- a/packages/propel/src/components/radio/index.tsx
+++ b/packages/propel/src/components/radio/index.tsx
@@ -21,7 +21,7 @@ import * as React from "react";
 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 outline-none transition-colors",
+    "text-icon-tertiary transition-colors outline-none",
     // Selected uses the accent color for both the ring and the dot.
     "data-[checked]:text-icon-accent-primary",
     // Keyboard focus ring, drawn outside the control so it never clips the dot.
@@ -37,10 +37,9 @@ export type RadioGroupProps = Omit<
 >;
 
 /**
- * Groups a set of `Radio` options so at most one can be selected at a time (none
- * is selected until a `value`/`defaultValue` is set). Wrap
- * `Radio` children in it and drive the selection with `value`/`defaultValue` +
- * `onValueChange`. Renders a `<div>` with `role="radiogroup"`.
+ * Groups a set of `Radio` options so at most one can be selected at a time (none is selected until
+ * a `value`/`defaultValue` is set). Wrap `Radio` children in it and drive the selection with
+ * `value`/`defaultValue` + `onValueChange`. Renders a `<div>` with `role="radiogroup"`.
  */
 export function RadioGroup(props: RadioGroupProps) {
   return <BaseRadioGroup className="flex flex-col gap-2" {...props} />;
@@ -52,11 +51,10 @@ export type RadioProps = Omit<
 >;
 
 /**
- * A single radio option (Base UI `Radio.Root` + `Radio.Indicator`). The 16px ring
- * and 8px inner dot follow Figma node 2159-4535; the selected and disabled states
- * come from the primitive. Use `disabled` for a non-editable (read-only) option —
- * see the module comment above for why `readOnly` is avoided. Must be rendered
- * inside a `RadioGroup`.
+ * A single radio option (Base UI `Radio.Root` + `Radio.Indicator`). The 16px ring and 8px inner dot
+ * follow Figma node 2159-4535; the selected and disabled states come from the primitive. Use
+ * `disabled` for a non-editable (read-only) option — see the module comment above for why
+ * `readOnly` is avoided. Must be rendered inside a `RadioGroup`.
  *
  * @param value - The unique value this option contributes to its `RadioGroup`.
  */
diff --git a/packages/propel/src/components/radio/radio.stories.tsx b/packages/propel/src/components/radio/radio.stories.tsx
index 95969d31..4918e749 100644
--- a/packages/propel/src/components/radio/radio.stories.tsx
+++ b/packages/propel/src/components/radio/radio.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
+
 import { Radio, RadioGroup } from "./index";
 
 const meta = {
@@ -41,14 +42,13 @@ export const Default: Story = {
 };
 
 /**
- * The states from Figma side by side: unselected, selected, disabled, and
- * read-only — each driven by the primitive, not by a variant.
+ * The states from Figma side by side: unselected, selected, disabled, and read-only — each driven
+ * by the primitive, not by a variant.
  *
- * Read-only is expressed via `disabled` rather than Base UI's `readOnly`: the
- * primitive stamps `aria-readonly` onto the `role="radio"` element, which ARIA
- * does not permit on that role (axe `aria-allowed-attr`). `disabled` conveys the
- * same "selection can't be changed" intent through the ARIA-valid `aria-disabled`
- * while keeping the control non-interactive.
+ * Read-only is expressed via `disabled` rather than Base UI's `readOnly`: the primitive stamps
+ * `aria-readonly` onto the `role="radio"` element, which ARIA does not permit on that role (axe
+ * `aria-allowed-attr`). `disabled` conveys the same "selection can't be changed" intent through the
+ * ARIA-valid `aria-disabled` while keeping the control non-interactive.
  */
 export const States: Story = {
   parameters: { controls: { disable: true } },
@@ -71,10 +71,10 @@ export const States: Story = {
 };
 
 /**
- * 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 it stays out of the
- * sidebar, docs, and AI manifest while still running under the default `test` tag.
+ * 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
+ * it stays out of the sidebar, docs, and AI manifest while still running under the default `test`
+ * tag.
  */
 export const SelectionBehavior: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -110,11 +110,10 @@ export const SelectionBehavior: Story = {
 };
 
 /**
- * Keyboard ARIA pattern (WAI-ARIA radiogroup, roving focus): Tab lands on the
- * currently-checked radio, and **Arrow Down/Up (and Right/Left)** move both focus
- * and selection through the group, wrapping at the ends. Only one radio is checked
- * at a time, and `aria-checked` follows the focused radio. Tagged out of the
- * sidebar/docs/manifest while still running under the default `test` tag.
+ * Keyboard ARIA pattern (WAI-ARIA radiogroup, roving focus): Tab lands on the currently-checked
+ * radio, and **Arrow Down/Up (and Right/Left)** move both focus and selection through the group,
+ * wrapping at the ends. Only one radio is checked at a time, and `aria-checked` follows the focused
+ * radio. Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
  */
 export const KeyboardNavigation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/scroll-area/index.tsx b/packages/propel/src/components/scroll-area/index.tsx
index 82b077b2..90048ed2 100644
--- a/packages/propel/src/components/scroll-area/index.tsx
+++ b/packages/propel/src/components/scroll-area/index.tsx
@@ -1,5 +1,6 @@
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import * as React from "react";
+
 import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
 
 // propel's scroll container, built on Base UI ScrollArea. Unlike a re-skinned native
@@ -17,9 +18,9 @@ export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
 export type ScrollAreaProps = {
   /**
    * Which axes scroll (required, no silent default like the other essential axes).
-   * `vertical`/`horizontal` render a single scrollbar; `both` renders both plus the
-   * corner. Render only the axes the content can actually overflow so an unused
-   * scrollbar never reserves space or reveals.
+   * `vertical`/`horizontal` render a single scrollbar; `both` renders both plus the corner. Render
+   * only the axes the content can actually overflow so an unused scrollbar never reserves space or
+   * reveals.
    */
   orientation: ScrollAreaOrientation;
   /** The scrollable content. */
@@ -27,11 +28,10 @@ export type ScrollAreaProps = {
 };
 
 /**
- * A scroll container with propel's overlay scrollbar, built on Base UI `ScrollArea`.
- * Use it to wrap any overflowing content (menus, panels, long lists). Place it as a
- * child of a height-constrained flex column: it grows to fill the column and its
- * viewport scrolls when the content overflows. The scrollbar shows only on hover/scroll
- * and uses the propel scrollbar tokens.
+ * A scroll container with propel's overlay scrollbar, built on Base UI `ScrollArea`. Use it to wrap
+ * any overflowing content (menus, panels, long lists). Place it as a child of a height-constrained
+ * flex column: it grows to fill the column and its viewport scrolls when the content overflows. The
+ * scrollbar shows only on hover/scroll and uses the propel scrollbar tokens.
  */
 export function ScrollArea({ orientation, children }: ScrollAreaProps) {
   const showVertical = orientation !== "horizontal";
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 95fff687..24214b39 100644
--- a/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
+++ b/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+
 import { ScrollArea } from "./index";
 
 const meta = {
@@ -24,8 +25,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Vertical overflow. The scrollbar is hidden until you hover the area or scroll, then
- * the inset thumb fades in; it darkens on thumb hover and while dragging.
+ * Vertical overflow. The scrollbar is hidden until you hover the area or scroll, then the inset
+ * thumb fades in; it darkens on thumb hover and while dragging.
  */
 export const Default: Story = {
   args: {
@@ -49,7 +50,7 @@ export const BothAxes: Story = {
     children: (
       <div className="flex w-[640px] flex-col gap-2 p-3">
         {Array.from({ length: 30 }, (_, i) => (
-          <p key={i} className="whitespace-nowrap text-13 text-secondary">
+          <p key={i} className="text-13 whitespace-nowrap text-secondary">
             Line {i + 1} of wide content that overflows horizontally as well as down.
           </p>
         ))}
diff --git a/packages/propel/src/components/search/index.tsx b/packages/propel/src/components/search/index.tsx
index 8b1759e3..2312dba2 100644
--- a/packages/propel/src/components/search/index.tsx
+++ b/packages/propel/src/components/search/index.tsx
@@ -40,10 +40,9 @@ export type SearchProps = Omit<
 };
 
 /**
- * A search field — a leading magnifier, a text input, and a clear (✕) button that
- * appears once there's text. Built on Base UI `Input`. Drive it with `value` +
- * `onValueChange` (controlled) or `defaultValue` (uncontrolled). It fills its
- * container's width; wrap it to constrain.
+ * A search field — a leading magnifier, a text input, and a clear (✕) button that appears once
+ * there's text. Built on Base UI `Input`. Drive it with `value` + `onValueChange` (controlled) or
+ * `defaultValue` (uncontrolled). It fills its container's width; wrap it to constrain.
  */
 export function Search({
   value,
@@ -160,13 +159,13 @@ const expandableBoxClass = cx(
 export type ExpandableSearchProps = SearchProps;
 
 /**
- * A search field that collapses to a magnifier icon and expands into a full `Search`-style
- * input while focused — the toolbar/header pattern where search hides until needed. Built
- * on Base UI `Input`. The input itself is the only control (no separate toggle button), so
- * it stays a real `searchbox` for keyboard and screen-reader users; pointer users focus it
- * by clicking the magnifier. It collapses when blurred empty (or on `Escape`) and stays
- * expanded while it has a value. Drive the value with `value` + `onValueChange`
- * (controlled) or `defaultValue` (uncontrolled).
+ * A search field that collapses to a magnifier icon and expands into a full `Search`-style input
+ * while focused — the toolbar/header pattern where search hides until needed. Built on Base UI
+ * `Input`. The input itself is the only control (no separate toggle button), so it stays a real
+ * `searchbox` for keyboard and screen-reader users; pointer users focus it by clicking the
+ * magnifier. It collapses when blurred empty (or on `Escape`) and stays expanded while it has a
+ * value. Drive the value with `value` + `onValueChange` (controlled) or `defaultValue`
+ * (uncontrolled).
  */
 export function ExpandableSearch({
   value,
diff --git a/packages/propel/src/components/search/search.stories.tsx b/packages/propel/src/components/search/search.stories.tsx
index 0dca9a75..720008f3 100644
--- a/packages/propel/src/components/search/search.stories.tsx
+++ b/packages/propel/src/components/search/search.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
 import { expect, userEvent, within } from "storybook/test";
+
 import { ExpandableSearch, Search } from "./index";
 
 const meta = {
@@ -55,9 +56,9 @@ export const Controlled: Story = {
 };
 
 /**
- * `ExpandableSearch` collapses to a magnifier icon and expands into a full search input
- * while focused — the toolbar/header pattern. The input itself is the only control, so it
- * stays a real searchbox; it collapses again when blurred empty (or on `Escape`).
+ * `ExpandableSearch` collapses to a magnifier icon and expands into a full search input while
+ * focused — the toolbar/header pattern. The input itself is the only control, so it stays a real
+ * searchbox; it collapses again when blurred empty (or on `Escape`).
  */
 export const Expandable: Story = {
   parameters: { controls: { disable: true } },
@@ -71,11 +72,10 @@ export const ExpandableFilled: Story = {
 };
 
 /**
- * `ExpandableSearch` is a single searchbox that renders collapsed and expands on focus —
- * there is no separate toggle button. Focusing it (clicking the magnifier focuses the
- * field) expands it; blurring it empty or pressing `Escape` collapses it, and a value
- * keeps it open. Tagged out of the sidebar/docs/manifest but still run under the default
- * `test` tag.
+ * `ExpandableSearch` is a single searchbox that renders collapsed and expands on focus — there is
+ * no separate toggle button. Focusing it (clicking the magnifier focuses the field) expands it;
+ * blurring it empty or pressing `Escape` collapses it, and a value keeps it open. Tagged out of the
+ * sidebar/docs/manifest but still run under the default `test` tag.
  */
 export const ExpandAndCollapse: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -117,9 +117,8 @@ export const ExpandAndCollapse: Story = {
 };
 
 /**
- * Typing reveals the clear button; clicking it empties the field and returns focus to
- * the input. Tagged out of the sidebar/docs/manifest but still run under the default
- * `test` tag.
+ * Typing reveals the clear button; clicking it empties the field and returns focus to the input.
+ * Tagged out of the sidebar/docs/manifest but still run under the default `test` tag.
  */
 export const TypeAndClear: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/switch/index.tsx b/packages/propel/src/components/switch/index.tsx
index 1c93fa6f..ef9c44ab 100644
--- a/packages/propel/src/components/switch/index.tsx
+++ b/packages/propel/src/components/switch/index.tsx
@@ -13,7 +13,7 @@ const trackVariants = cva(
     "bg-icon-placeholder data-[checked]:bg-accent-primary",
     // Unchangeable (disabled or readonly) dims the whole control to 40%,
     // matching Figma's "Unchangeable" states. Disabled also blocks the cursor.
-    "data-[readonly]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40 data-[readonly]:opacity-40",
     "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-strong",
   ),
   {
@@ -32,7 +32,7 @@ const trackVariants = cva(
 // The thumb stays white in every theme and in both on/off states. `surface-1`
 // is white in light mode but flips dark in dark mode, so the thumb pins to the
 // on-color token (the white-on-tone color) regardless of checked state.
-const thumbVariants = cva("rounded-full bg-on-color shadow-sm transition-transform", {
+const thumbVariants = cva("shadow-sm rounded-full bg-on-color transition-transform", {
   variants: {
     magnitude: {
       lg: "size-4 data-[checked]:translate-x-[12px]",
@@ -48,21 +48,17 @@ export type SwitchProps = Omit<
   React.ComponentProps<typeof BaseSwitch.Root>,
   "className" | "render" | "style"
 > & {
-  /**
-   * Track + thumb size, from the Figma "Toggle" Size scale:
-   * `lg` 30×18, `md` 27×16, `sm` 23×14.
-   */
+  /** Track + thumb size, from the Figma "Toggle" Size scale: `lg` 30×18, `md` 27×16, `sm` 23×14. */
   magnitude: SwitchMagnitude;
 };
 
 /**
- * A switch toggles a single setting on or off. Built on Base UI's `Switch`
- * (so it carries `role="switch"` and full keyboard/form support). Maps to
- * Figma's "Toggle" component.
+ * A switch toggles a single setting on or off. Built on Base UI's `Switch` (so it carries
+ * `role="switch"` and full keyboard/form support). Maps to Figma's "Toggle" component.
  *
- * On/off, `disabled`, and `readOnly` are control state from the primitive, not
- * variants — pass them as props (`checked`/`defaultChecked`, `disabled`,
- * `readOnly`). Only the size axis (`magnitude`) is a visual variant.
+ * 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 (
diff --git a/packages/propel/src/components/switch/switch.stories.tsx b/packages/propel/src/components/switch/switch.stories.tsx
index 95bf74df..adb94cb1 100644
--- a/packages/propel/src/components/switch/switch.stories.tsx
+++ b/packages/propel/src/components/switch/switch.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
+
 import { Switch, type SwitchMagnitude } from "./index";
 
 const MAGNITUDES: SwitchMagnitude[] = ["lg", "md", "sm"];
@@ -52,9 +53,9 @@ export const States: Story = {
 };
 
 /**
- * Real interaction: clicking a switch flips `aria-checked`, and a disabled
- * switch stays put. Tagged so it's hidden from the sidebar, docs, and the
- * AI/MCP manifest while still running under the default `test` tag.
+ * Real interaction: clicking a switch flips `aria-checked`, and a disabled switch stays put. Tagged
+ * so it's hidden from the sidebar, docs, and the AI/MCP manifest while still running under the
+ * default `test` tag.
  */
 export const TogglesOnClick: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -70,9 +71,9 @@ export const TogglesOnClick: Story = {
 };
 
 /**
- * Keyboard ARIA pattern (WAI-ARIA switch): Tab moves focus to the switch and
- * **Space** toggles `aria-checked`. Tagged out of the sidebar/docs/manifest while
- * still running under the default `test` tag.
+ * Keyboard ARIA pattern (WAI-ARIA switch): Tab moves focus to the switch and **Space** toggles
+ * `aria-checked`. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
  */
 export const KeyboardToggle: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/tabs/index.tsx b/packages/propel/src/components/tabs/index.tsx
index f241423f..baebd5ae 100644
--- a/packages/propel/src/components/tabs/index.tsx
+++ b/packages/propel/src/components/tabs/index.tsx
@@ -2,6 +2,7 @@ import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { cva, cx } from "class-variance-authority";
 import * as React from "react";
+
 import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
 
 // The Figma "Tabs" component defines two visual treatments. `contained` wraps
@@ -33,16 +34,16 @@ export type TabsProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Visual treatment (Figma variant). `contained` lifts the active tab onto a
-   * raised card inside a pill; `underline` slides a dark bar under it. Required, with
-   * no silent default, like the other essential axes (e.g. Switch `magnitude`).
+   * Visual treatment (Figma variant). `contained` lifts the active tab onto a raised card inside a
+   * pill; `underline` slides a dark bar under it. Required, with no silent default, like the other
+   * essential axes (e.g. Switch `magnitude`).
    */
   variant: TabsVariant;
 };
 
 /**
- * Root of a tab set. Groups a `TabsList` of `Tab`s with their `TabsPanel`s and
- * tracks which tab is active. Build the compound API from its parts:
+ * Root of a tab set. Groups a `TabsList` of `Tab`s with their `TabsPanel`s and tracks which tab is
+ * active. Build the compound API from its parts:
  *
  * ```tsx
  * <Tabs variant="contained" defaultValue="overview">
@@ -52,7 +53,7 @@ export type TabsProps = Omit<
  *   </TabsList>
  *   <TabsPanel value="overview">…</TabsPanel>
  *   <TabsPanel value="activity">…</TabsPanel>
- * </Tabs>
+ * </Tabs>;
  * ```
  */
 export function Tabs({ variant, ...props }: TabsProps) {
@@ -91,12 +92,11 @@ export type TabsListProps = Omit<
 /**
  * The row of tabs. Renders the active-tab `Tabs.Indicator` for the underline.
  *
- * The list is also a Base UI `ScrollArea.Viewport` (Base UI's documented Tabs +
- * ScrollArea render-merge): the `ScrollArea.Root` bounds the width, and when the
- * tabs are wider than the space they have, the row scrolls horizontally with
- * propel's overlay scrollbar (hidden at rest, revealed on hover/scroll) instead
- * of overflowing its container. When the tabs fit, the row just hugs them. This is
- * what lets a long tab bar live inside a width-constrained header.
+ * The list is also a Base UI `ScrollArea.Viewport` (Base UI's documented Tabs + ScrollArea
+ * render-merge): the `ScrollArea.Root` bounds the width, and when the tabs are wider than the space
+ * they have, the row scrolls horizontally with propel's overlay scrollbar (hidden at rest, revealed
+ * on hover/scroll) instead of overflowing its container. When the tabs fit, the row just hugs them.
+ * This is what lets a long tab bar live inside a width-constrained header.
  */
 export function TabsList({ children, ...props }: TabsListProps) {
   const variant = React.useContext(TabsVariantContext);
@@ -126,7 +126,7 @@ export function TabsList({ children, ...props }: TabsListProps) {
 // 40px. The per-tab bar handles the hover affordance (placeholder gray); the
 // active bar is the JS-measured `TabsIndicator` overlaid on top.
 const tabVariants = cva(
-  "cursor-pointer font-medium whitespace-nowrap outline-none transition-colors select-none focus-visible:ring-2 focus-visible:ring-accent-strong disabled:cursor-not-allowed disabled:text-disabled",
+  "cursor-pointer font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-accent-strong disabled:cursor-not-allowed disabled:text-disabled",
   {
     variants: {
       variant: {
@@ -168,9 +168,9 @@ export type TabProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Optional leading icon (e.g. a lucide icon), sized to 16px and tinted to the tab's
-   * text color. Named `leadingIcon` (not `icon`) to match Button/Input and leave room
-   * for a future `trailingIcon`.
+   * Optional leading icon (e.g. a lucide icon), sized to 16px and tinted to the tab's text color.
+   * Named `leadingIcon` (not `icon`) to match Button/Input and leave room for a future
+   * `trailingIcon`.
    */
   leadingIcon?: React.ReactNode;
 };
@@ -237,8 +237,8 @@ export type TabsIndicatorProps = Omit<
 >;
 
 /**
- * The underline bar. Surfaced for callers composing a custom list; the built-in
- * `TabsList` already renders it for the `underline` variant.
+ * The underline bar. Surfaced for callers composing a custom list; the built-in `TabsList` already
+ * renders it for the `underline` variant.
  */
 export function TabsIndicator(props: TabsIndicatorProps) {
   return <BaseTabs.Indicator className={tabsIndicatorVariants()} {...props} />;
diff --git a/packages/propel/src/components/tabs/tabs.stories.tsx b/packages/propel/src/components/tabs/tabs.stories.tsx
index 9d05c098..3213eaec 100644
--- a/packages/propel/src/components/tabs/tabs.stories.tsx
+++ b/packages/propel/src/components/tabs/tabs.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Activity, LayoutGrid, Settings } from "lucide-react";
 import { expect, waitFor } from "storybook/test";
+
 import { Tab, Tabs, TabsIndicator, TabsList, TabsPanel } from "./index";
 
 const meta = {
@@ -103,11 +104,10 @@ export const UnderlineWithIcons: Story = {
 };
 
 /**
- * When a tab set is wider than the space it has, the row scrolls horizontally
- * instead of overflowing its container. The overlay scrollbar is hidden at rest
- * and fades in on hover/scroll. Keyboard navigation still reaches every tab, and
- * Base UI keeps the focused tab in view. Here the trail is capped to a narrow
- * column so the later tabs scroll into view.
+ * When a tab set is wider than the space it has, the row scrolls horizontally instead of
+ * overflowing its container. The overlay scrollbar is hidden at rest and fades in on hover/scroll.
+ * Keyboard navigation still reaches every tab, and Base UI keeps the focused tab in view. Here the
+ * trail is capped to a narrow column so the later tabs scroll into view.
  */
 export const Overflowing: Story = {
   args: { variant: "underline" },
@@ -137,10 +137,9 @@ export const Overflowing: Story = {
 };
 
 /**
- * The overflowing list is a real horizontal scroll container (`scrollWidth`
- * exceeds `clientWidth`) and scrolling it moves the row. Tagged `!dev`/`!autodocs`/
- * `!manifest` so it stays out of the sidebar, docs, and AI manifest but still runs
- * under the default `test` tag.
+ * The overflowing list is a real horizontal scroll container (`scrollWidth` exceeds `clientWidth`)
+ * and scrolling it moves the row. Tagged `!dev`/`!autodocs`/ `!manifest` so it stays out of the
+ * sidebar, docs, and AI manifest but still runs under the default `test` tag.
  */
 export const OverflowScrolls: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -171,10 +170,9 @@ export const OverflowScrolls: Story = {
 };
 
 /**
- * Real interaction test: clicking a tab selects it (`aria-selected="true"`) and
- * reveals its panel while the previously active panel hides. Tagged `!dev`/
- * `!autodocs`/`!manifest` so it stays out of the sidebar, docs, and AI manifest
- * but still runs under the default `test` tag.
+ * Real interaction test: clicking a tab selects it (`aria-selected="true"`) and reveals its panel
+ * while the previously active panel hides. Tagged `!dev`/ `!autodocs`/`!manifest` so it stays out
+ * of the sidebar, docs, and AI manifest but still runs under the default `test` tag.
  */
 export const ClickActivates: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -214,14 +212,13 @@ export const ClickActivates: Story = {
 };
 
 /**
- * Keyboard / ARIA tab pattern (CI-enforced). Base UI's tablist uses a roving
- * tabindex: it is one Tab stop, only the selected tab has `tabindex=0`, and the
- * arrow keys move *focus* between tabs. Selection is **manual** (Base UI
- * `activateOnFocus` defaults to `false`): arrowing moves focus but does NOT
- * change `aria-selected`/the panel — you commit with Enter/Space (a native
- * `<button>` click). Home/End jump to the first/last tab (Base UI sets
- * `enableHomeAndEndKeys`). Tagged `!dev`/`!autodocs`/`!manifest` so it stays out
- * of the sidebar/docs/AI manifest but still runs under the default `test` tag.
+ * Keyboard / ARIA tab pattern (CI-enforced). Base UI's tablist uses a roving tabindex: it is one
+ * Tab stop, only the selected tab has `tabindex=0`, and the arrow keys move _focus_ between tabs.
+ * Selection is **manual** (Base UI `activateOnFocus` defaults to `false`): arrowing moves focus but
+ * does NOT change `aria-selected`/the panel — you commit with Enter/Space (a native `<button>`
+ * click). Home/End jump to the first/last tab (Base UI sets `enableHomeAndEndKeys`). Tagged
+ * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar/docs/AI manifest but still runs
+ * under the default `test` tag.
  */
 export const KeyboardNavigates: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/toast/index.tsx b/packages/propel/src/components/toast/index.tsx
index 36870fc3..f8c38d0e 100644
--- a/packages/propel/src/components/toast/index.tsx
+++ b/packages/propel/src/components/toast/index.tsx
@@ -2,6 +2,7 @@ import { Toast as BaseToast } from "@base-ui/react/toast";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
+
 import { surfaceVariants } from "../../internal/surface";
 import { Progress } from "../progress/index";
 
@@ -112,10 +113,9 @@ const statusIconVariants = cva("size-4 shrink-0", {
 export type ToastTone = NonNullable<VariantProps<typeof statusIconVariants>["tone"]>;
 
 /**
- * A single action button rendered inside a toast. The toast is a portaled,
- * auto-dismissing surface with no `className`/`style` escape hatch, so an action is
- * declared as data (label + handler) rather than arbitrary markup — keeping the
- * styling on-token and the API closed.
+ * A single action button rendered inside a toast. The toast is a portaled, auto-dismissing surface
+ * with no `className`/`style` escape hatch, so an action is declared as data (label + handler)
+ * rather than arbitrary markup — keeping the styling on-token and the API closed.
  */
 export type ToastAction = {
   /** Visible button text — also its accessible name. */
@@ -125,31 +125,30 @@ export type ToastAction = {
 };
 
 /**
- * Custom data carried on every toast queued through this component. `add({ ... data:
- * { tone } })` selects the status icon + color; `tone` is required so the caller
- * always chooses the intent explicitly. Action buttons are optional and map directly
- * to Figma's toast `button`/`button2` booleans (node 1146-61689): `actions` is the
- * left cluster of 1–2 buttons, `primaryAction` is the right-aligned button shown on
- * the success treatment.
+ * Custom data carried on every toast queued through this component. `add({ ... data: { tone } })`
+ * selects the status icon + color; `tone` is required so the caller always chooses the intent
+ * explicitly. Action buttons are optional and map directly to Figma's toast `button`/`button2`
+ * booleans (node 1146-61689): `actions` is the left cluster of 1–2 buttons, `primaryAction` is the
+ * right-aligned button shown on the success treatment.
  */
 export type ToastData = {
   /** Semantic intent — drives the status icon and its color. */
   tone: ToastTone;
   /**
-   * Completion (0–100) of a long-running task the toast is reporting. When set, a thin
-   * `Progress` bar with a `%` label renders between the description and the action row
-   * (Figma node 1146-61689). Omit it for a plain toast.
+   * Completion (0–100) of a long-running task the toast is reporting. When set, a thin `Progress`
+   * bar with a `%` label renders between the description and the action row (Figma node
+   * 1146-61689). Omit it for a plain toast.
    */
   progress?: number;
   /**
-   * Left-aligned action cluster (Figma's `button` / `button2`). One or two buttons;
-   * extras beyond two are ignored to stay faithful to the design.
+   * Left-aligned action cluster (Figma's `button` / `button2`). One or two buttons; extras beyond
+   * two are ignored to stay faithful to the design.
    */
   actions?: ToastAction[];
   /**
-   * Optional right-aligned action, rendered whenever it's provided (the component
-   * doesn't restrict it by tone). In Figma it appears on the success treatment. Wired
-   * through Base UI's `Toast.Action` so it takes part in the toast's focus management.
+   * Optional right-aligned action, rendered whenever it's provided (the component doesn't restrict
+   * it by tone). In Figma it appears on the success treatment. Wired through Base UI's
+   * `Toast.Action` so it takes part in the toast's focus management.
    */
   primaryAction?: ToastAction;
 };
@@ -170,11 +169,10 @@ 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 } })`.
- * Bundles Base UI's `Toast.Provider` (manager + context), a fixed-position
- * `Viewport`, and a styled `Toast` for every queued item — so consumers only manage
- * content, never layout.
+ * Wraps the app and renders the toast viewport. Mount it once near the root, then queue toasts with
+ * `useToast().add({ title, description, data: { tone } })`. Bundles Base UI's `Toast.Provider`
+ * (manager + context), a fixed-position `Viewport`, and a styled `Toast` for every queued item — so
+ * consumers only manage content, never layout.
  */
 export function ToastProvider({ children, ...props }: ToastProviderProps) {
   return (
@@ -201,10 +199,10 @@ export type ToastProps = Omit<
 >;
 
 /**
- * A single styled toast: status icon (auto-selected from `toast.data.tone`), title,
- * description, optional action buttons (from `toast.data.actions` / `primaryAction`),
- * and a close button. Rendered automatically by `ToastProvider` for each queued toast
- * — you normally don't render this directly.
+ * A single styled toast: status icon (auto-selected from `toast.data.tone`), title, description,
+ * optional action buttons (from `toast.data.actions` / `primaryAction`), and a close button.
+ * Rendered automatically by `ToastProvider` for each queued toast — you normally don't render this
+ * directly.
  */
 export function Toast({ toast, ...props }: ToastProps) {
   // `tone` is a required field of `ToastData`, supplied when the toast is queued.
@@ -284,7 +282,7 @@ export function Toast({ toast, ...props }: ToastProps) {
       </div>
       <BaseToast.Close
         aria-label="Dismiss"
-        className="absolute top-1 end-1 inline-flex size-5 items-center justify-center rounded-sm text-icon-tertiary transition-colors hover:bg-layer-transparent-hover"
+        className="absolute end-1 top-1 inline-flex size-5 items-center justify-center rounded-sm text-icon-tertiary transition-colors hover:bg-layer-transparent-hover"
       >
         <X aria-hidden className="size-3.5" />
       </BaseToast.Close>
diff --git a/packages/propel/src/components/toast/toast.stories.tsx b/packages/propel/src/components/toast/toast.stories.tsx
index a07e9683..c073c495 100644
--- a/packages/propel/src/components/toast/toast.stories.tsx
+++ b/packages/propel/src/components/toast/toast.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, fn, waitFor, within } from "storybook/test";
+
 import { type ToastData, type ToastTone, ToastProvider, useToast } from "./index";
 
 const TONES: ToastTone[] = ["success", "danger", "info", "warning", "neutral"];
@@ -70,8 +71,8 @@ export const Default: Story = {
 };
 
 /**
- * One trigger per tone. Each queues a toast with the matching status icon + color
- * (success / danger / info / warning / neutral).
+ * One trigger per tone. Each queues a toast with the matching status icon + color (success / danger
+ * / info / warning / neutral).
  */
 export const Tones: Story = {
   parameters: { controls: { disable: true } },
@@ -85,8 +86,8 @@ export const Tones: Story = {
 };
 
 /**
- * A single left-aligned action (Figma's `button` boolean). Pass one entry in
- * `data.actions` — it renders as a transparent pill under the description.
+ * A single left-aligned action (Figma's `button` boolean). Pass one entry in `data.actions` — it
+ * renders as a transparent pill under the description.
  */
 export const WithAction: Story = {
   parameters: { controls: { disable: true } },
@@ -100,9 +101,8 @@ export const WithAction: Story = {
 };
 
 /**
- * A toast reporting a long-running task (Figma node 1146-61689): pass `data.progress`
- * (0–100) and a thin `Progress` bar with a `%` label renders between the description
- * and the action row.
+ * A toast reporting a long-running task (Figma node 1146-61689): pass `data.progress` (0–100) and a
+ * thin `Progress` bar with a `%` label renders between the description and the action row.
  */
 export const WithProgress: Story = {
   parameters: { controls: { disable: true } },
@@ -116,10 +116,9 @@ export const WithProgress: Story = {
 };
 
 /**
- * Interaction test for the progress treatment: queue a toast carrying `data.progress`
- * and assert the `Progress` bar renders inside it with the right `progressbar` role,
- * `aria-valuenow`, and visible `%` label. Tagged so it stays out of the
- * sidebar/docs/manifest.
+ * Interaction test for the progress treatment: queue a toast carrying `data.progress` and assert
+ * the `Progress` bar renders inside it with the right `progressbar` role, `aria-valuenow`, and
+ * visible `%` label. Tagged so it stays out of the sidebar/docs/manifest.
  */
 export const ProgressInteraction: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -148,8 +147,8 @@ export const ProgressInteraction: Story = {
 };
 
 /**
- * Two left-aligned actions (Figma's `button` + `button2` on the danger/info/warning
- * treatments). The cluster sits inline-start; there is no right-aligned button.
+ * Two left-aligned actions (Figma's `button` + `button2` on the danger/info/warning treatments).
+ * The cluster sits inline-start; there is no right-aligned button.
  */
 export const WithTwoActions: Story = {
   parameters: { controls: { disable: true } },
@@ -168,9 +167,9 @@ export const WithTwoActions: Story = {
 };
 
 /**
- * The success treatment: a left cluster plus a right-aligned primary action
- * (`data.primaryAction`). The primary button pins to the inline-end edge while the
- * left cluster grows to fill — matching Figma's success tone.
+ * The success treatment: a left cluster plus a right-aligned primary action (`data.primaryAction`).
+ * The primary button pins to the inline-end edge while the left cluster grows to fill — matching
+ * Figma's success tone.
  */
 export const WithPrimaryAction: Story = {
   parameters: { controls: { disable: true } },
@@ -187,10 +186,10 @@ export const WithPrimaryAction: Story = {
 };
 
 /**
- * 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 area and each toast as a `dialog`); clicking its
- * Dismiss button removes it. Tagged so it stays out of the sidebar/docs/manifest.
+ * 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
+ * area and each toast as a `dialog`); clicking its Dismiss button removes it. Tagged so it stays
+ * out of the sidebar/docs/manifest.
  */
 export const QueueAndDismiss: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -221,11 +220,10 @@ export const QueueAndDismiss: Story = {
 };
 
 /**
- * Interaction test for action buttons: queue a toast carrying a left action and a
- * right-aligned primary action, then verify both fire their handlers: the primary on
- * click, and the left action on Enter once focused. The viewport's keyboard tab flow
- * is covered separately by KeyboardDismiss. Tagged so it stays out of the
- * sidebar/docs/manifest.
+ * Interaction test for action buttons: queue a toast carrying a left action and a right-aligned
+ * primary action, then verify both fire their handlers: the primary on click, and the left action
+ * on Enter once focused. The viewport's keyboard tab flow is covered separately by KeyboardDismiss.
+ * Tagged so it stays out of the sidebar/docs/manifest.
  */
 export const ActionsInteraction: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -264,19 +262,19 @@ export const ActionsInteraction: Story = {
 };
 
 /**
- * Keyboard-only reachability: a user with no pointer must be able to reach and
- * activate the Dismiss control. This drives Base UI's real keyboard model end to end,
- * with NO `hover` and NO programmatic `.focus()`, so a regression that made Dismiss
- * unreachable by keyboard would actually fail this test:
+ * Keyboard-only reachability: a user with no pointer must be able to reach and activate the Dismiss
+ * control. This drives Base UI's real keyboard model end to end, with NO `hover` and NO
+ * programmatic `.focus()`, so a regression that made Dismiss unreachable by keyboard would actually
+ * fail this test:
  *
- *   1. **F6** — Base UI's global hotkey moves focus into the toast viewport (a
- *      `role="region"` live area) and marks it `focused`, which expands the viewport.
- *      Expanding un-hides the close button (Base UI keeps `Toast.Close` `aria-hidden`
- *      until the viewport is expanded or the button itself is focused).
- *   2. **Tab** — from the viewport, focus crosses Base UI's focus guard onto the
- *      frontmost toast (`role="dialog"`).
- *   3. **Tab** — from the toast, focus lands on the only remaining control: Dismiss.
- *   4. **Enter** — activates Dismiss and removes the toast from the live region.
+ * 1. **F6** — Base UI's global hotkey moves focus into the toast viewport (a `role="region"` live
+ *    area) and marks it `focused`, which expands the viewport. Expanding un-hides the close button
+ *    (Base UI keeps `Toast.Close` `aria-hidden` until the viewport is expanded or the button itself
+ *    is focused).
+ * 2. **Tab** — from the viewport, focus crosses Base UI's focus guard onto the frontmost toast
+ *    (`role="dialog"`).
+ * 3. **Tab** — from the toast, focus lands on the only remaining control: Dismiss.
+ * 4. **Enter** — activates Dismiss and removes the toast from the live region.
  *
  * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
  */
diff --git a/packages/propel/src/components/toolbar/index.tsx b/packages/propel/src/components/toolbar/index.tsx
index 2bc7ac6f..fe2c31cd 100644
--- a/packages/propel/src/components/toolbar/index.tsx
+++ b/packages/propel/src/components/toolbar/index.tsx
@@ -5,6 +5,7 @@ import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
+
 import { surfaceVariants } from "../../internal/surface";
 import {
   Dropdown,
@@ -61,20 +62,19 @@ export type ToolbarProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Where the toolbar is placed, which controls its surface and density. `floater`
-   * is a self-contained card with a border + shadow that hovers over content and
-   * packs its controls tightly (24px). `topbar` and `bottom-bar` are flat, sit flush
-   * inside an existing bar, and use the roomier 28px density.
+   * Where the toolbar is placed, which controls its surface and density. `floater` is a
+   * self-contained card with a border + shadow that hovers over content and packs its controls
+   * tightly (24px). `topbar` and `bottom-bar` are flat, sit flush inside an existing bar, and use
+   * the roomier 28px density.
    */
   variant: ToolbarVariant;
 };
 
 /**
- * A row of controls — toggle buttons, button groups, dropdowns — for acting on a
- * selection or document (e.g. a rich-text formatting toolbar). Built on Base UI's
- * `Toolbar`, so arrow keys roam between items as a single tab stop and the root
- * carries `role="toolbar"`. Compose it from `ToolbarGroup`, `ToolbarButton`,
- * `ToolbarToggle`, `ToolbarSeparator` and `ToolbarDropdown`.
+ * A row of controls — toggle buttons, button groups, dropdowns — for acting on a selection or
+ * document (e.g. a rich-text formatting toolbar). Built on Base UI's `Toolbar`, so arrow keys roam
+ * between items as a single tab stop and the root carries `role="toolbar"`. Compose it from
+ * `ToolbarGroup`, `ToolbarButton`, `ToolbarToggle`, `ToolbarSeparator` and `ToolbarDropdown`.
  */
 export function Toolbar({ variant, ...props }: ToolbarProps) {
   return (
@@ -90,9 +90,8 @@ export type ToolbarGroupProps = Omit<
 >;
 
 /**
- * Groups related controls (e.g. bold / italic / underline) so they read as one
- * cluster, with a small gap between them. Disabling the group disables every
- * control inside it.
+ * Groups related controls (e.g. bold / italic / underline) so they read as one cluster, with a
+ * small gap between them. Disabling the group disables every control inside it.
  */
 export function ToolbarGroup(props: ToolbarGroupProps) {
   return <BaseToolbar.Group className="flex items-center gap-0.5" {...props} />;
@@ -132,16 +131,15 @@ export type ToolbarButtonProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Accessible name for the button. Required because the button's content is an
-   * icon (icons are `aria-hidden`), so the control is still named for assistive tech.
+   * Accessible name for the button. Required because the button's content is an icon (icons are
+   * `aria-hidden`), so the control is still named for assistive tech.
    */
   "aria-label": string;
 };
 
 /**
- * A plain action button in the toolbar (e.g. insert link, insert image). Holds an
- * icon and therefore requires an `aria-label`. For an on/off control use
- * `ToolbarToggle` instead.
+ * A plain action button in the toolbar (e.g. insert link, insert image). Holds an icon and
+ * therefore requires an `aria-label`. For an on/off control use `ToolbarToggle` instead.
  */
 export function ToolbarButton(props: ToolbarButtonProps) {
   const density = React.useContext(ToolbarDensityContext);
@@ -153,17 +151,16 @@ export type ToolbarToggleProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Accessible name for the toggle. Required because toggles hold an icon
-   * (`aria-hidden`); without it the control has no accessible name.
+   * Accessible name for the toggle. Required because toggles hold an icon (`aria-hidden`); without
+   * it the control has no accessible name.
    */
   "aria-label": string;
 };
 
 /**
- * A two-state (pressed / not-pressed) button for formatting toggles like bold or
- * italic. Renders Base UI's `Toggle` inside a `Toolbar.Button`, so it both reports
- * `aria-pressed` and participates in toolbar keyboard navigation. Use `value` to
- * make it a member of a `ToolbarToggleGroup`.
+ * A two-state (pressed / not-pressed) button for formatting toggles like bold or italic. Renders
+ * Base UI's `Toggle` inside a `Toolbar.Button`, so it both reports `aria-pressed` and participates
+ * in toolbar keyboard navigation. Use `value` to make it a member of a `ToolbarToggleGroup`.
  */
 export function ToolbarToggle(props: ToolbarToggleProps) {
   const density = React.useContext(ToolbarDensityContext);
@@ -181,9 +178,8 @@ export type ToolbarToggleGroupProps = Omit<
 };
 
 /**
- * A set of `ToolbarToggle`s that share state — e.g. text-alignment where only one
- * of left / center / right is active at a time. Pass `multiple` to allow several
- * to be pressed simultaneously.
+ * A set of `ToolbarToggle`s that share state — e.g. text-alignment where only one of left / center
+ * / right is active at a time. Pass `multiple` to allow several to be pressed simultaneously.
  */
 export function ToolbarToggleGroup(props: ToolbarToggleGroupProps) {
   return <ToggleGroup className="flex items-center gap-0.5" {...props} />;
@@ -195,8 +191,8 @@ export type ToolbarSeparatorProps = Omit<
 >;
 
 /**
- * A thin vertical rule that visually divides one cluster of controls from the
- * next (Figma `border/subtle-1`). Decorative; Base UI gives it the right role.
+ * A thin vertical rule that visually divides one cluster of controls from the next (Figma
+ * `border/subtle-1`). Decorative; Base UI gives it the right role.
  */
 export function ToolbarSeparator(props: ToolbarSeparatorProps) {
   return (
@@ -245,22 +241,25 @@ const dropdownChevronVariants = cva("shrink-0 text-icon-secondary", {
 });
 
 /**
- * The dropdown menu in a toolbar — the Figma "Text" / "Aa" style pickers. It IS
- * propel's `Dropdown` (Base UI `Menu`), so it composes from parts instead of a closed
- * `items[]` config: a `ToolbarDropdownTrigger` plus a `ToolbarDropdownContent` of
- * `ToolbarDropdownItem`s. That means a toolbar menu can do everything a `Dropdown`
- * can — per-row icons, selected/disabled rows, separators, submenus — and the trigger
- * renders through `Toolbar.Button`, so it stays part of the toolbar's roving keyboard
- * navigation.
+ * The dropdown menu in a toolbar — the Figma "Text" / "Aa" style pickers. It IS propel's `Dropdown`
+ * (Base UI `Menu`), so it composes from parts instead of a closed `items[]` config: a
+ * `ToolbarDropdownTrigger` plus a `ToolbarDropdownContent` of `ToolbarDropdownItem`s. That means a
+ * toolbar menu can do everything a `Dropdown` can — per-row icons, selected/disabled rows,
+ * separators, submenus — and the trigger renders through `Toolbar.Button`, so it stays part of the
+ * toolbar's roving keyboard navigation.
  *
  * ```tsx
  * <ToolbarDropdown>
  *   <ToolbarDropdownTrigger aria-label="Text style">Text</ToolbarDropdownTrigger>
  *   <ToolbarDropdownContent>
- *     <ToolbarDropdownItem variant="default" onClick={() => setBlock("h1")}>Heading 1</ToolbarDropdownItem>
- *     <ToolbarDropdownItem variant="default" onClick={() => setBlock("p")}>Paragraph</ToolbarDropdownItem>
+ *     <ToolbarDropdownItem variant="default" onClick={() => setBlock("h1")}>
+ *       Heading 1
+ *     </ToolbarDropdownItem>
+ *     <ToolbarDropdownItem variant="default" onClick={() => setBlock("p")}>
+ *       Paragraph
+ *     </ToolbarDropdownItem>
  *   </ToolbarDropdownContent>
- * </ToolbarDropdown>
+ * </ToolbarDropdown>;
  * ```
  */
 export const ToolbarDropdown = Dropdown;
@@ -273,9 +272,9 @@ export type ToolbarDropdownTriggerProps = Omit<
 
 /**
  * The trigger that opens a `ToolbarDropdown`: a label + chevron. It renders through
- * `Toolbar.Button` (so it keeps the toolbar's roving focus) and `Menu.Trigger` (so it
- * opens the menu), and sizes to the toolbar's density. Pass an `aria-label` when the
- * label isn't descriptive on its own (e.g. the "Aa" font picker).
+ * `Toolbar.Button` (so it keeps the toolbar's roving focus) and `Menu.Trigger` (so it opens the
+ * menu), and sizes to the toolbar's density. Pass an `aria-label` when the label isn't descriptive
+ * on its own (e.g. the "Aa" font picker).
  */
 export function ToolbarDropdownTrigger({ children, ...props }: ToolbarDropdownTriggerProps) {
   const density = React.useContext(ToolbarDensityContext);
@@ -292,15 +291,15 @@ export function ToolbarDropdownTrigger({ children, ...props }: ToolbarDropdownTr
 }
 
 /**
- * The menu surface for a `ToolbarDropdown` — propel's `DropdownContent`, portaled and
- * positioned under the trigger. Place `ToolbarDropdownItem`s inside it.
+ * The menu surface for a `ToolbarDropdown` — propel's `DropdownContent`, portaled and positioned
+ * under the trigger. Place `ToolbarDropdownItem`s inside it.
  */
 export const ToolbarDropdownContent = DropdownContent;
 export type ToolbarDropdownContentProps = DropdownContentProps;
 
 /**
- * A selectable row in a `ToolbarDropdown` — propel's `DropdownItem`. `variant` is
- * required (the row layout axis); use `"default"` for the single-line picker rows.
+ * A selectable row in a `ToolbarDropdown` — propel's `DropdownItem`. `variant` is required (the row
+ * layout axis); use `"default"` for the single-line picker rows.
  */
 export const ToolbarDropdownItem = DropdownItem;
 export type ToolbarDropdownItemProps = DropdownItemProps;
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index bc2b5031..105e851f 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type * as React from "react";
 import {
   AlignCenter,
   AlignLeft,
@@ -22,7 +21,9 @@ import {
   Table,
   Underline,
 } from "lucide-react";
+import type * as React from "react";
 import { expect } from "storybook/test";
+
 import {
   Toolbar,
   ToolbarButton,
@@ -172,9 +173,9 @@ export const Variants: Story = {
 };
 
 /**
- * Because `ToolbarDropdown` composes propel's `Dropdown`, a toolbar menu can hold
- * richer rows than the old `items[]` config allowed: per-row leading icons, a
- * separator between groups, a selected marker, and disabled rows.
+ * Because `ToolbarDropdown` composes propel's `Dropdown`, a toolbar menu can hold richer rows than
+ * the old `items[]` config allowed: per-row leading icons, a separator between groups, a selected
+ * marker, and disabled rows.
  */
 export const ComposableMenu: Story = {
   // Always-open + portaled: keep it out of the Vitest run so its popup can't leak into
@@ -209,10 +210,10 @@ export const ComposableMenu: Story = {
 };
 
 /**
- * Behavioral checks that run in the browser: the root exposes `role="toolbar"`,
- * every icon button is reachable by its accessible name, and clicking a toggle
- * flips its `aria-pressed`. Tagged out of the sidebar/docs/manifest — it's a test,
- * not a designer- or agent-facing example — but still runs under the `test` tag.
+ * Behavioral checks that run in the browser: the root exposes `role="toolbar"`, every icon button
+ * is reachable by its accessible name, and clicking a toggle flips its `aria-pressed`. Tagged out
+ * of the sidebar/docs/manifest — it's a test, not a designer- or agent-facing example — but still
+ * runs under the `test` tag.
  */
 export const Behavior: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -230,12 +231,11 @@ export const Behavior: Story = {
 };
 
 /**
- * Keyboard ARIA pattern (WAI-ARIA toolbar, roving tabindex): the toolbar is a single
- * tab stop — only the active item has `tabindex=0`, the rest `tabindex=-1` — so Tab
- * enters the toolbar once. **Arrow Left/Right** roam focus between items, and a
- * focused button activates with **Enter/Space**. A simple all-button toolbar keeps
- * the navigation deterministic. Tagged out of the sidebar/docs/manifest while still
- * running under the default `test` tag.
+ * Keyboard ARIA pattern (WAI-ARIA toolbar, roving tabindex): the toolbar is a single tab stop —
+ * only the active item has `tabindex=0`, the rest `tabindex=-1` — so Tab enters the toolbar once.
+ * **Arrow Left/Right** roam focus between items, and a focused button activates with
+ * **Enter/Space**. A simple all-button toolbar keeps the navigation deterministic. Tagged out of
+ * the sidebar/docs/manifest while still running under the default `test` tag.
  */
 export const KeyboardRovingFocus: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/tooltip/index.tsx b/packages/propel/src/components/tooltip/index.tsx
index 7dc6ecfd..5c1a2db9 100644
--- a/packages/propel/src/components/tooltip/index.tsx
+++ b/packages/propel/src/components/tooltip/index.tsx
@@ -3,11 +3,11 @@ import { cx } from "class-variance-authority";
 import * as React from "react";
 
 /**
- * Shares a single open/close delay across every tooltip beneath it, so that once
- * one tooltip has opened, moving to an adjacent trigger shows its tooltip instantly
- * (the usual "tooltip group" feel). Optional — a `Tooltip` works on its own — but
- * wrap an app or a toolbar in it when you want that grouped timing. Thin re-export
- * of Base UI's provider so consumers don't reach into `@base-ui/react` directly.
+ * Shares a single open/close delay across every tooltip beneath it, so that once one tooltip has
+ * opened, moving to an adjacent trigger shows its tooltip instantly (the usual "tooltip group"
+ * feel). Optional — a `Tooltip` works on its own — but wrap an app or a toolbar in it when you want
+ * that grouped timing. Thin re-export of Base UI's provider so consumers don't reach into
+ * `@base-ui/react` directly.
  */
 type BaseTooltipProviderProps = React.ComponentProps<typeof BaseTooltip.Provider>;
 
@@ -34,46 +34,47 @@ export type TooltipProps = Omit<
   /** The text (or rich content) shown inside the tooltip popup. */
   content: React.ReactNode;
   /**
-   * Optional keyboard-shortcut hint shown to the right of `content`, dimmed
-   * (e.g. `"⌘ K"`). Maps to the Figma "Cmd + K" slot — omit it for a plain tooltip.
+   * Optional keyboard-shortcut hint shown to the right of `content`, dimmed (e.g. `"⌘ K"`). Maps to
+   * the Figma "Cmd + K" slot — omit it for a plain tooltip.
    */
   shortcut?: React.ReactNode;
   /**
-   * The element the tooltip is attached to. Base UI renders the trigger as a
-   * `<button>` by default; pass a single element and it is used as the trigger via
-   * the `render` prop, so any focusable element (a real button, an icon button)
-   * can anchor the tooltip.
+   * The element the tooltip is attached to. Base UI renders the trigger as a `<button>` by default;
+   * pass a single element and it is used as the trigger via the `render` prop, so any focusable
+   * element (a real button, an icon button) can anchor the tooltip.
    */
   children: React.ReactElement;
   /**
-   * Which side of the trigger to place the popup on. May flip automatically to
-   * stay in view.
+   * Which side of the trigger to place the popup on. May flip automatically to stay in view.
+   *
    * @default "top"
    */
   side?: React.ComponentProps<typeof BaseTooltip.Positioner>["side"];
   /**
    * Gap in pixels between the trigger and the popup. Leaves room for the arrow.
+   *
    * @default 8
    */
   sideOffset?: number;
   /**
    * How long to wait (ms) before opening on hover. Focus opens immediately.
+   *
    * @default 600
    */
   delay?: number;
 };
 
 /**
- * A small popup that describes the element it is attached to. Appears on hover or
- * keyboard focus of the trigger and is dismissed on blur, pointer-leave, or `Esc`.
+ * A small popup that describes the element it is attached to. Appears on hover or keyboard focus of
+ * the trigger and is dismissed on blur, pointer-leave, or `Esc`.
  *
- * Built on Base UI's tooltip, so it's accessible by default: the popup is exposed
- * as `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the
- * label as `content`, and an optional `shortcut` for a dimmed keyboard hint.
+ * Built on Base UI's tooltip, so it's accessible by default: the popup is exposed as
+ * `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the label as
+ * `content`, and an optional `shortcut` for a dimmed keyboard hint.
  *
- * Colors come from propel's adaptive surface tokens (`bg-layer-2` / `text-primary`
- * / `border-subtle-1`), so the tooltip is light on light themes and dark on dark
- * themes, matching the Figma "Tooltip" component (node 1144-3159).
+ * Colors come from propel's adaptive surface tokens (`bg-layer-2` / `text-primary` /
+ * `border-subtle-1`), so the tooltip is light on light themes and dark on dark themes, matching the
+ * Figma "Tooltip" component (node 1144-3159).
  */
 export function Tooltip({
   content,
@@ -119,12 +120,11 @@ export function Tooltip({
 }
 
 /**
- * The little notch that points from the popup back to the trigger. A rotated square
- * sharing the popup's surface (`bg-layer-2`) and border (`border-subtle-1`), so it
- * matches the popup in every theme. Base UI positions it against the active edge and
- * sets `data-side`; the per-side rules tuck the square half-under the popup so only
- * its two outer faces (the triangle) show, with the inner faces hidden behind the
- * popup body. Only surface/border tokens are used — no arbitrary colors.
+ * The little notch that points from the popup back to the trigger. A rotated square sharing the
+ * popup's surface (`bg-layer-2`) and border (`border-subtle-1`), so it matches the popup in every
+ * theme. Base UI positions it against the active edge and sets `data-side`; the per-side rules tuck
+ * the square half-under the popup so only its two outer faces (the triangle) show, with the inner
+ * faces hidden behind the popup body. Only surface/border tokens are used — no arbitrary colors.
  */
 function TooltipArrow() {
   return (
diff --git a/packages/propel/src/components/tooltip/tooltip.stories.tsx b/packages/propel/src/components/tooltip/tooltip.stories.tsx
index 2e8a39eb..699234df 100644
--- a/packages/propel/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.stories.tsx
@@ -2,6 +2,7 @@ import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useLayoutEffect } from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
+
 import { Tooltip } from "./index";
 
 const sidesGridStyle = {
@@ -37,14 +38,14 @@ export const Default: Story = {};
 
 /**
  * The arrow on every side. Base UI's Positioner accepts both physical
- * (`top`/`bottom`/`left`/`right`) and logical (`inline-start`/`inline-end`) sides, and
- * emits the chosen value as `data-side` on the arrow. This story renders one tooltip
- * per side so the arrow's clip-path and edge offset can be reviewed for each — in
- * particular the logical `inline-start`/`inline-end` sides, which previously had no
- * per-side rule and rendered as a full rotated square offset away from the popup.
+ * (`top`/`bottom`/`left`/`right`) and logical (`inline-start`/`inline-end`) sides, and emits the
+ * chosen value as `data-side` on the arrow. This story renders one tooltip per side so the arrow's
+ * clip-path and edge offset can be reviewed for each — in particular the logical
+ * `inline-start`/`inline-end` sides, which previously had no per-side rule and rendered as a full
+ * rotated square offset away from the popup.
  *
- * Tooltips open instantly (`delay: 0`) and stay open (`open`) so all arrows are
- * visible at once; controls are disabled because the per-side args are fixed.
+ * Tooltips open instantly (`delay: 0`) and stay open (`open`) so all arrows are visible at once;
+ * controls are disabled because the per-side args are fixed.
  */
 export const Sides: Story = {
   tags: ["!autodocs", "!manifest", "!test"],
@@ -67,14 +68,13 @@ export const Sides: Story = {
 };
 
 /**
- * The same matrix in right-to-left. Plane runs both LTR and RTL, so the logical
- * sides must flip with writing direction. Wrapped in Base UI's `DirectionProvider`
- * (which the Positioner reads to resolve `inline-start`/`inline-end` to a physical
- * edge) and `dir="rtl"` (which the arrow's logical insets + `rtl:` clip-path variant
- * react to). In RTL, `inline-start` sits to the *right* of its trigger with the arrow
- * pointing left, and `inline-end` mirrors it — both still pointing back at the trigger.
- * The physical `left`/`right`/`top`/`bottom` sides are direction-independent and
- * render the same as LTR.
+ * The same matrix in right-to-left. Plane runs both LTR and RTL, so the logical sides must flip
+ * with writing direction. Wrapped in Base UI's `DirectionProvider` (which the Positioner reads to
+ * resolve `inline-start`/`inline-end` to a physical edge) and `dir="rtl"` (which the arrow's
+ * logical insets + `rtl:` clip-path variant react to). In RTL, `inline-start` sits to the _right_
+ * of its trigger with the arrow pointing left, and `inline-end` mirrors it — both still pointing
+ * back at the trigger. The physical `left`/`right`/`top`/`bottom` sides are direction-independent
+ * and render the same as LTR.
  */
 export const SidesRtl: Story = {
   name: "Sides (RTL)",
@@ -119,8 +119,8 @@ export const SidesRtl: Story = {
 };
 
 /**
- * A keyboard-shortcut hint sits to the right of the label, dimmed at the smaller
- * caption scale — the Figma "Cmd + K" slot. Pass any node to `shortcut`.
+ * A keyboard-shortcut hint sits to the right of the label, dimmed at the smaller caption scale —
+ * the Figma "Cmd + K" slot. Pass any node to `shortcut`.
  */
 export const WithShortcut: Story = {
   args: {
@@ -130,11 +130,11 @@ export const WithShortcut: Story = {
 };
 
 /**
- * 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 deterministic regardless of Base UI's hover delays. Tagged so it
- * stays out of the sidebar, docs, and AI manifest — it's a behavior test, not an
- * example — but still runs under the default `test` tag.
+ * 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
+ * deterministic regardless of Base UI's hover delays. Tagged so it stays out of the sidebar, docs,
+ * and AI manifest — it's a behavior test, not an example — but still runs under the default `test`
+ * tag.
  */
 export const ShowsOnFocus: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -165,11 +165,10 @@ export const ShowsOnFocus: Story = {
 };
 
 /**
- * Keyboard ARIA pattern (WAI-ARIA tooltip): once a focused trigger has opened the
- * tooltip, **Escape** dismisses it while focus stays on the trigger. Focus (not
- * hover) keeps the open/close deterministic regardless of Base UI's hover delays.
- * Tagged out of the sidebar/docs/manifest while still running under the default
- * `test` tag.
+ * Keyboard ARIA pattern (WAI-ARIA tooltip): once a focused trigger has opened the tooltip,
+ * **Escape** dismisses it while focus stays on the trigger. Focus (not hover) keeps the open/close
+ * deterministic regardless of Base UI's hover delays. Tagged out of the sidebar/docs/manifest while
+ * still running under the default `test` tag.
  */
 export const EscapeCloses: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/workspace-avatar/index.tsx b/packages/propel/src/components/workspace-avatar/index.tsx
index 2ac0935c..3e516c01 100644
--- a/packages/propel/src/components/workspace-avatar/index.tsx
+++ b/packages/propel/src/components/workspace-avatar/index.tsx
@@ -1,6 +1,7 @@
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
+
 import { type AvatarTone, getAvatarTone, initialsToneClass } from "../avatar";
 
 // Magnitudes follow the same scale as Avatar (Figma "Workspace avatar"): 2xs 16
diff --git a/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx b/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx
index 807d0413..e9f24cd4 100644
--- a/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx
+++ b/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+
 import { AVATAR_TONES } from "../avatar/index";
 import { WorkspaceAvatar, type WorkspaceAvatarMagnitude } from "./index";
 
diff --git a/packages/propel/src/internal/loading-button.ts b/packages/propel/src/internal/loading-button.ts
index d2334104..5c2e7278 100644
--- a/packages/propel/src/internal/loading-button.ts
+++ b/packages/propel/src/internal/loading-button.ts
@@ -31,11 +31,10 @@ type LoadingButtonProps<E> = {
 };
 
 /**
- * Returns the four shared `<button>` attributes (`disabled`, `aria-disabled`,
- * `aria-busy`, `onClick`) used by Button and IconButton for the
- * loading/disabled/onClick behavior. `disabled` passes through to the native attribute;
- * `loading` adds `aria-disabled`/`aria-busy` and blocks `onClick` while keeping the
- * button focusable. Pure: it returns props to spread, never JSX.
+ * Returns the four shared `<button>` attributes (`disabled`, `aria-disabled`, `aria-busy`,
+ * `onClick`) used by Button and IconButton for the loading/disabled/onClick behavior. `disabled`
+ * passes through to the native attribute; `loading` adds `aria-disabled`/`aria-busy` and blocks
+ * `onClick` while keeping the button focusable. Pure: it returns props to spread, never JSX.
  */
 export function getLoadingButtonProps<E = HTMLButtonElement>({
   loading,
diff --git a/packages/propel/src/internal/node-slot.ts b/packages/propel/src/internal/node-slot.ts
index 9082bd29..61732d6e 100644
--- a/packages/propel/src/internal/node-slot.ts
+++ b/packages/propel/src/internal/node-slot.ts
@@ -11,5 +11,5 @@ import { cx } from "class-variance-authority";
 // otherwise. This is the single channel a parent uses to size whatever node it holds.
 export const nodeSlotClass = cx(
   "inline-flex shrink-0 items-center justify-center",
-  "[&>svg]:size-[var(--node-size)] [&>img]:size-[var(--node-size)]",
+  "[&>img]:size-[var(--node-size)] [&>svg]:size-[var(--node-size)]",
 );
diff --git a/packages/propel/src/internal/overlay-panel.tsx b/packages/propel/src/internal/overlay-panel.tsx
index c890e8cf..5ac78d9a 100644
--- a/packages/propel/src/internal/overlay-panel.tsx
+++ b/packages/propel/src/internal/overlay-panel.tsx
@@ -1,5 +1,6 @@
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import * as React from "react";
+
 import { ScrollArea } from "../components/scroll-area/index";
 import { surfaceVariants, type SurfaceVariantProps } from "./surface";
 
@@ -57,8 +58,8 @@ export type OverlayPanelProps = {
   /** Surface corner radius (see `internal/surface`). */
   radius: SurfaceVariantProps["radius"];
   /**
-   * 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.
+   * 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;
   /** Sticky content pinned above the scroll body (e.g. a `DropdownSearch`). */
diff --git a/packages/propel/src/internal/scrollbar.ts b/packages/propel/src/internal/scrollbar.ts
index d90f6603..07ab7e82 100644
--- a/packages/propel/src/internal/scrollbar.ts
+++ b/packages/propel/src/internal/scrollbar.ts
@@ -7,7 +7,7 @@ import { cx } from "class-variance-authority";
 // hover, darkest while dragging). Used by the `ScrollArea` component and by components
 // that compose Base UI ScrollArea directly (e.g. Tabs, whose list is the viewport).
 export const scrollbarClass = cx(
-  "flex touch-none select-none p-[3px] opacity-0 transition-opacity duration-150 ease-out",
+  "flex touch-none p-[3px] opacity-0 transition-opacity duration-150 ease-out select-none",
   "data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
   "data-[orientation=vertical]:w-3",
   "data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:flex-col",
diff --git a/packages/propel/src/patterns/comment.stories.tsx b/packages/propel/src/patterns/comment.stories.tsx
index 920b822b..cbc84036 100644
--- a/packages/propel/src/patterns/comment.stories.tsx
+++ b/packages/propel/src/patterns/comment.stories.tsx
@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import * as React from "react";
 import { expect, fn, userEvent } from "storybook/test";
+
 import { Button } from "../components/button/index";
 import { IconButton } from "../components/icon-button/index";
 import {
@@ -42,7 +43,7 @@ const commentVariants = cva("border border-subtle-1 bg-layer-2 text-primary", {
       // radius/lg (8px) and lays the body + actions out in a single row.
       base: "flex w-full flex-col overflow-clip rounded-xl",
       sm: "flex w-full flex-col overflow-clip rounded-xl",
-      xs: "flex w-full items-center gap-2 rounded-lg py-1.5 pe-1.5 ps-3",
+      xs: "flex w-full items-center gap-2 rounded-lg py-1.5 ps-3 pe-1.5",
     },
   },
 });
@@ -193,7 +194,7 @@ function CommentComposer({
       ) : (
         <>
           {body}
-          <div className="flex min-h-9 items-center justify-between gap-2 py-1 pe-1.5 ps-1">
+          <div className="flex min-h-9 items-center justify-between gap-2 py-1 ps-1 pe-1.5">
             <div className="flex min-w-0 items-center overflow-x-auto">
               <FormattingToolbar />
             </div>
@@ -247,7 +248,7 @@ const RECIPE_SOURCE = `function CommentComposer() {
         onValueChange={setValue}
         className="min-h-10 w-full resize-none bg-transparent p-3 text-14 leading-snug text-primary outline-none placeholder:text-placeholder"
       />
-      <div className="flex min-h-9 items-center justify-between gap-2 py-1 pe-1.5 ps-1">
+      <div className="flex min-h-9 items-center justify-between gap-2 py-1 ps-1 pe-1.5">
         <Toolbar variant="bottom-bar" aria-label="Comment formatting">
           <ToolbarGroup aria-label="Insert">
             <ToolbarButton aria-label="Mention someone">
@@ -284,10 +285,10 @@ const RECIPE_SOURCE = `function CommentComposer() {
 const MAGNITUDES: CommentMagnitude[] = ["base", "sm", "xs"];
 
 /**
- * A comment composer is a compositional component, so propel does not ship one. This
- * recipe shows how to build it from propel primitives (Toolbar, Button, IconButton,
- * and a Field textarea), matching the Figma "Comment box". Copy it into your app and
- * wire the formatting controls to your editor.
+ * A comment composer is a compositional component, so propel does not ship one. This recipe shows
+ * how to build it from propel primitives (Toolbar, Button, IconButton, and a Field textarea),
+ * matching the Figma "Comment box". Copy it into your app and wire the formatting controls to your
+ * editor.
  */
 const meta = {
   title: "Patterns/Comment composer",
@@ -307,8 +308,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * The composer: a body input over a bottom bar that pairs propel's formatting Toolbar
- * with a "Comment" submit Button.
+ * The composer: a body input over a bottom bar that pairs propel's formatting Toolbar with a
+ * "Comment" submit Button.
  */
 export const Default: Story = {
   parameters: {
@@ -322,9 +323,9 @@ export const Default: Story = {
 };
 
 /**
- * Every magnitude side by side. `base` ends in a text "Comment" Button, `sm` collapses
- * that to a send IconButton, and `xs` is a single compact row with an attach + send
- * cluster and no formatting Toolbar.
+ * Every magnitude side by side. `base` ends in a text "Comment" Button, `sm` collapses that to a
+ * send IconButton, and `xs` is a single compact row with an attach + send cluster and no formatting
+ * Toolbar.
  */
 export const Magnitudes: Story = {
   parameters: { controls: { disable: true } },
@@ -338,8 +339,8 @@ export const Magnitudes: Story = {
 };
 
 /**
- * Typing enables the submit button; submitting calls `onSubmit` with the body text.
- * Tagged out of the sidebar/docs/manifest, it's a behavior canary, not an example.
+ * Typing enables the submit button; submitting calls `onSubmit` with the body text. Tagged out of
+ * the sidebar/docs/manifest, it's a behavior canary, not an example.
  */
 export const SubmitFlow: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/storybook/icon-control.tsx b/packages/propel/src/storybook/icon-control.tsx
index 8c142c15..09bab2ca 100644
--- a/packages/propel/src/storybook/icon-control.tsx
+++ b/packages/propel/src/storybook/icon-control.tsx
@@ -42,15 +42,14 @@ export const STORY_ICONS: Record<string, React.ReactNode> = {
 };
 
 /**
- * Reusable Storybook argType for any icon-shaped prop (`leadingIcon`, `trailingIcon`,
- * `icon`). Icon props are `ReactNode`, which Storybook can't render as a control, so a
- * story spreads this into its `argTypes` to turn the prop into a searchable select of
- * `STORY_ICONS`:
+ * Reusable Storybook argType for any icon-shaped prop (`leadingIcon`, `trailingIcon`, `icon`). Icon
+ * props are `ReactNode`, which Storybook can't render as a control, so a story spreads this into
+ * its `argTypes` to turn the prop into a searchable select of `STORY_ICONS`:
  *
- *   argTypes: { leadingIcon: iconControl }
+ * ArgTypes: { leadingIcon: 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.
+ * 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.
  */
 export const iconControl = {
   control: { type: "select" as const },
diff --git a/packages/propel/tailwind.css b/packages/propel/tailwind.css
new file mode 100644
index 00000000..796e42cd
--- /dev/null
+++ b/packages/propel/tailwind.css
@@ -0,0 +1,15 @@
+/*
+ * Tooling-only Tailwind v4 entry. `src/styles/propel.css` is *source* CSS that
+ * deliberately does NOT `@import "tailwindcss"` (the consuming app owns that), so
+ * it can't stand alone as a Tailwind entry. This file pairs Tailwind with propel's
+ * tokens so tools that need the full utility + `@theme` context resolve correctly:
+ * oxfmt's `fmt.sortTailwindcss.stylesheet` and oxlint-tailwindcss's `entryPoint`
+ * (both in the root `vite.config.ts`). Storybook's `.storybook/preview.css` imports
+ * it too, so there's a single Tailwind entry.
+ *
+ * It lives at the package root (not `src/styles/`) so the build's
+ * `copy: src/styles/*.css` never publishes it — consumers must never get a file
+ * that bundles Tailwind.
+ */
+@import "tailwindcss";
+@import "./src/styles/propel.css";
diff --git a/packages/propel/vite.config.ts b/packages/propel/vite.config.ts
index 5a1754b1..61c39306 100644
--- a/packages/propel/vite.config.ts
+++ b/packages/propel/vite.config.ts
@@ -1,7 +1,5 @@
 /// <reference types="vitest/config" />
 import { existsSync, readdirSync } from "node:fs";
-import { defineConfig } from "vite-plus";
-
 // Build one entry per component/hook so each is published as its own subpath
 // (`@plane/propel/components/<name>`, `@plane/propel/hooks/<name>`). There is no
 // root barrel.
@@ -12,8 +10,11 @@ import { defineConfig } from "vite-plus";
 // at its real path no matter how many there are.
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { playwright } from "@vitest/browser-playwright";
+import { defineConfig } from "vite-plus";
+
 // Shared source of truth for the theme list (also used by `.storybook/preview.tsx`)
 // so the per-theme test projects below can't drift from the toolbar/a11y themes.
 import { THEMES } from "./.storybook/themes";
diff --git a/vite.config.ts b/vite.config.ts
index 47d20309..ef83f007 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,22 @@ export default defineConfig({
   },
   fmt: {
     ignorePatterns: ["dist/**"],
+    // Sort Tailwind classes (oxfmt's prettier-plugin-tailwindcss equivalent). propel
+    // wraps classes in `cva()` / `cx()`, so list them; `stylesheet` points at propel's
+    // Tailwind v4 entry (tailwindcss + the `@theme`/`@utility` tokens) so custom
+    // utilities sort in the right order.
+    // https://oxc.rs/docs/guide/usage/formatter/config-file-reference.html#sorttailwindcss
+    sortTailwindcss: {
+      functions: ["cva", "cx"],
+      stylesheet: "packages/propel/tailwind.css",
+    },
+    // Group + sort import statements (side-effect imports like CSS stay put, since
+    // `sortSideEffects` defaults to false).
+    sortImports: true,
+    // Canonical key order for every package.json (script order left as-authored).
+    sortPackageJson: true,
+    // Normalize JSDoc/TSDoc blocks (tag aliases, capitalization, wrapping).
+    jsdoc: true,
   },
   lint: {
     // Tooling/config files are validated by actually building and testing, not by

From 6e0f9b51f3eb38b855fce4e0681bef8e460670bb Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Wed, 17 Jun 2026 00:47:32 +0700
Subject: [PATCH 2/6] icon-control: show argTypes example in backticks so the
 key casing is correct

---
 packages/propel/src/storybook/icon-control.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/propel/src/storybook/icon-control.tsx b/packages/propel/src/storybook/icon-control.tsx
index 09bab2ca..b768049f 100644
--- a/packages/propel/src/storybook/icon-control.tsx
+++ b/packages/propel/src/storybook/icon-control.tsx
@@ -46,7 +46,7 @@ export const STORY_ICONS: Record<string, React.ReactNode> = {
  * props are `ReactNode`, which Storybook can't render as a control, so a story spreads this into
  * its `argTypes` to turn the prop into a searchable select of `STORY_ICONS`:
  *
- * ArgTypes: { leadingIcon: iconControl }
+ * `argTypes: { leadingIcon: 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.

From 2254e69072453ce3e46ef1fd965aeb220da7a9d1 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Wed, 17 Jun 2026 02:20:31 +0700
Subject: [PATCH 3/6] Re-sort after merging main

---
 .../propel/src/components/input/index.tsx     | 13 ++-
 packages/propel/src/components/pill/index.tsx | 55 ++++++------
 .../src/components/pill/pill.stories.tsx      | 28 +++---
 .../propel/src/components/table/index.tsx     | 86 +++++++++----------
 .../src/components/table/table.stories.tsx    | 65 +++++++-------
 .../propel/src/components/toolbar/index.tsx   | 10 +--
 .../components/toolbar/toolbar.stories.tsx    | 31 ++++---
 7 files changed, 141 insertions(+), 147 deletions(-)

diff --git a/packages/propel/src/components/input/index.tsx b/packages/propel/src/components/input/index.tsx
index 725887f9..620b9bb0 100644
--- a/packages/propel/src/components/input/index.tsx
+++ b/packages/propel/src/components/input/index.tsx
@@ -300,10 +300,10 @@ export type InputProps = Omit<FieldControlProps, "className" | "render" | "style
   };
 
 /**
- * Single-line text field built on Base UI `Field`. Supports leading/trailing
- * icon slots and a `horizontal` orientation where the label sits beside the control.
- * States are element-driven (hover / focus / filled / disabled / invalid), not
- * props — only `tone="danger"` forces the error treatment.
+ * Single-line text field built on Base UI `Field`. Supports leading/trailing icon slots and a
+ * `horizontal` orientation where the label sits beside the control. States are element-driven
+ * (hover / focus / filled / disabled / invalid), not props — only `tone="danger"` forces the error
+ * treatment.
  */
 export function Input({
   magnitude,
@@ -390,9 +390,8 @@ const textAreaMinHeight: Record<InputMagnitude, string> = {
 };
 
 /**
- * Multi-line text field built on Base UI `Field`, rendering the control as a
- * `<textarea>`. Vertical layout only (no `orientation`); `resize-none` by default
- * with a magnitude-driven min-height.
+ * Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical
+ * layout only (no `orientation`); `resize-none` by default with a magnitude-driven min-height.
  */
 export function TextArea({
   magnitude,
diff --git a/packages/propel/src/components/pill/index.tsx b/packages/propel/src/components/pill/index.tsx
index 35f1ccd2..6b68eda8 100644
--- a/packages/propel/src/components/pill/index.tsx
+++ b/packages/propel/src/components/pill/index.tsx
@@ -2,6 +2,7 @@ import { Toggle } from "@base-ui/react/toggle";
 import { cva, cx } from "class-variance-authority";
 import { LoaderCircle } from "lucide-react";
 import * as React from "react";
+
 import { getLoadingButtonProps } from "../../internal/loading-button";
 import { nodeSlotClass } from "../../internal/node-slot";
 
@@ -66,12 +67,12 @@ function PillLabel({ children }: { children: React.ReactNode }) {
 }
 
 const pillButtonColors = cx(
-  "cursor-pointer bg-layer-2 border-subtle-1 text-secondary",
-  "hover:bg-layer-2-hover hover:border-strong",
-  "active:bg-layer-2-active active:border-strong active:text-primary",
+  "cursor-pointer border-subtle-1 bg-layer-2 text-secondary",
+  "hover:border-strong hover:bg-layer-2-hover",
+  "active:border-strong active:bg-layer-2-active active:text-primary",
   // Disabled + loading drop to a transparent fill with the disabled text/icon color.
-  "disabled:cursor-not-allowed disabled:bg-layer-transparent disabled:border-subtle-1 disabled:text-disabled",
-  "aria-busy:cursor-default aria-busy:bg-layer-transparent aria-busy:border-subtle-1 aria-busy:text-disabled",
+  "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+  "aria-busy:cursor-default aria-busy:border-subtle-1 aria-busy:bg-layer-transparent aria-busy:text-disabled",
 );
 
 export type PillButtonProps = Omit<React.ComponentProps<"button">, "className" | "style"> & {
@@ -82,16 +83,16 @@ export type PillButtonProps = Omit<React.ComponentProps<"button">, "className" |
   /** A 14px node (icon/avatar) after the label. */
   inlineEndNode?: React.ReactNode;
   /**
-   * Busy state: swaps the leading node for a spinner, dims the label, and blocks
-   * clicks while staying a real, focusable button (`aria-busy`/`aria-disabled`).
+   * Busy state: swaps the leading node for a spinner, dims the label, and blocks clicks while
+   * staying a real, focusable button (`aria-busy`/`aria-disabled`).
    */
   loading?: boolean;
 };
 
 /**
- * A pill-shaped button — a compact, low-emphasis action chip (e.g. a filter or a
- * "+ Add" affordance). Holds a label with optional leading/trailing nodes. Hover and
- * active are CSS states; `disabled` and `loading` are props.
+ * A pill-shaped button — a compact, low-emphasis action chip (e.g. a filter or a "+ Add"
+ * affordance). Holds a label with optional leading/trailing nodes. Hover and active are CSS states;
+ * `disabled` and `loading` are props.
  */
 export function PillButton({
   magnitude,
@@ -123,12 +124,12 @@ export function PillButton({
 }
 
 const pillSwitchColors = cx(
-  "cursor-pointer bg-layer-2 border-subtle-1 text-secondary",
-  "hover:bg-layer-2-hover hover:border-strong",
+  "cursor-pointer border-subtle-1 bg-layer-2 text-secondary",
+  "hover:border-strong hover:bg-layer-2-hover",
   // Selected (the toggle's pressed state) is the darker `-selected` fill + strong
   // border + primary label.
-  "data-[pressed]:bg-layer-2-selected data-[pressed]:border-strong data-[pressed]:text-primary",
-  "disabled:cursor-not-allowed disabled:bg-layer-transparent disabled:border-subtle-1 disabled:text-disabled",
+  "data-[pressed]:border-strong data-[pressed]:bg-layer-2-selected data-[pressed]:text-primary",
+  "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
 );
 
 export type PillSwitchProps = Omit<
@@ -144,12 +145,11 @@ export type PillSwitchProps = Omit<
 };
 
 /**
- * A toggle pill — a selectable chip for segmented, on/off choices (e.g. the display
- * properties in a settings menu). Built on Base UI `Toggle`, so it reports
- * `aria-pressed` and is keyboard-operable; the selected look is its pressed state.
- * Control it with `pressed` + `onPressedChange`, or leave it uncontrolled with
- * `defaultPressed`. Compose several inside a Base UI `ToggleGroup` for a single-select
- * set.
+ * A toggle pill — a selectable chip for segmented, on/off choices (e.g. the display properties in a
+ * settings menu). Built on Base UI `Toggle`, so it reports `aria-pressed` and is keyboard-operable;
+ * the selected look is its pressed state. Control it with `pressed` + `onPressedChange`, or leave
+ * it uncontrolled with `defaultPressed`. Compose several inside a Base UI `ToggleGroup` for a
+ * single-select set.
  */
 export function PillSwitch({
   magnitude,
@@ -180,11 +180,11 @@ export function PillSwitch({
 const iconPillVariants = cva(
   cx(
     pillBase,
-    "cursor-pointer bg-layer-2 border-subtle-1 text-icon-secondary",
-    "hover:bg-layer-2-hover hover:border-strong",
-    "active:bg-layer-2-active active:border-strong",
-    "disabled:cursor-not-allowed disabled:bg-layer-transparent disabled:border-subtle-1 disabled:text-icon-disabled",
-    "aria-busy:cursor-default aria-busy:bg-layer-transparent aria-busy:border-subtle-1 aria-busy:text-icon-disabled",
+    "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: {
@@ -212,9 +212,8 @@ export type IconPillProps = Omit<
 };
 
 /**
- * An icon-only square pill — a compact icon action chip. Requires an `aria-label`
- * because its content is an icon. Hover and active are CSS states; `disabled` and
- * `loading` are props.
+ * An icon-only square pill — a compact icon action chip. Requires an `aria-label` because its
+ * content is an icon. Hover and active are CSS states; `disabled` and `loading` are props.
  */
 export function IconPill({
   magnitude,
diff --git a/packages/propel/src/components/pill/pill.stories.tsx b/packages/propel/src/components/pill/pill.stories.tsx
index 779071ab..48d51bf2 100644
--- a/packages/propel/src/components/pill/pill.stories.tsx
+++ b/packages/propel/src/components/pill/pill.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, Plus, Tag, X } from "lucide-react";
 import { expect, fn, userEvent, within } from "storybook/test";
+
 import { IconPill, PillButton, PillSwitch } from "./index";
 
 const MAGNITUDES = ["sm", "md", "lg"] as const;
@@ -45,10 +46,9 @@ export const Magnitudes: Story = {
 };
 
 /**
- * `PillButton` states. Default / hover / active are the chip darkening its fill +
- * border (hover and active are forced here via the pseudo-states addon); `disabled`
- * and `loading` drop to a transparent fill with a dimmed label, and `loading` swaps
- * the leading node for a spinner.
+ * `PillButton` states. Default / hover / active are the chip darkening its fill + border (hover and
+ * active are forced here via the pseudo-states addon); `disabled` and `loading` drop to a
+ * transparent fill with a dimmed label, and `loading` swaps the leading node for a spinner.
  */
 export const States: Story = {
   parameters: {
@@ -77,8 +77,8 @@ export const States: Story = {
 };
 
 /**
- * `PillSwitch` is a toggle: the selected look is its pressed state. Use it for
- * segmented on/off choices (e.g. display properties in a settings menu).
+ * `PillSwitch` is a toggle: the selected look is its pressed state. Use it for segmented on/off
+ * choices (e.g. display properties in a settings menu).
  */
 export const Switch: Story = {
   parameters: { controls: { disable: true } },
@@ -95,9 +95,9 @@ export const Switch: Story = {
 };
 
 /**
- * Icon-only square pills. Require an `aria-label`. `disabled` drops to a transparent
- * fill with the disabled icon color, and `loading` swaps the icon for a spinner tinted
- * with that same disabled icon color.
+ * Icon-only square pills. Require an `aria-label`. `disabled` drops to a transparent fill with the
+ * disabled icon color, and `loading` swaps the icon for a spinner tinted with that same disabled
+ * icon color.
  */
 export const Icons: Story = {
   parameters: { controls: { disable: true } },
@@ -119,9 +119,9 @@ export const Icons: Story = {
 };
 
 /**
- * Clicking a `PillButton` fires its handler, and a `loading` pill blocks the click
- * while staying focusable (`aria-busy`). Tagged out of the sidebar/docs/manifest but
- * still run under the default `test` tag.
+ * Clicking a `PillButton` fires its handler, and a `loading` pill blocks the click while staying
+ * focusable (`aria-busy`). Tagged out of the sidebar/docs/manifest but still run under the default
+ * `test` tag.
  */
 export const ButtonClicks: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -154,8 +154,8 @@ export const ButtonClicks: Story = {
 };
 
 /**
- * `PillSwitch` reports `aria-pressed` and flips it on click (Base UI `Toggle`).
- * Tagged out of the sidebar/docs/manifest but still run under the default `test` tag.
+ * `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"],
diff --git a/packages/propel/src/components/table/index.tsx b/packages/propel/src/components/table/index.tsx
index dc645804..5857eff6 100644
--- a/packages/propel/src/components/table/index.tsx
+++ b/packages/propel/src/components/table/index.tsx
@@ -2,6 +2,7 @@ import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { ChevronDown, ChevronsUpDown, ChevronUp, Ellipsis } from "lucide-react";
 import * as React from "react";
+
 import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
 import { Dropdown, DropdownTrigger } from "../dropdown/index";
 
@@ -27,21 +28,21 @@ const TableVariantContext = React.createContext<TableVariant>("table");
 
 export type TableProps = Omit<React.ComponentProps<"table">, "className" | "style"> & {
   /**
-   * Layout (required). `table` draws row dividers only; `spreadsheet` draws a full
-   * grid (every cell bordered on all sides). Both share the same cell metrics.
+   * Layout (required). `table` draws row dividers only; `spreadsheet` draws a full grid (every cell
+   * bordered on all sides). Both share the same cell metrics.
    */
   variant: TableVariant;
 };
 
 /**
- * Root `<table>`, wrapped in a rounded, hairline-bordered scroll frame. Compose with
- * `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`,
- * `TableEditableCell`, and `TableActionCell`. The frame scrolls when the table
- * overflows it (constrain its parent's height to scroll vertically); the header stays
- * pinned to the top, and columns can be pinned with each cell's `pinned` prop.
+ * Root `<table>`, wrapped in a rounded, hairline-bordered scroll frame. Compose with `TableHeader`,
+ * `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEditableCell`, and `TableActionCell`.
+ * The frame scrolls when the table overflows it (constrain its parent's height to scroll
+ * vertically); the header stays pinned to the top, and columns can be pinned with each cell's
+ * `pinned` prop.
  *
- * Pass `variant="table"` for row dividers or `variant="spreadsheet"` for a full grid;
- * the cells read it via context.
+ * Pass `variant="table"` for row dividers or `variant="spreadsheet"` for a full grid; the cells
+ * read it via context.
  */
 export function Table({ variant, ...props }: TableProps) {
   return (
@@ -57,7 +58,7 @@ export function Table({ variant, ...props }: TableProps) {
           it overflows, satisfying axe `scrollable-region-focusable` without a stray tab
           stop when the table fits. */}
       <BaseScrollArea.Root className="relative flex max-h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
-        <BaseScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-strong">
+        <BaseScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-inset">
           <table
             className="w-full caption-bottom border-collapse text-13 text-primary"
             {...props}
@@ -92,9 +93,9 @@ export function TableBody(props: TableBodyProps) {
 export type TableRowProps = Omit<React.ComponentProps<"tr">, "className" | "style">;
 
 /**
- * A table row (`<tr>`). Body rows sit on `layer-2` and tint to `layer-2-hover` on
- * hover. Dividers are drawn per-cell (so the `spreadsheet` grid works), so the row
- * itself carries only the background + hover.
+ * A table row (`<tr>`). Body rows sit on `layer-2` and tint to `layer-2-hover` on hover. Dividers
+ * are drawn per-cell (so the `spreadsheet` grid works), so the row itself carries only the
+ * background + hover.
  */
 export function TableRow(props: TableRowProps) {
   // `group/body-row` so a `table`-variant cell can drop its bottom divider on the last
@@ -180,13 +181,13 @@ const ariaSort: Record<TableHeadSort, React.AriaAttributes["aria-sort"]> = {
 export type TableHeadProps = Omit<React.ComponentProps<"th">, "className" | "style" | "aria-sort"> &
   VariantProps<typeof tableHeadVariants> & {
     /**
-     * Visual treatment. `sortable` renders a clickable button with a sort chevron;
-     * set it whenever you pass `sort`.
+     * Visual treatment. `sortable` renders a clickable button with a sort chevron; set it whenever
+     * you pass `sort`.
      */
     variant: NonNullable<VariantProps<typeof tableHeadVariants>["variant"]>;
     /**
-     * Current sort state for a sortable header. Drives both the chevron icon
-     * (`asc`→up, `desc`→down, `none`→up/down) and the cell's `aria-sort`.
+     * Current sort state for a sortable header. Drives both the chevron icon (`asc`→up,
+     * `desc`→down, `none`→up/down) and the cell's `aria-sort`.
      */
     sort?: TableHeadSort;
     /** Click handler for the sort control; only used when the header is sortable. */
@@ -196,10 +197,10 @@ export type TableHeadProps = Omit<React.ComponentProps<"th">, "className" | "sty
   };
 
 /**
- * A header cell (`<th>`). Pass `variant="sortable"` (with `sort`/`onSort`) to turn
- * the label into an interactive sort control: it renders a lucide chevron
- * (aria-hidden) and reflects the order via `aria-sort` for assistive tech. Pass
- * `pinned` to make the column sticky on horizontal scroll (set it on the body cells too).
+ * A header cell (`<th>`). Pass `variant="sortable"` (with `sort`/`onSort`) to turn the label into
+ * an interactive sort control: it renders a lucide chevron (aria-hidden) and reflects the order via
+ * `aria-sort` for assistive tech. Pass `pinned` to make the column sticky on horizontal scroll (set
+ * it on the body cells too).
  */
 export function TableHead({
   variant,
@@ -276,8 +277,8 @@ export type TableCellProps = Omit<React.ComponentProps<"td">, "className" | "sty
 
 /**
  * A data cell (`<td>`). 44px tall with `px-4 py-2` and `text-13` body text. Optional
- * `inlineStartNode` / `inlineEndNode` slots hold a leading/trailing icon or `Avatar`
- * (e.g. an avatar before a name). `pinned` keeps the column sticky on horizontal scroll.
+ * `inlineStartNode` / `inlineEndNode` slots hold a leading/trailing icon or `Avatar` (e.g. an
+ * avatar before a name). `pinned` keeps the column sticky on horizontal scroll.
  */
 export function TableCell({
   inlineStartNode,
@@ -319,19 +320,19 @@ export type TableEditableCellProps = Omit<
   "className" | "style" | "children"
 > & {
   /**
-   * The current value shown in the cell (e.g. `"Admin"`). It sits before the
-   * trailing chevron and labels the trigger button.
+   * The current value shown in the cell (e.g. `"Admin"`). It sits before the trailing chevron and
+   * labels the trigger button.
    */
   value: React.ReactNode;
   /**
-   * The dropdown menu shown when the cell is clicked. Pass a propel `Dropdown`
-   * composition — typically a `DropdownContent` with `DropdownItem`s. The cell
-   * owns the `Dropdown` root + the trigger; you only supply the menu surface.
+   * The dropdown menu shown when the cell is clicked. Pass a propel `Dropdown` composition —
+   * typically a `DropdownContent` with `DropdownItem`s. The cell owns the `Dropdown` root + the
+   * trigger; you only supply the menu surface.
    */
   children: React.ReactNode;
   /**
-   * Whether the menu is open (controlled). Pair with `onOpenChange`; omit for an
-   * uncontrolled cell that manages its own open state.
+   * Whether the menu is open (controlled). Pair with `onOpenChange`; omit for an uncontrolled cell
+   * that manages its own open state.
    */
   open?: boolean;
   /** Default open state for an uncontrolled cell. @default false */
@@ -341,8 +342,8 @@ export type TableEditableCellProps = Omit<
   /** Disables the trigger so the cell can't be edited. */
   disabled?: boolean;
   /**
-   * Marks this as the actively-selected cell (e.g. the focused cell in a spreadsheet),
-   * giving it a persistent `layer-transparent-selected` tint a step stronger than hover.
+   * Marks this as the actively-selected cell (e.g. the focused cell in a spreadsheet), giving it a
+   * persistent `layer-transparent-selected` tint a step stronger than hover.
    */
   selected?: boolean;
   /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
@@ -352,10 +353,9 @@ export type TableEditableCellProps = Omit<
 };
 
 /**
- * An editable data cell (`<td>`). Renders the current `value` plus a trailing
- * chevron as a single button that opens the propel `Dropdown` passed as `children`
- * to pick a new value (Figma "Account type" cell). It owns the `Dropdown` root and
- * trigger, so you only pass the menu surface:
+ * An editable data cell (`<td>`). Renders the current `value` plus a trailing chevron as a single
+ * button that opens the propel `Dropdown` passed as `children` to pick a new value (Figma "Account
+ * type" cell). It owns the `Dropdown` root and trigger, so you only pass the menu surface:
  *
  * ```tsx
  * <TableEditableCell value={role} onOpenChange={…}>
@@ -419,9 +419,9 @@ export type TableActionCellProps = Omit<
   "className" | "style" | "children"
 > & {
   /**
-   * The dropdown menu of row actions. Pass a propel `Dropdown` composition (a
-   * `DropdownContent` with `DropdownItem`s). The cell owns the `Dropdown` root + the
-   * icon trigger; you only supply the menu surface.
+   * The dropdown menu of row actions. Pass a propel `Dropdown` composition (a `DropdownContent`
+   * with `DropdownItem`s). The cell owns the `Dropdown` root + the icon trigger; you only supply
+   * the menu surface.
    */
   children: React.ReactNode;
   /** Accessible name for the trigger (e.g. "Row options"). Required (icon-only). */
@@ -441,10 +441,10 @@ export type TableActionCellProps = Omit<
 };
 
 /**
- * An icon-only action cell (`<td>`) — the trailing "⋯" that opens a menu of actions
- * for the row (Figma's row-options cell). Like `TableEditableCell` it owns the
- * `Dropdown` root + trigger and you pass only the menu surface; the trigger is an
- * icon button with the actionable-cell hover treatment.
+ * An icon-only action cell (`<td>`) — the trailing "⋯" that opens a menu of actions for the row
+ * (Figma's row-options cell). Like `TableEditableCell` it owns the `Dropdown` root + trigger and
+ * you pass only the menu surface; the trigger is an icon button with the actionable-cell hover
+ * treatment.
  */
 export function TableActionCell({
   children,
diff --git a/packages/propel/src/components/table/table.stories.tsx b/packages/propel/src/components/table/table.stories.tsx
index 119babd8..0b3b7a7a 100644
--- a/packages/propel/src/components/table/table.stories.tsx
+++ b/packages/propel/src/components/table/table.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Pencil, Trash2 } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
+
 import { Avatar } from "../avatar/index";
 import { DropdownContent, DropdownItem } from "../dropdown/index";
 import { Pagination } from "../pagination/index";
@@ -78,8 +79,8 @@ const PEOPLE: Person[] = [
 const COLUMNS = ["Name", "Display name", "Email", "Account type", "Billing status"];
 
 /**
- * The standard **Table** (`variant="table"`): a rounded outer border with row
- * dividers only (no vertical rules). Header on `layer-1`, body on `surface-1`.
+ * The standard **Table** (`variant="table"`): a rounded outer border with row dividers only (no
+ * vertical rules). Header on `layer-1`, body on `surface-1`.
  */
 export const Default: Story = {
   args: { variant: "table" },
@@ -122,8 +123,8 @@ export const Default: Story = {
 };
 
 /**
- * The denser **Spreadsheet** (`variant="spreadsheet"`): the same metrics, but every
- * cell is fully bordered to form a grid (Figma "Spreadsheet").
+ * The denser **Spreadsheet** (`variant="spreadsheet"`): the same metrics, but every cell is fully
+ * bordered to form a grid (Figma "Spreadsheet").
  */
 export const Spreadsheet: Story = {
   args: { variant: "spreadsheet" },
@@ -164,9 +165,8 @@ export const Spreadsheet: Story = {
 };
 
 /**
- * A sortable header: `variant="sortable"` renders the label as a button with a
- * sort chevron and reflects the order through `aria-sort`. Clicking cycles
- * none → asc → desc.
+ * A sortable header: `variant="sortable"` renders the label as a button with a sort chevron and
+ * reflects the order through `aria-sort`. Clicking cycles none → asc → desc.
  */
 export const Sortable: Story = {
   args: { variant: "table" },
@@ -216,11 +216,10 @@ export const Sortable: Story = {
 const ROLES = ["Admin", "Member", "Guest"];
 
 /**
- * **Editable cells.** Each "Account type" cell is a `TableEditableCell`: clicking it
- * opens a propel `Dropdown` to pick a new value, which updates the row in place
- * (Figma "Account type" editable cell). The cell tints on hover and while its menu is
- * open; the last-clicked cell keeps a stronger `selected` tint to mark the active cell.
- * Works in both table variants.
+ * **Editable cells.** Each "Account type" cell is a `TableEditableCell`: clicking it opens a propel
+ * `Dropdown` to pick a new value, which updates the row in place (Figma "Account type" editable
+ * cell). The cell tints on hover and while its menu is open; the last-clicked cell keeps a stronger
+ * `selected` tint to mark the active cell. Works in both table variants.
  */
 export const EditableCells: Story = {
   args: { variant: "table" },
@@ -299,10 +298,10 @@ const DIRECTORY: Person[] = Array.from({ length: 23 }, (_, i) => {
 });
 
 /**
- * **With Pagination.** The Table and `Pagination` are separate components: the table
- * renders only the current page of rows, and the pagination below drives `page` and
- * `pageSize`. Changing the page size resets to the first page and the range label
- * updates. This is the designer follow-up on composing the two.
+ * **With Pagination.** The Table and `Pagination` are separate components: the table renders only
+ * the current page of rows, and the pagination below drives `page` and `pageSize`. Changing the
+ * page size resets to the first page and the range label updates. This is the designer follow-up on
+ * composing the two.
  */
 export const WithPagination: Story = {
   args: { variant: "table" },
@@ -373,10 +372,10 @@ export const WithPagination: Story = {
 };
 
 /**
- * **Cell slots + an action cell.** Cells carry a leading `Avatar` (the Name column),
- * an inline editable cell (Account type), and a trailing icon-only `TableActionCell`
- * (the "⋯" that opens a menu of row actions). Actionable cells tint with a
- * `layer-transparent` overlay on hover, distinct from the row's own hover.
+ * **Cell slots + an action cell.** Cells carry a leading `Avatar` (the Name column), an inline
+ * editable cell (Account type), and a trailing icon-only `TableActionCell` (the "⋯" that opens a
+ * menu of row actions). Actionable cells tint with a `layer-transparent` overlay on hover, distinct
+ * from the row's own hover.
  */
 export const RichRows: Story = {
   args: { variant: "table" },
@@ -446,9 +445,9 @@ export const RichRows: Story = {
 };
 
 /**
- * **Sticky header + pinned column.** In a height- and width-constrained frame, the
- * header stays pinned to the top on vertical scroll, and the first column (`pinned="start"`
- * on its header + cells) stays put on horizontal scroll.
+ * **Sticky header + pinned column.** In a height- and width-constrained frame, the header stays
+ * pinned to the top on vertical scroll, and the first column (`pinned="start"` on its header +
+ * cells) stays put on horizontal scroll.
  */
 export const StickyHeaderAndColumns: Story = {
   args: { variant: "table" },
@@ -499,11 +498,10 @@ export const StickyHeaderAndColumns: Story = {
 };
 
 /**
- * **Keyboard: sortable header.** Tab to the sortable column-header button and toggle
- * the sort with the keyboard: each Enter/Space advances the cycle
- * (none → ascending → descending → none) and the `<th>`'s `aria-sort` follows along,
- * while `onSort` fires on every activation. Tagged so it stays out of the sidebar,
- * docs, and AI manifest while still running under the default `test` tag.
+ * **Keyboard: sortable header.** Tab to the sortable column-header button and toggle the sort with
+ * the keyboard: each Enter/Space advances the cycle (none → ascending → descending → none) and the
+ * `<th>`'s `aria-sort` follows along, while `onSort` fires on every activation. Tagged so it stays
+ * out of the sidebar, docs, and AI manifest while still running under the default `test` tag.
  */
 export const SortableKeyboard: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -566,12 +564,11 @@ export const SortableKeyboard: Story = {
 };
 
 /**
- * **Keyboard: editable cell.** Tab/Enter on the editable cell's trigger opens the
- * portaled `Dropdown`; Arrow Down moves the highlight onto the first item and Enter
- * selects it, updating the cell value in place; Escape closes the menu and returns
- * focus to the cell trigger. The menu is portaled, so it's queried from the document
- * body by its unique item text. Tagged so it stays out of the sidebar, docs, and AI
- * manifest while still running under the default `test` tag.
+ * **Keyboard: editable cell.** Tab/Enter on the editable cell's trigger opens the portaled
+ * `Dropdown`; Arrow Down moves the highlight onto the first item and Enter selects it, updating the
+ * cell value in place; Escape closes the menu and returns focus to the cell trigger. The menu is
+ * portaled, so it's queried from the document body by its unique item text. Tagged so it stays out
+ * of the sidebar, docs, and AI manifest while still running under the default `test` tag.
  */
 export const EditableCellKeyboard: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/src/components/toolbar/index.tsx b/packages/propel/src/components/toolbar/index.tsx
index 6d5fc543..f6162cd5 100644
--- a/packages/propel/src/components/toolbar/index.tsx
+++ b/packages/propel/src/components/toolbar/index.tsx
@@ -55,14 +55,14 @@ export type ToolbarProps = Omit<
   "className" | "render" | "style"
 > & {
   /**
-   * Whether the toolbar draws its own surface. `raised` is a self-contained card
-   * with a border + shadow that hovers over content; `flat` draws no surface and
-   * sits flush inside an existing bar. Independent of `density`.
+   * Whether the toolbar draws its own surface. `raised` is a self-contained card with a border +
+   * shadow that hovers over content; `flat` draws no surface and sits flush inside an existing bar.
+   * Independent of `density`.
    */
   elevation: ToolbarElevation;
   /**
-   * How tightly the controls pack. `compact` is 24px hit targets, `comfortable` is
-   * 28px. Independent of `elevation`, so a flat bar can still be compact.
+   * How tightly the controls pack. `compact` is 24px hit targets, `comfortable` is 28px.
+   * Independent of `elevation`, so a flat bar can still be compact.
    */
   density: ToolbarDensity;
 };
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index 28525eb1..e9d78ca9 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -161,9 +161,9 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 /**
- * The `elevation` axis: `raised` draws its own card (border + shadow) so it can hover
- * over content; `flat` draws no surface and sits flush inside an existing bar.
- * Independent of `density` — both rows keep the story's current density.
+ * The `elevation` axis: `raised` draws its own card (border + shadow) so it can hover 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 } },
@@ -176,9 +176,8 @@ export const Elevations: Story = {
 };
 
 /**
- * The `density` axis: `compact` packs the controls to 24px hit targets, `comfortable`
- * gives them 28px. Independent of `elevation` — both rows keep the story's current
- * elevation.
+ * The `density` axis: `compact` packs the controls to 24px hit targets, `comfortable` gives them
+ * 28px. Independent of `elevation` — both rows keep the story's current elevation.
  */
 export const Densities: Story = {
   argTypes: { density: { control: false } },
@@ -191,9 +190,9 @@ export const Densities: Story = {
 };
 
 /**
- * `elevation` and `density` are orthogonal: a `flat` bar can still be `compact`. This
- * is Figma's "fixed + compact" bar — a non-floating surface at the tight 24px density
- * the raised floater also uses.
+ * `elevation` and `density` are orthogonal: a `flat` bar can still be `compact`. This is Figma's
+ * "fixed + compact" bar — a non-floating surface at the tight 24px density the raised floater also
+ * uses.
  */
 export const FlatCompact: Story = {
   args: { elevation: "flat", density: "compact" },
@@ -206,10 +205,10 @@ export const FlatCompact: Story = {
 };
 
 /**
- * Density wiring check that runs in the browser: `density` drives the child controls'
- * size through context, independent of `elevation`, so a `flat` + `compact` toolbar
- * renders 24px controls. Tagged out of the sidebar/docs/manifest — it's a test, not a
- * designer- or agent-facing example — but still runs under the default `test` tag.
+ * Density wiring check that runs in the browser: `density` drives the child controls' size through
+ * context, independent of `elevation`, so a `flat` + `compact` toolbar renders 24px controls.
+ * Tagged out of the sidebar/docs/manifest — it's a test, not a designer- or agent-facing example —
+ * but still runs under the default `test` tag.
  */
 export const DensityDrivesControlSize: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -229,9 +228,9 @@ export const DensityDrivesControlSize: Story = {
 };
 
 /**
- * Because `ToolbarDropdown` composes propel's `Dropdown`, a toolbar menu can hold
- * richer rows than the old `items[]` config allowed: per-row leading icons, a
- * separator between groups, a selected marker, and disabled rows.
+ * Because `ToolbarDropdown` composes propel's `Dropdown`, a toolbar menu can hold richer rows than
+ * the old `items[]` config allowed: per-row leading icons, a separator between groups, a selected
+ * marker, and disabled rows.
  */
 export const ComposableMenu: Story = {
   // Always-open + portaled: keep it out of the Vitest run so its popup can't leak into

From 9641b89b3372d1083d212c1b3a6e1770cf1eb685 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Wed, 17 Jun 2026 13:38:12 +0700
Subject: [PATCH 4/6] Resolve conflict with main; drop oxlint-tailwindcss
 mention from the Tailwind entry comment

---
 .../propel/src/components/progress/index.tsx    | 17 +++++++++--------
 .../components/progress/progress.stories.tsx    | 17 ++++++++---------
 packages/propel/tailwind.css                    |  5 ++---
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/propel/src/components/progress/index.tsx b/packages/propel/src/components/progress/index.tsx
index 7b7f78b3..852b8c54 100644
--- a/packages/propel/src/components/progress/index.tsx
+++ b/packages/propel/src/components/progress/index.tsx
@@ -58,8 +58,9 @@ export type ProgressProps = Omit<
   /** `linear`: track thickness (`sm` 5px / `md` 8px). `circular`: diameter (`sm` 16px / `md` 20px). */
   magnitude: ProgressMagnitude;
   /**
-   * Show the trailing percentage label. Only applies to `variant="linear"` — the
-   * circular rings are too small for a label, so this is ignored when `circular`.
+   * Show the trailing percentage label. Only applies to `variant="linear"` — the circular rings are
+   * too small for a label, so this is ignored when `circular`.
+   *
    * @default true
    */
   showValue?: boolean;
@@ -71,13 +72,13 @@ export type ProgressProps = Omit<
 };
 
 /**
- * A determinate progress indicator — task completion over time (uploads, imports, the
- * Toast auto-dismiss countdown). Drive it with `value` (0–`max`, default max 100); the
- * fill and `aria-valuenow` follow.
+ * A determinate progress indicator — task completion over time (uploads, imports, the Toast
+ * auto-dismiss countdown). Drive it with `value` (0–`max`, default max 100); the fill and
+ * `aria-valuenow` follow.
  *
- * `variant="linear"` is a horizontal bar with an optional trailing `%` label (shown by
- * default; hide it with `showValue={false}`). `variant="circular"` is a small ring with
- * no label (`showValue` is ignored).
+ * `variant="linear"` is a horizontal bar with an optional trailing `%` label (shown by default;
+ * hide it with `showValue={false}`). `variant="circular"` is a small ring with no label
+ * (`showValue` is ignored).
  */
 export function Progress({ variant, value, magnitude, showValue = true, ...props }: ProgressProps) {
   if (variant === "circular") {
diff --git a/packages/propel/src/components/progress/progress.stories.tsx b/packages/propel/src/components/progress/progress.stories.tsx
index cacccca0..b216ccdf 100644
--- a/packages/propel/src/components/progress/progress.stories.tsx
+++ b/packages/propel/src/components/progress/progress.stories.tsx
@@ -58,9 +58,8 @@ export const WithoutLabel: Story = {
 };
 
 /**
- * `variant="circular"` is a small determinate ring — a gray track plus an accent arc
- * proportional to the value, with no label. The arc starts at 12 o'clock and sweeps
- * clockwise.
+ * `variant="circular"` is a small determinate ring — a gray track plus an accent arc proportional
+ * to the value, with no label. The arc starts at 12 o'clock and sweeps clockwise.
  */
 export const Circular: Story = {
   args: { variant: "circular", value: 32, magnitude: "md", "aria-label": "Sync progress" },
@@ -83,9 +82,9 @@ export const CircularMagnitudes: Story = {
 };
 
 /**
- * The linear bar exposes the `progressbar` role with `aria-valuenow`, and the label
- * renders the rounded percentage. Tagged out of the sidebar/docs/manifest but still run
- * under the default `test` tag.
+ * The linear bar exposes the `progressbar` role with `aria-valuenow`, and the label renders the
+ * rounded percentage. Tagged out of the sidebar/docs/manifest but still run under the default
+ * `test` tag.
  */
 export const Semantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -99,9 +98,9 @@ export const Semantics: Story = {
 };
 
 /**
- * The circular variant keeps the same `progressbar` role + `aria-valuenow` (Base UI's
- * Root owns them), and exposes no `%` text. Tagged out of the sidebar/docs/manifest but
- * still run under the default `test` tag.
+ * The circular variant keeps the same `progressbar` role + `aria-valuenow` (Base UI's Root owns
+ * them), and exposes no `%` text. Tagged out of the sidebar/docs/manifest but still run under the
+ * default `test` tag.
  */
 export const CircularSemantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
diff --git a/packages/propel/tailwind.css b/packages/propel/tailwind.css
index 796e42cd..97c06910 100644
--- a/packages/propel/tailwind.css
+++ b/packages/propel/tailwind.css
@@ -3,9 +3,8 @@
  * deliberately does NOT `@import "tailwindcss"` (the consuming app owns that), so
  * it can't stand alone as a Tailwind entry. This file pairs Tailwind with propel's
  * tokens so tools that need the full utility + `@theme` context resolve correctly:
- * oxfmt's `fmt.sortTailwindcss.stylesheet` and oxlint-tailwindcss's `entryPoint`
- * (both in the root `vite.config.ts`). Storybook's `.storybook/preview.css` imports
- * it too, so there's a single Tailwind entry.
+ * oxfmt's `fmt.sortTailwindcss.stylesheet` in the root `vite.config.ts`. Storybook's
+ * `.storybook/preview.css` imports it too, so there's a single Tailwind entry.
  *
  * It lives at the package root (not `src/styles/`) so the build's
  * `copy: src/styles/*.css` never publishes it — consumers must never get a file

From 5658dbfadf6e4acfd3c937adc03b9de7d708390c Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Wed, 17 Jun 2026 13:44:00 +0700
Subject: [PATCH 5/6] Resolve conflict with main; drop trailing ; from JSDoc
 usage snippets

---
 .../propel/src/components/breadcrumb/index.tsx    |  2 +-
 packages/propel/src/components/dropdown/index.tsx |  3 ++-
 packages/propel/src/components/popover/index.tsx  |  2 +-
 packages/propel/src/components/tabs/index.tsx     |  2 +-
 packages/propel/src/components/toolbar/index.tsx  |  2 +-
 .../src/hooks/use-controllable-state/index.ts     | 15 +++++++--------
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/propel/src/components/breadcrumb/index.tsx b/packages/propel/src/components/breadcrumb/index.tsx
index 8a908076..520c8a0d 100644
--- a/packages/propel/src/components/breadcrumb/index.tsx
+++ b/packages/propel/src/components/breadcrumb/index.tsx
@@ -178,7 +178,7 @@ export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
  *       <BreadcrumbMenuItem render={<a href="#" />}>Plane Web</BreadcrumbMenuItem>
  *     </BreadcrumbMenuContent>
  *   </BreadcrumbMenu>
- * </BreadcrumbItem>;
+ * </BreadcrumbItem>
  * ```
  */
 export const BreadcrumbMenu = Dropdown;
diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
index 2f82874e..c620f972 100644
--- a/packages/propel/src/components/dropdown/index.tsx
+++ b/packages/propel/src/components/dropdown/index.tsx
@@ -2,6 +2,7 @@ import { Menu } from "@base-ui/react/menu";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { Check, ChevronRight, Search } from "lucide-react";
 import * as React from "react";
+
 import { useControllableState } from "../../hooks/use-controllable-state/index";
 import { nodeSlotClass } from "../../internal/node-slot";
 import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
@@ -19,7 +20,7 @@ import { CheckboxVisual } from "../checkbox/index";
  *     <DropdownSeparator />
  *     <DropdownItem label="Delete" />
  *   </DropdownContent>
- * </Dropdown>;
+ * </Dropdown>
  * ```
  */
 type BaseMenuRootProps = React.ComponentProps<typeof Menu.Root>;
diff --git a/packages/propel/src/components/popover/index.tsx b/packages/propel/src/components/popover/index.tsx
index cd67e80b..14de3b7b 100644
--- a/packages/propel/src/components/popover/index.tsx
+++ b/packages/propel/src/components/popover/index.tsx
@@ -14,7 +14,7 @@ import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-pan
  *     <RadioGroup>…</RadioGroup>
  *     <Checkbox label="Show empty groups" />
  *   </PopoverContent>
- * </Popover>;
+ * </Popover>
  * ```
  *
  * Unlike `Dropdown`, the surface is a generic floating panel (NOT a `role="menu"`), so it can host
diff --git a/packages/propel/src/components/tabs/index.tsx b/packages/propel/src/components/tabs/index.tsx
index baebd5ae..032607ee 100644
--- a/packages/propel/src/components/tabs/index.tsx
+++ b/packages/propel/src/components/tabs/index.tsx
@@ -53,7 +53,7 @@ export type TabsProps = Omit<
  *   </TabsList>
  *   <TabsPanel value="overview">…</TabsPanel>
  *   <TabsPanel value="activity">…</TabsPanel>
- * </Tabs>;
+ * </Tabs>
  * ```
  */
 export function Tabs({ variant, ...props }: TabsProps) {
diff --git a/packages/propel/src/components/toolbar/index.tsx b/packages/propel/src/components/toolbar/index.tsx
index f6162cd5..e709bed2 100644
--- a/packages/propel/src/components/toolbar/index.tsx
+++ b/packages/propel/src/components/toolbar/index.tsx
@@ -247,7 +247,7 @@ const dropdownChevronVariants = cva("shrink-0 text-icon-secondary", {
  *       Paragraph
  *     </ToolbarDropdownItem>
  *   </ToolbarDropdownContent>
- * </ToolbarDropdown>;
+ * </ToolbarDropdown>
  * ```
  */
 export const ToolbarDropdown = Dropdown;
diff --git a/packages/propel/src/hooks/use-controllable-state/index.ts b/packages/propel/src/hooks/use-controllable-state/index.ts
index bca44fb2..593490c8 100644
--- a/packages/propel/src/hooks/use-controllable-state/index.ts
+++ b/packages/propel/src/hooks/use-controllable-state/index.ts
@@ -2,8 +2,8 @@ import * as React from "react";
 
 export type UseControllableStateParams<T> = {
   /**
-   * The controlled value. When provided (not `undefined`), the hook is controlled
-   * and this value is always returned; internal state is never used.
+   * The controlled value. When provided (not `undefined`), the hook is controlled and this value is
+   * always returned; internal state is never used.
    */
   value?: T;
   /** The initial value when uncontrolled. Seeds the internal state. */
@@ -13,12 +13,11 @@ export type UseControllableStateParams<T> = {
 };
 
 /**
- * Manages a value that may be either controlled (a `value` prop is supplied) or
- * uncontrolled (seeded from `defaultValue` and tracked internally). It returns the
- * current value and a setter: the setter updates internal state only when
- * uncontrolled and always calls `onChange`, so the consumer can mirror the value
- * regardless of which mode it is in. A `value` of `undefined` is treated as
- * uncontrolled.
+ * Manages a value that may be either controlled (a `value` prop is supplied) or uncontrolled
+ * (seeded from `defaultValue` and tracked internally). It returns the current value and a setter:
+ * the setter updates internal state only when uncontrolled and always calls `onChange`, so the
+ * consumer can mirror the value regardless of which mode it is in. A `value` of `undefined` is
+ * treated as uncontrolled.
  *
  * ```tsx
  * function Toggle({ pressed, defaultPressed, onPressedChange }: ToggleProps) {

From 6f280f912b9dd0fb8771d849f669bce3f92ce6d0 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Wed, 17 Jun 2026 13:44:19 +0700
Subject: [PATCH 6/6] Format JSDoc after stripping trailing semicolons

---
 packages/propel/src/components/breadcrumb/index.tsx | 2 +-
 packages/propel/src/components/dropdown/index.tsx   | 2 +-
 packages/propel/src/components/popover/index.tsx    | 2 +-
 packages/propel/src/components/tabs/index.tsx       | 2 +-
 packages/propel/src/components/toolbar/index.tsx    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/propel/src/components/breadcrumb/index.tsx b/packages/propel/src/components/breadcrumb/index.tsx
index 520c8a0d..8a908076 100644
--- a/packages/propel/src/components/breadcrumb/index.tsx
+++ b/packages/propel/src/components/breadcrumb/index.tsx
@@ -178,7 +178,7 @@ export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
  *       <BreadcrumbMenuItem render={<a href="#" />}>Plane Web</BreadcrumbMenuItem>
  *     </BreadcrumbMenuContent>
  *   </BreadcrumbMenu>
- * </BreadcrumbItem>
+ * </BreadcrumbItem>;
  * ```
  */
 export const BreadcrumbMenu = Dropdown;
diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
index c620f972..ad46ce45 100644
--- a/packages/propel/src/components/dropdown/index.tsx
+++ b/packages/propel/src/components/dropdown/index.tsx
@@ -20,7 +20,7 @@ import { CheckboxVisual } from "../checkbox/index";
  *     <DropdownSeparator />
  *     <DropdownItem label="Delete" />
  *   </DropdownContent>
- * </Dropdown>
+ * </Dropdown>;
  * ```
  */
 type BaseMenuRootProps = React.ComponentProps<typeof Menu.Root>;
diff --git a/packages/propel/src/components/popover/index.tsx b/packages/propel/src/components/popover/index.tsx
index 14de3b7b..cd67e80b 100644
--- a/packages/propel/src/components/popover/index.tsx
+++ b/packages/propel/src/components/popover/index.tsx
@@ -14,7 +14,7 @@ import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-pan
  *     <RadioGroup>…</RadioGroup>
  *     <Checkbox label="Show empty groups" />
  *   </PopoverContent>
- * </Popover>
+ * </Popover>;
  * ```
  *
  * Unlike `Dropdown`, the surface is a generic floating panel (NOT a `role="menu"`), so it can host
diff --git a/packages/propel/src/components/tabs/index.tsx b/packages/propel/src/components/tabs/index.tsx
index 032607ee..baebd5ae 100644
--- a/packages/propel/src/components/tabs/index.tsx
+++ b/packages/propel/src/components/tabs/index.tsx
@@ -53,7 +53,7 @@ export type TabsProps = Omit<
  *   </TabsList>
  *   <TabsPanel value="overview">…</TabsPanel>
  *   <TabsPanel value="activity">…</TabsPanel>
- * </Tabs>
+ * </Tabs>;
  * ```
  */
 export function Tabs({ variant, ...props }: TabsProps) {
diff --git a/packages/propel/src/components/toolbar/index.tsx b/packages/propel/src/components/toolbar/index.tsx
index e709bed2..f6162cd5 100644
--- a/packages/propel/src/components/toolbar/index.tsx
+++ b/packages/propel/src/components/toolbar/index.tsx
@@ -247,7 +247,7 @@ const dropdownChevronVariants = cva("shrink-0 text-icon-secondary", {
  *       Paragraph
  *     </ToolbarDropdownItem>
  *   </ToolbarDropdownContent>
- * </ToolbarDropdown>
+ * </ToolbarDropdown>;
  * ```
  */
 export const ToolbarDropdown = Dropdown;