@humanforest/ui 0.1.0

package/src/themes/empty.ts

@@ -0,0 +1,43 @@
+/**
+ * Forest theme fragment — UEmpty (empty-state placeholder).
+ *
+ * Forest opinions applied:
+ *   - `root`: radius bumped to rounded-2xl for the spacious, card-like Forest feel; padding
+ *     stepped up to p-8 sm:p-10 lg:p-12 to give the empty state breathing room — it is the
+ *     centrepiece of a blank surface, not a tucked-away widget.
+ *   - `title`: font-display (MohrAlt — always uppercase + black weight) to carry
+ *     the brand voice; the display cut renders all-caps naturally so no text-transform needed.
+ *     Bumped two steps up per size (stock caps the title at text-sm..text-lg, undersized for a
+ *     display face) so the MohrAlt title reads with presence: xs/sm text-lg, md/lg text-xl,
+ *     xl text-2xl. Overridden on the SIZE VARIANT (stock sets title size there, so a plain base
+ *     class would lose the ordering race — see the per-size-radius-hook rule).
+ *   - `description`: max-w-xs tightens the measure to ~12 words per line for comfortable reading in
+ *     the centred layout. The colour is deliberately NOT set here — stock already assigns the right
+ *     per-variant description colour (outline text-muted, soft/subtle text-toned, solid text-dimmed
+ *     so it stays legible on the inverted surface), and the variant always wins the merge, so a
+ *     slot-base colour here would just be dead weight. Leave it to stock.
+ *   - `actions`: gap-3 (12 px) — a touch more breath between CTA buttons than the stock gap-2.
+ *
+ * Slots touched: root, title, description, actions.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/empty.ts
+ */
+
+export const emptyTheme = {
+  slots: {
+    root: 'rounded-2xl p-8 sm:p-10 lg:p-12',
+    title: 'font-display',
+    description: 'max-w-xs',
+    actions: 'gap-3',
+  },
+  variants: {
+    // One step up from stock (xs/sm text-sm, md/lg text-base, xl text-lg) so the display title
+    // carries presence. Set on the size variant because stock puts the title size here.
+    size: {
+      xs: { title: 'text-lg' },
+      sm: { title: 'text-lg' },
+      md: { title: 'text-xl' },
+      lg: { title: 'text-xl' },
+      xl: { title: 'text-2xl' },
+    },
+  },
+} as const;

package/src/themes/field-group.ts

