@humanforest/ui 0.1.0

package/src/themes/sidebar.ts

@@ -0,0 +1,127 @@
+/**
+ * Forest theme fragment — USidebar (the persistent navigation shell).
+ *
+ * Deltas over stock (the preset APPENDS to Nuxt UI's recipe):
+ *   - `title`: font-display renders the shell heading in MohrAlt (Black, uppercase) — the same
+ *     treatment UModal and USlideover give their titles. It also closes a breakpoint seam: below
+ *     lg the sidebar forwards `title` to its mobile menu (a USlideover by default), whose own
+ *     fragment already stamps font-display, so without this the same string changed face at
+ *     1024px.
+ *     Not cap-trimmed. Mohr's cap band is centred in its own box by the @font-face metric overrides
+ *     in packages/fonts/forest-fonts.css, so a heading needs no box-level treatment.
+ *   - `variants.variant.floating.inner`: `bg-default shadow-none`. Two changes to one slot.
+ *     Stock lifts the floating panel with a `shadow-lg` — Forest surfaces separate by ring and
+ *     tint, not by drop shadow. And stock gives the panel no background at all, so it showed the
+ *     shell bed through its own ring; `bg-default` makes it the same surface as the content panel
+ *     beside it, which is what "two floating parts on one bed" has to mean to read.
+ *     ★ The variant lifts the COLUMN only. The content panel beside it is a usage-site concern,
+ *     and its START margin must follow `open` — while the column is out, the gap on the panel's
+ *     leading edge is the column's own p-4, and nothing supplies it once the column slides away.
+ *     ★ FLOATING IS OPT-IN, and the default is stock's flush `sidebar`. This fragment used to flip
+ *     that, on the reasoning that Forest shells float their parts on a muted bed — but the shell's
+ *     float comes from dashboardPanel and dashboardSidebar, which are different ui keys and never
+ *     read this one. The population a default here actually governs is a bare `<USidebar>`, and the
+ *     app rail is not in it: FAppSidebar wraps UDashboardSidebar. What is left is the static column
+ *     — inside a modal, a settings pane, a card — where floating is usually wrong twice over: it
+ *     draws a card inside a card, and its `collapsible="none"` compound puts `p-4` on the root,
+ *     which is border-box and `w-(--sidebar-width)`, so the padding comes out of the column's own
+ *     width. Floating is a claim about what lies UNDERNEATH the column, and only the usage site can
+ *     see that. FSidePanel passes it explicitly for its overlay cut; a shell column should too.
+ *   - `variants.collapsible.icon`: the collapsed rail halves its side padding across header, body and
+ *     footer, and centres the two regions that hold a single control. Mirrors dashboardSidebar, which
+ *     carries the same pair — see the note on the variant.
+ *   - `variants.transition.true`: the collapse/expand timing moves onto the shared motion tokens —
+ *     --motion-slow / --motion-ease-in-out on the width travel, the near-element pair on the rail.
+ *
+ * Slots touched by the transition variant: gap, container, rail.
+ *
+ * Everything else is stock and already rides the Forest ramps:
+ *   - Every colour and border in the recipe is a semantic token (divide-default, text-highlighted,
+ *     --ui-border-accented on the rail, --ui-header-height on the header).
+ *   - The width vars (--sidebar-width 16rem, --sidebar-width-icon 4rem) and the
+ *     side × collapsible × variant matrix are structure, set at the usage site.
+ *   - The docs shell's inset look is the `variant="inset"` prop at the usage site, not a theme
+ *     concern.
+ *
+ * Slots touched: title, description, header/body/footer under the icon collapse, and inner under the
+ * floating variant.
+ * Stock recipe: apps/docs/node_modules/.nuxt-ui/ui/sidebar.ts
+ */
+
+export const sidebarTheme = {
+  slots: {
+    title: 'font-display',
+    // Stock gives USidebar no gap between its title and description, where it gives UCard's
+    // description an `mt-1`. Same idiom here rather than a `space-y-*` on the wrapper: the gap belongs
+    // to the description in both components, so the two read the same way when someone compares them.
+    description: 'mt-1',
+  },
+  variants: {
+    // ★ The collapsed rail halves its side padding in EVERY region, because stock's leaves its own
+    // controls no room. Stock keeps `p-4` at any width, which spends 32px of a rail that is 56–64px
+    // wide; the nav item is `size-8` (32px) and a footer button's own `px-3.5` makes it 28px at
+    // minimum. At stock's default 4rem the nav item fits with exactly zero slack, and at any narrower
+    // rail everything overflows — measured at 3.5rem: nav icons 4.5px off centre and hanging past the
+    // trailing edge, the footer's collapse button 2.5px off.
+    //
+    // ★ AND CENTRING CANNOT FIX IT. `mx-auto` and `justify-center` distribute LEFTOVER space, so they
+    // do nothing once the item is wider than the box it sits in — the item overflows and the centring
+    // silently stops applying. The box has to be wide enough first; that is what this is.
+    //
+    // Halved rather than zeroed: at `px-0` the controls would centre just as well, but a ghost
+    // button's hover fill would run edge to edge across the rail. 8px keeps the fill inset and still
+    // clears a 32px control at 3.5rem, with room to spare at stock's 4rem.
+    //
+    // ★ `justify-center` on the two REGIONS that hold a single control, because room alone only
+    // centres a child that stretches to fill it. The body's rows carry their own `mx-auto`, but a
+    // header's mark and a footer's avatar are content-width in a flex row that stays `flex-start` —
+    // measured, a 28px avatar sat 5.5px off the line every row below it shares. This mirrors
+    // themes/dashboard-sidebar.ts, which has carried the same pair since the docs rail hit it; the
+    // two components are separate ui keys, so the fix does not travel on its own.
+    collapsible: {
+      icon: {
+        header: 'group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:justify-center',
+        body: 'group-data-[state=collapsed]/sidebar:px-2',
+        footer: 'group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:justify-center',
+      },
+    },
+    // Collapse / expand is the largest on-screen travel the shell performs, and it both starts and
+    // ends in view — the exact case the doctrine reserves --motion-slow + --motion-ease-in-out for
+    // (it names the nav viewport resize as the precedent). Stock runs a flat duration-200 on the
+    // built-in `ease-out`, which the doctrine calls too weak to read as intentional. The rail is a
+    // thin hover affordance, not travel, so it takes the near-element pair instead.
+    transition: {
+      true: {
+        gap: 'duration-(--motion-slow) ease-(--motion-ease-in-out)',
+        container: 'duration-(--motion-slow) ease-(--motion-ease-in-out)',
+        rail: 'duration-(--motion-fast) ease-(--motion-ease-out)',
+      },
+    },
+    variant: {
+      floating: {
+        inner: 'bg-default shadow-none',
+      },
+    },
+  },
+  // Kills the hairline stock leaves hanging in the gutter of a floating sidebar.
+  //
+  // Stock MEANT to remove it — `variant.floating.container` carries `border-transparent` against
+  // the `border-e border-default` that `side.left` sets. But tv applies the `side` variant AFTER
+  // `variant`, so tailwind-merge resolves the pair the wrong way round and `border-default` is the
+  // one that survives (measured: the container ships `p-4 … border-e border-default`, no
+  // `border-transparent` in sight). The result is a 1px line in the gap between the floating
+  // column and the content panel, running the container's full height — so it overshoots both
+  // rounded cards by the 16px of container padding and reads as a stray rule rather than an edge.
+  //
+  // Restating `border-transparent` at the variant path would lose the same race. compoundVariants
+  // are applied after all variants, so this is the seam that actually wins. Colour, not width:
+  // stock keeps the 1px so the floating and flush cuts measure the same.
+  compoundVariants: [
+    {
+      variant: 'floating',
+      class: {
+        container: 'border-transparent',
+      },
+    },
+  ],
+} as const

