@humanforest/ui 0.1.0

package/src/themes/page-feature.ts

@@ -0,0 +1,13 @@
+/**
+ * Forest theme fragment for UPageFeature.
+ *
+ * `text-[15px]` on the description is an arbitrary value — not a step on any scale, Tailwind's or
+ * Forest's. Both slots move onto the ladder.
+ */
+
+export const pageFeatureTheme = {
+  slots: {
+    title: 'type-heading-xs',
+    description: 'type-body',
+  },
+};

package/src/themes/page-header.ts

@@ -0,0 +1,16 @@
+/**
+ * Forest theme fragment for UPageHeader.
+ *
+ * Stock builds a whole type ladder of its own — `text-3xl sm:text-4xl` for the title, `text-lg` for
+ * the description, `text-sm font-semibold` for the headline. Forest already has those three steps
+ * named, and a second ladder drifts the moment the real one moves. Retyped onto the ladder; the
+ * responsive step is dropped with it, because `.type-display` owns its own scaling.
+ */
+
+export const pageHeaderTheme = {
+  slots: {
+    headline: 'type-overline',
+    title: 'type-display',
+    description: 'type-body',
+  },
+};

package/src/themes/page-hero.ts

@@ -0,0 +1,15 @@
+/**
+ * Forest theme fragment for UPageHero.
+ *
+ * `text-5xl sm:text-7xl` is the largest of stock's off-ladder sizes and the one most likely to be
+ * noticed — a hero title two steps above anything Forest publishes. `.type-display` is the top of the
+ * ladder and is where a hero belongs; a louder treatment is the marketing context's job, not a
+ * bigger literal.
+ */
+
+export const pageHeroTheme = {
+  slots: {
+    title: 'type-display',
+    description: 'type-subtitle',
+  },
+};

package/src/themes/page-links.ts

@@ -0,0 +1,12 @@
+/**
+ * Forest theme fragment for UPageLinks.
+ *
+ * One delta: the group title is `text-sm font-semibold`, off-ladder. `.type-label` is the step for a
+ * small heading over a list of controls.
+ */
+
+export const pageLinksTheme = {
+  slots: {
+    title: 'type-label',
+  },
+};

package/src/themes/page-section.ts

@@ -0,0 +1,14 @@
+/**
+ * Forest theme fragment for UPageSection.
+ *
+ * Stock steps `text-3xl sm:text-4xl lg:text-5xl` across three breakpoints. Forest's ladder handles
+ * its own scaling, so the section title takes `.type-headline` — one step below the page title, which
+ * is the relationship a section heading should have to the page it sits in.
+ */
+
+export const pageSectionTheme = {
+  slots: {
+    title: 'type-headline',
+    description: 'type-body',
+  },
+};

package/src/themes/page.ts

@@ -0,0 +1,7 @@
+/**
+ * Reviewed, no delta. UPage and its structural children (body, grid, columns, list) are flex/grid and
+ * spacing only — no type, colour or radius. They also set no width of their own, so unlike the
+ * page-CHROME family they nest inside a well safely.
+ */
+
+export const pageTheme = {};

package/src/themes/pagination.ts

@@ -0,0 +1,17 @@
+/**
+ * Forest theme fragment — UPagination. Deltas over stock (stock `label: min-w-5 text-center`,
+ * `item: ''`). The page controls render as UButton, so their colour, size, radius and focus ring
+ * ride the button theme — nothing needed here for those, or for the touch (coarse) size step-up.
+ */
+
+export const paginationTheme = {
+  slots: {
+    // Bold page numbers so the active page reads clearly on its solid face.
+    label: 'font-bold',
+    // Softer rounded-lg face on each page item.
+    item: 'rounded-lg',
+    // Ellipsis renders as an outline UButton (inherits the item variant); drop its ring so the
+    // gap marker reads as a plain glyph, not a bordered button. `as-child` lands this on the button.
+    ellipsis: 'ring-0',
+  },
+} as const

package/src/themes/pin-input.ts

