@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/themes/radio-group.ts

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

package/packages/ui/src/themes/scroll-area.ts

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

package/packages/ui/src/themes/select-menu.ts

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

package/packages/ui/src/themes/select.ts

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

package/packages/ui/src/themes/separator.ts

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

package/packages/ui/src/themes/sidebar.ts

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

package/packages/ui/src/themes/skeleton.ts

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

package/packages/ui/src/themes/slideover.ts

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

package/packages/ui/src/themes/slider.ts

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

package/packages/ui/src/themes/stepper.ts

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

package/packages/ui/src/themes/switch.ts

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