package/src/themes/skeleton.ts

@@ -0,0 +1,15 @@
+/**
+ * Forest theme fragment — USkeleton (loading placeholder).
+ *
+ * Delta only (single-element component, one `base`): `rounded-sm` over stock's `rounded-md`. The
+ * base radius is mostly the TEXT-LINE / generic-box look (avatars and pills override to rounded-full
+ * per instance, card images to rounded-xl), so it stays tight — rounded-sm reads as a clean bar, not
+ * a pill, and matches Forest's item-slab radius tier. The fill stays stock `bg-elevated`: measured
+ * against the page/card surface it has ~2× the contrast of bg-muted (which is nearly invisible on
+ * bg-default), so the placeholder actually reads. `animate-pulse` and bg-elevated both carry through
+ * from stock — the preset appends, nothing restated.
+ */
+
+export const skeletonTheme = {
+  base: 'rounded-sm',
+} as const;

package/src/themes/slideover.ts

@@ -0,0 +1,87 @@
+/**
+ * Forest theme fragment — USlideover (edge side panel).
+ *
+ * Deltas over stock (the preset appends to Nuxt UI's recipe):
+ *   - `inset` defaults to TRUE, in every context — standard, mobile and marketing. The panel floats
+ *     1 rem off each viewport edge instead of welding itself to it, so it reads as a surface sitting
+ *     on the app rather than a second chrome, and the corners it earns put it in the same shape
+ *     family as the card and the drawer. Authors opt back out with `:inset="false"` for the flush cut.
+ *   - `inset` radius: xl / 24px (stock rounded-lg / 16px). A floating slideover is a full-surface
+ *     panel, so it takes the card step. Set on the `inset` VARIANT, not the base `content` slot —
+ *     stock puts its radius on that same variant, so a base override loses the tailwind-merge race
+ *     (the per-variant seam — see the modal and badge fragments).
+ *   - `content`: shadow-xl lifts the panel one step above stock's sm:shadow-lg.
+ *   - `title`: font-display renders the heading in MohrAlt (uppercase, black weight) —
+ *     the same heading treatment as every other Forest panel/modal.
+ *   - `header` / `footer`: matching border separators (stock leaves both borderless).
+ *   - `transition`: the panel slide and the overlay fade move onto the shared motion tokens. A
+ *     slideover is the longest travel in the overlay family — a full panel crossing in from off
+ *     screen — so it enters on --motion-slow and leaves on --motion-fast. Both directions ease-out:
+ *     stock's `ease-in-out` belongs to movement that starts and ends on screen (the tabs indicator,
+ *     a nav resize), not to something arriving from outside the viewport. The overlay exit also drops
+ *     stock's banned `ease-in`. The per-side keyframes live in compoundVariants because that's where
+ *     stock puts them; a variant-level override would never reach them.
+ *
+ * Everything else — side offsets, inset offsets, dividers — is stock.
+ * Slots touched: content, title, header, footer, overlay.
+ * Stock recipe: apps/docs/node_modules/.nuxt-ui/ui/slideover.ts
+ */
+
+export const slideoverTheme = {
+  slots: {
+    content: 'shadow-xl',
+    title: 'font-display',
+    header: 'border-b border-default',
+    footer: 'border-t border-default',
+  },
+  variants: {
+    inset: {
+      true: { content: 'rounded-xl' },
+    },
+    transition: {
+      true: {
+        overlay:
+          'data-[state=open]:animate-[fade-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[fade-out_var(--motion-fast)_var(--motion-ease-out)]',
+      },
+    },
+  },
+  // Panel slide, one entry per side — same keyframes as stock, retimed onto the tokens. Compounds
+  // apply last, so these win the tailwind-merge over stock's flat 200ms ease-in-out pair.
+  compoundVariants: [
+    {
+      transition: true,
+      side: 'top',
+      class: {
+        content:
+          'data-[state=open]:animate-[slide-in-from-top_var(--motion-slow)_var(--motion-ease-out)] data-[state=closed]:animate-[slide-out-to-top_var(--motion-fast)_var(--motion-ease-out)]',
+      },
+    },
+    {
+      transition: true,
+      side: 'right',
+      class: {
+        content:
+          'data-[state=open]:animate-[slide-in-from-right_var(--motion-slow)_var(--motion-ease-out)] data-[state=closed]:animate-[slide-out-to-right_var(--motion-fast)_var(--motion-ease-out)]',
+      },
+    },
+    {
+      transition: true,
+      side: 'bottom',
+      class: {
+        content:
+          'data-[state=open]:animate-[slide-in-from-bottom_var(--motion-slow)_var(--motion-ease-out)] data-[state=closed]:animate-[slide-out-to-bottom_var(--motion-fast)_var(--motion-ease-out)]',
+      },
+    },
+    {
+      transition: true,
+      side: 'left',
+      class: {
+        content:
+          'data-[state=open]:animate-[slide-in-from-left_var(--motion-slow)_var(--motion-ease-out)] data-[state=closed]:animate-[slide-out-to-left_var(--motion-fast)_var(--motion-ease-out)]',
+      },
+    },
+  ],
+  defaultVariants: {
+    inset: true,
+  },
+} as const;

