npm - @humanforest/ui - Versions diffs - 0.1.0 - Mend

@humanforest/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/LICENSE +67 -0
package/icons/forest/bike-asterisk.svg +21 -0
package/icons/forest/bike-down.svg +19 -0
package/icons/forest/bike-off.svg +20 -0
package/icons/forest/bike-up.svg +19 -0
package/icons/forest/bike-x.svg +19 -0
package/icons/forest/bike.svg +18 -0
package/icons/forest/map/forest-place-count.svg +21 -0
package/icons/forest/map/forest-place-marker.svg +17 -0
package/icons/forest/map/forest-vehicle-marker.svg +73 -0
package/icons/forest/map/manifest.json +373 -0
package/icons/forest/map/place-count-manifest.json +83 -0
package/icons/forest/map/place-manifest.json +74 -0
package/icons/forest/mark-fill.svg +6 -0
package/icons/forest/mark.svg +6 -0
package/icons/forest/parking.svg +3 -0
package/icons/forest/star-fill.svg +4 -0
package/icons/forest/star.svg +4 -0
package/icons/forest/traffic-light-caution.svg +8 -0
package/icons/forest/traffic-light-go.svg +8 -0
package/icons/forest/traffic-light-lit.svg +8 -0
package/icons/forest/traffic-light-stop.svg +8 -0
package/icons/forest/traffic-light.svg +8 -0
package/package.json +64 -0
package/src/address/address.ts +125 -0
package/src/address/autofill.ts +78 -0
package/src/address/geocode.ts +55 -0
package/src/address/index.ts +31 -0
package/src/address/validate.ts +91 -0
package/src/canvas/FCanvasCard.vue +97 -0
package/src/canvas/FCanvasControl.vue +121 -0
package/src/canvas/FCanvasControlGroup.vue +100 -0
package/src/canvas/FCanvasFlyout.vue +216 -0
package/src/canvas/FCanvasHud.vue +402 -0
package/src/canvas/canvasSurface.ts +39 -0
package/src/canvas/index.ts +17 -0
package/src/contexts/ForestContext.vue +53 -0
package/src/contexts/contexts.ts +153 -0
package/src/contexts/index.ts +23 -0
package/src/contexts/marketing-theme.ts +214 -0
package/src/contexts/mobile-theme.ts +402 -0
package/src/filter/FFilterBar.vue +72 -0
package/src/filter/FFilterChip.vue +362 -0
package/src/filter/FFilterClauses.vue +104 -0
package/src/filter/FFilterTrigger.vue +183 -0
package/src/filter/filter.theme.ts +27 -0
package/src/filter/filterClause.ts +265 -0
package/src/filter/filterPredicate.ts +134 -0
package/src/filter/filterSchema.ts +82 -0
package/src/filter/index.ts +36 -0
package/src/forest-preset.ts +68 -0
package/src/icons.ts +79 -0
package/src/index.ts +17 -0
package/src/kpi/FKpi.vue +253 -0
package/src/kpi/FKpiGroup.vue +161 -0
package/src/kpi/index.ts +20 -0
package/src/kpi/kpi.theme.ts +168 -0
package/src/kpi/kpiDelta.ts +82 -0
package/src/kpi/kpiFormat.ts +72 -0
package/src/kpi/kpiGroupState.ts +63 -0
package/src/logo/FLogo.vue +52 -0
package/src/logo/FSubLogo.vue +214 -0
package/src/logo/index.ts +8 -0
package/src/map/FMap.vue +355 -0
package/src/map/FMapCompass.vue +154 -0
package/src/map/FMapCoordinates.vue +134 -0
package/src/map/FMapDrawTools.vue +116 -0
package/src/map/FMapFullscreen.vue +92 -0
package/src/map/FMapGeolocate.vue +208 -0
package/src/map/FMapLayers.vue +75 -0
package/src/map/FMapLegend.vue +45 -0
package/src/map/FMapPopup.vue +129 -0
package/src/map/FMapRamp.vue +69 -0
package/src/map/FMapRegion.vue +77 -0
package/src/map/FMapScale.vue +107 -0
package/src/map/FMapSearch.vue +362 -0
package/src/map/FMapTilt.vue +87 -0
package/src/map/FMapTools.vue +61 -0
package/src/map/FMapZoom.vue +81 -0
package/src/map/FMarker.vue +218 -0
package/src/map/FTrackScrubber.vue +94 -0
package/src/map/FVehicleLegend.vue +72 -0
package/src/map/FVehicleMark.vue +166 -0
package/src/map/bin.ts +196 -0
package/src/map/coordinates.ts +83 -0
package/src/map/density.ts +401 -0
package/src/map/draw.ts +356 -0
package/src/map/ease.ts +67 -0
package/src/map/fullscreen.ts +59 -0
package/src/map/heat.ts +160 -0
package/src/map/index.ts +351 -0
package/src/map/liveMarkers.ts +60 -0
package/src/map/map.css +116 -0
package/src/map/mapColor.ts +31 -0
package/src/map/mapContext.ts +12 -0
package/src/map/mapLayers.ts +55 -0
package/src/map/mapLegend.ts +70 -0
package/src/map/mapSearch.theme.ts +79 -0
package/src/map/mapSearch.ts +279 -0
package/src/map/mapUrl.ts +117 -0
package/src/map/markerAsset.ts +3 -0
package/src/map/padding.ts +39 -0
package/src/map/place.ts +192 -0
package/src/map/ramp.ts +95 -0
package/src/map/regionSelect.ts +163 -0
package/src/map/route.ts +167 -0
package/src/map/scale.ts +329 -0
package/src/map/scaleBar.ts +67 -0
package/src/map/selectionModel.ts +50 -0
package/src/map/sources/coordinates.ts +58 -0
package/src/map/sources/mapboxPlaces.ts +71 -0
package/src/map/style.ts +14 -0
package/src/map/track.ts +279 -0
package/src/map/useFeatureSelect.ts +230 -0
package/src/map/useLiveMarkers.ts +84 -0
package/src/map/useMap.ts +150 -0
package/src/map/useMapDraw.ts +776 -0
package/src/map/useMapOverlay.ts +421 -0
package/src/map/useMapTableSelection.ts +101 -0
package/src/map/useMapUrlState.ts +155 -0
package/src/map/useMarkerSource.ts +163 -0
package/src/map/useRegionSelect.ts +309 -0
package/src/map/useTokenMode.ts +61 -0
package/src/map/useTrackPlayback.ts +131 -0
package/src/map/useVehicleFilter.ts +51 -0
package/src/map/useVisibleFeatures.ts +124 -0
package/src/map/vehicle.ts +807 -0
package/src/map/vehicleFilter.ts +284 -0
package/src/map/vehicleLegend.ts +155 -0
package/src/map/visibleFeatures.ts +192 -0
package/src/map/zone.ts +291 -0
package/src/shell/FAppNavbar.vue +68 -0
package/src/shell/FAppShell.vue +163 -0
package/src/shell/FAppSidebar.vue +215 -0
package/src/shell/FPageToolbar.vue +126 -0
package/src/shell/FScrollShadow.vue +43 -0
package/src/shell/FSidePanel.vue +258 -0
package/src/shell/FToolbarActions.vue +32 -0
package/src/shell/index.ts +33 -0
package/src/shell/nav.ts +37 -0
package/src/shell/pageToolbar.ts +69 -0
package/src/shell/shell.ts +74 -0
package/src/shell/sidePanel.ts +115 -0
package/src/styles/forest.css +852 -0
package/src/styles/index.css +39 -0
package/src/themes/accordion.ts +36 -0
package/src/themes/alert.ts +16 -0
package/src/themes/auth-form.ts +19 -0
package/src/themes/avatar-group.ts +9 -0
package/src/themes/avatar.ts +18 -0
package/src/themes/badge.ts +51 -0
package/src/themes/banner.ts +21 -0
package/src/themes/breadcrumb.ts +10 -0
package/src/themes/button.mechanics.ts +191 -0
package/src/themes/button.ts +136 -0
package/src/themes/calendar.ts +29 -0
package/src/themes/card.ts +67 -0
package/src/themes/carousel.ts +41 -0
package/src/themes/checkbox-group.ts +20 -0
package/src/themes/checkbox.ts +47 -0
package/src/themes/chip.ts +50 -0
package/src/themes/collapsible.ts +26 -0
package/src/themes/color-picker.ts +13 -0
package/src/themes/command-palette.ts +37 -0
package/src/themes/container.ts +14 -0
package/src/themes/context-menu.ts +38 -0
package/src/themes/dashboard-group.ts +11 -0
package/src/themes/dashboard-navbar.ts +10 -0
package/src/themes/dashboard-panel.ts +18 -0
package/src/themes/dashboard-resize-handle.ts +35 -0
package/src/themes/dashboard-sidebar-collapse.ts +7 -0
package/src/themes/dashboard-sidebar-toggle.ts +7 -0
package/src/themes/dashboard-sidebar.ts +58 -0
package/src/themes/dashboard-toolbar.ts +15 -0
package/src/themes/drawer.ts +45 -0
package/src/themes/dropdown-menu.ts +38 -0
package/src/themes/empty.ts +43 -0
package/src/themes/field-group.ts +52 -0
package/src/themes/file-upload.ts +38 -0
package/src/themes/footer-columns.ts +13 -0
package/src/themes/footer.ts +9 -0
package/src/themes/form-field.ts +25 -0
package/src/themes/form.ts +22 -0
package/src/themes/header.ts +12 -0
package/src/themes/icon.ts +61 -0
package/src/themes/index.ts +99 -0
package/src/themes/input-date.ts +73 -0
package/src/themes/input-menu.ts +66 -0
package/src/themes/input-number.ts +58 -0
package/src/themes/input-rating.ts +25 -0
package/src/themes/input-tags.ts +63 -0
package/src/themes/input-time.ts +70 -0
package/src/themes/input.ts +148 -0
package/src/themes/kbd.ts +27 -0
package/src/themes/link.ts +27 -0
package/src/themes/listbox.ts +48 -0
package/src/themes/main.ts +6 -0
package/src/themes/marquee.ts +45 -0
package/src/themes/modal.ts +46 -0
package/src/themes/navigation-menu.ts +80 -0
package/src/themes/page-anchors.ts +7 -0
package/src/themes/page-aside.ts +7 -0
package/src/themes/page-card.ts +22 -0
package/src/themes/page-cta.ts +18 -0
package/src/themes/page-feature.ts +13 -0
package/src/themes/page-header.ts +16 -0
package/src/themes/page-hero.ts +15 -0
package/src/themes/page-links.ts +12 -0
package/src/themes/page-section.ts +14 -0
package/src/themes/page.ts +7 -0
package/src/themes/pagination.ts +17 -0
package/src/themes/pin-input.ts +73 -0
package/src/themes/popover.ts +30 -0
package/src/themes/progress.ts +29 -0
package/src/themes/prose.ts +45 -0
package/src/themes/radio-group.ts +39 -0
package/src/themes/scroll-area.ts +23 -0
package/src/themes/select-menu.ts +71 -0
package/src/themes/select.ts +72 -0
package/src/themes/separator.ts +28 -0
package/src/themes/sidebar.ts +127 -0
package/src/themes/skeleton.ts +15 -0
package/src/themes/slideover.ts +87 -0
package/src/themes/slider.ts +48 -0
package/src/themes/stepper.ts +41 -0
package/src/themes/switch.ts +63 -0
package/src/themes/table.ts +34 -0
package/src/themes/tabs.ts +74 -0
package/src/themes/textarea.ts +77 -0
package/src/themes/timeline.ts +25 -0
package/src/themes/toast.ts +29 -0
package/src/themes/toaster.ts +66 -0
package/src/themes/tooltip.ts +31 -0
package/src/themes/tree.ts +41 -0
package/src/themes/user.ts +28 -0