@@ -0,0 +1,52 @@
+/**
+ * Forest theme fragment — UFieldGroup (joined input/button cluster).
+ *
+ * Forest opinions applied:
+ *   - `base`: radius set to `rounded-lg` (0.5 rem, matching --ui-radius) so the outer corners of
+ *     the joined bar read with the same soft radius used across Forest controls (input, button,
+ *     card). Stock Nuxt UI's FieldGroup has no explicit radius on the wrapper — the outer corners
+ *     are therefore whatever the first/last child uses. Pinning `rounded-lg` on the wrapper ensures
+ *     the group's clip boundary matches the brand standard even when children vary.
+ *
+ * STRUCTURE (do not wrap in `slots`): UFieldGroup is a SINGLE-SLOT component — its stock theme is
+ * FLAT (`{ base: 'relative', variants: { size, orientation } }`), where `base` is the root's class
+ * string and `variants.orientation.horizontal` carries the load-bearing `inline-flex -space-x-px`
+ * (the 1px negative gap that overlaps children so adjacent inset rings/borders collapse to one).
+ * A previous version wrapped this in `{ slots: { base } }` (multi-slot shape) — that mismatched the
+ * flat recipe, broke tv() resolution (root rendered literal class "base", display:block), and DROPPED
+ * the orientation variant → no overlap → ring variants (subtle/outline) double-bordered at every join.
+ * Keep this fragment FLAT so the top-level `base` merges and the orientation/size variants survive.
+ *
+ * With the overlap intact, inner-corner stripping + ring collapse are handled automatically by Nuxt
+ * (fieldGroup variant on each child + `-space-x-px` here), so ring variants join cleanly. The one
+ * caveat is the KEYCAP lip variants (keycap/pad/framed): their ::before lip slab reads lumpy when
+ * segments butt together — for a segmented control prefer solid (active) + soft/subtle (inactive).
+ *
+ * Slot sourced from: apps/docs/node_modules/.nuxt-ui/ui/field-group.ts
+ */
+
+export const fieldGroupTheme = {
+  // FLAT top-level `base` (single-slot component) — merges with stock's `relative` base and keeps the
+  // size/orientation variants (incl. the load-bearing `-space-x-px` overlap). rounded-md = the joined
+  // bar's outer corner; the wrapper itself paints nothing, so the VISIBLE corner is the child's —
+  // capped to the same value by the orientation variants below.
+  base: 'rounded-md',
+
+  // OUTER-CORNER CAP. A joined bar's end segments must not keep their own standalone corner: the
+  // mobile cut gives every button `rounded-full`, which lands after the field-group corner-strip and
+  // domed the bar's ends (a 36px segment clamped to an 18px half-round — overshooting the group's own
+  // radius). A segmented bar is one slab, not a row of pills, so the group pins its end corners to
+  // rounded-md in EVERY context.
+  //
+  // `[&>*:first-child]` is (0,2,0), so it beats a child's plain `rounded-full`/`rounded-lg` (0,1,0),
+  // while Nuxt's inner-corner strip (`not-only:first:rounded-e-none`, higher specificity still) keeps
+  // stripping the shared edges. Flat STRINGS here to match stock's orientation variant shape — a
+  // `{ base: … }` object would mismatch the flat recipe and drop the overlap (the 2026-07-17 bug).
+  // Trade-off: inside a group the per-size radius ramp flattens to one corner, which is the point.
+  variants: {
+    orientation: {
+      horizontal: '[&>*:first-child]:rounded-s-md [&>*:last-child]:rounded-e-md',
+      vertical: '[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md',
+    },
+  },
+} as const;

package/src/themes/file-upload.ts

@@ -0,0 +1,38 @@
+/**
+ * Forest theme fragment — UFileUpload (drop area / button upload).
+ *
+ * Deltas only — every class here overrides stock and actually lands (verified against the merged
+ * tv() output). Forest opinions:
+ *   - `base`: radius lifted from stock `rounded-lg` to `rounded-xl` (the Forest card tier, 24 px on
+ *     the scaled --ui-radius) so the drop-zone shell reads at the card/modal level, not the tighter
+ *     input level. The transition is widened
+ *     to include `border-color` (on the Forest `--motion-fast` duration) so the drag-highlight
+ *     border animates in smoothly alongside the background.
+ *   - `label`: `font-bold` — a step above stock `font-medium`, giving the call-to-action label a
+ *     confident hierarchy over the description.
+ *
+ * Deliberately NOT set (would be inert — stock overrides them in a later-merged variant, so the
+ * class is silently dropped by tailwind-merge; documenting the trap so nobody re-adds them):
+ *   - a `focus-visible:outline-*` on base is clobbered by the per-colour compoundVariant
+ *     (`focus-visible:outline-3`); the focus ring stays stock.
+ *   - an `icon` size on the base slot is clobbered by the size variant (`size-4/5/6`); a bigger
+ *     empty-state glyph would need per-size `variants.size.{…}.icon` overrides.
+ *   - a `file` radius on the base slot is clobbered by `variants.layout.list.file` (`rounded-md`);
+ *     softer list rows would need to override that layout variant.
+ *   - `fileLeadingAvatar` `rounded-lg` in the grid layout is already stock — nothing to add.
+ *
+ * Focus rings and the drag-highlight border colour are Nuxt UI compoundVariants keyed on the
+ * semantic colour vars (`--ui-color-<family>-*`), wired to the Forest OKLCH ramps in docs.css —
+ * they resolve to the correct brand values with no Forest override.
+ */
+
+export const fileUploadTheme = {
+  slots: {
+    // rounded-xl — Forest card/modal radius (24 px scaled; stock base is rounded-lg). border-color added
+    // to the transition so the drag-highlight border animates on the Forest fast duration.
+    base: 'rounded-xl transition-[background,border-color] duration-(--motion-fast)',
+
+    // font-bold — lifts the call-to-action above stock font-medium.
+    label: 'font-bold',
+  },
+} as const;

