@humanforest/ui 0.1.0

package/src/themes/card.ts

@@ -0,0 +1,67 @@
+/**
+ * Forest theme fragment for UCard.
+ *
+ * Radius xl (24px). `forest-card` marker (PRESET_STRUCTURAL_MARKERS) drives the NESTED-surface +
+ * concentric-radius CSS in styles/forest.css (§ card nesting): each nested card steps one
+ * neutral-ramp level (light darker / dark lighter) and its corners stay concentric
+ * (radius = parent − padding). Uniform p-4 padding — kill the stock desktop bump (body sm:p-6,
+ * header/footer sm:px-6).
+ */
+
+// Stock puts `divide-y` on the VARIANT root (outline/soft/subtle), not the base slots — so a variant
+// with no divider (solid, and the tinted set below, which stock never supplied one for) shows the
+// header→body→footer gap DOUBLED (header pb-4 + body pt-4 = 32px) with nothing sitting in it. These
+// two rules collapse it back to the single 16px the body's own p-4 already provides.
+// The :not(:last-child)/:not(:first-child) guards are load-bearing: a header-only card (title +
+// description, no body/footer) must keep its bottom padding — with a bare pb-0 the text sat flush
+// against the edge. The collapse only fires when a sibling actually follows/precedes.
+const flatGap = {
+  header: '[&:not(:last-child)]:pb-0',
+  footer: '[&:not(:first-child)]:pt-0',
+} as const
+
+export const cardTheme = {
+  slots: {
+    root: 'rounded-xl forest-card',
+    body: 'sm:p-4',
+    header: 'sm:px-4',
+    footer: 'sm:px-4',
+    // Title voice rides the --fx-* traits (forest.css): sans/none at rest, so web is unchanged —
+    // a louder context (marketing delta) re-points the vars to Mohr + uppercase without touching
+    // this recipe. Weight is NOT a trait: the delta adds font-black as a plain class instead
+    // (Mohr only ships 900; a weight var would alter the stock title at rest).
+    title: '[font-family:var(--fx-title-family)] [text-transform:var(--fx-title-transform)]',
+  },
+  // Quiet fill: `soft`/`subtle` both draw from --forest-card-bg (the depth-stepped neutral surface,
+  // set by the nesting CSS) — soft no ring, subtle + ring (the stock "soft +ring = subtle"
+  // relationship, now on an opaque ramp surface that reads distinctly when nested and in dark,
+  // where bg-muted == bg-elevated). soft also kills the divide-y for a flat single surface.
+  // `outline` (bg-default + ring) and `solid` (bg-inverted) stay stock — the ring/contrast do the
+  // separating there.
+  variants: {
+    variant: {
+      // Borderless variants take flatGap; divided ones keep the full gap — the hairline sits in it.
+      soft: { root: 'bg-[var(--forest-card-bg)] divide-y-0', ...flatGap },
+      solid: { ...flatGap },
+      // subtle AND outline use the translucent RELATIVE hairline (--forest-card-ring) for ring +
+      // divide, not the fixed border-default ramp token — one consistent border language across
+      // cards (and it keeps subtle collision-proof on the stepped surface). Only the FILL differs:
+      // subtle = stepped surface, outline = bg-default.
+      subtle: { root: 'bg-[var(--forest-card-bg)] ring-[var(--forest-card-ring)] divide-[color:var(--forest-card-ring)]' },
+      outline: { root: 'ring-[var(--forest-card-ring)] divide-[color:var(--forest-card-ring)]' },
+      // Tinted accent variants — surfaces off the brand ramps (see --forest-card-<hue>-* in
+      // styles/forest.css: soft tint in light, deep ramp tone in dark). Ink is tone-on-tone: title +
+      // description take the hue's own -text / -muted step (deep on the light tint, light on the deep
+      // tone) so the copy reads as part of the accent, not neutral ink dropped on top. For featured/
+      // promo cards. Flat like soft: the hue carries the surface, so there is no divider and the
+      // sections take flatGap. Stock has no tinted variant to inherit a `divide-y` from.
+      peach: { root: 'bg-[var(--forest-card-peach-bg)] ring-[var(--forest-card-peach-ring)]', title: 'text-[var(--forest-card-peach-text)]', description: 'text-[var(--forest-card-peach-muted)]', ...flatGap },
+      mint:  { root: 'bg-[var(--forest-card-mint-bg)] ring-[var(--forest-card-mint-ring)]', title: 'text-[var(--forest-card-mint-text)]', description: 'text-[var(--forest-card-mint-muted)]', ...flatGap },
+      sky:   { root: 'bg-[var(--forest-card-sky-bg)] ring-[var(--forest-card-sky-ring)]', title: 'text-[var(--forest-card-sky-text)]', description: 'text-[var(--forest-card-sky-muted)]', ...flatGap },
+      amber: { root: 'bg-[var(--forest-card-amber-bg)] ring-[var(--forest-card-amber-ring)]', title: 'text-[var(--forest-card-amber-text)]', description: 'text-[var(--forest-card-amber-muted)]', ...flatGap },
+    },
+  },
+  defaultVariants: {
+    variant: 'soft',
+  },
+} as const