package/src/styles/index.css ADDED Viewed

@@ -0,0 +1,39 @@
+/* @humanforest/ui CSS barrel — the whole Forest layer for a Nuxt UI app, in the correct order.
+   The app owns the framework base; import this AFTER it:
+       @import "tailwindcss";
+       @import "@nuxt/ui";
+       @import "@humanforest/ui/css";
+   This barrel is font-free — fonts are the consumer's choice. Bring your own via a CDN <link> to
+   forest-fonts.cdn.css, an @import "@humanforest/fonts/forest-fonts.cdn.css", or your own
+   self-hosted @font-face rules.
+   Charts are opt-in (heavy palette) — add separately when needed:
+       @import "@humanforest/tokens/dataviz/dataviz.css";
+       @import "@humanforest/tokens/dataviz/unovis.css";
+   In-repo these resolve via relative paths; the @humanforest/* specifiers above are the published-package
+   equivalents (same files via each package's exports map). */
+/* Colour: the engine ramp (P3) then its Tailwind/Nuxt UI registration. Order matters — theme.css
+   references the ramp vars. */
+@import "@humanforest/tokens/scales/ramps.css";
+@import "@humanforest/tokens/scales/theme.css";
+/* Typography scale (--type-* + .type-<role> utilities). */
+@import "@humanforest/tokens/type/type.css";
+/* Motion ladder (--motion-* + the system-wide reduced-motion floor) and its Tailwind half, which
+   re-points --default-transition-duration/-timing-function at the ladder. BOTH are required: unlike
+   tokens/type/type.theme.css — which is genuinely opt-in, because the ramp it registers already IS
+   Tailwind's default scale — dropping motion.theme.css hands every bare `transition` in the stock
+   Nuxt UI recipes back to Tailwind's 150ms/`ease`, off the doctrine entirely. */
+@import "@humanforest/tokens/motion/motion.css";
+@import "@humanforest/tokens/motion/motion.theme.css";
+/* Non-colour brand layer: font vars, radius, .font-display, the coarse: variant. */
+@import "./forest.css";
+/* Class-based dark mode (toggled on <html>). A nested `.light` re-lights its subtree — so a
+   locked-light island (marketing context canvases) suppresses `dark:` for the components inside,
+   matching how forest.css re-points its plain vars for `:root:not(.dark), .light`. Without the
+   `:not(.light …)` exclusion, a component that sets colours via `dark:` utilities (the button's
+   `dark:[--btn-*]`) keeps its dark values even on a `.light` canvas. */
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));

