@humanforest/nuxt-layer 0.1.0

package/packages/ui/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/packages/ui/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/packages/ui/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/packages/ui/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/packages/ui/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

package/packages/ui/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/packages/ui/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/packages/ui/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;