package/src/themes/slider.ts

@@ -0,0 +1,48 @@
+/**
+ * Forest theme fragment — USlider (range slider, single / multi thumb).
+ *
+ * Forest opinions applied:
+ *
+ *   thumb — Forest's soft-radius vocabulary uses `rounded-full` (stock already does this — no
+ *     change there). We add `shadow-sm` for a subtle lift that reinforces the tactile brand feel
+ *     (consistent with the keycap button metaphor), and `transition-[box-shadow,ring-color]` so the
+ *     thumb reacts smoothly when it enters the focused / hovered state. We also add
+ *     `cursor-grab active:cursor-grabbing` so the drag affordance is immediately clear on pointer
+ *     devices — the stock cursor is the default arrow.
+ *
+ * Slots touched: `thumb` (resting look + coarse size-up).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/slider.ts
+ *
+ * We do NOT override:
+ *   - Colour variants — `bg-primary`, `ring-primary`, `focus-visible:outline-primary/50` etc. are
+ *     already wired to the Forest OKLCH ramps via docs.css / forest-preset.ts.
+ *   - Track height ladder — the xs–xl per-size groove height is left stock (only the thumb takes the
+ *     coarse touch step-up below).
+ *   - `track` — stock `bg-accented` groove is the shape; the coloured range is the signal. No
+ *     border token reads consistently against the track in both modes, so no ring.
+ *   - `range` slot — `rounded-full` + colour is correct; no additional opinion needed.
+ *   - `root` slot — layout is correct for both orientations.
+ *   - `disabled` variant — stock `opacity-75 cursor-not-allowed` is appropriate.
+ */
+
+export const sliderTheme = {
+  slots: {
+    // Thumb: shadow lift for tactile feel; grab cursor; smooth transition on focus/hover.
+    thumb: 'focus-visible:outline-2 shadow-sm cursor-grab active:cursor-grabbing transition-[box-shadow,ring-color] duration-(--motion-fast)',
+  },
+  // Touch: the thumb is the whole drag target and it is small (md 16px). Under a coarse (finger)
+  // pointer the thumb grows one size up — a bigger, easier-to-grab handle — the same proportional
+  // step-up the radio circle takes. Only the THUMB bumps: the track is a thin visual groove the thumb
+  // overhangs, not a hit surface, so its stock per-size height is left alone. xl is the ceiling; each
+  // size lists only its delta up. `coarse:` carries the `:not(.cut-fixed)` escape so the mobile cut
+  // (baked size lg) opts out and holds instead of stepping again.
+  variants: {
+    size: {
+      xs: { thumb: 'coarse:size-3.5' },
+      sm: { thumb: 'coarse:size-4' },
+      md: { thumb: 'coarse:size-4.5' },
+      lg: { thumb: 'coarse:size-5' },
+      // xl: ceiling
+    },
+  },
+} as const;

