[Draft] Ts fixes

src/_components/Area-D3.svelte

@@ -8,7 +8,7 @@
 
 	const { data, xGet, yGet, yScale } = getContext('LayerCake');
 
-	/** @type {String} [fill='#ab00d610'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+	/** @type {string} [fill='#ab00d610'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
 	export let fill = '#ab00d610';
 
 	/** @type {Function} [curve=curveLinear] - An optional D3 interpolation function. See [d3-shape](https://github.com/d3/d3-shape#curves) for options. Pass this function in uncalled, i.e. without the open-close parentheses. */

src/_components/Area.svelte

@@ -7,7 +7,7 @@
 
 	const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');
 
-	/**	@type {String} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+	/**	@type {string} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
 	export let fill = '#ab00d610';
 
 	$: path =
@@ -18,7 +18,7 @@
 			})
 			.join('L');
 
-	/**	@type {String} **/
+	/**	@type {string} **/
 	let area;
 
 	$: {

src/_components/ArrowheadMarker.svelte

@@ -3,10 +3,10 @@
 	Generates an SVG marker containing a marker for a triangle makes a nice arrowhead. Add it to the named slot called "defs" on the SVG layout component.
  -->
 <script>
-	/** @type {String} [fill='#000'] – The arrowhead's fill color. */
+	/** @type {string} [fill='#000'] – The arrowhead's fill color. */
 	export let fill = '#000';
 
-	/** @type {String} [stroke='#000'] – The arrowhead's fill color. */
+	/** @type {string} [stroke='#000'] – The arrowhead's fill color. */
 	export let stroke = '#000';
 </script>
 

src/_components/Arrows.svelte

@@ -9,10 +9,10 @@
 	/** @type {Array} annotations - A list of annotation objects. See the [Column](https://layercake.graphics/example/Column) chart example for the schema and options. */
 	export let annotations = [];
 
-	/** @type {String} [annotationClass='.layercake-annotation'] - The class name of the text annotation divs. */
+	/** @type {string} [annotationClass='.layercake-annotation'] - The class name of the text annotation divs. */
 	export let containerClass = '.chart-container';
 
-	/** @type {String} [containerClass='.chart-container'] - The class name / CSS selector of the parent element of the `<LayerCake>` component. This is used to crawl the DOM for the text annotations. */
+	/** @type {string} [containerClass='.chart-container'] - The class name / CSS selector of the parent element of the `<LayerCake>` component. This is used to crawl the DOM for the text annotations. */
 	export let annotationClass = '.layercake-annotation';
 
 	let container;

src/_components/AxisRadial.svelte

@@ -7,10 +7,10 @@
 
 	const { width, height, xScale, extents, config } = getContext('LayerCake');
 
-	/** @type {Number} [lineLengthFactor=1.1] - How far to extend the lines from the circle's center. A value of `1` puts them at the circle's circumference. */
+	/** @type {number} [lineLengthFactor=1.1] - How far to extend the lines from the circle's center. A value of `1` puts them at the circle's circumference. */
 	export let lineLengthFactor = 1.1;
 
-	/** @type {Number} [labelPlacementFactor=1.25] - How far to place the labels from the circle's center. A value of `1` puts them at the circle's circumference. */
+	/** @type {number} [labelPlacementFactor=1.25] - How far to place the labels from the circle's center. A value of `1` puts them at the circle's circumference. */
 	export let labelPlacementFactor = 1.25;
 
 	$: max = $xScale(Math.max(...$extents.x));
@@ -20,8 +20,8 @@
 
 	$: angleSlice = (Math.PI * 2) / $config.x.length;
 
-	/** @param {Number} total
-	 *  @param {Number} i */
+	/** @param {number} total
+	 *  @param {number} i */
 	function anchor(total, i) {
 		if (i === 0 || i === total / 2) {
 			return 'middle';

src/_components/AxisX.percent-range.html.svelte

@@ -15,7 +15,7 @@
 	/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	/** @type {number} [tickMarkLength=6] - The length of the tick mark. */
 	export let tickMarkLength = 6;
 
 	/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -27,19 +27,19 @@
 	/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
 	export let format = d => d;
 
-	/** @type {Number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	/** @type {number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
 	export let ticks = undefined;
 
-	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	/** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
 	export let tickGutter = 0;
 
-	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	/** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
 	export let dx = 0;
 
-	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	/** @type {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = 0;
 
-	/** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+	/** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
 	export let units = $percentRange === true ? '%' : 'px';
 
 	$: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;

src/_components/AxisX.svelte

@@ -13,7 +13,7 @@
 	/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	/** @type {number} [tickMarkLength=6] - The length of the tick mark. */
 	export let tickMarkLength = 6;
 
 	/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -25,20 +25,21 @@
 	/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
 	export let format = d => d;
 
-	/** @type {Number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	/** @type {number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
 	export let ticks = undefined;
 
-	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	/** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
 	export let tickGutter = 0;
 
-	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	/** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
 	export let dx = 0;
 
-	/** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
+	/** @type {number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = 12;
 
-	/**@param {Number} i
-	 * @param {boolean} sl */
+
+	/** @param {number} i
+	 *  @param {boolean} sl */
 	function textAnchor(i, sl) {
 		if (sl === true) {
 			if (i === 0) {

src/_components/AxisXTop.percent-range.html.svelte

@@ -15,7 +15,7 @@
 	/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	/** @type {number} [tickMarkLength=6] - The length of the tick mark. */
 	export let tickMarkLength = 6;
 
 	/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -27,19 +27,19 @@
 	/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
 	export let format = d => d;
 
-	/** @type {Number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	/** @type {number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
 	export let ticks = undefined;
 
-	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	/** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
 	export let tickGutter = 0;
 
-	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	/** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
 	export let dx = 0;
 
-	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	/** @type {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = 0;
 
-	/** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+	/** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
 	export let units = $percentRange === true ? '%' : 'px';
 
 	$: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;

src/_components/AxisXTop.svelte

@@ -13,7 +13,7 @@
 	/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	/** @type {number} [tickMarkLength=6] - The length of the tick mark. */
 	export let tickMarkLength = 6;
 
 	/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -25,20 +25,20 @@
 	/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
 	export let format = d => d;
 
-	/** @type {Number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	/** @type {number|Array<any>|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
 	export let ticks = undefined;
 
-	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	/** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
 	export let tickGutter = 0;
 
-	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	/** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
 	export let dx = 0;
 
-	/** @type {Number} [dy=-4] - Any optional value passed to the `dy` attribute on the text label. */
+	/** @type {number} [dy=-4] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = -4;
 
-	/**@param {Number} i
-	 * @param {boolean} sl */
+	/** @param {number} i
+	 *  @param {boolean} sl */
 	function textAnchor(i, sl) {
 		if (sl === true) {
 			if (i === 0) {

src/_components/AxisY.percent-range.html.svelte

@@ -12,7 +12,7 @@
 	/** @type {boolean} [tickMarks=false] - Show marks next to the tick label. */
 	export let tickMarks = false;
 
-	/** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+	/** @type {string} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
 	export let labelPosition = 'even';
 
 	/** @type {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
@@ -21,28 +21,28 @@
 	/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+	/** @type {number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
 	export let tickMarkLength = undefined;
 
 	/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
 	export let format = d => d;
 
-	/** @type {Number|Array<any>|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+	/** @type {number|Array<any>|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
 	export let ticks = 4;
 
-	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	/** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
 	export let tickGutter = 0;
 
-	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	/** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
 	export let dx = 0;
 
-	/** @type {Number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
+	/** @type {number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = -3;
 
-	/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+	/** @type {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
 	export let charPixelWidth = 7.25;
 
-	/** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+	/** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
 	export let units = $percentRange === true ? '%' : 'px';
 
 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
@@ -56,7 +56,7 @@
 				? ticks($yScale.ticks())
 				: $yScale.ticks(ticks);
 
-	/** @param {Number} sum
+	/** @param {number} sum
 	 *  @param {String} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;