package/src/themes/footer-columns.ts

@@ -0,0 +1,13 @@
+/**
+ * Forest theme fragment for UFooterColumns.
+ *
+ * One delta: the column label is `text-sm font-semibold`, a size off Tailwind's default scale. A
+ * footer column heading is an overline in Forest's vocabulary — small, spaced, quiet — so it takes
+ * `.type-overline`, which carries size, tracking and case together.
+ */
+
+export const footerColumnsTheme = {
+  slots: {
+    label: 'type-overline',
+  },
+};

package/src/themes/footer.ts

@@ -0,0 +1,9 @@
+/**
+ * Reviewed, no delta. UFooter is pure layout — every slot is flex/grid/spacing and it sets no type,
+ * colour or radius of its own. The type that appears in a footer comes from UFooterColumns.
+ *
+ * ★ It DOES cap its own width: the container slot embeds a UContainer, so a footer must not be
+ * nested inside a well. Registered on /layout/well.
+ */
+
+export const footerTheme = {};

package/src/themes/form-field.ts

@@ -0,0 +1,25 @@
+/**
+ * Forest theme fragment — UFormField (field layout: label, help, error).
+ *
+ * Forest opinions applied:
+ *
+ *   `label`:
+ *     Lifted from stock `font-medium` to `font-bold` — clearly above the field content,
+ *     giving the label a clear hierarchy. Matches the legend treatment in checkboxGroupTheme /
+ *     radioGroupTheme.
+ *
+ * Everything else is stock. Text size belongs to `variants.size`, which drives the `root` slot and
+ * lets the secondary slots (description, error, hint, help) inherit from it — a flat `text-*` here
+ * would pin one rung of a five-rung ladder. The secondary slots keep stock's `text-muted`, so the
+ * label carries the hierarchy on weight alone.
+ *
+ * Slots touched: label.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/form-field.ts
+ */
+
+export const formFieldTheme = {
+  slots: {
+    // font-bold — clearly above the field content.
+    label: 'font-bold',
+  },
+} as const;

package/src/themes/form.ts

@@ -0,0 +1,22 @@
+/**
+ * Forest theme fragment — UForm + UFormField (validation wrapper + field layout).
+ *
+ * Forest opinions applied:
+ *
+ *   UForm (`base`):
+ *     No visual chrome of its own — UForm is a pure behaviour wrapper (validation, loading state,
+ *     submit gate). The only Forest opinion is a comfortable `space-y-5` vertical rhythm between
+ *     FormFields, replacing the stock empty string. This gives Forest forms a consistent,
+ *     breathing density without each page needing to repeat the spacing utility.
+ *
+ * Slots touched (form): base.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/form.ts
+ *
+ * The UFormField opinions (label, description, error, hint) live in their own sibling fragment
+ * (form-field.ts), matching the one-file-per-component convention (cf. radio-group.ts).
+ */
+
+export const formTheme = {
+  // space-y-5: comfortable Forest density between FormFields (stock: empty string — no spacing).
+  base: 'space-y-5',
+} as const;

package/src/themes/header.ts

@@ -0,0 +1,12 @@
+/**
+ * Forest theme fragment for UHeader.
+ *
+ * One delta: the title takes `text-xl` off Tailwind's default scale. Retyped onto `.type-title` so
+ * the site wordmark sits on Forest's ladder rather than a parallel one.
+ */
+
+export const headerTheme = {
+  slots: {
+    title: 'type-title',
+  },
+};

package/src/themes/icon.ts