package/src/themes/stepper.ts

@@ -0,0 +1,41 @@
+/**
+ * Forest theme fragment — UStepper (multi-step progress).
+ *
+ * Forest opinions applied:
+ *
+ *   title — lifted to `font-bold` (stock: `font-medium`) so step labels hold hierarchy over
+ *     the description text. Matches Forest's general heading-density opinion: bold labels, muted
+ *     descriptions.
+ *
+ *   separator — kept `rounded-full` (stock). Forest opinion: a subtle `opacity-60` on the base
+ *     so pending separators recede without disappearing; completed separators override via the
+ *     colour variant's `group-data-[state=completed]:bg-{color}` which restores full opacity.
+ *
+ * Slots touched: `trigger`, `title`, `separator`.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/stepper.ts
+ *
+ * We do NOT override:
+ *   - `root`, `header`, `item`, `container`, `wrapper`, `content` — stock layout is correct for
+ *     both horizontal and vertical orientations; no Forest density opinion required.
+ *   - `indicator`, `icon` — stock flex/size utilities are correct.
+ *   - `description` — `text-muted text-wrap` is the right voice; no override needed.
+ *   - Colour variants — active/completed bg and focus-visible:outline already resolve to the
+ *     Forest OKLCH ramps via the Nuxt UI colour-alias bridge in docs.css.
+ *   - Size compound variants — the xs–xl trigger/text ladder is suitable; no Forest density
+ *     adjustment needed.
+ */
+
+export const stepperTheme = {
+  slots: {
+    // Pending trigger: stock shape and state classes; bg-elevated carries the pending fill.
+    trigger:
+      'focus-visible:outline-2 focus-visible:outline-offset-2',
+
+    // Step label: font-bold (stock: font-medium) — Forest heading-density opinion.
+    title: 'font-bold',
+
+    // Pending separator: opacity-60 so incomplete connectors recede; completed/active state
+    // overrides via colour variant class (group-data-[state=completed]:bg-{color}).
+    separator: 'opacity-60 group-data-[state=completed]:opacity-100',
+  },
+} as const;

package/src/themes/switch.ts

