@humanforest/tokens 0.3.7 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,77 @@
 
 Every @humanforest package shares one version, so one entry covers all seven packages. Newest first.
 
+## 0.4.0 — 2026-09-15
+
+### Features
+
+- **docs**: the llms mirror prints a section kicker under its heading
+- **frames**: FFitFrame fits a slot that sizes itself
+- **charts**: a sparkline's area fades from its line to the floor
+- **charts**: the calendar month rule boxes each month in a toned line
+- **docs**: the llms mirror heads a non-prop table by its own column
+- **docs**: the llms mirror names the module a page destructures
+- **docs**: the llms mirror renders section loops
+- **docs**: the llms mirror resolves plain strings a page imports
+- **docs**: DemoStage puts a demo's controls above the specimen
+- **docs**: the llms mirror names each code tab in a ProseCodeGroup
+- **docs**: the llms mirror renders guidance cards and imported arrays
+
+### Fixes
+
+- **ui**: the scroll fade follows content that changes after mount
+- **ui**: map drawing places a corner only for a press on the map
+- **ui**: the scale bar measures at the centre and hides off the globe
+- **ui**: geolocate stays active through a location error while tracking
+- **ui**: map search names only a rendered row in aria-activedescendant
+- **ui**: a context menu that reopens elsewhere takes focus again
+- **ui**: map overlays add layers after the frame, not during placement
+- **ui**: the map context menu wires nothing on a non-interactive map
+- **ui**: map search rings kept focus and never sends a pair to suggest
+- **ui**: fullscreen reads nothing without a fullscreen API
+- **ui**: geolocate is a plain action with track off
+- **ui**: coordinates read Mapbox's 512px world and name the copied pair
+- **docs**: chord, treemap and sankey demos keep their heights
+- **charts**: resolveVar leaves the document alone without a DOM
+- **docs**: the battery-swap stage keeps its start edge reachable
+- **docs**: foundations and layout diagrams fit a phone
+- **docs**: device frames scale down to fit a phone's pane
+- **docs**: component specimens fit a phone's preview pane
+- **filter**: the chip's number segments drop their steppers
+- **docs**: the table page's pager drops its arrows on a phone
+- **filter**: a chip wider than its bar wraps its segments
+- **tokens**: the display role steps down to 4xl below 40rem
+- **tokens**: long inline code wraps instead of overflowing its column
+- **docs**: long inline code and prop types wrap instead of widening main
+- **ui**: a vehicle mark's badge outline follows its edge
+- **ui**: ramp swatches abut and round only the ramp's ends
+- **docs**: a context switch keeps a page's live demos mounted
+- **ui**: a bound popup closes on a second click and unbinds on unmount
+- **ui**: a marker is a button only when it acts as one
+- **ui**: FMap applies every padding side and logs each map error
+- **ui**: a track slice no longer bridges a signal gap
+- **ui**: track playback keeps the playhead when the speed changes
+- **ui**: balance maps paint by magnitude, and legends label exactly
+- **charts**: the tooltip snap looks for its panel on pointer entry
+- **ui**: unavailable reasons name a state by its label
+- **ui**: zones ignore a kind they do not know
+- **ui**: a selected vehicle takes its new state on resync
+- **docs**: a cross-page anchored link lands on its target
+- **ui**: useMapReady never runs for a caller that has unmounted
+- **tokens**: area fills keep their opacity under data-theme dark
+- **charts**: crosshair dots sit on stacked band tops
+- **charts**: a fitted London map labels only the areas it draws
+- **charts**: a missing reading breaks a line sparkline
+- **charts**: a dotted map's missing values add nothing
+- **charts**: a selectable London map is reachable at every size
+- **charts**: cell tracks and grids take one Tab stop, props read live
+- **docs**: urgent vehicles draw on top of the fleet
+- **ui**: alt shortcuts select, and deleted features leave the selection
+- **ui**: a crossing edit springs back, and a drag reports once
+- **ui**: selected markers rise, popups are named, one button opens them
+- **ui**: the coordinate tile stays copyable as the pointer moves onto it
+- **ui**: the scale bar's fill is as long as the distance it names
+
 ## 0.3.7 — 2026-09-13
 
 ### Features

package/dataviz/unovis.css