package/src/themes/carousel.ts

@@ -0,0 +1,41 @@
+/**
+ * Forest theme fragment — UCarousel (Embla-powered sliding gallery). Deltas only.
+ *
+ * Two opinions, both on the controls:
+ *
+ *   prev / next — the arrow buttons gain the Forest outline focus ring
+ *     (`focus-visible:outline-2 outline-offset-2 outline-[var(--forest-500)]`) so keyboard
+ *     navigation matches every other Forest interactive primitive. Stock leaves the slot at
+ *     `absolute rounded-full` and relies on the UButton's own focus-visible ring.
+ *
+ *   dot — the active pagination pip adopts the primary brand green
+ *     (`var(--forest-500)` light / `var(--forest-400)` dark) instead of stock's `bg-inverted`,
+ *     plus the same outline focus ring. ★ The colour MUST live in the `active` variant, not the
+ *     base slot: stock sets `data-[state=active]:bg-inverted` in `variants.active.true.dot`, and
+ *     tv applies the size/state variant AFTER the base slot — so a base-slot colour loses the
+ *     tailwind-merge race and the pip stays inverted. Overriding the variant (deep-merged, appended
+ *     last) is the seam that actually wins. Inactive pip stays stock `bg-accented`.
+ *
+ * Untouched (inherited from stock): root/viewport/container/item layout, controls/arrows wrappers,
+ * dots positioning, orientation variants, drag/keyboard/plugin behaviour (all Embla's).
+ */
+
+const FOCUS_RING =
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--forest-500)]';
+
+export const carouselTheme = {
+  slots: {
+    prev: FOCUS_RING,
+    next: FOCUS_RING,
+    dot: `focus:outline-none ${FOCUS_RING}`,
+  },
+  variants: {
+    active: {
+      true: {
+        // Overrides stock's `data-[state=active]:bg-inverted` — wins because the active variant is
+        // deep-merged (Forest appended last) and applied after the base slot.
+        dot: 'data-[state=active]:bg-[var(--forest-500)] dark:data-[state=active]:bg-[var(--forest-400)]',
+      },
+    },
+  },
+} as const;

package/src/themes/checkbox-group.ts

@@ -0,0 +1,20 @@
+/**
+ * Forest theme fragment — UCheckboxGroup.
+ *
+ * Forest opinions applied:
+ *   `legend` slot: font-bold lifts the group legend above the individual checkbox labels
+ *   (stock: font-medium), matching the legend treatment in radioGroupTheme and the label
+ *   treatment in formFieldTheme.
+ *
+ * The card and table variants are left entirely stock — no radius override.
+ *
+ * Slots touched: legend.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/checkbox-group.ts
+ */
+
+export const checkboxGroupTheme = {
+  slots: {
+    // font-bold lifts the group legend above the individual checkbox labels (stock: font-medium).
+    legend: 'font-bold',
+  },
+} as const;

package/src/themes/checkbox.ts

