@humanforest/charts 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/charts",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "src"
@@ -24,7 +24,7 @@
     "vue": "^3.5.22"
   },
   "dependencies": {
-    "@humanforest/tokens": "^0.1.2"
+    "@humanforest/tokens": "^0.2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/FCalendarGrid.vue

@@ -269,7 +269,7 @@ const hasEmpty = computed(() =>
             >{{ m.label }}</span>
           </div>
 
-          <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+          <UTooltip :text="tip.text" :reference="tip.el ?? undefined" :open="tipOpen">
           <div class="relative" :role="interactive ? 'group' : 'img'" :aria-label="gridLabel">
             <div class="flex" :style="{ gap: `${cellGap}px` }">
               <div v-for="(week, wi) in weeks" :key="wi" class="flex flex-col" :style="{ gap: `${cellGap}px` }">

package/src/FDistributionBar.vue

@@ -159,7 +159,7 @@ const hideTip = () => {
          wrong the moment the segments are buttons — the buttons would be hidden from the very
          readers the role is for. Interactive, it becomes a labelled group whose children stay
          reachable, and each segment states itself. -->
-    <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+    <UTooltip :text="tip.text" :reference="tip.el ?? undefined" :open="tipOpen">
       <div
         class="grid w-full"
         :role="interactive ? 'group' : 'img'"

package/src/FDottedMap.vue

@@ -247,7 +247,9 @@ const tipOpen = ref(false);
 const tipReference = computed(() =>
   tip.value.box
     ? { getBoundingClientRect: () => new DOMRect(tip.value.box!.x, tip.value.box!.y, tip.value.box!.w, tip.value.box!.h) }
-    : null,
+    // `undefined`, not `null`: UTooltip's `reference` is `ReferenceElement | undefined`, and a
+    // consumer's own typecheck reads this source — `null` is an error they cannot fix.
+    : undefined,
 );
 
 // One listener on an overlay, rather than one per dot. The grid is regular, so the dot under the

package/src/FLondonMap.vue

@@ -310,7 +310,7 @@ const labelled = computed<AreaDatum[]>(() => {
            package, so a class used only here is never generated and the rule silently does
            nothing. width and height stay attributes for the intrinsic size, and height:auto is
            what keeps the aspect once max-width takes over in a container narrower than the map. -->
-      <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+      <UTooltip :text="tip.text" :reference="tip.el ?? undefined" :open="tipOpen">
       <svg
         :width="width"
         :height="height"

package/src/FSparkline.vue

@@ -32,7 +32,16 @@ const props = withDefaults(
      * this period sits above day one of the last. A shorter run simply stops early.
      */
     compare?: (number | null)[];
-    /** Any CSS colour. Defaults to the current text colour, so it inherits the tile's intent. */
+    /**
+     * Any CSS colour. Defaults to the brand accent, which flips with the mode on its own.
+     *
+     * ★ `currentColor` WAS THE DEFAULT AND IT WAS WRONG. A tile does not pass its intent down to the
+     * `visual` slot — FKpi colours `metric` and `delta`, never the root — so inheriting there picks
+     * up body ink whatever the tile's status, and a sparkline dropped on any surface renders in the
+     * surrounding text colour. That shipped: one chart in near-black beside four in Forest green.
+     * Every call site in this repo already passed `var(--ui-primary)` by hand, which is the tell.
+     * Pass `currentColor` explicitly for one set inline in a sentence, where inking as text is right.
+     */
     color?: string;
     /** The comparison line's colour. Defaults to the series colour at low opacity. */
     compareColor?: string;
@@ -62,7 +71,7 @@ const props = withDefaults(
      */
     mark?: 'line' | 'bar';
   }>(),
-  { height: 32, color: 'currentColor', area: false, endpoint: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
+  { height: 32, color: 'var(--ui-primary)', area: false, endpoint: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
 );
 
 if (import.meta.env.DEV) {

package/src/FStatusTrack.vue

@@ -109,7 +109,7 @@ const hideTip = () => {
   <div class="flex w-full flex-col gap-2">
     <div class="flex items-center gap-3">
       <span v-if="label && showChrome" class="type-label shrink-0 text-default">{{ label }}</span>
-      <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+      <UTooltip :text="tip.text" :reference="tip.el ?? undefined" :open="tipOpen">
         <div
           class="flex min-w-0 flex-1"
           :role="interactive ? 'group' : 'img'"