fix(Text): Allow negative string values (e.g. y="-6") in position props to be treated as pixel values instead of data property names

Author: techniq

.changeset/fix-text-negative-string-position.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Allow negative string values (e.g. `y="-6"`) in `Text` position props to be treated as pixel values instead of data property names

docs/src/examples/components/GeoPoint/icons.svelte

@@ -38,7 +38,7 @@
 					<!-- TODO: How best to support canvas? -->
 					<LucideStar class="text-danger text-[8px]" x={-5} y={-5} />
 					<Text
-						y="-6"
+						y={-6}
 						value={capital.description}
 						textAnchor="middle"
 						class="text-[8px] stroke-surface-100 stroke-[2px]"

docs/src/examples/components/GeoPoint/us-state-capitals.svelte

@@ -37,7 +37,7 @@
 					<GeoPoint lat={capital.latitude} long={capital.longitude}>
 						<Circle r={2} class="fill-white stroke-danger" />
 						<Text
-							y="-6"
+							y={-6}
 							value={capital.description}
 							textAnchor="middle"
 							class="text-[8px] stroke-surface-100 [stroke-width:2px]"

docs/src/examples/components/GeoPoint/world-capitals.svelte

@@ -65,7 +65,7 @@
 					>
 						<Circle r={4} class="stroke-primary/50 fill-none" />
 						<Text
-							y="-6"
+							y={-6}
 							value={context.tooltip.data.label}
 							textAnchor="middle"
 							class="text-[8px] stroke-surface-100 stroke-[2px]"

packages/layerchart/src/lib/components/Text.svelte

@@ -10,7 +10,7 @@
    * rather than a data property accessor.
    */
   function isCSSValue(value: string): boolean {
-    return /^[\d.]+(%|em|rem|px|pt|cm|mm|in)?$/.test(value);
+    return /^-?[\d.]+(%|em|rem|px|pt|cm|mm|in)?$/.test(value);
   }
 
   /**