@@ -0,0 +1,73 @@
+/**
+ * Forest theme fragment — UPinInput (OTP / code entry). Deltas only; everything else inherited from
+ * stock Nuxt UI.
+ *
+ * A pin input is an input split into square cells, so it wears the SAME Forest identity as UInput
+ * (themes/input.ts): the recessed depth line, the colour-tracking focus halo, the per-size radius
+ * ladder, and the touch ladder. Stock UPinInput shares UInput's variant/colour/highlight
+ * set and the same responsive `md:text-*` shrink, so the deltas match — only the size axis differs
+ * (a square `size-*` cell rather than px/py), so the coarse step bumps the cell size + type.
+ *
+ * Slots touched: root, base.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/pin-input.ts
+ */
+
+export const pinInputTheme = {
+  slots: {
+    // gap-2 → 8px between cells (stock gap-1.5) — a warmer, less grid-like row cadence.
+    root: 'gap-2',
+    // font-bold so a single digit fills the cell; plus the input identity: the box-shadow transition
+    // and the recessed depth line at rest + the depth line & soft colour halo on focus (same shared
+    // --forest-input-* / --forest-halo-* tokens as UInput). The old `focus:outline-none` is dropped —
+    // it suppressed the very focus outline UInput keeps; parity restores the shared treatment.
+    base: 'font-bold 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 — mirrors input.ts. Under a coarse pointer each
+  // cell grows one size up (a bigger square + type), so OTP entry gets a real tap target. The type
+  // bump targets the next size's RESPONSIVE-EFFECTIVE value (stock's `md:text-*` shrink, else the
+  // ladder inverts): sm→md `touch:text-sm`, lg→xl `touch:text-base`. sm also rounds up to rounded-md
+  // tracking its size-up. xl has a touch rung of its own (52). Depth line scales per size
+  // (2/2/3/3/4). PER-SIZE RADIUS:
+  // xs/sm rounded-sm (8px), md/lg/xl rounded-md (12px, inherited from stock base — not restated).
+  // The mobile cut needs no escape — it lands on the same rung a coarse pointer would.
+  variants: {
+    size: {
+      // touch 28: bigger cell (text/radius/depth unchanged)
+      xs: { base: 'rounded-sm [--forest-input-depth:2px] touch:size-7' },
+      // touch 36: bigger cell, larger type (md's effective 14), rounder, deeper recess
+      sm: { base: 'rounded-sm [--forest-input-depth:2px] touch:size-9 touch:text-sm touch:rounded-md touch:[--forest-input-depth:3px]' },
+      // touch 40: bigger cell
+      md: { base: '[--forest-input-depth:3px] touch:size-10 touch:text-sm' },
+      // touch 44: bigger cell, larger type (16), deepest recess
+      lg: { base: '[--forest-input-depth:3px] touch:size-11 touch:text-base touch:rounded-lg touch:[--forest-input-depth:4px]' },
+      // touch 52
+      xl: { base: '[--forest-input-depth:4px] touch:size-13 touch:text-lg touch:rounded-lg touch:[--forest-input-depth:4px]' },
+    },
+    // 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/popover.ts

@@ -0,0 +1,30 @@
+/**
+ * Forest theme fragment — UPopover (floating contextual panel).
+ *
+ * Forest opinions applied:
+ *
+ *   content — radius bumped from stock `rounded-md` to `rounded-xl` (the brand's warm, soft
+ *             register — one step above the tooltip's `rounded-lg` since a popover carries richer
+ *             content and warrants the extra breathing room). The shadow is stepped up from
+ *             `shadow-lg` to `shadow-xl` to give the floating panel appropriate depth against the
+ *             page surface.
+ *
+ *   arrow  — fill-bg already tracks the content background token; no Forest opinion needed beyond
+ *             confirming stroke-default resolves correctly in both modes. Class unchanged.
+ *
+ * Result: a warmer, more tactile popover that sits confidently above the canvas without competing
+ * with deeper modals.
+ *
+ * Slots sourced from: apps/docs/node_modules/.nuxt-ui/ui/popover.ts
+ * Slots touched: content
+ * Slots NOT touched: arrow — stock values are semantically correct; no Forest override required.
+ */
+
+export const popoverTheme = {
+  slots: {
+    // Softer brand radius + deeper shadow for comfortable floating-panel presence.
+    // All other classes (animation, origin, focus outline, pointer-events, ring) are inherited
+    // from the Nuxt UI base and are not restated here.
+    content: 'shadow-xl rounded-xl 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)]',
+  },
+} as const;

package/src/themes/progress.ts

@@ -0,0 +1,29 @@
+/**
+ * Forest theme fragment — UProgress (linear progress bar).
+ *
+ * Forest opinions applied:
+ *
+ *   indicator — adds `will-change-transform` so the translate transition composites on the GPU
+ *     across all browsers, giving a smooth scrub during rapid model-value updates (e.g. live
+ *     telemetry feeds from the fleet API).
+ *
+ * Slots touched: `indicator`.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/progress.ts
+ *
+ * We do NOT override:
+ *   - `base` (track) — stock `bg-accented` fill carries the groove; the coloured indicator is the
+ *     signal. No border token reads consistently against the track in both modes, so no ring.
+ *   - Colour variants — `bg-primary`, `bg-error`, etc. are already wired to the Forest OKLCH ramps
+ *     via docs.css / forest-preset.ts; no per-slot colour class needed.
+ *   - Size compound variants — the 2xs–2xl height/width ladder is suitable; Forest has no density
+ *     opinion here beyond what `--ui-radius` (0.5 rem) already gives.
+ *   - `status`, `steps`, `step` slots — stock text-dimmed + transition-[width] treatment is correct.
+ *   - `root` — flex layout is correct for both orientations; no override needed.
+ */
+
+export const progressTheme = {
+  slots: {
+    // Indicator: GPU-composited translate for smooth live-telemetry scrubbing.
+    indicator: 'duration-(--motion-slow) ease-(--motion-ease-out) will-change-transform',
+  },
+} as const;

package/src/themes/prose.ts

@@ -0,0 +1,45 @@
+/**
+ * Prose components (`ui.prose.*`) — the ones a docs surface actually renders.
+ *
+ * These run stock: `border-muted` around every code surface, `bg-default` on a filename header,
+ * `bg-muted` in the code body, `my-5` for rhythm. Only a measurable defect warrants an entry here.
+ *
+ * TWO CONSTRAINTS ON ANY ENTRY:
+ *
+ *   1. THE RAMP COLLAPSES A DIFFERENT PAIR IN EACH MODE. Light: `border-default` == `border-muted`
+ *      (p3 0.903) == `bg-accented`. Dark: `border-muted` == `border-accented` (0.255), and
+ *      `border-default` equals `bg-muted` — the code fill, which leaves a block no edge. A `dark:`
+ *      split therefore holds in one mode and loses the edge in the other. Frame tokens take one
+ *      token across both modes; never split them.
+ *
+ *   2. `codeIcon` STAYS STOCK. It maps a file to `i-vscode-icons-file-type-<ext>`, the brand marks an
+ *      editor shows, which is what makes a file tree readable at a glance. They live in
+ *      `@iconify-json/vscode-icons`, a devDependency alongside lucide; without that collection a tab
+ *      with a filename renders an EMPTY slot. Lucide cannot tell a .ts from a .vue, so it is not a
+ *      substitute. A file rendering blank means the extension is missing from stock's map
+ *      (`UCodeIcon` resolves the FULL FILENAME first, then the extension) — add that one key.
+ */
+export const proseTheme = {
+  // `ed-demo` is a marker, not styling. The docs editorial grid opens a new section whenever a block
+  // contains a heading, and a specimen renders headings of its own (a UEmpty title, a dialog title).
+  // The marker excludes them, so section rhythm does not depend on which state a demo is showing.
+  codePreview: {
+    slots: {
+      preview: 'ed-demo',
+    },
+  },
+
+  // Stock's collapsed root is `rounded-b-md` over an opaque `bg-muted` fill, so its square top
+  // corners paint into the 12px corners a filename header rounds — a hard right angle at each top
+  // corner, visible in dark where the fill clears the page. Rounding the closed root clips the
+  // children correctly: the root already carries `overflow-hidden`.
+  codeCollapse: {
+    variants: {
+      open: {
+        false: {
+          root: 'rounded-md',
+        },
+      },
+    },
+  },
+};

package/src/themes/radio-group.ts

@@ -0,0 +1,39 @@
+/**
+ * Forest theme fragment — URadioGroup (single-choice radios). Deltas only; everything else inherited
+ * from stock Nuxt UI.
+ *
+ * Forest opinions applied:
+ *   `legend`: font-bold (stock font-medium) so the group legend reads as a confident field label,
+ *     matching checkboxGroupTheme and formFieldTheme.
+ *
+ * The description keeps stock's `text-muted`, matching formFieldTheme — the legend carries the
+ * hierarchy on weight alone.
+ *
+ * The radio circle (rounded-full), focus ring colour, and every variant (list/card/table) are stock —
+ * colour-keyed compounds resolve to the Forest OKLCH ramps via the alias bridge. The card variant is
+ * left at stock radius, matching the checkbox decision.
+ *
+ * Slots touched: legend.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/radio-group.ts
+ */
+
+export const radioGroupTheme = {
+  slots: {
+    // Step legend up to font-bold — Forest field-label convention.
+    legend: 'font-bold',
+  },
+  // Touch: a radio's tap target is the whole item ROW, short at md (~20px). Under a coarse (finger)
+  // pointer each size grows one size up as a unit — circle (base), dot (indicator), row height
+  // (container), item + legend text, and the fieldset gap — so the row is a taller, easier target. No
+  // sliding part, so the bump is clean. 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', item: 'coarse:text-sm', legend: 'coarse:text-sm', container: 'coarse:h-5', fieldset: 'coarse:gap-y-1', indicator: 'coarse:after:size-1.5' },
+      md: { base: 'coarse:size-4.5' },
+      lg: { base: 'coarse:size-5', item: 'coarse:text-base', legend: 'coarse:text-base', container: 'coarse:h-6', fieldset: 'coarse:gap-y-1.5', indicator: 'coarse:after:size-2' },
+      // xl: ceiling
+    },
+  },
+} as const;

package/src/themes/scroll-area.ts

@@ -0,0 +1,23 @@
+/**
+ * Forest theme fragment — UScrollArea (custom scrollbar wrapper)
+ *
+ * Delta over stock lives on one slot, `root`:
+ *   - `rounded-lg` clips the scroll container to the Forest radius baseline so it sits flush with
+ *     the surfaces around it (stock ships no explicit rounding).
+ *   - `scrollbar-color` paints the thumb in the brand green (`--forest-400`, readable in both modes)
+ *     over a TRANSPARENT track. This is the one place in the system that colours a scrollbar on
+ *     purpose, so the thumb is loud; the track is not, because an opaque lane is most of what reads
+ *     as weight and it stays visible whether or not anything is scrolling. The global scrollbar
+ *     treatment in forest.css supplies the thinning — that lever is `scrollbar-width`, which
+ *     `scrollbar-color` cannot do (a coloured scrollbar measures the same 15px as an untouched one).
+ *
+ * `viewport` (flex axis, driven by the orientation variant) and `item` (empty) stay stock.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/scroll-area.ts
+ */
+
+export const scrollAreaTheme = {
+  slots: {
+    root: 'rounded-lg [scrollbar-color:var(--forest-400)_transparent] hover:[scrollbar-color:var(--forest-500)_transparent]',
+  },
+} as const;

package/src/themes/select-menu.ts

@@ -0,0 +1,71 @@
+/**
+ * Forest theme fragment — USelectMenu (searchable select trigger + dropdown panel).
+ *
+ * Forest opinions applied:
+ *   - base (trigger): the recessed depth line ported from UInput (inset top edge at rest, dropped on
+ *     focus) so the field family shares one pressed-into-the-page identity; the brand forest-500 focus
+ *     ring on outline/subtle; focus:outline-none suppresses the native ring.
+ *   - touch ladder: each size takes its touch rung (min-h 28/36/40/44/52) under a coarse
+ *     pointer or the mobile cut — box, gap,
+ *     effective text, trigger icons); px held (absolute leading/trailing insets). The base carries a
+ *     responsive `md:text-*` shrink, so the coarse type bump targets the next size's EFFECTIVE value.
+ *   - recess tint: an explicit intent tints the depth line to its ring colour, but only in `highlight`.
+ *   - label (group heading): font-bold — lifts headings above GT Haptik body weight (stock font-semibold).
+ *   - item (list row): before:rounded-sm (8px) — concentric one step inside the 12px panel.
+ *   - content (panel): the trigger width is a floor rather than a fixed width, so option labels are
+ *     not truncated by a trigger that is narrower than its own list.
+ *
+ * Slots touched: base, label, item, content; size variant (depth + touch); variant (focus ring).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/select-menu.ts
+ * Trigger chevron and selected check are stock appConfig icon defaults.
+ */
+
+export const selectMenuTheme = {
+  slots: {
+    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-none focus:outline-none',
+    // Group label: font-bold so section headings stand out against GT Haptik body weight.
+    label: 'font-bold',
+    // Item slab: before:rounded-sm (8px) — concentric inside the 12px panel.
+    item: 'before:rounded-sm',
+    // Stock pins the panel to the trigger width, which truncates option labels whenever the trigger
+    // is narrower than its own list — a filter chip sizes to its summary, not to its options. The
+    // trigger width becomes a floor instead, so the panel still lines up with the field it belongs
+    // to but grows to fit its labels, capped so a long label cannot run past the viewport edge.
+    content: 'w-auto min-w-(--reka-combobox-trigger-width) max-w-[min(28rem,var(--reka-combobox-content-available-width))]',
+  },
+  variants: {
+    variant: {
+      // Brand forest-500 focus ring — consistent with UInput / USelect.
+      outline: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--forest-500)]',
+      subtle: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--forest-500)]',
+    },
+    // Per-size recessed depth (2/2/3/3/4) + the touch ladder. Object-shaped; deltas only.
+    // `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.
+    size: {
+      xs: { base: '[--forest-input-depth:2px] touch:min-h-7 touch:gap-1.5' }, // touch 28
+      sm: { base: '[--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 36
+      md: { base: '[--forest-input-depth:3px] touch:min-h-10 touch:text-sm touch:gap-2' }, // touch 40
+      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 44
+      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' }, // touch 52
+    },
+  },
+  compoundVariants: [
+    // ghost / none carry no fill, so a resting depth line floats with nothing to recess into.
+    { 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)]' } },
+    { variant: 'none', class: { base: 'shadow-none' } },
+    // Recess tint gated to `highlight`; a plain rest field keeps the neutral line. neutral omitted.
+    { color: 'primary',   highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-primary)]' } },
+    { color: 'secondary', highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-secondary)]' } },
+    { color: 'success',   highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-success)]' } },
+    { color: 'info',      highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-info)]' } },
+    { color: 'warning',   highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-warning)]' } },
+    { color: 'error',     highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-error)]' } },
+    { color: 'forest',    highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-forest)]' } },
+    { color: 'maple',     highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-maple)]' } },
+    { color: 'river',     highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-river)]' } },
+    { color: 'warm',      highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-warm)]' } },
+    { color: 'acid',      highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-acid)]' } },
+  ],
+} as const;