@@ -0,0 +1,47 @@
+/**
+ * Forest theme fragment — UCheckbox + UCheckboxGroup.
+ *
+ * Forest opinions applied:
+ *   - `base` (checkbox): radius lifted from `rounded-sm` (2 px stock) to `rounded` (4 px, i.e.
+ *     0.25 rem), which is softer without being pill-like. Keeps it reading as a square control
+ *     while aligning with Forest's overall soft-radius vocabulary (--ui-radius = 0.5 rem).
+ *   - `label`: font-medium is already stock; we keep it and add nothing — the Nuxt UI default is
+ *     correct here.
+ *   - `base` focus ring: Forest's house convention `focus-visible:outline-2 focus-visible:outline-offset-2`
+ *     (an offset ring), over stock's flush `focus-visible:outline-3`. The outline COLOUR is stock's
+ *     semantic value, resolved to the Forest OKLCH ramp via docs.css / forest-preset — no colour
+ *     override needed, only the width + offset.
+ *   - `legend` (CheckboxGroup): font-bold — bold against the regular item labels, giving the
+ *     group label a clear hierarchy above the individual checkbox labels.
+ *
+ * The card variant is left entirely stock — no radius override.
+ *
+ * Slots touched: base.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/checkbox.ts
+ *
+ * The CheckboxGroup legend opinion lives in its own sibling fragment (checkbox-group.ts),
+ * matching the one-file-per-component convention (cf. radio-group.ts, field-group.ts).
+ */
+
+export const checkboxTheme = {
+  slots: {
+    // Deltas over stock: `rounded` (4px) for the Forest soft radius (stock rounded-sm/2px), and the
+    // house focus ring `outline-2 outline-offset-2` (stock is a flush outline-3). Ring colour and the
+    // indicator bg resolve to the Forest OKLCH ramps via the colour-alias bridge — no override there.
+    base: 'rounded focus-visible:outline-2 focus-visible:outline-offset-2',
+  },
+  // Touch: a checkbox's tap target is the whole label ROW, and at md that row is short (~20px). Under
+  // a coarse (finger) pointer each size grows one size up — box (base), row height (container) and
+  // label text (wrapper) — so the row becomes a taller, easier target. No sliding part, so the bump
+  // is clean (unlike the switch thumb). xl is the ceiling; each size lists only its deltas up.
+  // `coarse:` carries the `:not(.cut-fixed)` escape so the mobile cut (baked size lg) opts out.
+  variants: {
+    size: {
+      xs: { base: 'coarse:size-3.5' },
+      sm: { base: 'coarse:size-4', container: 'coarse:h-5', wrapper: 'coarse:text-sm' },
+      md: { base: 'coarse:size-4.5' },
+      lg: { base: 'coarse:size-5', container: 'coarse:h-6', wrapper: 'coarse:text-base' },
+      // xl: ceiling
+    },
+  },
+} as const;

package/src/themes/chip.ts

@@ -0,0 +1,50 @@
+/**
+ * Forest theme fragment — UChip
+ *
+ * Two deltas over stock (the preset APPENDS, so this carries only what changes):
+ *
+ *   1. base: `font-bold` — stock is `font-medium`, thin on the tiny count labels.
+ *
+ *   2. Text-mode bump. Stock sizes a chip as a DOT: height = min-width = text all equal (md is an
+ *      8px dot with 8px text), so a count digit is unreadable. A chip WITH content is distinguishable
+ *      from an empty dot via `:not(:empty)` (an empty dot holds only Vue comment placeholders, which
+ *      `:empty` ignores). So we bump ONLY text chips and leave status dots byte-for-byte stock:
+ *        - base:  `px-1` breathing room + `leading-none` centring, size-independent.
+ *        - size:  per step, a `:not(:empty)` text floor + a min-height/width so a single digit sits
+ *                 in a roughly square pill. `min-height` beats the stock fixed `h-[Npx]` on its own
+ *                 (no `h-auto` needed); the arbitrary `[&:not(:empty)]` variant is (0,2,0), so it
+ *                 wins over the stock `text-[Npx]`/`min-w-[Npx]` (0,1,0) without a tailwind-merge
+ *                 collision. Text scales md 11 → 3xl 15px.
+ *
+ * Everything else is stock: rounded-full pill, the `ring ring-bg` separator, bg-{color} faces
+ * (bridged to the Forest ramps in docs.css), text-inverted ink, position / inset / standalone.
+ * `root` needs no override.
+ */
+export const chipTheme = {
+  slots: {
+    base: 'font-bold [&:not(:empty)]:px-1 [&:not(:empty)]:leading-none',
+  },
+  variants: {
+    // Standalone chips have no host corner to hug, but stock's position compound-variant still
+    // applies `-translate-y-1/2 translate-x-1/2`, shoving the inline dot up-and-right off the text
+    // centre. Zero the translate so a standalone dot sits centred in its flow. Hooked on `.ring`
+    // (always on the base slot) for (0,2,0) specificity — beats the compound regardless of tv
+    // ordering, no !important.
+    standalone: {
+      true: '[&.ring]:translate-x-0 [&.ring]:translate-y-0',
+    },
+    // Per-size text-mode floor — applies ONLY when the chip has content (a count/label), so empty
+    // status dots keep the stock 4–12px ladder untouched.
+    size: {
+      '3xs': '[&:not(:empty)]:min-h-[14px] [&:not(:empty)]:min-w-[14px] [&:not(:empty)]:text-[10px]',
+      '2xs': '[&:not(:empty)]:min-h-[14px] [&:not(:empty)]:min-w-[14px] [&:not(:empty)]:text-[10px]',
+      'xs':  '[&:not(:empty)]:min-h-[15px] [&:not(:empty)]:min-w-[15px] [&:not(:empty)]:text-[10px]',
+      'sm':  '[&:not(:empty)]:min-h-[15px] [&:not(:empty)]:min-w-[15px] [&:not(:empty)]:text-[11px]',
+      'md':  '[&:not(:empty)]:min-h-[16px] [&:not(:empty)]:min-w-[16px] [&:not(:empty)]:text-[11px]',
+      'lg':  '[&:not(:empty)]:min-h-[17px] [&:not(:empty)]:min-w-[17px] [&:not(:empty)]:text-[12px]',
+      'xl':  '[&:not(:empty)]:min-h-[18px] [&:not(:empty)]:min-w-[18px] [&:not(:empty)]:text-[13px]',
+      '2xl': '[&:not(:empty)]:min-h-[20px] [&:not(:empty)]:min-w-[20px] [&:not(:empty)]:text-[14px]',
+      '3xl': '[&:not(:empty)]:min-h-[22px] [&:not(:empty)]:min-w-[22px] [&:not(:empty)]:text-[15px]',
+    },
+  },
+} as const;

