@humanforest/ui 0.1.0

package/src/themes/input-tags.ts

@@ -0,0 +1,63 @@
+/**
+ * Forest theme fragment — UInputTags (tag/token input: a field of removable chips + a text input).
+ *
+ * Forest opinions applied:
+ *   - base (field): 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. Focus lives on the inner
+ *     input, so the drop and the stock ring both key off `has-focus-visible`. The ring already follows
+ *     the colour intent (ring-primary → forest via the alias), so no forest-500 override is needed.
+ *   - 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, icons); px held. 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`).
+ *   - recess tint: an explicit intent tints the depth line to its ring colour, but only in `highlight`.
+ *   - item (chip): rounded-lg (Forest soft radius, not stock's rounded-sm).
+ *   - itemDelete (remove button): rounded-sm — a tight close icon inside a pill should not itself be
+ *     pill-shaped (avoids a nested pill-in-pill look).
+ *
+ * Slots touched: base, item, itemDelete; size variant (depth + touch).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/input-tags.ts
+ * The remove-icon (appConfig close) and the raw inner input slot are stock.
+ */
+
+export const inputTagsTheme = {
+  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)] has-focus-visible:shadow-none',
+    // Pill chip: rounded-lg (Forest soft radius, not stock's rounded-sm).
+    item: 'rounded-lg',
+    // rounded-sm (not rounded-lg) — a tight close icon inside a pill should not itself be pill-shaped.
+    itemDelete: 'rounded-sm',
+  },
+  variants: {
+    // 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. 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/input-time.ts

@@ -0,0 +1,70 @@
+/**
+ * Forest theme fragment — UInputTime (time-picker field).
+ *
+ * Forest opinions applied:
+ *
+ *   outline variant:
+ *     Brand forest-500 focus ring on the wrapper — ring-[var(--forest-500)] — consistent with
+ *     UInput, USelect, and UTextarea. Keeps the full set of field controls on one focus-ring
+ *     language.
+ *
+ *   subtle variant:
+ *     Same brand forest-500 focus ring as outline, matching USelect's subtle treatment.
+ *
+ * base/segment carry no resting Forest opinion — shape and state styling match stock; the size
+ * variant adds the touch ladder, so the field takes its touch rung on a finger pointer.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/input-time.ts
+ *
+ * Focus rings on compound colour variants (outline × primary/error/…) are handled by Nuxt UI's
+ * own compoundVariants using the semantic colour vars, which are wired to the Forest OKLCH ramps
+ * in docs.css. No override needed — they resolve to the correct ramp values automatically.
+ */
+
+export const inputTimeTheme = {
+  slots: {
+    // Recessed depth line ported from UInput — inset top edge at rest, dropped on focus (has-focus-
+    // visible; focus lives on a segment) so the field lifts to its ring. Depth scales per size below;
+    // recess colour is mode-aware + tints to the intent (colour variant). Same identity as every field.
+    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)] has-focus-visible:shadow-none',
+  },
+  variants: {
+    variant: {
+      // Brand forest-500 focus ring — consistent with UInput / USelect / UTextarea.
+      outline: 'hover:bg-elevated disabled:bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--forest-500)]',
+      // Subtle gets the same brand focus-ring treatment.
+      subtle: 'hover:bg-accented/75 disabled:bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--forest-500)]',
+    },
+    // Coarse touch step-up — one size up as a unit (py, gap, segment/base type, icon); px held. Same
+    // ladder as UInputDate — the two share a size scale. Every rung has a touch twin, xl
+    // included (52), so the mobile cut needs no escape: it lands on the same rung.
+    // `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 (type = md's effective value; stock md:text-sm shrink)
+      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` (persistent coloured ring) — a plain rest field is neutral, so
+    // the line only takes the accent where the border does. neutral omitted (inverted highlight ring).
+    { 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/input.ts

@@ -0,0 +1,148 @@
+/**
+ * Forest theme fragment — UInput (text field).
+ *
+ * Ports the old custom <FInput> "recessed" identity onto the real Nuxt UI <UInput>. The signature is
+ * a SOLID inset top line (no blur) that makes the field read as pressed-INTO the page — the exact
+ * inverse of the keycap button's raised face. It is the depth effect; everything else is stock.
+ *
+ * How it composes (important): UInput's resting border and focus border are Tailwind `ring`
+ * utilities, which write to `--tw-ring-shadow`. Our depth line is a `shadow-[...]` utility, which
+ * writes to `--tw-shadow`. Tailwind merges both into one `box-shadow`, so the inset line stacks
+ * UNDER the ring border + focus ring — just like FInput layered an inset line under its 1px border.
+ *
+ * Forest opinions:
+ *   - radius ramps w/ size — small fields read proportionally rounder at a fixed radius, so radius
+ *                           climbs with height: xs/sm rounded-sm (8px), md/lg/xl rounded-md (12px).
+ *                           Set per-size in the size variant (NOT the base slot) so one lever owns it. [base slot]
+ *   - transition          — animate box-shadow too (stock only transitions colour) so focus eases in. [base slot]
+ *   - shadow-[inset…]     — `inset 0 var(--forest-input-depth) 0 0 var(--forest-input-recess)`: the
+ *                           recessed depth line, at rest. Depth scales per size (2/2/3/3/4 for
+ *                           xs/sm/md/lg/xl) via the var, set in the size variant, so the shadow itself
+ *                           is written once on the base slot. The colour token is mode-aware
+ *                           (forest.css) so the line stays darker than the field in dark mode
+ *                           instead of reading as a white edge.
+ *   - focus halo          — on focus the resting inset depth line is dropped and replaced by a soft
+ *                           3px outer halo alone, so the active field reads as lifted-to-focus rather
+ *                           than still pressed-in. The halo colour
+ *                           tracks `color` via --forest-input-halo (the colour variant below):
+ *                           stock only tints the RING, and only on outline/subtle, so a soft or
+ *                           ghost field shows the halo alone and every intent needs its own tone.
+ *                           The --forest-halo-* tokens it points at also flip by mode (forest.css) —
+ *                           numbered ramp steps don't, so one fixed step reads soft on the light
+ *                           page and glares on the dark one.
+ *   - ghost has no rest   — ghost carries no fill and no ring, so a resting depth line floats with
+ *                           nothing to be recessed INTO. It picks the line up on hover/focus, where
+ *                           the elevated fill arrives to hold it. [compoundVariants]
+ *
+ * Error (color="error" via UFormField) and per-colour focus rings resolve to the Forest ramps
+ * automatically through the semantic colour map (maple/forest), so no override is needed for those.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/input.ts
+ */
+
+export const inputTheme = {
+  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-[0_0_0_3px_var(--forest-input-halo,var(--forest-halo-primary))]',
+  },
+  // Touch: the field is drawn on the TOUCH ladder (min-h 28/36/40/44/52 for xs→xl, vs the fine-pointer
+  // 24/28/32/36/40) whenever it is being touched or is baked for touch — `touch:`, the styles/forest.css
+  // custom variant, NOT the built-in `pointer-coarse:`. Each size keeps its own rung, so lg is 44 (Apple's
+  // min target) and xl 52: a LADDER SWAP, not a shift to the next size up, which is why xl has somewhere
+  // to go. It scales as a UNIT (height, padding, gap, radius, icon, type, recess) so it reads as a bigger
+  // version of itself, not the same box stretched taller with stranded small type — a flat min-height
+  // floor was rejected for exactly that (xs at 48px with 12px text looked empty). Button and badge carry
+  // the same rungs, so a mixed <UFieldGroup> stays flush on either ladder.
+  //
+  // Two things it deliberately does NOT bump, and why:
+  //   · Horizontal padding (px): stock adds a fixed `ps-9`/`pe-9` when a leading/trailing icon is
+  //     present, and a `touch:px-*` (padding-inline) emitted after it clobbers that inset — the
+  //     native `type=file` button then slides under the icon. Width contributes ~nothing to a tap
+  //     target, so the step holds px and moves py.
+  //   · Naive base type: stock hangs a RESPONSIVE `md:text-*` shrink per size (a `fixed:false`
+  //     compound — a size's EFFECTIVE desktop type is one step below its base token). A raw
+  //     `touch:text-base/5` ignores that and wins at desktop, so a bumped `sm` outgrew its sibling
+  //     `md` and the ladder inverted. The type step therefore targets the next size's EFFECTIVE value
+  //     (sm→md `touch:text-sm` 14/20, lg→xl `touch:text-base` 16/24), line-height riding along so
+  //     the type-driven steps also gain height. Ladder stays monotonic AND every step grows.
+  //
+  // The recessed depth line scales per size too (shallower on short fields, deeper on tall) and steps
+  // with the rest of the bundle. PER-SIZE RADIUS climbs so no size reads over-rounded: xs/sm rounded-sm
+  // (8px); md/lg/xl keep stock's base rounded-md (12px) — only xs/sm are overridden, md+ are not
+  // restated. Each size lists only its deltas up. The mobile cut ALSO defaults to a bigger `size` (lg
+  // via forestMobileProps), so the two effects compound there: bigger rung values AND a bigger default
+  // rung, which is what makes the bold cut read as a real touch surface.
+  variants: {
+    size: {
+      // `touch:` = the shared TOUCH ladder (styles/forest.css), the height+type twin of button.ts so a
+      // joined <UFieldGroup> matches. min-h is the height authority (28/36/40/44/52 — stock input is
+      // padding-driven with no h-*, so min-h floors it and the text centres). text-* is PINNED (not left
+      // to the stock base) because stock md/lg run text-base/5 with a responsive desktop shrink — a plain
+      // class would flip between the desktop mock (≥768: shrunk) and a real phone (base). Every `touch:`
+      // branch is a 2-class selector for exactly that reason, so it outranks the shrink and the size is
+      // identical on both, equalling the button's text (xs12·sm14·md14·lg16·xl18). Depth/radius/icon
+      // step with the bigger box.
+      xs: { base: 'rounded-sm [--forest-input-depth:2px] touch:min-h-7 touch:gap-1.5' },
+      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' },
+      md: { base: '[--forest-input-depth:3px] touch:min-h-10 touch:text-sm touch:gap-2' },
+      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' },
+      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' },
+    },
+    // The focus halo follows `color`. Stock only pairs colour with the RING (and only on the ringed
+    // variants); the halo is ours, so without this an error field wore a maple ring and a forest
+    // green glow. Each colour re-points the halo var at its own 200 step — primary resolves to the
+    // same value the hardcoded --forest-200 did, so the default field is unchanged.
+    //
+    // FLAT strings, not { base: … } objects — stock's colour variant is flat (every entry is ""),
+    // and a shape mismatch makes the merge drop these silently. Same trap as the FieldGroup ring bug:
+    // match the stock recipe's shape.
+    // Halo (focus glow) follows every colour. The recess is NOT set here — `color` alone leaves a
+    // resting field neutral (its border is ring-accented; the intent only shows on the focus/highlight
+    // ring), so a coloured recess at plain rest would contradict the neutral border. The recess tint is
+    // gated to `highlight` in compoundVariants below, where the ring IS persistently coloured.
+    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: with no fill and no ring there is no surface for the field to
+  // be recessed into, so the line reads as a stray mark. Hover brings the elevated fill (stock ghost
+  // behaviour) and the line with it; focus keeps the base slot's line + halo.
+  compoundVariants: [
+    {
+      variant: 'ghost',
+      class: {
+        // No fill at rest → no depth line and no focus halo (nothing for either to sit on/behind);
+        // hover/focus bring the elevated fill and the depth line back. The halo is dropped in both.
+        base: 'shadow-none focus-visible:shadow-none hover:shadow-[inset_0_calc(var(--forest-input-depth)_+_var(--forest-field-edge,0px))_0_0_var(--forest-input-recess)]',
+      },
+    },
+    // none is fill-less in every state (a bare field, e.g. a select-menu's panel search box) — drop
+    // the depth line AND the focus halo so it reads as a plain flush input, not a recessed glowing one.
+    { variant: 'none', class: { base: 'shadow-none focus-visible:shadow-none' } },
+    // Recess tint gated to `highlight` (the persistent coloured-ring state) — the ONLY resting state
+    // where the intent shows on the border, so the depth line reads as the same accent, not a stray
+    // colour on an otherwise-neutral field. neutral is omitted — its highlight ring is the inverted
+    // tone, which the neutral recess line already matches.
+    { 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/kbd.ts

@@ -0,0 +1,27 @@
+/**
+ * Forest theme fragment for UKbd (flat component, single `base` slot).
+ *
+ * Deltas only — the preset APPENDS to stock's base, so restating its layout classes would invite
+ * drift. Tokens:
+ *   rounded-xs  from stock rounded-sm — a tight corner so the cap reads as a physical key, not a
+ *               pill/chip. Stock keeps the corner in `base` (not per size), so overriding it in base
+ *               is clean. Contexts round it up (mobile/marketing).
+ *   font-mono   from stock font-sans — labels sit alongside code/token surfaces.
+ *   px-2        from stock px-1 — a little breathing room, except sm keeps px-1: at 16px tall px-2
+ *               is cramped.
+ *
+ * The sm padding exception lives in the SIZE VARIANT, not a `[&.h-4]` base hook — a preset/theme
+ * fragment can carry `variants` (tv deep-merges them; the size variant is applied after base, so
+ * `size.sm: 'px-1'` overrides base `px-2` at sm only). Stock's size variant holds no padding, so
+ * this ADDS one. (A CONTEXT can't do this — `<UTheme :ui>` carries slot/base classes only and
+ * silently ignores `variants` — which is why mobile/marketing keep an `[&.h-4]:` hook for their own
+ * per-size radius exception.)
+ *
+ * `font-medium`/`uppercase` and the colour/variant compounds are stock (already on the Forest
+ * ramps) — not Forest's to restate.
+ */
+
+export const kbdTheme = {
+  base: 'rounded-xs font-mono px-2',
+  variants: { size: { sm: 'px-1' } },
+} as const

package/src/themes/link.ts

@@ -0,0 +1,27 @@
+/**
+ * Forest theme fragment — ULink (styled router/anchor link, active states).
+ *
+ * Forest opinions applied:
+ *   - `base` (the single root slot): the stock `focus-visible:outline-primary` is replaced with a
+ *     ramp-pinned focus outline anchored to var(--color-forest-500) — 2px, 2px offset — so the
+ *     focus ring tracks the brand scale in both light and dark mode exactly as keycap buttons do.
+ *   - Active state: text-primary (maps to forest-500 via the semantic colour wiring) is retained from
+ *     the generated default — it reads correctly against Forest surfaces. No override needed.
+ *   - Inactive rest: text-muted is the Forest semantic level for navigation links at rest (softer
+ *     than text-default, never as dim as text-dimmed). Stock default is text-muted so this is kept.
+ *   - Disabled: the generated cursor-not-allowed + opacity-75 is correct; no override needed.
+ *   - Hover (non-disabled, non-active): text-default is the stock value and matches Forest's reading
+ *     hierarchy (link darkens on hover but doesn't jump to active/brand colour). Kept as-is.
+ *   - transition-colors: stock, retained for smooth colour transitions on hover and active change.
+ *
+ * Only the focus ring is a genuine Forest override (pinning the outline to the ramp var rather than
+ * relying on the semantic `outline-primary` token, for determinism across every Forest surface).
+ * Everything else is in harmony with stock and intentionally left unchanged.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/link.ts
+ * Slots touched: base (root element).
+ */
+
+export const linkTheme = {
+  base: 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-forest-500)]',
+} as const;

package/src/themes/listbox.ts

@@ -0,0 +1,48 @@
+/**
+ * Forest theme fragment — UListbox (standalone selectable list, optional filter input).
+ *
+ * Deltas only (the preset appends to stock Nuxt UI):
+ *   - label — font-bold + tracking-wide: group headings read with brand confidence; stock is
+ *             font-semibold, a weight the two-weight type system does not carry.
+ *
+ * The shell radius runs STOCK (rounded-lg). The standard voice states no opinion on it: a listbox
+ * is sized by its own options rather than by a surface it belongs to, so there is no tier to pin it
+ * against. The expressive contexts do have an opinion — mobile and marketing round the shell to
+ * 24px and inset the rows to clear the arc (contexts/{mobile,marketing}-theme.ts).
+ *
+ * The `item` hover/select slab keeps the stock before:rounded-md (12px) — the standalone-row shape
+ * a sidebar nav row, a palette result and a tree node all carry. The 8px slab belongs to rows inside
+ * an anchored 12px menu panel (dropdown-menu, select-menu), which this is not.
+ *
+ * The filter `input` is a UInput carrying the listbox's own size, so it takes its touch rungs from
+ * themes/input.ts and needs nothing here. The avatar and chip sizes ride prop-valued slots
+ * (itemLeadingAvatarSize / itemLeadingChipSize), which a class variant cannot reach — they hold
+ * their fine-pointer step under the bump below.
+ *
+ * Everything else (density ladder, colour ring, virtualize/divider split, selected check, empty and
+ * loading states, transitions) is stock on the Forest ramps.
+ *
+ * Slots touched: root · label; size variant (touch).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/listbox.ts
+ */
+
+export const listboxTheme = {
+  slots: {
+    // 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 menu family). xl is
+  // the ceiling. Deltas only: each size lists just the tokens that differ from its next step up
+  // (e.g. md→lg changes only padding + gap, so no type 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-xs', 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-sm', itemDescription: 'coarse:text-sm', itemLeadingIcon: 'coarse:size-6', itemTrailingIcon: 'coarse:size-6' },
+    },
+  },
+} as const;

package/src/themes/main.ts

@@ -0,0 +1,6 @@
+/**
+ * Reviewed, no delta. UMain is a single flex-1 wrapper with min-height derived from
+ * --ui-header-height. It sets no width, so it composes with the well rather than competing.
+ */
+
+export const mainTheme = {};

package/src/themes/marquee.ts

@@ -0,0 +1,45 @@
+/**
+ * Forest theme fragment — UMarquee (infinite scrolling strip).
+ *
+ * Forest opinions applied:
+ *
+ *   root — the default `[--duration:20s]` is preserved (Nuxt UI default). We extend the root
+ *     with a subtle `rounded-xl` so that when a Marquee is placed inside a bordered card or on a
+ *     clipped surface the overflow boundary matches the Forest --ui-radius soft-corner vocabulary
+ *     (0.5 rem base, rounded-xl ≈ 0.75 rem for container-level trim). This prevents the infinite
+ *     strip from bleeding hard corners out of a soft-radius container.
+ *
+ *   content — we set `gap-6` (both axes) so items (badges, cards, avatars) always have a tactile,
+ *     tighter separation than the stock `--gap` (--spacing(16) ≈ 64px, too airy — especially for a
+ *     vertical feed, where 64px reads as broken spacing). `gap-6` = 24px on row AND column, so a
+ *     horizontal strip and a vertical feed are both comfortably dense. Note this overrides the
+ *     `gap-(--gap)` shorthand, so a per-instance `--gap` override no longer applies — pass a `gap-*`
+ *     utility via `ui.content` to retune. The `items-center` alignment (stock) keeps mixed-height
+ *     children centred — Forest preserves this.
+ *
+ * The overlay gradient blends into `from-default` (the semantic surface token), which adapts
+ * automatically in dark mode — no Forest override needed; the stock `before:from-default /
+ * after:from-default` is already semantically correct.
+ *
+ * Slots NOT overridden:
+ *   - Orientation variants — the flex-row / flex-col layout is correct as-is.
+ *   - `pauseOnHover` variant — stock `group-hover:[animation-play-state:paused]` is correct.
+ *   - `reverse` variant — stock `![animation-direction:reverse]` is correct.
+ *   - overlay compoundVariants — gradient geometry does not need a Forest delta.
+ *
+ * Slots touched: `root`, `content`.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/marquee.ts
+ */
+
+export const marqueeTheme = {
+  slots: {
+    // Soft-corner clip so the strip trims flush with Forest card/surface containers, paired with a
+    // small vertical inset (py-1.5): the rounded clip would otherwise shave the top/bottom of any
+    // item sitting flush to the strip edge (rounded-full pills read as flat-topped). The clip and its
+    // inset are one opinion. Override via `ui.root`/`class` for a deliberately full-bleed strip.
+    root: 'rounded-xl py-1.5',
+    // Tighter, tactile spacing on both axes (24px) vs the airy stock --gap (64px) — matters most
+    // for a vertical feed. Overrides gap-(--gap): retune via a gap-* utility on ui.content.
+    content: 'gap-6',
+  },
+} as const;

package/src/themes/modal.ts

@@ -0,0 +1,46 @@
+/**
+ * Forest theme fragment — UModal (centred dialog on Reka UI's Dialog primitive).
+ *
+ * Deltas only (the preset APPENDS to stock Nuxt UI):
+ *   - `title`: font-display (MohrAlt Black, uppercase) at text-xl — the dialog heading is a moment
+ *     of clear hierarchy; the display face makes it unmistakable. Stock sets `font-semibold`.
+ *   - radius: rounded-xl (0.75 rem) on the non-fullscreen panel — one step softer than stock's
+ *     rounded-lg. It rides `variants.fullscreen.false.content`, NOT the base `content` slot: stock
+ *     puts the radius on that same size variant, so a base override loses the tailwind-merge race
+ *     (the per-size seam — see the badge fragment). Overriding the variant is also what keeps the
+ *     fullscreen panel square (its `inset-0` content carries no radius).
+ *   - `transition`: the open/close keyframes move onto the shared motion tokens. Stock runs a flat
+ *     200 ms both ways and eases the EXIT with `ease-in`, which the doctrine bans — it starts slow at
+ *     the exact moment the user has already decided to dismiss. Forest enters on --motion-base (the
+ *     scale-in bucket the popover/menu family sits in) and exits on --motion-fast, both --motion-ease-out.
+ *
+ * Everything else — overlay tint, header/body/footer padding, divide rules, close button — is stock
+ * and needs no Forest opinion.
+ *
+ * Slot names + variants sourced from: apps/docs/node_modules/.nuxt-ui/ui/modal.ts
+ */
+
+export const modalTheme = {
+  slots: {
+    // Display face for the dialog title — MohrAlt Black, uppercase (via .font-display).
+    title: 'font-display text-xl',
+  },
+  variants: {
+    // Same keyframes as stock, retimed and re-eased onto the tokens. Only the animate-* utilities are
+    // restated (tailwind-merge takes the last one in the concat); the variant carries nothing else.
+    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)]',
+        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)]',
+      },
+    },
+    fullscreen: {
+      // Softer brand radius on the standard centred panel; stock ring + shadow are retained.
+      false: {
+        content: 'rounded-xl',
+      },
+    },
+  },
+} as const;

package/src/themes/navigation-menu.ts

@@ -0,0 +1,80 @@
+/**
+ * Forest theme fragment — NavigationMenu
+ *
+ * Forest opinion:
+ *  - `viewport`   no Forest radius override (rounded-md matches stock already); motion-timing
+ *                 classes (duration/easing) are retained on this slot.
+ *  - `arrow`      rounded-sm to keep the caret consistent with the viewport
+ *  - `label`      text-xs uppercase tracking-wider text-dimmed — Forest's
+ *                 standard section-label treatment (same as docs headings, sidebar groups)
+ *  - `childLink`  before:rounded-sm (8 px) — concentric one step inside the 12 px viewport panel.
+ *
+ * Active treatment — the house nav look (mirrors AppSidebar's active link:
+ * `!bg-primary/10 !text-primary font-bold`): the active item is a soft primary-tint slab with
+ * primary text, bold. Inactive items stay neutral (stock text-muted). Colour intent still tints the
+ * active *text* per ramp (stock colour compounds untouched); only the slab wash + weight are set here.
+ *   - pill active link: stock paints a grey before:bg-elevated slab, unweighted — retint to the soft
+ *     primary wash and bold it. Matches for both highlight on/off (no highlight key ⇒ both).
+ *   - link variant: no slab, just bold the active text (colour still from the ramp).
+ *   - childLink active: stock sets before:bg-elevated + text-highlighted (NOT colour-driven) — give the
+ *     vertical/flyout child items the same brand accent so they read like the sidebar's active row.
+ *
+ * Slots touched: viewport, arrow, label, childLink
+ * All other slots inherit Nuxt UI defaults; default colour stays primary (forest accent for a bare menu).
+ */
+export const navigationMenuTheme = {
+  slots: {
+    // Panel: rounded-md matches stock already; motion-timing (duration/ease) retained below.
+    viewport: 'duration-(--motion-slow) ease-(--motion-ease-in-out) 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)]',
+    // Arrow caret rounded-sm — consistent with the viewport
+    arrow: 'rounded-sm',
+    // Group labels: Forest section-header treatment — uppercase, wider tracking, dimmed weight
+    label: 'text-xs uppercase tracking-wider text-dimmed',
+    // Child link hover slab: before:rounded-sm (8 px) — concentric inside the 12 px viewport panel.
+    childLink: 'before:rounded-sm dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+  },
+  variants: {
+    active: {
+      true: {
+        // Vertical/flyout child active row → the house accent (stock: before:bg-elevated + text-highlighted).
+        childLink: 'before:bg-primary/10 text-primary font-bold',
+      },
+    },
+  },
+  compoundVariants: [
+    // Top-level active pill: swap the grey slab for the soft primary wash + bold. text-primary already
+    // comes from the colour=primary active compound; no highlight key ⇒ applies with highlight on or off.
+    {
+      variant: 'pill',
+      active: true,
+      class: { link: 'before:bg-primary/10 font-bold' },
+    },
+    // link variant carries no slab — just bold the active text (colour stays from the ramp).
+    {
+      variant: 'link',
+      active: true,
+      class: { link: 'font-bold' },
+    },
+    // A VERTICAL menu is a sidebar's nav, and Forest groups it. Stock leaves consecutive sections
+    // touching, so the uppercase label alone has to carry the boundary; give it the group's own
+    // air instead. The reset is scoped to the first LI, not to `:first-child` — the label is always
+    // the first child of ITS li, so `[&:first-child]` would match every group and reset them all.
+    {
+      orientation: 'vertical',
+      collapsed: false,
+      class: { label: 'mt-6 [li:first-child>&]:mt-0' },
+    },
+    // Collapsed to the icon rail. Stock keeps the row full-width, so the active state reads as a
+    // wide pill in a narrow column rather than a button; square it and centre it on the rail.
+    // The separator is the only thing marking a group once the labels are hidden, so it is kept but
+    // shortened — a tick between groups, not a cut across the rail.
+    {
+      orientation: 'vertical',
+      collapsed: true,
+      class: {
+        link: 'size-8 p-0 justify-center mx-auto',
+        separator: 'w-5 mx-auto my-1.5 px-0',
+      },
+    },
+  ],
+} as const

package/src/themes/page-anchors.ts

@@ -0,0 +1,7 @@
+/**
+ * Reviewed, no delta. UPageAnchors is link-list layout: `text-sm` on the link matches the ladder's
+ * small step, and the active `font-semibold` resolves to 700 through the @theme weight remap in
+ * styles/forest.css rather than to a cut the brand fonts lack.
+ */
+
+export const pageAnchorsTheme = {};

package/src/themes/page-aside.ts

@@ -0,0 +1,7 @@
+/**
+ * Reviewed, no delta. The `from-default` scroll-fade gradients read correctly on Forest's surfaces
+ * in both modes — `default` is the warm neutral-0 in light and Nuxt's neutral-900 card in dark, which
+ * is exactly what the aside sits on. Sticky offsets track --ui-header-height, which Forest owns.
+ */
+
+export const pageAsideTheme = {};

package/src/themes/page-card.ts

@@ -0,0 +1,22 @@
+/**
+ * Forest theme fragment for UPageCard.
+ *
+ * ★ Forest's UCard delta does NOT reach this component — different DOM, different recipe, and the
+ * `forest-card` marker that drives the nested-surface and concentric-corner CSS is set by the UCard
+ * theme alone. So a UPageCard beside a UCard reads as a different system unless corrected here.
+ *
+ * Two deltas: the corner moves from `rounded-lg` to the card corner (xl / 24px, per the radius
+ * contract), and the title and description come off Tailwind's default scale onto the ladder.
+ * `text-[15px]` on the description is an arbitrary value with no token behind it at all.
+ *
+ * The nesting CSS is deliberately NOT extended to this component. It is coupled to UCard's DOM by
+ * design, and a second consumer would make it a shared contract that neither component states.
+ */
+
+export const pageCardTheme = {
+  slots: {
+    root: 'rounded-xl',
+    title: 'type-heading-xs',
+    description: 'type-body',
+  },
+};

package/src/themes/page-cta.ts

@@ -0,0 +1,18 @@
+/**
+ * Forest theme fragment for UPageCTA (ui key `pageCta`).
+ *
+ * Type only. Note what is NOT changed: `rounded-xl` on the root is already on-contract — the
+ * rounded-* utilities inline calc(var(--ui-radius) * N), so xl resolves to Forest's 24px card corner
+ * rather than a Tailwind literal. It looked like a bypass and is not.
+ *
+ * ★ It caps its own width (embedded UContainer), which matters most here: a CTA normally sits inside
+ * page content already, so nesting it in a well double-applies the gutters. Registered on
+ * /layout/well.
+ */
+
+export const pageCtaTheme = {
+  slots: {
+    title: 'type-headline',
+    description: 'type-body',
+  },
+};