@@ -0,0 +1,61 @@
+/**
+ * Forest theme fragment — UIcon
+ *
+ * UIcon is a thin pass-through to @nuxt/icon — it has no Tailwind Variants theme slots,
+ * no compound variants, and no class-generating machinery of its own. There is nothing to
+ * override in the Tailwind Variants sense.
+ *
+ * The Forest opinion for icons therefore lives entirely at the USAGE layer:
+ *
+ *   Sizing     — always use Tailwind `size-*` utilities, never the `:size` prop.
+ *                The `:size` prop inlines a `font-size` style which misaligns SVG icons in
+ *                flex/grid contexts. `size-*` sets both `width` and `height` as layout properties.
+ *
+ *                  size-3   (12 px) — inline annotation, caption badge icon
+ *                  size-3.5 (14 px) — UBadge leading/trailing icon slot
+ *                  size-4   (16 px) — UButton icon · sidebar nav item  ← default
+ *                  size-5   (20 px) — list row · prominent inline icon
+ *                  size-6   (24 px) — card icon · empty-state accent block
+ *                  size-8   (32 px) — avatar-scale accent
+ *                  size-10  (40 px) — hero / illustration icon
+ *
+ *   Colour     — always use semantic `text-*` classes so dark mode adapts automatically.
+ *                Never use raw palette classes (text-forest-500, text-maple-600, …) on icons.
+ *
+ *                  text-primary   — brand accent (forest)
+ *                  text-success   — active / healthy states
+ *                  text-warning   — low battery / caution
+ *                  text-error     — fault / critical
+ *                  text-info      — location / informational
+ *                  text-muted     — secondary / inactive
+ *                  text-dimmed    — decorative / lowest emphasis
+ *                  text-highlighted — high-contrast foreground
+ *
+ *   Flex rows  — always add `shrink-0` when UIcon sits beside text in a flex row;
+ *                omitting it causes the icon to be squeezed on narrow viewports.
+ *
+ *   Icon family — two prefixes, one drawing contract. `i-lucide-*` is the base set
+ *                 (@iconify-json/lucide) and resolves over the Iconify API. `i-forest-*` is
+ *                 Forest's own (packages/ui/icons/forest, packed by scripts/icons.ts) and must be
+ *                 registered from the bundle with addCollection() — there is no API behind it.
+ *                 Draw a Forest icon only where Lucide's glyph would misstate the operation, and
+ *                 draw it to Lucide's conventions: 24×24, fill none, stroke currentColor,
+ *                 stroke-width 2, round caps and joins. Full doctrine: /foundations/icons.
+ *
+ *   Accessibility — decorative icons (beside a label): add `aria-hidden="true"`.
+ *                   Standalone icon controls: use <UButton icon="…" aria-label="…" />.
+ *                   Meaningful icons without visible label: add <span class="sr-only">.
+ *
+ *   Render mode — keep the default mode="svg" for crisp rendering at all pixel densities;
+ *                 do not switch to mode="css" in Forest UIs.
+ *
+ * Slots touched: none — UIcon has no Tailwind Variants theme.
+ *
+ * This file exists as a Forest convention record and a named export so the theme registry
+ * can include it without breaking the import graph. The exported object is intentionally
+ * empty; the real Forest opinion is documented above and enforced at the usage layer.
+ */
+export const iconTheme = {
+  // UIcon has no Tailwind Variants slots.
+  // Forest opinions are usage conventions documented in the comment above.
+} as const;

package/src/themes/index.ts