package/src/themes/collapsible.ts

@@ -0,0 +1,26 @@
+/**
+ * Forest theme fragment — UCollapsible (single animated expand/collapse).
+ *
+ * Deltas over stock (stock: root '', content = raw collapsible keyframes at 200ms ease-out):
+ *   - `root`: adds `rounded-lg` so the container reads at the Forest soft-radius register when
+ *     consumers wrap the collapsible in a bordered shell.
+ *   - `content`: retimes the open/close keyframes to the shared --motion-slow / --motion-ease-out
+ *     tokens (stock is a raw 200ms ease-out) and adds `text-sm text-muted` so body content is
+ *     subordinate in the reading hierarchy — consistent with how the accordion body slot is styled.
+ *     `overflow-hidden` clips the region during the height animation. Trigger styling is entirely the
+ *     consumer's concern; the default slot exposes a scoped `{ open }`.
+ *
+ * Slots touched: root, content.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/collapsible.ts
+ */
+
+export const collapsibleTheme = {
+  slots: {
+    // rounded-lg: aligns with Forest's --ui-radius = 0.5rem soft-radius register. Keeps the
+    // collapsible shell consistent with other Forest panel-level components (Card, Alert, etc.).
+    root: 'rounded-lg',
+    // text-sm text-muted: matches Forest's body-content hierarchy (content is subordinate to the
+    // trigger/heading above it). The stock open/close keyframe animations are intentionally kept.
+    content: 'data-[state=open]:animate-[collapsible-down_var(--motion-slow)_var(--motion-ease-out)] data-[state=closed]:animate-[collapsible-up_var(--motion-slow)_var(--motion-ease-out)] overflow-hidden text-sm text-muted',
+  },
+} as const;

package/src/themes/color-picker.ts

@@ -0,0 +1,13 @@
+/**
+ * Forest theme fragment — UColorPicker. No delta: the stock recipe is correct as-is.
+ *
+ *   - Selector, gradient canvas and track all sit on rounded-md — already the control-family
+ *     standard, so there is nothing to override.
+ *   - The thumbs are rounded-full with the ring-2 ring-white halo — circular handles are the
+ *     right affordance and the halo is already tactile.
+ *
+ * The empty export keeps the component in the register as reviewed; the deltas-only test keeps
+ * it from ever restating stock.
+ */
+
+export const colorPickerTheme = {} as const

package/src/themes/command-palette.ts

@@ -0,0 +1,37 @@
+/**
+ * Forest theme fragment — UCommandPalette (searchable command list).
+ *
+ * Deltas only (the preset appends to stock Nuxt UI):
+ *   - root  — rounded-xl: a soft card boundary at the palette container; stock has no radius
+ *             (flat edges, since the palette usually lives inside a modal/drawer).
+ *   - label — font-bold + tracking-wide: group headings get brand confidence; stock is
+ *             font-semibold with no tracking.
+ *
+ * The `item` hover/active slab is stock before:rounded-md (12px) — the same shape the sidebar's nav
+ * rows carry, since UNavigationMenu's `link` takes no Forest radius delta either. A row is a row on
+ * both surfaces.
+ *
+ * Everything else (density ladder, match-mark highlight [&>mark]:text-primary, focus, close/back
+ * icons, transitions) is stock on the Forest ramps. Slot names sourced from:
+ * apps/docs/node_modules/.nuxt-ui/ui/command-palette.ts
+ */
+
+export const commandPaletteTheme = {
+  slots: {
+    root: 'rounded-xl',
+    label: 'font-bold tracking-wide',
+  },
+
+  // Touch: each result row promotes ONE size up under a coarse pointer (borrows the next size's
+  // padding / gap / type / icon) — same ladder as the menu family. The search `input` slot already
+  // ships explicit h-12+ heights so it needs no bump. xl is the ceiling; deltas only. `coarse:`
+  // carries the :not(.cut-fixed) escape so a baked mobile cut opts out.
+  variants: {
+    size: {
+      xs: { item: 'coarse:p-1.5 coarse:gap-1.5', label: 'coarse:p-1.5 coarse:gap-1.5' },
+      sm: { item: 'coarse:text-sm', label: 'coarse:text-xs', itemLeadingIcon: 'coarse:size-5', itemTrailingIcon: 'coarse:size-5', itemTrailingHighlightedIcon: 'coarse:size-5' },
+      md: { item: 'coarse:p-2 coarse:gap-2', label: 'coarse:p-2 coarse:gap-2' },
+      lg: { item: 'coarse:text-base', label: 'coarse:text-sm', itemLeadingIcon: 'coarse:size-6', itemTrailingIcon: 'coarse:size-6', itemTrailingHighlightedIcon: 'coarse:size-6' },
+    },
+  },
+} as const;