@@ -0,0 +1,63 @@
+/**
+ * Forest theme fragment — USwitch.
+ *
+ * Forest opinions applied:
+ *   - `base` (the track): the stock component is already `rounded-full` — that's correct for a
+ *     toggle track and we preserve it. The Forest opinion here is on the focus ring: we pin
+ *     `focus-visible:outline-[var(--forest-500)]` so that regardless of which semantic colour the
+ *     switch is rendered in, the keyboard ring is the brand green (consistent with button / checkbox
+ *     behaviour). The stock outline class (`focus-visible:outline-primary` etc.) is colour-keyed and
+ *     resolves correctly via the colour-alias bridge, so for `color="primary"` it already renders
+ *     forest-500. For the other colours (error, warning, neutral…) the focus ring follows that
+ *     colour — a deliberate product choice to deviate: neutral's outline-inverted is near-black in
+ *     light mode and hard to distinguish from the track; pinning brand-500 is safer there.
+ *     NOTE: the base focus-visible outline is OVERRIDDEN per-colour via the `color` variant entries
+ *     (see switch.ts generated theme). We patch only the default — callers can still pass
+ *     `ui="{ base: 'focus-visible:outline-forest' }"` to pin it explicitly.
+ *   - `thumb`: `shadow-md` replaces the stock `shadow-lg` — the Forest surface vocabulary is
+ *     tactile but not deeply raised. A softer shadow keeps the thumb readable without adding
+ *     skeuomorphic depth.
+ *   - `label`: `font-medium` is already stock; we add nothing — the Nuxt UI default is correct.
+ *   - `description`: `text-muted` is already stock.
+ *
+ * Under a coarse (touch) pointer the switch grows one size up — a genuine tap target — via the size
+ * variant below; the mobile cut bakes size lg and opts out.
+ *
+ * KNOWN LIMIT: the thumb's ON position is a discrete `data-[state=checked]:translate-x-*`, and a
+ * stacked `coarse:data-[state=checked]:translate-x-*` loses the cascade to stock's same-property rule
+ * (both emit; stock wins on source order), so under the ADAPTIVE coarse bump the thumb undershoots
+ * the enlarged track by ~2px. Accepted as a minor cosmetic tradeoff. The MOBILE bake is unaffected —
+ * a real `size` prop applies the whole lg variant (track + translate together) so its thumb is flush.
+ *
+ * Slots touched: base, thumb, and the size variant (base/container/thumb/wrapper) for the coarse bump.
+ * Slot names sourced from:
+ *   apps/docs/node_modules/.nuxt-ui/ui/switch.ts
+ */
+
+export const switchTheme = {
+  slots: {
+    // Softer focus ring anchored to the brand green regardless of switch colour intent.
+    // shadow-sm on the thumb: Forest tactile but not skeuomorphic.
+    base: 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--forest-500)] duration-(--motion-base)',
+    thumb: 'shadow-md duration-(--motion-base) ease-(--motion-ease-out)',
+  },
+  // Touch: a switch's whole control IS the tap target (unlike a checkbox, whose target is the label
+  // row), so under a coarse (finger) primary pointer each size grows one size up — the full size
+  // bundle: track width (base), track height (container), thumb size + its checked translate, and the
+  // label text (wrapper). The thumb's `data-[state=checked]:translate-x-*` must bump in lockstep with
+  // the track width or the thumb would overshoot/undershoot the ON position. xl is the ceiling.
+  // `coarse:` carries the `:not(.cut-fixed)` escape so the mobile cut (baked size lg) opts out.
+  variants: {
+    size: {
+      // → sm: wider track + bigger thumb (height/text unchanged)
+      xs: { base: 'coarse:w-8', thumb: 'coarse:size-3.5 coarse:data-[state=checked]:translate-x-3.5' },
+      // → md: wider track, taller, bigger thumb, larger text
+      sm: { base: 'coarse:w-9', container: 'coarse:h-5', thumb: 'coarse:size-4 coarse:data-[state=checked]:translate-x-4', wrapper: 'coarse:text-sm' },
+      // → lg: wider track + bigger thumb (height/text unchanged)
+      md: { base: 'coarse:w-10', thumb: 'coarse:size-4.5 coarse:data-[state=checked]:translate-x-4.5' },
+      // → xl: wider track, taller, bigger thumb, larger text
+      lg: { base: 'coarse:w-11', container: 'coarse:h-6', thumb: 'coarse:size-5 coarse:data-[state=checked]:translate-x-5', wrapper: 'coarse:text-base' },
+      // xl: ceiling — no bump
+    },
+  },
+} as const;

package/src/themes/table.ts

@@ -0,0 +1,34 @@
+/**
+ * Forest theme fragment — UTable (data table, sticky header, loading bar).
+ *
+ * Forest opinions applied:
+ *   - `th`: font-semibold is already stock — we bump it to `font-bold` so column headings read with
+ *     the same confident weight as the rest of the Forest type system, and switch the text role from
+ *     `text-highlighted` to `text-default` to sit one step quieter than page headings while still
+ *     reading clearly. Slight uppercase + tracking gives the table header a structured ops-dashboard
+ *     feel consistent with the Forest label vocabulary.
+ *   - `td`: `text-default` instead of the stock `text-muted` — data cells carry primary content and
+ *     should read at full default weight rather than the slightly dimmed muted role.
+ *   - `tbody`: the selectable-row hover bg is already `bg-elevated/50`; no changes needed.
+ *   - `empty`: align with `text-dimmed` (one step quieter than stock `text-muted`) to visually
+ *     distinguish placeholder copy from real cell content.
+ *
+ * Slots touched: th, td, empty.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/table.ts
+ *
+ * The loading bar colour is driven by the `loadingColor` compoundVariants in the generated theme —
+ * no override needed here; `primary` defaults to the forest ramp via the semantic colour wiring
+ * in docs.css / forest-preset.ts.
+ */
+
+export const tableTheme = {
+  slots: {
+    // font-bold + uppercase tracking — gives column headings a confident, ops-dashboard weight.
+    // text-default sits one step quieter than text-highlighted (stock) without losing legibility.
+    th: 'text-xs font-bold uppercase tracking-wider text-default',
+    // text-default — data is primary content; stock text-muted reads too low for ops data cells.
+    td: 'text-default',
+    // text-dimmed — visually distinct from real data; subtler than stock text-muted placeholder.
+    empty: 'text-dimmed',
+  },
+} as const;