package/src/themes/accordion.ts ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * Forest theme fragment — UAccordion (collapsible sections).
+ *
+ * Forest opinions applied:
+ *   - `trigger`: font-bold on the trigger label (stock is font-medium) — lifts the section heading
+ *     above body copy in the two-weight type system; adds a brand focus ring using the forest-500
+ *     ramp var so tab navigation is clearly visible. Stock's `outline-primary/25` resolves correctly
+ *     but we anchor to the ramp directly for determinism across all consumer surfaces.
+ *   - `item`: the default border-b divider is retained (it reads cleanly); no radius override needed
+ *     at the item level — the root container carries any shell radius from the consumer.
+ *   - `body`: text-sm is stock; we add text-muted so body copy reads at the Forest semantic muted
+ *     level (slightly softer than text-default), keeping content subordinate to the trigger label.
+ *   - `content` / `trailingIcon`: the height animation and the chevron rotate move onto the shared
+ *     motion tokens (stock is a raw 200 ms both). The accordion runs the same keyframe pair as the
+ *     collapsible, so it takes the same timing — --motion-slow for the height travel — and the
+ *     chevron, a small near element, takes --motion-fast.
+ *
+ * Slots touched: trigger, body, content, trailingIcon.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/accordion.ts
+ */
+export const accordionTheme = {
+  slots: {
+    // font-bold: clear heading hierarchy; focus ring pinned to forest-500 ramp var for
+    // dark-mode correctness (stock outline-primary resolves correctly but we anchor to the ramp
+    // directly for determinism across all consumer surfaces).
+    trigger: 'font-bold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-forest-500)]',
+    // text-muted: subordinates body content below the trigger label in the Forest reading hierarchy.
+    body: 'text-muted',
+    // Height travel on --motion-slow, matching the collapsible (same keyframes, same bucket).
+    content:
+      'data-[state=open]:animate-[accordion-down_var(--motion-slow)_var(--motion-ease-out)] data-[state=closed]:animate-[accordion-up_var(--motion-slow)_var(--motion-ease-out)]',
+    // Chevron rotate — a small near element, so --motion-fast.
+    trailingIcon: 'duration-(--motion-fast) ease-(--motion-ease-out)',
+  },
+} as const;

package/src/themes/alert.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Forest theme fragment — UAlert (inline message banner, all intents).
+ *
+ * Deltas only — the preset APPENDS to stock, so restating stock's layout classes would only invite
+ * drift. One change:
+ *   - `title`: font-bold (over stock font-medium) — clear hierarchy above the description
+ *     without font-bold, which is too heavy for inline copy.
+ * Everything else (root layout/radius, text-sm, description opacity-90, icon/actions/close) is stock.
+ * The bold contexts round the banner corner up to rounded-xl (mobile/marketing).
+ */
+export const alertTheme = {
+  slots: {
+    title: 'font-bold',
+  },
+} as const;

package/src/themes/auth-form.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * Forest theme fragment for UAuthForm.
+ *
+ * UAuthForm ships the contents of a sign-in screen — fields, provider buttons, the separator — and
+ * takes its title and description sizes from Tailwind's default scale (`text-xl` and `text-base`)
+ * rather than from Forest's. That is a second type ladder running beside the real one and drifting the
+ * moment the real one moves. Both slots move onto the ladder: `.type-title` and `.type-body`, which
+ * carry size, line-height, tracking and family together.
+ *
+ * Weight was never the problem — `styles/forest.css` remaps `--font-weight-semibold` to 700 in
+ * `@theme`, so stock's `font-semibold` already lands on a cut the brand fonts ship.
+ */
+export const authFormTheme = {
+  slots: {
+    title: 'type-title',
+    description: 'type-body',
+  },
+};

package/src/themes/avatar-group.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * Forest theme fragment — UAvatarGroup. No delta: the stock recipe is correct as-is.
+ *
+ *   - The overlap ring is ring-bg (surface-coloured), so it adapts to light/dark and to tinted
+ *     surfaces through the semantic token — nothing to re-point.
+ *   - Shape and sizing ride UAvatar, which carries the Forest opinion in its own fragment.
+ */
+export const avatarGroupTheme = {} as const

package/src/themes/avatar.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * Forest theme fragment — Avatar / AvatarGroup
+ *
+ * Deltas only (the preset APPENDS to stock, so this carries just what changes):
+ *   - root:     `font-bold` — confident initials; stock root is unweighted.
+ *   - fallback: `font-bold` — stock is `font-medium`, which reads thin at xs/2xs on the tint fills.
+ *
+ * Everything else is stock and correct: rounded-full shape, the /10 colour-ramp fills
+ * (bg-{color}/10 · text-{color}, wired to the Forest ramps in docs.css), the 3xs–3xl ladder,
+ * `object-cover rounded-[inherit]` images, and the AvatarGroup `ring-bg` separator. AvatarGroup
+ * needs no override.
+ */
+export const avatarTheme = {
+  slots: {
+    root: 'font-bold',
+    fallback: 'font-bold',
+  },
+} as const;

package/src/themes/badge.ts ADDED Viewed