package/src/themes/container.ts

@@ -0,0 +1,14 @@
+/**
+ * Forest theme fragment for UContainer — deliberately EMPTY.
+ *
+ * UContainer is the WELL: the only thing in the system that caps page width. Stock's recipe is
+ * already correct for Forest — `max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8`, where the cap
+ * rides the `--ui-container` lever (80rem) and the gutters land on 2rem at `lg`, which is what the
+ * docs shell was already hand-typing. So there is no delta to record, only a review.
+ *
+ * The three well modes are NOT variants here: UContainer exposes no `width` prop, so a Tailwind
+ * Variants variant would have nothing to drive it. They ship instead as utilities that re-point
+ * `--ui-container` in scope — `well-reading` / `well-full` / `well-flush` in styles/forest.css.
+ */
+
+export const containerTheme = {} as const

package/src/themes/context-menu.ts

@@ -0,0 +1,38 @@
+/**
+ * Forest theme fragment — UContextMenu (right-click contextual menu).
+ *
+ * Forest opinions applied:
+ *   - `item`     — before:rounded-sm (8 px) — concentric one step inside the 12 px panel, giving
+ *                  the hover/active slab a natural inset. Stock is before:rounded-md.
+ *   - `label`    — font-bold + tracking-wide gives section headings confident hierarchy over item
+ *                  rows; stock is font-semibold with no tracking. Mirrors the CommandPalette label
+ *                  treatment for visual consistency across Forest menu surfaces.
+ *
+ * Slots touched: content, item, label.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/context-menu.ts
+ */
+
+export const contextMenuTheme = {
+  slots: {
+    content: 'data-[state=open]:animate-[scale-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-fast)_var(--motion-ease-out)]',
+
+    // Item slab: before:rounded-sm (8 px) — concentric inside the 12 px panel.
+    item: 'before:rounded-sm',
+
+    // Section labels: bold weight + wide tracking — confident group hierarchy, not just slightly-bolder body.
+    label: 'font-bold tracking-wide',
+  },
+
+  // Touch: each row promotes ONE size up under a coarse pointer (borrows the next size's padding /
+  // gap / type / icon), scaling the tap slab as a unit — same ladder as DropdownMenu and the
+  // input/button family. xl is the ceiling; deltas only. `coarse:` carries the :not(.cut-fixed)
+  // escape so a baked mobile cut opts out.
+  variants: {
+    size: {
+      xs: { item: 'coarse:p-1.5 coarse:gap-1.5', label: 'coarse:p-1.5 coarse:gap-1.5' },
+      sm: { item: 'coarse:text-sm', label: 'coarse:text-sm', itemLeadingIcon: 'coarse:size-5', itemTrailingIcon: 'coarse:size-5' },
+      md: { item: 'coarse:p-2 coarse:gap-2', label: 'coarse:p-2 coarse:gap-2' },
+      lg: { item: 'coarse:text-base', label: 'coarse:text-base', itemLeadingIcon: 'coarse:size-6', itemTrailingIcon: 'coarse:size-6' },
+    },
+  },
+} as const;

package/src/themes/dashboard-group.ts

@@ -0,0 +1,11 @@
+/**
+ * Forest theme fragment for UDashboardGroup.
+ *
+ * The group is the muted page shell the inset panels float on: bg-muted in light, the deep
+ * neutral-950 in dark (bg-muted collapses into the card surface there — the explicit step keeps
+ * shell and card separable). text-default seats the base ink for everything inside.
+ */
+
+export const dashboardGroupTheme = {
+  base: 'bg-muted dark:bg-(--ui-color-neutral-950) text-default',
+} as const

package/src/themes/dashboard-navbar.ts

@@ -0,0 +1,10 @@
+/**
+ * Forest theme fragment for UDashboardNavbar. No delta: the stock recipe is correct as-is.
+ *
+ *   - Height rides --ui-header-height, the hairline is border-default, the title weight is
+ *     font-semibold (bold via the two-weight re-map) — all already on Forest tokens.
+ *   - The docs shell composes its crumb and actions through the navbar's slots; that is usage,
+ *     not theme.
+ */
+
+export const dashboardNavbarTheme = {} as const