@@ -0,0 +1,99 @@
+// Forest theme fragments — one re-export per component Forest uses, aliased to its Nuxt UI
+// ui-config key. An EMPTY fragment ({}) records a reviewed component whose stock recipe is
+// correct as-is — presence means reviewed, content means delta.
+// Spread into forestPreset.ui, where this barrel is the single source of component themes
+// (asserted by the static tests). Hand-maintained; keep the list ordered by export key.
+
+export { accordionTheme as accordion } from './accordion';
+export { alertTheme as alert } from './alert';
+export { authFormTheme as authForm } from './auth-form';
+export { avatarTheme as avatar } from './avatar';
+export { avatarGroupTheme as avatarGroup } from './avatar-group';
+export { badgeTheme as badge } from './badge';
+export { bannerTheme as banner } from './banner';
+export { breadcrumbTheme as breadcrumb } from './breadcrumb';
+// button.mechanics is deliberately absent — it exports the button's private recipe/palette
+// constants, not a component theme.
+export { buttonTheme as button } from './button';
+export { calendarTheme as calendar } from './calendar';
+export { cardTheme as card } from './card';
+export { carouselTheme as carousel } from './carousel';
+export { checkboxTheme as checkbox } from './checkbox';
+export { checkboxGroupTheme as checkboxGroup } from './checkbox-group';
+export { chipTheme as chip } from './chip';
+export { collapsibleTheme as collapsible } from './collapsible';
+export { colorPickerTheme as colorPicker } from './color-picker';
+export { commandPaletteTheme as commandPalette } from './command-palette';
+export { containerTheme as container } from './container';
+export { contextMenuTheme as contextMenu } from './context-menu';
+export { dashboardGroupTheme as dashboardGroup } from './dashboard-group';
+export { dashboardNavbarTheme as dashboardNavbar } from './dashboard-navbar';
+export { dashboardPanelTheme as dashboardPanel } from './dashboard-panel';
+export { dashboardResizeHandleTheme as dashboardResizeHandle } from './dashboard-resize-handle';
+export { dashboardSidebarTheme as dashboardSidebar } from './dashboard-sidebar';
+export { dashboardSidebarCollapseTheme as dashboardSidebarCollapse } from './dashboard-sidebar-collapse';
+export { dashboardSidebarToggleTheme as dashboardSidebarToggle } from './dashboard-sidebar-toggle';
+export { dashboardToolbarTheme as dashboardToolbar } from './dashboard-toolbar';
+export { drawerTheme as drawer } from './drawer';
+export { dropdownMenuTheme as dropdownMenu } from './dropdown-menu';
+export { emptyTheme as empty } from './empty';
+export { footerTheme as footer } from './footer';
+export { footerColumnsTheme as footerColumns } from './footer-columns';
+export { fieldGroupTheme as fieldGroup } from './field-group';
+export { fileUploadTheme as fileUpload } from './file-upload';
+export { formTheme as form } from './form';
+export { formFieldTheme as formField } from './form-field';
+export { headerTheme as header } from './header';
+export { iconTheme as icon } from './icon';
+export { inputDateTheme as inputDate } from './input-date';
+export { inputMenuTheme as inputMenu } from './input-menu';
+export { inputNumberTheme as inputNumber } from './input-number';
+export { inputRatingTheme as inputRating } from './input-rating';
+export { inputTagsTheme as inputTags } from './input-tags';
+export { inputTimeTheme as inputTime } from './input-time';
+export { inputTheme as input } from './input';
+export { kbdTheme as kbd } from './kbd';
+export { linkTheme as link } from './link';
+export { listboxTheme as listbox } from './listbox';
+export { mainTheme as main } from './main';
+export { marqueeTheme as marquee } from './marquee';
+export { modalTheme as modal } from './modal';
+export { navigationMenuTheme as navigationMenu } from './navigation-menu';
+export { pageTheme as page } from './page';
+export { pageAnchorsTheme as pageAnchors } from './page-anchors';
+export { pageAsideTheme as pageAside } from './page-aside';
+export { pageCardTheme as pageCard } from './page-card';
+export { pageCtaTheme as pageCta } from './page-cta';
+export { pageFeatureTheme as pageFeature } from './page-feature';
+export { pageHeaderTheme as pageHeader } from './page-header';
+export { pageHeroTheme as pageHero } from './page-hero';
+export { pageLinksTheme as pageLinks } from './page-links';
+export { pageSectionTheme as pageSection } from './page-section';
+export { paginationTheme as pagination } from './pagination';
+export { pinInputTheme as pinInput } from './pin-input';
+export { popoverTheme as popover } from './popover';
+export { progressTheme as progress } from './progress';
+// Prose components are namespaced under ui.prose.* — the fragment runs stock, carrying only the
+// `ed-demo` marker the docs editorial grid reads off a demo pane.
+export { proseTheme as prose } from './prose';
+export { radioGroupTheme as radioGroup } from './radio-group';
+export { scrollAreaTheme as scrollArea } from './scroll-area';
+export { selectMenuTheme as selectMenu } from './select-menu';
+export { selectTheme as select } from './select';
+export { separatorTheme as separator } from './separator';
+export { sidebarTheme as sidebar } from './sidebar';
+export { skeletonTheme as skeleton } from './skeleton';
+export { slideoverTheme as slideover } from './slideover';
+export { sliderTheme as slider } from './slider';
+export { stepperTheme as stepper } from './stepper';
+export { switchTheme as switch } from './switch';
+export { tableTheme as table } from './table';
+export { tabsTheme as tabs } from './tabs';
+export { textareaTheme as textarea } from './textarea';
+export { timelineTheme as timeline } from './timeline';
+export { toastTheme as toast } from './toast';
+// toaster is the STACK (viewport, entry/exit, swipe); toast above is a single notification's surface.
+export { toasterTheme as toaster } from './toaster';
+export { tooltipTheme as tooltip } from './tooltip';
+export { treeTheme as tree } from './tree';
+export { userTheme as user } from './user';