package/src/themes/select.ts

@@ -0,0 +1,72 @@
+/**
+ * Forest theme fragment — USelect (select trigger + dropdown panel, grouped items).
+ *
+ * Forest opinions applied:
+ *   base (trigger): the recessed depth line ported from UInput (inset top edge at rest, dropped on
+ *     focus) so the field family shares one pressed-into-the-page identity; the brand forest-500 focus
+ *     ring on outline/subtle (matching UInput / UTextarea); focus:outline-none suppresses the native
+ *     ring. Radius/layout inherited.
+ *   touch ladder: each size takes its touch rung (min-h 28/36/40/44/52) under a coarse
+ *     pointer or the mobile cut — box, gap,
+ *     effective text, trigger icons). Horizontal px is held (the absolute leading/trailing insets would
+ *     be clobbered). The base carries a responsive `md:text-*` shrink, so the coarse type bump targets
+ *     the next size's EFFECTIVE value (sm→md `touch:text-sm`, lg→xl `touch:text-base`) or the ladder
+ *     inverts. xl has a touch rung of its own (52).
+ *   recess tint: an explicit intent tints the depth line to its ring colour, but only in `highlight`.
+ *   item: before:rounded-sm (8px) — concentric one step inside the 12px panel.
+ *   label (group heading): uppercase, dimmed, tight tracking — the Forest section-heading style.
+ *
+ * Slots touched: base, item, label; size variant (depth + touch); variant (focus ring).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/select.ts
+ * Trigger chevron (trailingIcon → appConfig chevronDown) and selected check are stock defaults.
+ */
+
+export const selectTheme = {
+  slots: {
+    // Recessed depth line + focus:outline-none. Depth scales per size below; recess colour is
+    // mode-aware (forest.css) and tints to the intent in the highlight state.
+    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-none focus:outline-none',
+    // Item slab: before:rounded-sm (8px) — concentric inside the 12px panel.
+    item: 'before:rounded-sm',
+    // Forest group-heading style: uppercase, dimmed, tight tracking — matches page section headings.
+    label: 'text-dimmed uppercase tracking-wider',
+  },
+  variants: {
+    variant: {
+      // Brand forest-500 focus ring — consistent with UInput / UTextarea.
+      outline: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--forest-500)]',
+      subtle: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--forest-500)]',
+    },
+    // Per-size recessed depth (2/2/3/3/4) + the touch ladder. Object-shaped (stock's size variant
+    // is per-slot objects); each size lists only its deltas up.
+    // `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.
+    size: {
+      xs: { base: '[--forest-input-depth:2px] touch:min-h-7 touch:gap-1.5' }, // touch 28
+      sm: { base: '[--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 36
+      md: { base: '[--forest-input-depth:3px] touch:min-h-10 touch:text-sm touch:gap-2' }, // touch 40
+      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 44
+      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' }, // touch 52
+    },
+  },
+  compoundVariants: [
+    // ghost / none carry no fill, so a resting depth line floats with nothing to recess into. ghost
+    // picks it up on hover (elevated fill arrives); none stays flat.
+    { 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)]' } },
+    { variant: 'none', class: { base: 'shadow-none' } },
+    // Recess tint gated to `highlight` (the persistent coloured-ring state); a plain rest field keeps
+    // the neutral line. neutral omitted (its highlight ring is the inverted tone).
+    { color: 'primary',   highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-primary)]' } },
+    { color: 'secondary', highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-secondary)]' } },
+    { color: 'success',   highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-success)]' } },
+    { color: 'info',      highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-info)]' } },
+    { color: 'warning',   highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-warning)]' } },
+    { color: 'error',     highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-error)]' } },
+    { color: 'forest',    highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-forest)]' } },
+    { color: 'maple',     highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-maple)]' } },
+    { color: 'river',     highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-river)]' } },
+    { color: 'warm',      highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-warm)]' } },
+    { color: 'acid',      highlight: true, class: { base: '[--forest-input-recess:var(--forest-recess-acid)]' } },
+  ],
+} as const;