package/src/themes/dashboard-panel.ts

@@ -0,0 +1,18 @@
+/**
+ * Forest theme fragment for UDashboardPanel.
+ *
+ * The Forest dashboard panel is an INSET CARD, not stock's flat full-bleed column: the panel
+ * floats on the group's muted shell with a margin (--forest-panel-inset, which the app shell's bands
+ * read too so their edges track the card's), soft corners and the relative hairline
+ * (--forest-card-ring, the same translucent edge cards use). `lg:ms-0` hugs the panel against
+ * the sidebar rail on desktop so the shell reads as one composition, not two islands.
+ * `min-h-0` counters stock's min-h-svh — inside the group's fixed viewport the margins would
+ * otherwise push the panel past the bottom edge. `overflow-hidden` clips content to the
+ * rounded corners.
+ */
+
+export const dashboardPanelTheme = {
+  slots: {
+    root: 'bg-default overflow-hidden m-(--forest-panel-inset) lg:ms-0 rounded-lg ring ring-[var(--forest-card-ring)] min-h-0',
+  },
+} as const

package/src/themes/dashboard-resize-handle.ts

@@ -0,0 +1,35 @@
+/**
+ * Forest theme fragment for UDashboardResizeHandle (flat component, single `base` slot).
+ *
+ * A grab pill in the middle of the gutter, on hover and while dragging. Hidden at rest: the gutter is a
+ * seam between two surfaces, and anything permanent sitting in it reads as a divider rather than as a
+ * control — which is what the full-height hairline this replaces did.
+ *
+ * Short, and it fades rather than moves: the pill has to say "grab here", not draw the edge.
+ *
+ * It sits CLEAR of the panel's edge rather than centred on the handle. The handle's own box is zero-wide
+ * and lands exactly on the seam, so a centred pill straddles the card's rounded corner and reads as part
+ * of it; `right-1` backs it off into the shell where it reads as a separate control.
+ *
+ * Stock draws nothing and carries `cursor-ew-resize`, `touch-none` and a ±6px `before:` hit area. The
+ * paint is added here and the hit area is widened to hold it — see below.
+ */
+
+export const dashboardResizeHandleTheme = {
+  base: [
+    // ★ THE PILL HAS TO SIT INSIDE THE ZONE THAT REVEALS IT. Drawn to the shell side of the seam against
+    // stock's ±6px area, it fell outside: it appeared where the cursor was not, and vanished on approach.
+    // Widened leftwards only — the sidebar's links and its scroller's padding both stop 16px short of the
+    // seam and its scrollbar is `width: none`, so this reaches nothing. The right stays at stock.
+    'before:-left-3.5',
+    'after:absolute after:top-1/2 after:right-1 after:-translate-y-1/2',
+    'after:h-16 after:w-1 after:rounded-full after:bg-(--ui-text-dimmed)',
+    'after:opacity-0 after:transition-opacity after:duration-(--motion-fast)',
+    // ★ ONE-WAY DWELL. The delay rides the HOVER state only, so the pill waits half a second before it
+    // appears and leaves the instant the pointer does — the base carries no delay to revert to. A cursor
+    // crossing the seam on its way into the sidebar never summons it. `active` clears the wait so a drag
+    // that starts before the pill has arrived still shows what is being dragged.
+    'hover:after:opacity-100 hover:after:delay-(--motion-dwell)',
+    'active:after:opacity-100 active:after:delay-0',
+  ].join(' '),
+} as const

package/src/themes/dashboard-sidebar-collapse.ts

@@ -0,0 +1,7 @@
+/**
+ * Forest theme fragment for UDashboardSidebarCollapse. No delta: the stock recipe is correct
+ * as-is — a desktop-only (hidden lg:flex) neutral ghost button whose panel-open/close icon and
+ * behaviour come from the dashboard context.
+ */
+
+export const dashboardSidebarCollapseTheme = {} as const

package/src/themes/dashboard-sidebar-toggle.ts

@@ -0,0 +1,7 @@
+/**
+ * Forest theme fragment for UDashboardSidebarToggle. No delta: the stock recipe is correct
+ * as-is — a mobile-only (lg:hidden) neutral ghost button whose menu/close icon and behaviour
+ * come from the dashboard context.
+ */
+
+export const dashboardSidebarToggleTheme = {} as const

package/src/themes/dashboard-sidebar.ts