package/src/themes/input-date.ts

@@ -0,0 +1,73 @@
+/**
+ * Forest theme fragment — UInputDate (date / range picker field).
+ *
+ * Forest opinions applied:
+ *   - `base`: 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. Radius stays stock rounded-md.
+ *   - `segment`: focused segments receive `focus:rounded` (a mild inner radius) so the highlight
+ *     bubble fits the overall radius language rather than appearing perfectly square.
+ *   - `leadingIcon` / `trailingIcon`: already inherit `text-dimmed` from stock; no override needed.
+ *   - `separatorIcon`: sized and dimmed to match the rest of the field chrome at every size.
+ *
+ *   - touch ladder: like UInput, each size swaps to its touch rung (min-h 28/36/40/44/52)
+ *     (py, gap, segment/base type, icon) so the field reads as a bigger version of itself. Horizontal
+ *     px is held (stock's absolute leading / trailing ps- / pe- insets would be clobbered). Like UInput
+ *     the base type carries a responsive `md:text-*` shrink, so the coarse type bump targets the next
+ *     size's EFFECTIVE desktop value (sm→md `touch:text-sm`, lg→xl `touch:text-base`) rather than its
+ *     base token, or a bumped sm would outgrow md and invert the ladder. xl has a touch rung of
+ *     its own (52), and the mobile cut needs no escape — it lands on the same rung a coarse pointer would.
+ *
+ * Slots touched: segment; size variant (touch deltas).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/input-date.ts
+ *
+ * Focus rings (outline/subtle variants × every colour) resolve correctly via Nuxt UI's own
+ * compoundVariants reading --ui-color-<family>-* — already wired to the Forest OKLCH ramps in
+ * docs.css. No override needed here.
+ */
+
+export const inputDateTheme = {
+  slots: {
+    // The recessed depth line, ported from UInput so the field family shares one "pressed-into-the-
+    // page" identity: a solid inset top edge (no blur) at rest, dropped on focus (has-focus-visible,
+    // since focus lives on a segment) so the active field lifts to its focus ring — the same
+    // rest-pressed / focus-lifted behaviour UInput now uses. Depth scales per size via the var below;
+    // the recess colour is mode-aware (forest.css). transition-[color,box-shadow] eases it in/out.
+    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',
+    // focus:rounded — mild inner radius on the active segment bubble matches the field's soft radius.
+    segment: 'focus:rounded',
+  },
+  // Per-size recessed depth (2/2/3/3/4, shallower on short fields) + the touch ladder — one
+  // size up as a unit. Each size lists only its deltas.
+  // `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: {
+      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 (the 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 is
+    // neutral (ring-accented border), so the line only takes the accent where the border does.
+    // neutral omitted (its highlight ring is the inverted tone, matched by the neutral line).
+    { 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-menu.ts

@@ -0,0 +1,66 @@
+/**
+ * Forest theme fragment — UInputMenu (autocomplete combobox: input + dropdown panel).
+ *
+ * Forest opinions applied:
+ *   - base (input): 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:outline-none
+ *     suppresses the native ring; the brand forest-500 focus ring on outline.
+ *   - 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`.
+ *   - content: opens/closes on the Forest motion tokens.
+ *   - item: before:rounded-sm (8px) — concentric inside the 12px panel.
+ *   - tagsItem: rounded-md — comfortable tag pills, consistent with the Forest field family.
+ *
+ * Slots touched: base, content, item, tagsItem; size variant (depth + touch); variant (focus ring).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/input-menu.ts
+ */
+
+export const inputMenuTheme = {
+  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',
+    // Panel radius/ring come from stock (rounded-md / ring-default); opens/closes with Forest motion.
+    content: 'data-[state=open]:animate-[scale-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-fast)_var(--motion-ease-out)]',
+    // Item slab: before:rounded-sm (8px) — concentric inside the 12px panel.
+    item: 'before:rounded-sm',
+    // Tag pills in multiple mode: rounded-md — comfortable, consistent with the Forest field family.
+    tagsItem: 'rounded-md',
+  },
+  variants: {
+    variant: {
+      // Reinforce the focus ring with forest-500 so the open combobox matches UInput's ring colour.
+      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/input-number.ts

@@ -0,0 +1,58 @@
+/**
+ * Forest theme fragment — UInputNumber (stepper number field).
+ *
+ * Forest opinions applied:
+ *   - `base`: 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:outline-none suppresses the
+ *     stock ring. Radius/shape stay stock.
+ *   - touch ladder: like UInput, each size swaps to its touch rung (min-h 28/36/40/44/52)
+ *     (py, gap, effective text). Horizontal px is held (the absolute increment/decrement insets would
+ *     be clobbered). The base type 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 a
+ *     promoted sm would outgrow md and invert the ladder. 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`
+ *     (the persistent coloured-ring state) — a plain rest field stays neutral. Same rule as UInput.
+ *
+ * The size variant is a FLAT string per size (stock's own shape — it targets the base slot); the
+ * touch deltas + depth var append as flat strings to match, or the merge would drop them.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/input-number.ts
+ * Focus rings (outline/subtle × every colour) resolve via Nuxt UI's own compoundVariants reading
+ * --ui-color-<family>-*, wired to the Forest ramps in docs.css. No override needed there.
+ */
+
+export const inputNumberTheme = {
+  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',
+  },
+  variants: {
+    // Per-size recessed depth (2/2/3/3/4) + the touch ladder. FLAT strings — matches stock's size
+    // shape (a { base: … } object here would be dropped by the merge).
+    size: {
+      xs: '[--forest-input-depth:2px] touch:min-h-7 touch:gap-1.5', // touch 28
+      sm: '[--forest-input-depth:2px] touch:min-h-9 touch:text-sm touch:rounded-md touch:[--forest-input-depth:3px]', // touch 36 (type = md's effective value; stock md:text-sm shrink)
+      md: '[--forest-input-depth:3px] touch:min-h-10 touch:text-sm touch:gap-2', // touch 40
+      lg: '[--forest-input-depth:3px] touch:min-h-11 touch:text-base touch:rounded-lg touch:[--forest-input-depth:4px]', // touch 44
+      xl: '[--forest-input-depth:4px] touch:min-h-13 touch:text-lg touch:rounded-lg touch:[--forest-input-depth:4px]', // 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-rating.ts

@@ -0,0 +1,25 @@
+/**
+ * Forest theme fragment for UInputRating.
+ *
+ * Amber by default — the universal gold-star rating look. `color` is a variant, so a
+ * defaultVariants override is the clean lever (stock defaults to primary). Explicit color on a
+ * component still wins. The filled star glyph is the vendored solid star (the preset's icons.star
+ * alias); the empty state reuses it muted unless a component passes its own empty-icon.
+ */
+
+export const inputRatingTheme = {
+  defaultVariants: { color: 'warning' },
+
+  // Touch: each star promotes ONE size up under a coarse pointer — the whole ladder is a square
+  // dimension (size-3 → size-7), so promotion is a straight one-step size bump on both the hit area
+  // (`item`) and the glyph (`icon`). xl (size-7) is the ceiling; deltas only. `coarse:` carries the
+  // :not(.cut-fixed) escape so a baked mobile cut opts out.
+  variants: {
+    size: {
+      xs: { item: 'coarse:size-4', icon: 'coarse:size-4' },
+      sm: { item: 'coarse:size-5', icon: 'coarse:size-5' },
+      md: { item: 'coarse:size-6', icon: 'coarse:size-6' },
+      lg: { item: 'coarse:size-7', icon: 'coarse:size-7' },
+    },
+  },
+} as const