@@ -90,36 +90,34 @@
   --vis-tooltip-title-border-bottom: 1px solid var(--ui-border);
   --vis-tooltip-label-color: var(--ui-text);
   --vis-tooltip-value-color: var(--ui-text-highlighted);
+  --vis-area-fill-opacity: 1;
 }
 
-/* Treemap concentric corners. Unovis draws group and leaf tiles as flat sibling rects sharing one
-   rx, so nesting gets no radius of its own and equal radii read as pinched inner corners. The
-   concentric rule is inner = outer − gap: with the house 8px corner and 4px padding, leaves take
-   4px. Leaves are the only tiles carrying the clickable class (treemapDefaults turns the affordance
+/* Treemap concentric corners. Unovis draws group and leaf tiles as flat sibling rects under one
+   corner rule, so nesting gets no radius of its own and equal radii read as pinched inner corners.
+   The concentric rule is inner = outer − gap: with the house 12px corner and 4px gap, leaves take
+   8px. Leaves are the only tiles carrying the clickable class (treemapDefaults turns the affordance
    on for exactly this reason); rx/ry are SVG geometry properties, so CSS overrides the attribute
    Unovis sets. Matched on the emotion class suffix — Unovis hashes the prefix per build, the label
-   is stable. Separation comes from the padding gap showing the darker group tile beneath, not from
-   a stroke: a stroke on every tile double-borders the nesting. */
+   is stable. Separation comes from the padding gap, not from a stroke: inside a group the gap shows
+   the group tile beneath, and a stroke on every tile double-borders the nesting. */
 rect[class*="-clickable-tile"] {
-  rx: calc(var(--vis-treemap-tile-radius, 8px) - var(--vis-treemap-tile-gap, 4px));
-  ry: calc(var(--vis-treemap-tile-radius, 8px) - var(--vis-treemap-tile-gap, 4px));
+  rx: calc(var(--vis-treemap-tile-radius, 12px) - var(--vis-treemap-tile-gap, 4px));
+  ry: calc(var(--vis-treemap-tile-radius, 12px) - var(--vis-treemap-tile-gap, 4px));
 }
 