package/src/themes/tabs.ts

@@ -0,0 +1,74 @@
+/**
+ * Forest theme fragment — UTabs (tabbed panels). Deltas only; everything else is inherited from
+ * stock Nuxt UI.
+ *
+ * Forest opinions applied:
+ *   - `trigger`: font-bold (stock font-medium) — one stable weight in every state, so the active tab
+ *     is signalled by the coloured indicator alone, never a weight shift (which would relayout).
+ *     Under a coarse (touch) pointer the trigger grows one size up per the size-variant ladder below.
+ *   - `indicator`: the Forest motion tokens (stock is a flat duration-200).
+ *   - Pill radius (compoundVariants): a CONCENTRIC per-size ladder — the sliding indicator sits on
+ *     the input field's radius (xs/sm 8px, md/lg/xl 12px) and the tray rounds one step past it, so
+ *     the pill nests as outer = inner + the 4px pad. Same relationship stock uses; only the small
+ *     sizes are new. sm promotes to md's pair under coarse.
+ *
+ * Slots touched: trigger, indicator, list (pill radius + pill tray bg/border).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/tabs.ts
+ */
+
+export const tabsTheme = {
+  slots: {
+    // indicator — Forest motion tokens over stock's flat duration-200 (applies to both variants).
+    // Stock's `absolute transition-[translate,width]` is inherited. Radius is NOT set here — it's
+    // per-size and pill-scoped, so it lives in compoundVariants below (a base value would lose the
+    // ordering race to stock's `variant.pill` radius anyway).
+    indicator: 'duration-(--motion-base) ease-(--motion-ease-in-out)',
+    // trigger — font-bold over stock's font-medium: one stable weight in every state (legible at
+    // xs–sm, no active/inactive layout shift; colour carries the hierarchy, not weight). Stock's
+    // layout/state/rounded/transition classes are inherited, not restated.
+    trigger: 'font-bold',
+  },
+  // Touch: tab triggers are tap targets, so under a coarse (finger) primary pointer each size grows
+  // one size UP — the full trigger geometry (padding, gap, text, icon), same proportional step as the
+  // input field. Tabs is simpler than input here: no responsive `md:text-*` shrink to fight, and the
+  // leading icon is gap-spaced (no absolute `ps-9`), so horizontal `px` is safe to bump too — the step
+  // is the true next-size trigger. xl is the ceiling. Each size lists only its deltas up. `coarse:`
+  // carries the `:not(.cut-fixed)` escape, so the mobile cut (which bakes size lg) opts out below.
+  variants: {
+    size: {
+      // → sm: wider padding + gap (text/icon same)
+      xs: { trigger: 'coarse:px-2.5 coarse:py-1.5 coarse:gap-1.5' },
+      // → md: wider padding, larger text + icon (py/gap same)
+      sm: { trigger: 'coarse:px-3 coarse:text-sm', leadingIcon: 'coarse:size-5' },
+      // → lg: taller padding + gap (px/text/icon same)
+      md: { trigger: 'coarse:py-2 coarse:gap-2' },
+      // → xl: larger text + icon (padding/gap same)
+      lg: { trigger: 'coarse:text-base', leadingIcon: 'coarse:size-6' },
+      // xl: ceiling — no bump
+    },
+  },
+  // Pill radius is CONCENTRIC, the way stock builds it: the tray (`list`) has a p-1 (4px) inset, so
+  // the sliding `indicator` (the inner, filled pill) rounds one step TIGHTER than the tray — outer =
+  // inner + padding — and the active pill nests cleanly in the tray corner. The inner value is the
+  // input field's per-size ladder (xs/sm rounded-sm 8px, md/lg/xl rounded-md 12px), so the active tab
+  // reads at the same radius as a field; the tray is one step up (12 / 16). (md/lg/xl land back on
+  // stock's own values — tray rounded-lg, indicator rounded-md; only xs/sm add the smaller concentric
+  // pair.) Under coarse, sm promotes to md's pair (indicator 8→12, tray 12→16), tracking its size-up.
+  //
+  // Why compoundVariants: the radius must (a) beat stock's `variant.pill` values — compounds apply
+  // last, so they win — and (b) apply ONLY to the pill. A size-variant `indicator` would also hit the
+  // LINK variant and clobber its rounded-full underline ends; scoping to `variant: 'pill'` leaves link
+  // alone.
+  compoundVariants: [
+    // Pill tray as an outlined field, not a raised grey slab: bg-default (the base neutral-0 surface,
+    // mode-aware) over stock's bg-elevated, plus a 1px inset accented ring for the border. Scoped to
+    // `variant: 'pill'` (no size) so it hits every pill size and leaves LINK untouched; a compound
+    // applies last, so bg-default wins the tailwind-merge over the base variant's bg-elevated.
+    { variant: 'pill', class: { list: 'bg-default ring ring-inset ring-accented' } },
+    { variant: 'pill', size: 'xs', class: { list: 'rounded-md', indicator: 'rounded-sm' } },
+    { variant: 'pill', size: 'sm', class: { list: 'rounded-md coarse:rounded-lg', indicator: 'rounded-sm coarse:rounded-md' } },
+    { variant: 'pill', size: 'md', class: { list: 'rounded-lg', indicator: 'rounded-md' } },
+    { variant: 'pill', size: 'lg', class: { list: 'rounded-lg', indicator: 'rounded-md' } },
+    { variant: 'pill', size: 'xl', class: { list: 'rounded-lg', indicator: 'rounded-md' } },
+  ],
+} as const;

