@humanforest/ui 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/ui",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "src",
@@ -9,7 +9,7 @@
     "preset.gen.js"
   ],
   "dependencies": {
-    "@humanforest/tokens": "^0.1.3",
+    "@humanforest/tokens": "^0.2.0",
     "@internationalized/date": "^3.12.2",
     "@mapbox/search-js-core": "^1.6.0",
     "@turf/boolean-point-in-polygon": "^7.4.0",
@@ -50,12 +50,12 @@
     "./kpi/format": "./src/kpi/kpiFormat.ts"
   },
   "devDependencies": {
-    "@nuxt/ui": "^4.10.0",
+    "@nuxt/ui": "^4.11.0",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/browser": "^4.1.10",
     "playwright": "^1.61.1",
-    "reka-ui": "2.10.1",
+    "reka-ui": "2.10.4",
     "tailwindcss": "^4.3.3",
     "vite": "^8.1.5",
     "vitest": "^4.1.10",

package/preset.gen.js

@@ -28,6 +28,7 @@ __export(exports_themes, {
   table: () => tableTheme,
   switch: () => switchTheme,
   stepper: () => stepperTheme,
+  splitter: () => splitterTheme,
   slider: () => sliderTheme,
   slideover: () => slideoverTheme,
   skeleton: () => skeletonTheme,
@@ -38,6 +39,7 @@ __export(exports_themes, {
   scrollArea: () => scrollAreaTheme,
   radioGroup: () => radioGroupTheme,
   prose: () => proseTheme,
+  progressGroup: () => progressGroupTheme,
   progress: () => progressTheme,
   popover: () => popoverTheme,
   pinInput: () => pinInputTheme,
@@ -345,16 +347,21 @@ var carouselTheme = {
 // packages/ui/src/themes/checkbox.ts
 var checkboxTheme = {
   slots: {
-    base: "rounded focus-visible:outline-2 focus-visible:outline-offset-2"
+    base: "rounded focus-visible:outline-offset-2"
   },
   variants: {
     size: {
-      xs: { base: "coarse:size-3.5" },
-      sm: { base: "coarse:size-4", container: "coarse:h-5", wrapper: "coarse:text-sm" },
-      md: { base: "coarse:size-4.5" },
-      lg: { base: "coarse:size-5", container: "coarse:h-6", wrapper: "coarse:text-base" }
+      xs: { base: "coarse:size-3.5", icon: "coarse:size-3" },
+      sm: { base: "coarse:size-4", icon: "coarse:size-3.5", container: "coarse:h-5", wrapper: "coarse:text-sm" },
+      md: { base: "coarse:size-4.5", icon: "coarse:size-4" },
+      lg: { base: "coarse:size-5", icon: "coarse:size-4.5", container: "coarse:h-6", wrapper: "coarse:text-base" }
     }
-  }
+  },
+  compoundVariants: [
+    { variant: "list", indicator: ["start", "end"], class: { base: "focus-visible:outline-2" } },
+    { variant: "card", class: { root: "has-focus-visible:outline-2 has-focus-visible:outline-offset-2" } },
+    { variant: "list", indicator: "hidden", class: { root: "has-focus-visible:outline-2 has-focus-visible:outline-offset-2" } }
+  ]
 };
 // packages/ui/src/themes/checkbox-group.ts
 var checkboxGroupTheme = {
@@ -999,6 +1006,13 @@ var progressTheme = {
     indicator: "duration-(--motion-slow) ease-(--motion-ease-out) will-change-transform"
   }
 };
+// packages/ui/src/themes/progress-group.ts
+var progressGroupTheme = {
+  slots: {
+    segment: "duration-(--motion-slow) ease-(--motion-ease-out)",
+    status: "duration-(--motion-slow) ease-(--motion-ease-out)"
+  }
+};
 // packages/ui/src/themes/prose.ts
 var proseTheme = {
   codePreview: {
@@ -1221,6 +1235,12 @@ var sliderTheme = {
     }
   }
 };
+// packages/ui/src/themes/splitter.ts
+var splitterTheme = {
+  slots: {
+    handle: "focus-visible:outline-offset-2 focus-visible:outline-[var(--forest-500)]"
+  }
+};
 // packages/ui/src/themes/stepper.ts
 var stepperTheme = {
   slots: {

package/src/themes/checkbox.ts

@@ -7,16 +7,24 @@
  *     while aligning with Forest's overall soft-radius vocabulary (--ui-radius = 0.5 rem).
  *   - `label`: font-medium is already stock; we keep it and add nothing — the Nuxt UI default is
  *     correct here.
- *   - `base` focus ring: Forest's house convention `focus-visible:outline-2 focus-visible:outline-offset-2`
- *     (an offset ring), over stock's flush `focus-visible:outline-3`. The outline COLOUR is stock's
- *     semantic value, resolved to the Forest OKLCH ramp via docs.css / forest-preset — no colour
- *     override needed, only the width + offset.
+ *   - focus ring: Forest's house convention `outline-2 outline-offset-2` (an offset ring), over
+ *     stock's flush `outline-3`. The outline COLOUR is stock's semantic value, resolved to the
+ *     Forest OKLCH ramp via docs.css / forest-preset — no colour override needed, only the width
+ *     and offset. Where that ring has to be written is the awkward part; see below.
  *   - `legend` (CheckboxGroup): font-bold — bold against the regular item labels, giving the
  *     group label a clear hierarchy above the individual checkbox labels.
  *
- * The card variant is left entirely stock — no radius override.
+ * ★ THE RING IS A COMPOUND, NOT A SLOT. Stock paints it in two places and neither is a plain slot:
+ * on `base` for the `list` variant with a visible box, and on `root` (as `has-focus-visible:`) for
+ * `card`, and for `list` once the box is hidden. Both live in stock's compoundVariants, which tv
+ * appends AFTER the slots — so a `slots.base` override loses to them and silently does nothing.
+ * The width therefore has to be restated at the same layer, in the entries below.
  *
- * Slots touched: base.
+ * The offset is the exception: no stock rule sets `outline-offset`, so the one on `base` still
+ * reaches from `slots` and is not repeated. The root entries carry their own, `has-focus-visible:`
+ * being a different property from the bare `outline-offset-2` on base.
+ *
+ * Slots touched: base, root, icon.
  * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/checkbox.ts
  *
  * The CheckboxGroup legend opinion lives in its own sibling fragment (checkbox-group.ts),
@@ -26,22 +34,32 @@
 export const checkboxTheme = {
   slots: {
     // Deltas over stock: `rounded` (4px) for the Forest soft radius (stock rounded-sm/2px), and the
-    // house focus ring `outline-2 outline-offset-2` (stock is a flush outline-3). Ring colour and the
-    // indicator bg resolve to the Forest OKLCH ramps via the colour-alias bridge — no override there.
-    base: 'rounded focus-visible:outline-2 focus-visible:outline-offset-2',
+    // ring's offset. The WIDTH is not here — it would be overridden; see the compounds below.
+    base: 'rounded focus-visible:outline-offset-2',
   },
   // Touch: a checkbox's tap target is the whole label ROW, and at md that row is short (~20px). Under
-  // a coarse (finger) pointer each size grows one size up — box (base), row height (container) and
-  // label text (wrapper) — so the row becomes a taller, easier target. No sliding part, so the bump
-  // is clean (unlike the switch thumb). xl is the ceiling; each size lists only its deltas up.
+  // a coarse (finger) pointer each size grows one size up — box (base), tick (icon), row height
+  // (container) and label text (wrapper) — so the row becomes a taller, easier target. No sliding
+  // part, so the bump is clean (unlike the switch thumb). xl is the ceiling; each size lists only
+  // its deltas up, which is why container and wrapper appear on two rungs and the box on four.
+  //
+  // ★ THE TICK IS SIZED SEPARATELY FROM THE BOX. Stock pins `icon` per size rather than filling the
+  // box, so growing `base` alone leaves the tick at its fine-pointer size inside a bigger square.
   // `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', container: 'coarse:h-5', wrapper: 'coarse:text-sm' },
-      md: { base: 'coarse:size-4.5' },
-      lg: { base: 'coarse:size-5', container: 'coarse:h-6', wrapper: 'coarse:text-base' },
+      xs: { base: 'coarse:size-3.5', icon: 'coarse:size-3' },
+      sm: { base: 'coarse:size-4', icon: 'coarse:size-3.5', container: 'coarse:h-5', wrapper: 'coarse:text-sm' },
+      md: { base: 'coarse:size-4.5', icon: 'coarse:size-4' },
+      lg: { base: 'coarse:size-5', icon: 'coarse:size-4.5', container: 'coarse:h-6', wrapper: 'coarse:text-base' },
       // xl: ceiling
     },
   },
+  // The house width, restated where stock's own compounds would otherwise win. Colour is left to
+  // stock, so these carry no `color` discriminator and apply across every ramp.
+  compoundVariants: [
+    { variant: 'list', indicator: ['start', 'end'], class: { base: 'focus-visible:outline-2' } },
+    { variant: 'card', class: { root: 'has-focus-visible:outline-2 has-focus-visible:outline-offset-2' } },
+    { variant: 'list', indicator: 'hidden', class: { root: 'has-focus-visible:outline-2 has-focus-visible:outline-offset-2' } },
+  ],
 } as const;

package/src/themes/index.ts

@@ -73,6 +73,7 @@ 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';
+export { progressGroupTheme as progressGroup } from './progress-group';
 // 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';
@@ -85,6 +86,7 @@ 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 { splitterTheme as splitter } from './splitter';
 export { stepperTheme as stepper } from './stepper';
 export { switchTheme as switch } from './switch';
 export { tableTheme as table } from './table';

package/src/themes/progress-group.ts

@@ -0,0 +1,39 @@
+/**
+ * Forest theme fragment — UProgressGroup (several values as segments of one track, plus a legend).
+ *
+ * New in Nuxt UI 4.11, and it reaches a Forest consumer whether or not we document it: the layer
+ * registers @nuxt/ui wholesale, so the component is typeable the moment the dependency resolves.
+ * This fragment exists so that what arrives is not off-brand, not because the system recommends it.
+ *
+ * Forest opinions applied:
+ *
+ *   segment, status — the motion tokens, replacing stock's hard-coded `duration-200 ease-out`.
+ *     UProgress next to it already animates on `--motion-slow` / `--motion-ease-out` (progress.ts),
+ *     and two bars of the same family easing differently is the kind of seam that only ever shows
+ *     up once both are on screen.
+ *
+ * We do NOT override:
+ *   - `base` (the track) — stock's `bg-accented` groove and `rounded-full` are already the Forest
+ *     reading; radius follows --ui-radius through the preset.
+ *   - Colour variants — `bg-primary`, `bg-error` and the Forest ramps (forest/maple/river/warm/acid)
+ *     are registered by forest-preset, and a per-item `color` that is not a registered name is
+ *     passed through as an inline background, so `var(--dataviz-categorical-safe-N)` works as-is.
+ *   - `motion-reduce:transition-none` — stock sets it, and the global reduced-motion floor in
+ *     packages/tokens/motion supersedes it regardless. Restating it would be drift.
+ *   - The size ladder, the legend slots, and `list`/`item` layout — no Forest opinion here.
+ *
+ * ★ NOT A REPLACEMENT FOR FDistributionBar. Its bar segments carry no slot, so nothing can hang a
+ * tooltip or a focus stop on them, and each segment is its own `role="progressbar"` — a five-part
+ * figure announces as five progress bars rather than one. FDistributionBar exists for the
+ * composition read: one `role="img"`, one sentence, and optional interactive segments.
+ *
+ * Slots touched: segment, status.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/progress-group.ts
+ */
+
+export const progressGroupTheme = {
+  slots: {
+    segment: 'duration-(--motion-slow) ease-(--motion-ease-out)',
+    status: 'duration-(--motion-slow) ease-(--motion-ease-out)',
+  },
+} as const;

package/src/themes/splitter.ts

@@ -0,0 +1,33 @@
+/**
+ * Forest theme fragment — USplitter (resizable panels with a draggable handle).
+ *
+ * New in Nuxt UI 4.11. Nothing in Forest uses it yet — FAppSidebar resizes through
+ * UDashboardSidebar's own `resizable`, and FSidePanel is deliberately two fixed rungs rather than a
+ * drag. The fragment is here for the same reason as progress-group's: the component is typeable by
+ * any consumer on the layer, so its focus ring should be the house one on arrival.
+ *
+ * Forest opinions applied:
+ *
+ *   handle — the house focus ring: offset, and pinned to the ramp var rather than the semantic
+ *     `outline-primary` token, matching link.ts, accordion.ts and carousel.ts. Stock's width is
+ *     already `outline-2`, so only the offset and the colour are stated here.
+ *
+ * We do NOT override:
+ *   - The handle's resting appearance. Stock paints nothing until focus, and that is right for a
+ *     seam between two panels — see dashboard-resize-handle.ts for the case where Forest does draw
+ *     a grab affordance, and note it does not port: that handle's box is zero-wide and sits ON the
+ *     seam, so its pill is positioned against a zero-width edge. This one is a real 2-unit column.
+ *   - `panel`, `root`, and the orientation cursors — layout and affordance, no Forest opinion.
+ *
+ * ★ If a split pane is ever built in Forest, it should be built on this rather than hand-rolled,
+ * and this fragment will need the resting/hover treatment that decision implies.
+ *
+ * Slots touched: handle.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/splitter.ts
+ */
+
+export const splitterTheme = {
+  slots: {
+    handle: 'focus-visible:outline-offset-2 focus-visible:outline-[var(--forest-500)]',
+  },
+} as const;