-/* Re-centre the central label pair. Unovis anchors both texts on the hole's centre and separates
-   them with dy ±0.55em on each text's OWN font-size, so the block's optical centre always sits
-   above the true centre — and the gap widens with the label size. Shifting by a fraction of the
-   label size restores the centring and keeps it correct if a chart overrides the size locally.
-   dy is an attribute CSS cannot reach; translate composes with the transform attribute Unovis
-   sets, so it is the one lever here.
+/* Re-centre each donut's central label pair. Unovis anchors both texts on the centre with dy
+   ±0.55em on each text's own font size, so the pair sits above the centre; dy is an attribute CSS
+   cannot reach, and translate composes with the transform Unovis sets. The flat donut classes both
+   texts -central-label and sizes them from --vis-donut-*; the nested donut names its second text
+   -central-sub-label and sizes from --vis-nested-donut-*. Both texts of a pair shift equally.
 
-   The two components need separate rules because they disagree twice. The flat donut sizes its
-   label from --vis-donut-*, the nested one from --vis-nested-donut-*, so one shared rule shifts
-   the nested label by half the FLAT donut's 28px. And they class their texts differently: the flat
-   donut gives BOTH texts the -central-label suffix, while the nested one names its second
-   -central-sub-label. Matching only the first suffix therefore moved the nested label down onto a
-   sub-label that stayed put. Both texts of a pair must shift by the same amount — that is what preserves
-   their spacing while re-centring the block. (No backticks in this comment: it lives inside a
-   template literal.) */
+   On a top half donut Unovis has already set the pair on the flat edge, so the shift ends the
+   sub-label about 11px below it at house sizes. In a box less than twice as wide as it is tall the
+   edge sits half the height less a quarter of the width above the SVG's bottom, so the sub-label
+   clips once the width passes twice the height less about 46px (474px at the frame's 260). The markup separates that layout from a bottom half donut or a partial-range gauge only
+   by numbers in its attributes. (No backticks in this comment: it lives inside a template
+   literal.) */
 g[class*="-donut-component"]:not([class*="-nested-donut-component"]) text[class*="-central-label"] {
   translate: 0 calc(0.5 * var(--vis-donut-central-label-font-size, 16px));
 }
@@ -131,8 +129,8 @@ g[class*="-nested-donut-component"] text[class*="-central-sub-label"] {
 
 /* Group labels get their own size. Unovis scales label type to tile area for LEAVES only
    (enableTileLabelFontSizeVariation, gated on the node having no children), so an internal node
-   keeps the flat default
-   however large its group is — a zone heading ends up smaller than the station labels inside it.
+   keeps the flat default however large its group is, and a group heading can end up smaller than
+   the leaf labels inside it.
    Internal nodes carry their own class, so the heading can be sized here; it has to stay within
    the tilePaddingTop strip the group reserves for it. */
 text[class*="-internal-label"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/tokens",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "Forest design tokens — the OKLCH colour engine (src/colourEngine.ts) plus the CSS + JSON it generates via scripts/{scales,type,motion,deck,dataviz,logo}.ts, and the logo SVGs. The generated files are framework-agnostic; do not edit them by hand, run `bun run build`.",
   "files": [
     "CHANGELOG.md",

package/type/type.css

@@ -89,6 +89,14 @@
   --type-overline-transform: uppercase;
 }
 
+/* phone widths, below Tailwind's sm: a single long word in display Mohr is wider than the column and Mohr
+   does not hyphenate, so the role steps down the ramp rather than break the word */
+@media (width < 40rem) {
+  :root {
+    --type-display-size: 2.25rem;
+  }
+}
+
 /* role utility classes — set the whole bundle in one class (text-transform baked in for Mohr/overline) */
 .type-display {
   font-family: var(--type-display-family);
@@ -213,13 +221,15 @@
   }
   /* Inline <code> renders as a boxed chip — the system's inline-code treatment, distinct from the bare
      .type-mono treatment (which is for data: hex, token names, numbers, never boxed). Use <code> for
-     actual code/syntax in prose. Shiki blocks (pre code) opt out below. box-decoration-break keeps the
-     box intact when inline code wraps across lines. */
+     actual code/syntax in prose. Shiki blocks (pre code) opt out below. A long unbroken token (a file
+     path, a generic) breaks anywhere rather than overflowing its column, and box-decoration-break keeps
+     the box intact on every line it wraps across. */
   :not(pre) > code {
     background: var(--ui-bg-elevated);
     border: 1px solid var(--ui-border-muted);
     border-radius: 0.25rem;
     padding: 0.05em 0.35em;
+    overflow-wrap: anywhere;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
   }

package/type/type.json

@@ -228,6 +228,7 @@
       "transform": "uppercase",
       "italicCut": true,
       "fluid": "clamp(2.25rem, 1.5rem + 3vw, 4.5rem)",
+      "narrow": "4xl",
       "cssVar": "--type-display",
       "class": "type-display",
       "contexts": {
@@ -242,7 +243,7 @@
         "marketing": 1,
         "deck": 1
       },
-      "note": "Hero statement, the big Mohr moment. Marketing keeps the full fluid clamp; product web trims it away."
+      "note": "Hero statement, the big Mohr moment. Marketing keeps the full fluid clamp; product web trims it away. Below 40rem it steps down to 4xl, because a single long word in Mohr is wider than a phone column and Mohr does not hyphenate."
     },
     {
       "name": "headline",
@@ -258,6 +259,7 @@
       "transform": "uppercase",
       "italicCut": true,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-headline",
       "class": "type-headline",
       "contexts": {
@@ -288,6 +290,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-title",
       "class": "type-title",
       "contexts": {
@@ -318,6 +321,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-heading-sm",
       "class": "type-heading-sm",
       "contexts": {
@@ -348,6 +352,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-heading-xs",
       "class": "type-heading-xs",
       "contexts": {
@@ -378,6 +383,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-subtitle",
       "class": "type-subtitle",
       "contexts": {
@@ -408,6 +414,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-body",
       "class": "type-body",
       "contexts": {
@@ -438,6 +445,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-body-sm",
       "class": "type-body-sm",
       "contexts": {
@@ -468,6 +476,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-label",
       "class": "type-label",
       "contexts": {
@@ -498,6 +507,7 @@
       "transform": "none",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-caption",
       "class": "type-caption",
       "contexts": {
@@ -528,6 +538,7 @@
       "transform": "uppercase",
       "italicCut": false,
       "fluid": null,
+      "narrow": null,
       "cssVar": "--type-overline",
       "class": "type-overline",
       "contexts": {