package/src/themes/textarea.ts

@@ -0,0 +1,77 @@
+/**
+ * Forest theme fragment — UTextarea (multiline input, autoresize).
+ *
+ * Textarea is a multiline UInput, so it wears the SAME Forest identity — this fragment mirrors
+ * themes/input.ts: the recessed depth line, the colour-tracking focus halo, the per-size radius
+ * ladder, and the touch ladder. Stock UTextarea shares UInput's size architecture verbatim
+ * (same px/py/text/gap/icon per size, same responsive `md:text-*` shrink), so the deltas are the same.
+ * Keeping the two in lockstep is deliberate — a note field and a single-line field on the same form
+ * must read as one control family. See input.ts for the full rationale on each opinion; the notes
+ * here are the textarea-specific deltas only.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/textarea.ts
+ */
+
+export const textareaTheme = {
+  slots: {
+    // Same base as UInput: the solid inset depth line at rest (stacks UNDER the ring via separate
+    // shadow vars), a box-shadow transition so focus eases, and the depth line + soft halo on focus.
+    // The old `focus:outline-none` is dropped ON PURPOSE — it was suppressing the very focus outline
+    // UInput keeps, so the two fields disagreed on focus; parity restores the shared treatment.
+    base: 'transition-[color,box-shadow] duration-(--motion-fast) shadow-[inset_0_calc(var(--forest-input-depth)_+_var(--forest-field-edge,0px))_0_0_var(--forest-input-recess)] focus-visible:shadow-[inset_0_var(--forest-input-depth)_0_0_var(--forest-input-recess),0_0_0_3px_var(--forest-input-halo,var(--forest-halo-primary))]',
+  },
+  // Touch ladder + per-size radius/depth — identical to input.ts. Under a coarse primary
+  // pointer each size grows PROPORTIONALLY to the next size up (height via py or type, gap, radius,
+  // icon, recess), reading as a bigger version of itself. Two things it does NOT bump: horizontal
+  // `px` (a `touch:px-*` emitted after the icon's inline padding would clobber it) and the naive
+  // base type (stock's responsive `md:text-*` shrink means the type bump must target the next size's
+  // EFFECTIVE value — sm→`text-sm`, lg→`text-base` — or the ladder inverts). sm also rounds up: its
+  // type-driven height gain earns the rounded-md step, same as md→lg. xl has a touch rung of
+  // its own (52). See input.ts.
+  // PER-SIZE RADIUS: xs/sm rounded-sm (8px); md/lg/xl keep stock's base rounded-md (12px) — only
+  // xs/sm are overridden, md+ not restated. Depth line scales per size.
+  // `touch:` = the shared TOUCH ladder (styles/forest.css) — height+type twin of button.ts/input.ts
+  // so a joined <UFieldGroup> matches. Fired by a coarse pointer or by the mobile cut's
+  // baked marker — same numbers either way, so a real phone can't step twice.
+  variants: {
+    size: {
+      // touch 28: taller padding + gap
+      xs: { base: 'rounded-sm [--forest-input-depth:2px] touch:min-h-7 touch:gap-1.5' },
+      // touch 36: larger type (md's effective 14/20) + icon + deeper recess, and rounder (type-driven
+      //   height gain earns the rounded-md step)
+      sm: { base: 'rounded-sm [--forest-input-depth:2px] touch:min-h-9 touch:text-sm touch:rounded-md touch:[--forest-input-depth:3px]', leadingIcon: 'touch:size-5', trailingIcon: 'touch:size-5' },
+      // touch 40: taller padding + gap (radius inherits stock base rounded-md — not restated)
+      md: { base: '[--forest-input-depth:3px] touch:min-h-10 touch:text-sm touch:gap-2' },
+      // touch 44: larger type (xl's 16/24) + icon + deepest recess
+      lg: { base: '[--forest-input-depth:3px] touch:min-h-11 touch:text-base touch:rounded-lg touch:[--forest-input-depth:4px]', leadingIcon: 'touch:size-6', trailingIcon: 'touch:size-6' },
+      // touch 52
+      xl: { base: '[--forest-input-depth:4px] touch:min-h-13 touch:text-lg touch:rounded-lg touch:[--forest-input-depth:4px]', leadingIcon: 'touch:size-7', trailingIcon: 'touch:size-7' },
+    },
+    // Focus halo tracks `color` — FLAT strings (stock's colour variant is flat; a `{ base: … }` shape
+    // would be dropped by the merge). Each colour re-points --forest-input-halo at its own 200 step.
+    color: {
+      primary:   '[--forest-input-halo:var(--forest-halo-primary)]',
+      secondary: '[--forest-input-halo:var(--forest-halo-secondary)]',
+      success:   '[--forest-input-halo:var(--forest-halo-success)]',
+      info:      '[--forest-input-halo:var(--forest-halo-info)]',
+      warning:   '[--forest-input-halo:var(--forest-halo-warning)]',
+      error:     '[--forest-input-halo:var(--forest-halo-error)]',
+      forest:    '[--forest-input-halo:var(--forest-halo-forest)]',
+      maple:     '[--forest-input-halo:var(--forest-halo-maple)]',
+      river:     '[--forest-input-halo:var(--forest-halo-river)]',
+      warm:      '[--forest-input-halo:var(--forest-halo-warm)]',
+      acid:      '[--forest-input-halo:var(--forest-halo-acid)]',
+      neutral:   '[--forest-input-halo:var(--forest-halo-neutral)]',
+    },
+  },
+  // Ghost drops the resting depth line (no fill/ring = nothing to recess into); it takes the line on
+  // hover/focus with the elevated fill. Same as input.
+  compoundVariants: [
+    {
+      variant: 'ghost',
+      class: {
+        base: 'shadow-none hover:shadow-[inset_0_calc(var(--forest-input-depth)_+_var(--forest-field-edge,0px))_0_0_var(--forest-input-recess)]',
+      },
+    },
+  ],
+} as const;