package/src/themes/separator.ts

@@ -0,0 +1,28 @@
+/**
+ * Forest theme fragment — USeparator (divider with optional label/icon).
+ *
+ * Forest opinions applied:
+ *   - `container`: label receives `font-bold` — heavier than the stock `font-medium`
+ *     so the label reads with confident hierarchy when placed between two rule halves, without
+ *     competing with nearby headings. The `text-default` colour and `text-sm` size are left as
+ *     stock (already correct via the semantic surface token).
+ *
+ * Slots NOT overridden:
+ *   - `root`   — stock `flex items-center align-center text-center` is correct; no Forest opinion.
+ *   - `border` — thickness is handled by compoundVariants (size × orientation); colour is driven by
+ *                the `color` prop variants already wired to the brand ramps via docs.css. No override.
+ *   - `icon`   — stock `shrink-0 size-5` is the right size for inline icon landmarks.
+ *   - `avatar` / `avatarSize` — defer to the avatarTheme; no separator-specific opinion.
+ *   - `label`  — thin wrapper; no Forest opinion beyond what `container` already provides.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/separator.ts
+ */
+
+export const separatorTheme = {
+  slots: {
+    // Delta only: heavier label weight (stock is font-medium) — confident hierarchy at rest,
+    // readable at xs. `text-default flex` are stock and NOT restated here (the preset appends to
+    // stock, so a copy would only invite drift).
+    container: 'font-bold',
+  },
+} as const;