@@ -0,0 +1,51 @@
+/**
+ * Forest theme fragment for UBadge.
+ *
+ * Standard badge is a soft-cornered tag (rounded-sm/8px), not a pill: rectangular enough to
+ * read as a label on a data-dense web surface. Bold, uppercase, wide-tracked lettering is the
+ * Forest opinion at every scale; the bold contexts round it to a full pill (mobile/marketing).
+ *
+ * Stock UBadge sets the corner PER SIZE (rounded-sm on xs/sm, rounded-md on md/lg/xl), and tv
+ * applies the size variant after the base slot — so `rounded-sm` in base alone would lose to
+ * stock's rounded-md at md/lg/xl. Follow stock's shape: override the corner in the size
+ * variants (tv deep-merges variants, tailwind-merge collapses the per-size token). The Forest
+ * ladder tightens toward the small end: xs/sm rounded-xs, md/lg/xl rounded-sm. The base copy
+ * (rounded-sm) is the representative Standard value the derived contexts card reads.
+ */
+export const badgeTheme = {
+  slots: { base: 'rounded-sm font-bold uppercase tracking-wide' },
+  variants: {
+    // Per size: the Forest radius override (see comment above) PLUS a `coarse:` touch bump.
+    // Under a coarse primary pointer each size renders as the NEXT SIZE UP — the full bundle
+    // (text, padding, gap, radius, icon), so a touched md badge reads like an lg badge. Unlike
+    // the button this is legibility, not a tap target (a badge is static) — a chip at arm's
+    // length on a phone wants the bigger step. `coarse:` is the custom variant in
+    // styles/forest.css: it fires only on a coarse pointer AND skips `.cut-fixed` elements, so
+    // the mobile cut (which bakes its own increase and stamps cut-fixed) opts out and doesn't
+    // double-promote; marketing has no cut-fixed, so it adapts like standard. xl is the ceiling.
+    size: {
+      xs: { base: 'rounded-xs coarse:text-[10px]/3 coarse:px-1.5 coarse:py-1' },
+      sm: {
+        base: 'rounded-xs coarse:text-xs coarse:px-2 coarse:rounded-sm',
+        leadingIcon: 'coarse:size-4',
+        trailingIcon: 'coarse:size-4',
+      },
+      md: {
+        base: 'rounded-sm coarse:text-sm coarse:gap-1.5',
+        leadingIcon: 'coarse:size-5',
+        trailingIcon: 'coarse:size-5',
+      },
+      lg: {
+        base: 'rounded-sm coarse:text-base coarse:px-2.5',
+        leadingIcon: 'coarse:size-6',
+        trailingIcon: 'coarse:size-6',
+      },
+      xl: { base: 'rounded-sm' },
+    },
+  },
+  // A badge labels something; it does not ask to be pressed. Subtle (tinted fill + inset ring)
+  // rather than stock's solid, which reads as a control. Being ringed, it also carries the bold
+  // contexts' 2px edge.
+  defaultVariants: { variant: 'subtle' },
+} as const

package/src/themes/banner.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * Forest theme fragment — UBanner.
+ *
+ * Deltas only (the preset appends to stock, so nothing stock is restated):
+ *   • title  — steps up to font-bold so the copy holds against every solid brand fill, and
+ *              takes `me-auto` to shove the actions to the far right.
+ *   • layout — Forest reads the strip as title-LEFT / actions-RIGHT. Stock centres the title
+ *              between two flex-1 spacers (left/right) with the actions beside it; we drop those
+ *              spacers (`lg:flex-none`) and let the centre grow (`flex-1`) so the actions land at
+ *              the end of the row, just before the close button.
+ * The banner has no radius by design — it spans the viewport edge to edge.
+ */
+export const bannerTheme = {
+  slots: {
+    left: 'lg:flex-none',
+    center: 'flex-1',
+    title: 'font-bold me-auto',
+    right: 'lg:flex-none',
+  },
+} as const;

package/src/themes/breadcrumb.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * Forest theme fragment — UBreadcrumb. No delta: the stock recipe is correct as-is.
+ *
+ *   - Inactive crumb text-muted with hover:text-default, active crumb font-semibold (bold via
+ *     the two-weight re-map), per-colour focus ring, text-muted separator — all right by default.
+ *   - In a two-weight system there is no intermediate label weight to seat, so the crumb ladder
+ *     is regular → bold exactly as stock wires it.
+ */
+export const breadcrumbTheme = {} as const

package/src/themes/button.mechanics.ts ADDED Viewed