package/src/themes/timeline.ts

@@ -0,0 +1,25 @@
+/**
+ * Forest theme fragment — UTimeline (vertical / horizontal event track).
+ *
+ * Forest opinions applied:
+ *   - `title`: steps up from stock `font-medium` to `font-bold` — gives the event name a
+ *     clear hierarchy above the dimmed date and muted description without reaching for a display
+ *     heading or extra font-size.
+ *   - `date`: kept minimal; `text-xs/5` and `text-dimmed` are already stock, no opinion needed.
+ *   - `description`: stock `text-muted text-sm` is correct — no override required.
+ *   - `separator`: stock `rounded-full` matches Forest's pill language (chips, badges); no
+ *     override needed. Background colours are handled by the colour + reverse compound variants
+ *     already in the generated theme.
+ *   - `indicator`: stock `text-muted` rest state is intentionally kept — the indicator picks up
+ *     brand colour from the `color` variant when `state="active"` or `state="completed"`. No
+ *     override needed here.
+ *
+ * Slots touched: title.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/timeline.ts
+ */
+
+export const timelineTheme = {
+  slots: {
+    title: 'font-bold',
+  },
+} as const

package/src/themes/toast.ts

@@ -0,0 +1,29 @@
+/**
+ * Forest theme fragment — UToast (transient notification).
+ *
+ * Forest opinions applied:
+ *   - `root`: radius bumped to rounded-xl (matches the Forest card/alert language — 16 px, softer
+ *     than the stock rounded-lg); the gap is comfortable at gap-3 for breathing room between
+ *     icon/content/actions. Shadow, ring, and padding are unchanged from stock.
+ *   - `title`: steps up from stock `font-medium` to `font-bold` — gives the notification
+ *     headline a clear hierarchy above the description, matching the alert/banner convention.
+ *   - `description`: text-sm text-muted is unchanged — the muted colour already reads as
+ *     secondary copy, matching the Forest hierarchy. No override needed.
+ *
+ * Deliberately untouched (stock is already correct for Forest):
+ *   - `wrapper`, `icon`, `avatar`, `actions`, `progress`, `close` — stock layout and sizing are
+ *     appropriate; brand colour intent flows in automatically through the semantic colour map.
+ *   - All `color` variants — the focus-visible ring and icon colour already resolve through the
+ *     semantic wiring (primary→forest, error→maple, info→river, warning→amber, secondary→warm).
+ *   - Orientation variants — stock horizontal/vertical layout is correct as-is.
+ *
+ * Slots touched: root, title.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/toast.ts
+ */
+
+export const toastTheme = {
+  slots: {
+    root: 'rounded-xl gap-3 focus:outline-none',
+    title: 'font-bold',
+  },
+} as const;