@@ -0,0 +1,58 @@
+/**
+ * Forest theme fragment for UDashboardSidebar.
+ *
+ * The sidebar sits directly on the group's muted shell with no divider — the inset panel's own
+ * hairline does the separating, so stock's border-e (side=left variant) is zeroed at the same
+ * variant path. The rail sizing vars and the mobile slideover are stock and ride the tokens.
+ *
+ * The rest is the COLLAPSED RAIL, which stock does not size for. These are properties of the
+ * component at collapsed-size=4, not of any one app, so they belong here rather than as a `:ui` on
+ * each consumer — every app would otherwise rediscover them by eye:
+ *
+ *   · Stock spends 16px a side, leaving 32px of content in a 64px rail — too little for an icon-sized
+ *     row to be square or centred, and narrower than the 41px logo badge. Halved here.
+ *   · The scrollbar claims another 11px, offsetting every row and the logo from the rail's centre
+ *     line; expanded, the same bar draws hard against the inset panel's edge and reads as a seam
+ *     between two surfaces meant to be one. Hidden in BOTH states: a nav column shows its overflow
+ *     by fading, not by a bar. Never via ::-webkit-scrollbar, which forces the classic wide
+ *     bar back — see the scrollbar note in styles/forest.css. The `!` is load-bearing: forest.css
+ *     sets `scrollbar-width: thin` on `*`, which otherwise wins.
+ *
+ * `data-collapsed` lives on the ROOT and the padding belongs to its children, so the root carries a
+ * `group` for header, body and footer to hang off — a footer carries account chrome, which collapses
+ * to an avatar and needs the same centre line as the rows above it. Nothing here touches the resize
+ * handle: it is a sibling element and keeps its own hit area, cursor and drag.
+ *
+ * ── The collapse travel ──
+ * Stock ships this component with no transition at all: the root is `w-(--width)` and nothing else, so
+ * 16rem → 4rem lands in one frame. USidebar DOES carry a `transition` variant, and themes/sidebar.ts
+ * re-points its timing at the motion tokens — but that is a different ui key and a different component,
+ * and the app rail never reads it. The width travel is re-declared here so the shell obeys the same
+ * doctrine: the largest movement the shell makes, starting and ending in view, so --motion-slow on
+ * --motion-ease-in-out rather than the near-element pair.
+ *
+ * ★ DRAGGING MUST OPT OUT. The resize handle writes `--width` on every pointermove, so a transition
+ * left on would run the column 240ms behind the pointer for the whole drag. Stock puts `data-dragging`
+ * on the root for exactly this, and the attribute selector out-specifies the bare utility, so the
+ * override holds whatever order Tailwind emits the two in.
+ *
+ * Reduced motion needs no gate here: the floor in the motion tokens re-declares transition-property as
+ * an allow-list of colour and opacity properties, and `width` is not in it, so the rail snaps.
+ */
+
+export const dashboardSidebarTheme = {
+  slots: {
+    root: [
+      'group transition-[width] duration-(--motion-slow) ease-(--motion-ease-in-out)',
+      'data-[dragging=true]:transition-none',
+    ].join(' '),
+    header: 'group-data-[collapsed=true]:px-2 group-data-[collapsed=true]:justify-center',
+    body: '[scrollbar-width:none]! group-data-[collapsed=true]:px-2',
+    footer: 'group-data-[collapsed=true]:px-2 group-data-[collapsed=true]:justify-center',
+  },
+  variants: {
+    side: {
+      left: { root: 'border-e-0' },
+    },
+  },
+} as const

package/src/themes/dashboard-toolbar.ts

@@ -0,0 +1,15 @@
+/**
+ * Forest theme fragment for UDashboardToolbar.
+ *
+ * One delta: the height. Stock hard-codes min-h-[49px], which tracks no token and sits a pixel proud
+ * of the navbar's h-(--ui-header-height). A floor rather than a fixed height, because a wrapping
+ * filter bar has to grow.
+ *
+ * Slots sourced from test/fixture/node_modules/.nuxt-ui/ui/dashboard-toolbar.ts.
+ */
+
+export const dashboardToolbarTheme = {
+  slots: {
+    root: 'min-h-(--ui-header-height)',
+  },
+} as const

package/src/themes/drawer.ts