@@ -0,0 +1,191 @@
+/**
+ * UButton mechanics — the shared emphasis recipes and per-colour palettes consumed by ./button.ts.
+ * Private to the button theme: deliberately NOT re-exported by ./index.ts, so none of this reaches
+ * forestPreset.ui as a component key.
+ *
+ * NOTE: these class strings MUST be literal — Tailwind extracts utilities by scanning source text,
+ * so no template interpolation here.
+ */
+export const FOCUS = 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--btn-ring)]';
+// Emphasis classes — each consumes the per-colour --btn-* vars, so one string covers every intent.
+// The keycap keeps the lip ANCHORED (a box-shadow lip moves with the button — the jank). The whole
+// button (face + label) is the moving key; ::before is the lip slab behind it. ::before
+// counter-translates by the EXACT inverse of the button's lift (--btn-yi/--btn-yhi), so it cancels
+// out and sits at absolute 0 in every state — the key rises/presses, the base never moves.
+// The keycap is built from TWO pseudo-layers, both BELOW the inline label (negative z), so the
+// label always shows. ::after = the face (--btn-face + a 1px --btn-lip border); ::before = the base
+// slab (--btn-lip). The button is a transparent frame that translates — the label + ::after face ride
+// with it (lift on hover, flush on press), while ::before counter-translates by the exact inverse
+// so it stays pinned at net 0. The lip NEVER moves; only the key does.
+// NOTE: Tailwind v4 translate utilities set the `translate` property (not `transform`) — the
+// transition MUST list `translate` or the motion snaps.
+export const KEYCAP = [
+  // bg lives on ::after — keep the button frame transparent in every state (clears base-theme
+  // `hover:bg-primary` / `active:bg-primary` leaks that would otherwise sit behind the face).
+  'relative isolate overflow-visible border-0 text-[var(--btn-ink)]',
+  'bg-transparent hover:bg-transparent active:bg-transparent disabled:bg-transparent aria-disabled:bg-transparent',
+  // --btn-y-focus / --btn-yi-focus = the FOCUS lift + its ::before counter. Default to the REST values
+  // (focus moves nothing — web leans on the ::before ring below). The mobile theme overrides them to a
+  // -7px pop, the sole focus signal on touch (no hover to lean on). Living on the KEYCAP recipe (PAD
+  // inherits it) is what scopes the pop to the lip variants: the flat variants never read these vars, so
+  // the slot-level mobile base can't make them jump on focus.
+  // --btn-ring-w = the ::before focus-ring width; mobile sets it to 0 (pop replaces the ring). Routing
+  // the ring through a VAR (instead of a `before:outline-0!` override in the mobile base) is deliberate:
+  // a `before:` utility on the slot-level base auto-adds `content:''`, which on the flat variants — whose
+  // ::before is NOT absolute — becomes an in-flow flex item, and `gap-1.5` then shoves the label right
+  // (a phantom leading gap on focus). Keeping the only `before:` here, where ::before is absolute, avoids it.
+  '[--btn-y-focus:var(--btn-y)] [--btn-yi-focus:var(--btn-yi)] [--btn-ring-w:2px]',
+  // motion-reduce: the lift/press still HAPPENS (it's state, not decoration) but snaps instead of
+  // animating — no positional animation under prefers-reduced-motion (WCAG 2.3.3).
+  'translate-y-[var(--btn-y)] transition-[translate] duration-(--motion-instant) ease-(--motion-ease-out) motion-reduce:transition-none',
+  'hover:translate-y-[var(--btn-y-h)] active:translate-y-0 focus-visible:translate-y-[var(--btn-y-focus)]',
+  'disabled:translate-y-0 aria-disabled:translate-y-0',
+  // face — rides with the button (label sits above it), darkens on hover/press
+  // Edge = a CSS border on the absolute, border-box ::after (face). No layout shift (the pseudo is out
+  // of flow; border draws inside inset-0), even/concentric corners, no sliver. Width = --btn-edge (1px web,
+  // 2px mobile via the platform override).
+  "after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-[var(--btn-face)] after:border-solid after:[border-width:var(--btn-edge,1px)] after:border-[var(--btn-lip)] after:transition-[background-color] after:duration-(--motion-instant) after:ease-(--motion-ease-out)",
+  'hover:after:bg-[var(--btn-hover)] active:after:bg-[var(--btn-hover)]',
+  // base slab. Bottom stays anchored (counter-translate cancels the button's lift); the TOP tracks
+  // the face lift (--btn-y per state) so the slab spans the FULL keycap silhouette — face top → lip
+  // bottom — in EVERY state (lifted at rest/hover, flush when pressed/disabled). The visible lip is
+  // still only the bottom strip: the extended top sits behind the opaque face. `top` animates with
+  // the lift so the ring tracks smoothly.
+  // Lip = a STATIC slab (full footprint, constant shape). It never transforms: the key (button +
+  // face) translates, and ::before counter-translates by the exact inverse so it stays anchored at
+  // net-0 in every state. Only the face moving over it reveals/hides the lip — the lip never morphs.
+  "before:content-[''] before:absolute before:inset-x-0 before:bottom-0 before:top-[var(--btn-y)] before:-z-20 before:rounded-[inherit] before:bg-[var(--btn-lip)]",
+  'before:translate-y-[var(--btn-yi)] before:transition-[translate,top] before:duration-(--motion-instant) before:ease-(--motion-ease-out) before:motion-reduce:transition-none',
+  'hover:before:translate-y-[var(--btn-yhi)] hover:before:top-[var(--btn-y-h)] active:before:translate-y-0 active:before:top-0',
+  // ::before tracks the FOCUS lift so the slab stays anchored when the key pops (mobile); on web the
+  // focus vars equal the rest values, so it doesn't budge.
+  'focus-visible:before:top-[var(--btn-y-focus)] focus-visible:before:translate-y-[var(--btn-yi-focus)]',
+  'disabled:before:translate-y-0 disabled:before:top-0 aria-disabled:before:translate-y-0 aria-disabled:before:top-0',
+  // Focus ring rides on ::before — which now spans the full silhouette — NOT the button, so it wraps
+  // the whole key with an EVEN 2px gap on all sides in every state. outline-none kills the button's
+  // UA default ring; rounded-[inherit] keeps the corners matched.
+  'focus-visible:outline-none focus-visible:before:outline-[length:var(--btn-ring-w)] focus-visible:before:outline-offset-2 focus-visible:before:outline-[var(--btn-ring)]',
+].join(' ');
+export const PAD = [
+  // Quiet tactile key — the KEYCAP engine fed the TINT ramp instead of the solid face: tint fill
+  // (t1→t2→t3), a line-colour border + lip, dark text. Same lift/press/anchored focus ring as the
+  // keycap, lower emphasis (subtle's calm + the keycap's feel). Each remap is declared TWICE — plain
+  // AND `dark:` — because the colour PALs set `dark:--btn-*`, and a `.dark`-scoped rule outranks a
+  // plain one; without the dark: copy the PAL's dark face beats the remap (pad == keycap in dark).
+  // var(--btn-t1) etc. are already mode-aware, so both copies point at the live tint value.
+  '[--btn-face:var(--btn-t1)] dark:[--btn-face:var(--btn-t1)] [--btn-hover:var(--btn-t2)] dark:[--btn-hover:var(--btn-t2)] [--btn-press:var(--btn-t3)] dark:[--btn-press:var(--btn-t3)] [--btn-lip:var(--btn-line)] dark:[--btn-lip:var(--btn-line)] [--btn-ink:var(--btn-text)] dark:[--btn-ink:var(--btn-text)]',
+  KEYCAP,
+].join(' ');
+export const FRAMED = [
+  // Filled face + an INSET RING border (Nuxt-style: a box-shadow, NOT a CSS border — so it adds no
+  // height, unlike `border-2`, keeping every variant the same size). The lip demotes to the ring. No
+  // lip, no motion; leans on face→hover→press. Keeps light-face fills (amber, secondary) visible.
+  'ring-[length:var(--btn-edge,1px)] ring-inset ring-[var(--btn-lip)] text-[var(--btn-ink)] bg-[var(--btn-face)]',
+  'hover:bg-[var(--btn-hover)] active:bg-[var(--btn-press)]',
+  FOCUS,
+].join(' ');
+export const SOLID = [
+  // Plain filled face — no lip, no border, no motion (the standard Nuxt-style solid). Feedback
+  // comes from the face→hover→press colour steps. A light face (amber, secondary) has no edge on a
+  // light surface by design — reach for `framed` when a light solid needs a border.
+  'border-0 text-[var(--btn-ink)] bg-[var(--btn-face)]',
+  'hover:bg-[var(--btn-hover)] active:bg-[var(--btn-press)]',
+  FOCUS,
+].join(' ');
+export const GLOSS = [
+  // Web-only "gloss" emphasis — framed's lip outline with a line of light ONE pixel inside it along the
+  // top (the shine sits below the border, over the face — never on the border itself). The line is the
+  // face's OWN colour lightened (oklch l + --btn-shine-l, default 0.25), not white, so the sheen is
+  // on-brand per intent and works in both modes. Neutral's near-black face needs a bigger lift to read
+  // (PAL_NEUTRAL bumps --btn-shine-l to 0.5 in light; dark stays 0.25 — its near-white face would clip).
+  // One box-shadow, two inset layers: layer 1 (FRONT) the lip outline, --btn-edge
+  // wide; layer 2 (BEHIND) a light band offset calc(edge + 1px), so the outline covers its top `edge` px
+  // and only the next 1px shows. Both inset → footprint identical to framed.
+  'border-0 text-[var(--btn-ink)] bg-[var(--btn-face)]',
+  'shadow-[inset_0_0_0_var(--btn-edge,1px)_var(--btn-lip),inset_0_calc(var(--btn-edge,1px)_+_1px)_0_0_oklch(from_var(--btn-face)_calc(l_+_var(--btn-shine-l,0.25))_c_h)]',
+  // hover/press shift --btn-face itself (not just bg), so BOTH the fill and the shine (derived from
+  // --btn-face) track the current state — the line stays +0.25 lighter than whatever face is showing.
+  'hover:[--btn-face:var(--btn-hover)] active:[--btn-face:var(--btn-press)]',
+  FOCUS,
+].join(' ');
+export const SUBTLE = [
+  // A ramp-pinned INSET RING (a box-shadow, not a border → no added height) over a plain surface fill.
+  // Our width + colour override Nuxt's native subtle ring (`ring ring-inset ring-{color}/25`), so
+  // there's a single edge; `ring-inset` itself comes from that stock compound (deltas only). Same
+  // ring approach as OUTLINE. Rest sits on `bg-default` (not the --btn-t1 tint) so it reads like a
+  // select's outline field — white at rest, tinting to --btn-t2 on hover — rather than a filled slab.
+  'ring-[length:var(--btn-edge,1px)] ring-[var(--btn-line)] text-[var(--btn-text)] bg-default',
+  'hover:bg-[var(--btn-t2)] active:bg-[var(--btn-t3)]',
+  FOCUS,
+].join(' ');
+export const OUTLINE = [
+  // Inset ring (box-shadow), NOT a CSS border — overrides Nuxt's native outline ring's width and
+  // colour and adds no height, so every variant stays the same size. `ring-inset` itself comes
+  // from the stock outline compound (deltas only); FRAMED keeps its own — no stock counterpart.
+  'ring-[length:var(--btn-edge,1px)] ring-[var(--btn-line)] text-[var(--btn-text)] bg-transparent',
+  // Border holds at --btn-line through hover — only the fill tints — so it reads like an input, not a
+  // ring that darkens on approach.
+  'hover:bg-[var(--btn-t1)] active:bg-[var(--btn-t2)]',
+  FOCUS,
+].join(' ');
+export const SOFT = [
+  // Tinted fill: rest t1 → hover t2 → press t3.
+  'text-[var(--btn-text)] bg-[var(--btn-t1)]',
+  'hover:bg-[var(--btn-t2)] active:bg-[var(--btn-t3)]',
+  FOCUS,
+].join(' ');
+export const GHOST = [
+  // Transparent rest → hover t1 → press t2.
+  'text-[var(--btn-text)] bg-transparent',
+  'hover:bg-[var(--btn-t1)] active:bg-[var(--btn-t2)]',
+  FOCUS,
+].join(' ');
+export const LINK = [
+  // Text-only, link-styled — no fill, no border. Underlines on hover and deepens to the press
+  // colour. Tertiary actions ("Learn more"). Inherits the size padding so it lines up in a button row.
+  'border-0 bg-transparent text-[var(--btn-text)] underline-offset-4',
+  'hover:underline hover:text-[var(--btn-press)] active:text-[var(--btn-press)]',
+  FOCUS,
+].join(' ');
+// Docs mirror: apps/docs/src/pages/components/ButtonPage.vue (Specs + Engineering notes) restates
+// these recipes in prose — keep both in sync.
+// Per-colour --btn-* palettes. LITERAL strings (Tailwind-scannable), sourced from the OKLCH ramp
+// (--<family>-50..950). Solids step one level lighter in dark so they pop on a dark surface; the
+// tint / text / line layers flip too, since the ramp is monotonic. Ramp levels — light / dark:
+//   face 500/400 · hover 600/500 · press 700/600 · lip 700/600 · ring 500 · t1 100/900 · t2 200/800 · t3 300/700 · line 400/600 · text 700/300 · ink 0/950
+// On-solid ink follows FACE lightness, not mode: a dark face takes the light 0, a light face the dark 950.
+// Solids use 50 in light / 950 in dark; amber's face is light in BOTH modes, so it's 950 in both — same
+// rule, not a special case. Secondary→warm is a standard colour key (face 500/400). Neutral is the
+// exception: Nuxt-style monochrome — face-based variants invert (900/50), the rest are surface greys.
+export const PAL_FOREST = '[--btn-face:var(--forest-500)] dark:[--btn-face:var(--forest-400)] [--btn-hover:var(--forest-600)] dark:[--btn-hover:var(--forest-500)] [--btn-press:var(--forest-700)] dark:[--btn-press:var(--forest-600)] [--btn-lip:var(--forest-700)] dark:[--btn-lip:var(--forest-600)] [--btn-ring:var(--forest-500)] [--btn-t1:var(--forest-100)] dark:[--btn-t1:var(--forest-900)] [--btn-t2:var(--forest-200)] dark:[--btn-t2:var(--forest-800)] [--btn-t3:var(--forest-300)] dark:[--btn-t3:var(--forest-700)] [--btn-line:var(--forest-400)] dark:[--btn-line:var(--forest-600)] [--btn-text:var(--forest-700)] dark:[--btn-text:var(--forest-300)] [--btn-ink:var(--forest-0)] dark:[--btn-ink:var(--forest-950)]';
+export const PAL_RIVER = '[--btn-face:var(--river-500)] dark:[--btn-face:var(--river-400)] [--btn-hover:var(--river-600)] dark:[--btn-hover:var(--river-500)] [--btn-press:var(--river-700)] dark:[--btn-press:var(--river-600)] [--btn-lip:var(--river-700)] dark:[--btn-lip:var(--river-600)] [--btn-ring:var(--river-500)] [--btn-t1:var(--river-100)] dark:[--btn-t1:var(--river-900)] [--btn-t2:var(--river-200)] dark:[--btn-t2:var(--river-800)] [--btn-t3:var(--river-300)] dark:[--btn-t3:var(--river-700)] [--btn-line:var(--river-400)] dark:[--btn-line:var(--river-600)] [--btn-text:var(--river-700)] dark:[--btn-text:var(--river-300)] [--btn-ink:var(--river-0)] dark:[--btn-ink:var(--river-950)]';
+export const PAL_MAPLE = '[--btn-face:var(--maple-500)] dark:[--btn-face:var(--maple-400)] [--btn-hover:var(--maple-600)] dark:[--btn-hover:var(--maple-500)] [--btn-press:var(--maple-700)] dark:[--btn-press:var(--maple-600)] [--btn-lip:var(--maple-700)] dark:[--btn-lip:var(--maple-600)] [--btn-ring:var(--maple-500)] [--btn-t1:var(--maple-100)] dark:[--btn-t1:var(--maple-900)] [--btn-t2:var(--maple-200)] dark:[--btn-t2:var(--maple-800)] [--btn-t3:var(--maple-300)] dark:[--btn-t3:var(--maple-700)] [--btn-line:var(--maple-400)] dark:[--btn-line:var(--maple-600)] [--btn-text:var(--maple-700)] dark:[--btn-text:var(--maple-300)] [--btn-ink:var(--maple-0)] dark:[--btn-ink:var(--maple-950)]';
+// Warning = light solid: a 300 face with frozen dark ink (a dark amber would fail dark-ink contrast).
+export const PAL_AMBER = '[--btn-face:var(--amber-300)] [--btn-hover:var(--amber-400)] [--btn-press:var(--amber-500)] [--btn-lip:var(--amber-600)] [--btn-ring:var(--amber-500)] [--btn-t1:var(--amber-100)] dark:[--btn-t1:var(--amber-900)] [--btn-t2:var(--amber-200)] dark:[--btn-t2:var(--amber-800)] [--btn-t3:var(--amber-300)] dark:[--btn-t3:var(--amber-700)] [--btn-line:var(--amber-400)] dark:[--btn-line:var(--amber-600)] [--btn-text:var(--amber-700)] dark:[--btn-text:var(--amber-300)] [--btn-ink:var(--amber-950)]';
+// Secondary = warm intent — standard colour key (face 500/400 like the brand families); white ink on
+// the dark 500 face, dark ink on the lighter 400 in dark mode. Own warm focus ring.
+export const PAL_SECONDARY = '[--btn-face:var(--warm-500)] dark:[--btn-face:var(--warm-400)] [--btn-hover:var(--warm-600)] dark:[--btn-hover:var(--warm-500)] [--btn-press:var(--warm-700)] dark:[--btn-press:var(--warm-600)] [--btn-lip:var(--warm-700)] dark:[--btn-lip:var(--warm-600)] [--btn-ring:var(--warm-500)] [--btn-t1:var(--warm-100)] dark:[--btn-t1:var(--warm-900)] [--btn-t2:var(--warm-200)] dark:[--btn-t2:var(--warm-800)] [--btn-t3:var(--warm-300)] dark:[--btn-t3:var(--warm-700)] [--btn-line:var(--warm-400)] dark:[--btn-line:var(--warm-600)] [--btn-text:var(--warm-700)] dark:[--btn-text:var(--warm-300)] [--btn-ink:var(--warm-0)] dark:[--btn-ink:var(--warm-950)]';
+// Neutral = Nuxt-style monochrome (color="neutral"). Face-based variants (keycap/framed/solid) are the
+// INVERTED key — near-black face + white ink in light, near-white face + dark ink in dark (high
+// contrast, like Nuxt's bg-inverted/text-inverted). Tint/text variants (subtle/soft/outline/ghost/
+// link) fall to surface greys (t 100–300 / text 900). Grey focus/hover ring (neutral-500), so the
+// outline hover edge stays monochrome instead of leaking brand green via the shared --btn-ring.
+// Rest --btn-line is 300/700 (not the ramp's 400/600) to match UInput's resting border
+// (ring-accented → --ui-border-accented = neutral-300/700), so a neutral button sits flush with a field.
+export const PAL_NEUTRAL = '[--btn-face:var(--neutral-900)] dark:[--btn-face:var(--neutral-50)] [--btn-hover:var(--neutral-800)] dark:[--btn-hover:var(--neutral-100)] [--btn-press:var(--neutral-700)] dark:[--btn-press:var(--neutral-200)] [--btn-lip:var(--neutral-400)] dark:[--btn-lip:var(--neutral-300)] [--btn-ring:var(--neutral-500)] [--btn-t1:var(--neutral-50)] dark:[--btn-t1:var(--neutral-950)] [--btn-t2:var(--neutral-100)] dark:[--btn-t2:var(--neutral-900)] [--btn-t3:var(--neutral-200)] dark:[--btn-t3:var(--neutral-800)] [--btn-line:var(--neutral-300)] dark:[--btn-line:var(--neutral-700)] [--btn-text:var(--neutral-900)] dark:[--btn-text:var(--neutral-100)] [--btn-ink:var(--neutral-0)] dark:[--btn-ink:var(--neutral-900)] [--btn-shine-l:0.5] dark:[--btn-shine-l:0.25]';
+// All seven intents share the colour-keyed solid/flat/outline/soft/ghost classes.
+export const ALL = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'];
+export const emphasis = (variant: string, cls: string) => ALL.map((color) => ({ color, variant, class: cls }));

package/src/themes/button.ts ADDED Viewed

@@ -0,0 +1,136 @@
+/**
+ * Forest theme fragment for UButton — the 9-rung emphasis ladder. The default is the signature
+ * tactile "keycap" (à la Sentry): a coloured face on a darker bottom lip (pseudo-layers behind the
+ * label) that lifts on hover and collapses flush on press.
+ *
+ * Intent × emphasis taxonomy, mapped onto Nuxt UI's color × variant axes:
+ *
+ *   color (intent)                      | variant (emphasis, high → low)
+ *   ----------------------------------- | -------------------------------------------------
+ *   primary   primary    forest         | keycap   tactile lip (lifts on hover, flush on press)
+ *   success   success    forest         | pad      tint + border + lip — quiet but tactile
+ *   error     danger     maple          | framed   filled face + border (light faces stay visible)
+ *   info      info       river          | solid    filled face, no border, no lip
+ *   warning   warning    amber (ink)    | subtle   tint + border
+ *   secondary secondary  warm           | soft     tint, no border
+ *   neutral   neutral    neutral        | outline  border only
+ *                                       | ghost    text, bg tint on hover
+ *                                       | link     text-only, underline on hover
+ *
+ * Each `color` sets per-family CSS custom properties (--btn-*) consumed by the shared emphasis
+ * classes in ./button.mechanics, so each variant is written once. Buttons override their own
+ * colours via these vars, independent of the preset's semantic role map.
+ *
+ * On-face ink follows FACE lightness, not mode: a dark face takes the family's 0, a light face its
+ * 950 (so amber — a light face in both modes — is 950 in both). Neutral is Nuxt-style monochrome:
+ * its face-based variants are the inverted key (face 900/50, ink 0/900); the rest fall to greys.
+ * Token source of truth: forest-web.DESIGN.md › Components.
+ */
+import {
+  KEYCAP,
+  PAD,
+  FRAMED,
+  SOLID,
+  SUBTLE,
+  SOFT,
+  OUTLINE,
+  GHOST,
+  LINK,
+  PAL_FOREST,
+  PAL_RIVER,
+  PAL_MAPLE,
+  PAL_AMBER,
+  PAL_SECONDARY,
+  PAL_NEUTRAL,
+  emphasis,
+} from './button.mechanics';
+export const buttonTheme = {
+  slots: {
+    // motion-reduce: colour fades may stay; transform/box-shadow movement must not animate.
+    base: 'font-bold transition-[transform,box-shadow,background-color,border-color,color] duration-(--motion-fast) motion-reduce:transition-[background-color,border-color,color]',
+  },
+  variants: {
+    // `color` sets the per-family --btn-* vars (string → applies to the base slot).
+    color: {
+      primary: PAL_FOREST,
+      success: PAL_FOREST,
+      info: PAL_RIVER,
+      error: PAL_MAPLE,
+      warning: PAL_AMBER,
+      secondary: PAL_SECONDARY,
+      neutral: PAL_NEUTRAL,
+    },
+    // Custom emphasis keys not in Nuxt UI's native variant set — registered so the
+    // compoundVariants below bind. subtle/link are registered too, so binding never depends on
+    // the base preset's variant list. All are styled via the compounds.
+    variant: {
+      keycap: '',
+      pad: '',
+      framed: '',
+      gloss: '',
+      subtle: '',
+      link: '',
+    },
+    // Size-scaled padding, radius, and lip elevation.
+    size: {
+      // --btn-y = key lift (lip thickness), --btn-y-h = hover lift; --btn-yi/--btn-yhi = the exact
+      // inverses, applied to the base slab so it cancels the lift and stays anchored.
+      // Radius on the system's named scale (rounded-sm 8 · rounded-md 12 · rounded-lg 16 — the
+      // --radius-* tokens) instead of arbitrary [Npx]. The scale is coarser than the old 2px ladder,
+      // so sm snaps 10→8 and lg snaps 14→16, each sharing a step with a neighbour; xs/md/xl are
+      // unchanged (8/12/16). --btn-y* are lip mechanics, not a scale — left as-is.
+      // TWO LADDERS, selected by pointer, not by context:
+      //   fine  24/28/32/36/40 (xs→xl) — the pointer ladder, matching UInput at every size.
+      //   touch 28/36/40/44/52         — bigger box + a type step, so lg is Apple's 44 and xl 52.
+      // A control's height changes ONLY with its `size` and with the ladder in force. Per-ladder
+      // height does NOT break a mixed <UFieldGroup>: every field member carries the same `touch:`
+      // ladder, so button==input at every rung on either side.
+      // `min-h` is RETAINED (not removed): it is the height driver `aspect-square` mirrors into width
+      // for icon-only buttons (stock supplies the equal `p-1.5` square padding). A prior attempt that
+      // removed min-h collapsed every icon button — only its VALUE moved down to the input's.
+      // touch: = the touch ladder (custom variant, styles/forest.css). ONE set of numbers, fired
+      // either by a coarse primary pointer (any context — a touched web page counts) or by the mobile
+      // cut's baked `.cut-fixed` marker. Same values under both, so a real phone can't step twice and
+      // the desktop mock of the mobile app shows true size with no pointer to query.
+      //   height  min-h 28/36/40/44/52 — min-h is the authority, and the ONLY height driver for
+      //           icon-only buttons (the square compound zeroes the padding, which would skew them).
+      //   type    sm/lg/xl gain a step; xs/md keep their pair's text (12·14·14·16·18 across the ladder).
+      //   icons   size-5/6/7 follow the box, so the glyph doesn't strand inside a bigger target.
+      // Radius is deliberately absent — the mobile cut is already rounded-full, and the web radius
+      // ramp reads correctly at both ladders. Lip vars (--btn-y*, keycap-only, ~1px) stay on `coarse:`:
+      // they're depth, not size, and the mobile cut sets its own flat lip in mobile-theme.ts.
+      xs: { base: 'min-h-6 px-2.5 rounded-sm touch:min-h-7 [--btn-y:-1px] [--btn-yi:1px] [--btn-y-h:-2px] [--btn-yhi:2px] coarse:[--btn-y:-2px] coarse:[--btn-yi:2px] coarse:[--btn-y-h:-3px] coarse:[--btn-yhi:3px]' },
+      sm: { base: 'min-h-7 px-3 rounded-md touch:min-h-9 touch:text-sm [--btn-y:-2px] [--btn-yi:2px] [--btn-y-h:-3px] [--btn-yhi:3px]', leadingIcon: 'touch:size-5', trailingIcon: 'touch:size-5' },
+      md: { base: 'min-h-8 px-3.5 rounded-md touch:min-h-10 [--btn-y:-2px] [--btn-yi:2px] [--btn-y-h:-3px] [--btn-yhi:3px] coarse:[--btn-y:-3px] coarse:[--btn-yi:3px] coarse:[--btn-y-h:-4px] coarse:[--btn-yhi:4px]' },
+      lg: { base: 'min-h-9 px-4 rounded-lg touch:min-h-11 touch:text-base [--btn-y:-3px] [--btn-yi:3px] [--btn-y-h:-4px] [--btn-yhi:4px]', leadingIcon: 'touch:size-6', trailingIcon: 'touch:size-6' },
+      xl: { base: 'min-h-10 px-4 rounded-lg touch:min-h-13 touch:text-lg [--btn-y:-3px] [--btn-yi:3px] [--btn-y-h:-4px] [--btn-yhi:4px]', leadingIcon: 'touch:size-7', trailingIcon: 'touch:size-7' },
+    },
+  },
+  compoundVariants: [
+    ...emphasis('keycap', KEYCAP),
+    ...emphasis('pad', PAD),
+    ...emphasis('framed', FRAMED),
+    // ...emphasis('gloss', GLOSS),
+    ...emphasis('solid', SOLID),
+    ...emphasis('subtle', SUBTLE),
+    ...emphasis('soft', SOFT),
+    ...emphasis('outline', OUTLINE),
+    ...emphasis('ghost', GHOST),
+    ...emphasis('link', LINK),
+    // Icon-only: `min-h` floors the height, `aspect-square` mirrors it into width; stock supplies the
+    // equal `p-*` square padding, which asymmetric touch padding would skew — so zero it and let the
+    // size's `touch:min-h-*` rung carry the growth on its own. That rung must therefore exist for
+    // every size: without it a touched icon button grows its glyph while the box holds still.
+    { square: true, class: 'justify-center aspect-square touch:px-0 touch:py-0' },
+  ],
+  defaultVariants: {
+    color: 'primary',
+    variant: 'solid',
+    size: 'md',
+  },
+} as const