@@ -0,0 +1,45 @@
+/**
+ * Forest theme fragment — UDrawer (drag-dismissable edge sheet).
+ *
+ * Deltas only (the preset APPENDS to stock Nuxt UI); slots touched: title, content radius.
+ *
+ *   content radius — rounder edge corners than stock's rounded-*-lg. CRITICAL: stock sets the edge
+ *             radius in COMPOUND VARIANTS (per direction + inset, e.g. `{direction:bottom, inset:false}
+ *             → content: rounded-t-lg`), which OUTRANK a base `slots.content` class in tv. A flat
+ *             `slots: { content: 'rounded-t-xl' }` was silently overridden (rendered rounded-t-lg).
+ *             So the override must live in matching compoundVariants — appended after stock's, they win
+ *             the merge. rounded-*-2xl (32px) on the four non-inset directions; the inset (floating)
+ *             cut steps stock's rounded-lg up to rounded-xl.
+ *
+ *   handle  — untouched: stock's neutral `!bg-accented` affordance. Only mobile re-colours it (warm,
+ *             to sit on that context's peach surface — mobile-theme.ts). NOTE for anyone overriding
+ *             it: stock's class is IMPORTANT and tw-merge keeps an important class alongside a plain
+ *             one of the same bucket, so an override has to be important too.
+ *
+ *   title   — text-base + tracking-tight, added to stock's font-semibold. Polishes the built-in
+ *             `title`-prop path; the #header slot (used in the docs demos) is free-form.
+ *
+ * Recipe shape sourced from apps/docs/node_modules/.nuxt-ui/ui/drawer.ts (radius = compoundVariants).
+ */
+
+export const drawerTheme = {
+  slots: {
+    title: 'text-base tracking-tight',
+  },
+  variants: {
+    // Inset (floating) cut rounds all four corners; read the same trait var.
+    inset: { true: { content: 'rounded-[var(--forest-drawer-radius)]' } },
+  },
+  // Edge radius via the --forest-drawer-radius TRAIT (forest.css :root = 1.5rem / xl, standard). The
+  // radius MUST live in compoundVariants — stock sets it there per direction+inset, beating any base
+  // slot class. But a per-CONTEXT override can't add compoundVariants (context UTheme merges only
+  // slots, and those lose to compoundVariants anyway). So the compoundVariant reads a VAR, and mobile/
+  // marketing re-point that var with a `[--forest-drawer-radius:2rem]` slot class — which rides the
+  // portal and never collides in tw-merge. Same trick as --fx-title-* on the card title.
+  compoundVariants: [
+    { direction: 'bottom', inset: false, class: { content: 'rounded-t-[var(--forest-drawer-radius)]' } },
+    { direction: 'top', inset: false, class: { content: 'rounded-b-[var(--forest-drawer-radius)]' } },
+    { direction: 'left', inset: false, class: { content: 'rounded-r-[var(--forest-drawer-radius)]' } },
+    { direction: 'right', inset: false, class: { content: 'rounded-l-[var(--forest-drawer-radius)]' } },
+  ],
+} as const;

package/src/themes/dropdown-menu.ts

@@ -0,0 +1,38 @@
+/**
+ * Forest theme fragment — UDropdownMenu (action menu, groups + nesting).
+ *
+ * Forest opinions applied:
+ *   - `item`     — before:rounded-sm (8 px) — concentric one step inside the 12 px panel, giving the
+ *                  hover/active slab a natural inset. Stock is before:rounded-md.
+ *   - `label`    — font-bold tracking-wide (group + section headings read with brand confidence;
+ *                  stock is font-semibold with no tracking).
+ *
+ * Slots touched: content · item · label
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/dropdown-menu.ts
+ */
+
+export const dropdownMenuTheme = {
+  slots: {
+    content: 'data-[state=open]:animate-[scale-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-fast)_var(--motion-ease-out)]',
+
+    // Item slab: before:rounded-sm (8 px) — concentric inside the 12 px panel.
+    item: 'before:rounded-sm',
+
+    // Group headings: bold weight + wide tracking — confident, readable at small size.
+    label: 'font-bold tracking-wide',
+  },
+
+  // Touch: under a coarse pointer each row promotes ONE size up — it borrows the next size's
+  // padding / gap / type / icon, so the tap slab scales as a unit (mirrors the input/button ladder).
+  // xl is the ceiling. Deltas only: each size lists just the tokens that differ from its next step
+  // up (e.g. sm→md changes only type + icon, so no padding delta). `coarse:` carries the
+  // :not(.cut-fixed) escape, so a baked mobile cut opts out instead of promoting again.
+  variants: {
+    size: {
+      xs: { item: 'coarse:p-1.5 coarse:gap-1.5', label: 'coarse:p-1.5 coarse:gap-1.5' },
+      sm: { item: 'coarse:text-sm', label: 'coarse:text-sm', itemLeadingIcon: 'coarse:size-5', itemTrailingIcon: 'coarse:size-5' },
+      md: { item: 'coarse:p-2 coarse:gap-2', label: 'coarse:p-2 coarse:gap-2' },
+      lg: { item: 'coarse:text-base', label: 'coarse:text-base', itemLeadingIcon: 'coarse:size-6', itemTrailingIcon: 'coarse:size-6' },
+    },
+  },
+} as const;