package/src/themes/calendar.ts ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * Forest theme fragment — UCalendar
+ *
+ * Deltas only — every token here changes stock. The card shell, the confident heading weight, and
+ * the offset brand focus ring are the whole opinion; shape, colour intents, sizes and the range /
+ * today fills are stock Nuxt UI on the Forest ramps.
+ *
+ * Slots touched: root, headingLabel, cellTrigger.
+ * Stock recipe (for the diff): apps/docs/node_modules/.nuxt-ui/ui/calendar.ts
+ */
+export const calendarTheme = {
+  slots: {
+    // Card-style container — stock `root` is empty; Forest frames the inline grid as a contained
+    // card (soft radius + border + gentle padding) rather than a raw grid floating in white space.
+    root: 'rounded-xl border border-default bg-elevated/30 p-4 inline-block',
+    // Month / year label — the actual text span (nested inside `heading`, which is why the weight
+    // must land here, not on the wrapper). Confident weight replaces stock's `font-medium` (banned
+    // by the two-weight system) and picks up display tracking without the full Mohr uppercase.
+    headingLabel: 'font-bold tracking-tight text-highlighted',
+    // Date cell — the only cell delta: a brand focus ring pushed out 2px (replaces stock's flat
+    // `focus-visible:outline-3`) so it clears the circle edge, plus a bolder today marker
+    // (`font-bold` over stock `font-semibold`). Shape (rounded-full), sizes and the colour-variant
+    // fills stay stock.
+    cellTrigger: 'focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none data-today:font-bold',
+  },
+} as const