Lower-case String type synonym

See discussion in mhkeller#218

While 'String' is a valid JSDoc type synonym the lower-case variant
is used to avoid confusion.

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/AxisX.percent-range.html.svelte

@@ -39,7 +39,7 @@
 	/** @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.percent-range.html.svelte

@@ -39,7 +39,7 @@
 	/** @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/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. */
@@ -42,7 +42,7 @@
 	/** @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';
@@ -57,7 +57,7 @@
 				: $yScale.ticks(ticks);
 
 	/** @param {Number} sum
-	 *  @param {String} val */
+	 *  @param {string} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

src/_components/AxisY.svelte

@@ -10,7 +10,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. */
@@ -52,7 +52,7 @@
 				: $yScale.ticks(ticks);
 
 	/** @param {Number} sum
-	 *  @param {String} val */
+	 *  @param {string} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

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

@@ -12,7 +12,7 @@
 	/** @type {Boolean} [tickMarks=true] - Show marks next to the tick label. */
 	export let tickMarks = true;
 
-	/** @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. */
@@ -42,7 +42,7 @@
 	/** @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';
@@ -57,7 +57,7 @@
 				: $yScale.ticks(ticks);
 
 	/** @param {Number} sum
-	 *  @param {String} val */
+	 *  @param {string} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

src/_components/AxisYRight.svelte

@@ -10,7 +10,7 @@
 	/** @type {Boolean} [tickMarks=false] - Show marks next to the tick label. */
 	export let tickMarks = false;
 
-	/** @type {String} [labelPosition='above'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. */
+	/** @type {string} [labelPosition='above'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. */
 	export let labelPosition = 'above';
 
 	/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
@@ -52,7 +52,7 @@
 				: $yScale.ticks(ticks);
 
 	/** @param {Number} sum
-	 *  @param {String} val */
+	 *  @param {string} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

src/_components/Bar.svelte

@@ -7,7 +7,7 @@
 
 	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
 
-	/** @type {String} [fill='#00bbff'] - 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='#00bbff'] - 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 = '#00bbff';
 </script>
 

src/_components/Beeswarm.html.svelte

@@ -13,7 +13,7 @@
 	/** @type {Number} [strokeWidth=0] - The circle's stroke width in pixels. */
 	export let strokeWidth = 0;
 
-	/** @type {String} [stroke='#fff'] - The circle's stroke color. */
+	/** @type {string} [stroke='#fff'] - The circle's stroke color. */
 	export let stroke = '#fff';
 
 	/** @type {Number} [spacing=1.5] - Spacing, in pixels, between each circle. */

src/_components/Beeswarm.svelte

@@ -13,7 +13,7 @@
 	/** @type {Number} [strokeWidth=0] - The circle's stroke width in pixels. */
 	export let strokeWidth = 0;
 
-	/** @type {String} [stroke='#fff'] - The circle's stroke color. */
+	/** @type {string} [stroke='#fff'] - The circle's stroke color. */
 	export let stroke = '#fff';
 
 	/** @type {Number} [spacing=1.5] - Whitespace padding between each circle, in pixels */

src/_components/BeeswarmForce.html.svelte

@@ -16,7 +16,7 @@
 	/** @type {Number} [strokeWidth=0.5] - The circle's stroke width in pixels. */
 	export let strokeWidth = 0.5;
 
-	/** @type {String} [stroke='#fff'] - The circle's stroke color. */
+	/** @type {string} [stroke='#fff'] - The circle's stroke color. */
 	export let stroke = '#fff';
 
 	/** @type {Number} [xStrength=0.95] - The value passed into the `.strength` method on `forceX`, which is used as the `'x'` property on the simulation. See [the documentation](/~https://github.com/d3/d3-force#x_strength) for more. */

src/_components/BeeswarmForce.svelte

@@ -16,7 +16,7 @@
 	/** @type {Number} [strokeWidth=1] - The circle's stroke width in pixels. */
 	export let strokeWidth = 1;
 
-	/** @type {String} [stroke='#fff'] - The circle's stroke color. */
+	/** @type {string} [stroke='#fff'] - The circle's stroke color. */
 	export let stroke = '#fff';
 
 	/** @type {Number} [xStrength=0.95] - The value passed into the `.strength` method on `forceX`. See [the documentation](/~https://github.com/d3/d3-force#x_strength). */

src/_components/CirclePack.html.svelte

@@ -9,31 +9,31 @@
 
 	const { width, height, data } = getContext('LayerCake');
 
-	/** @type {String} [idKey='id'] - The key on each object where the id value lives. */
+	/** @type {string} [idKey='id'] - The key on each object where the id value lives. */
 	export let idKey = 'id';
 
-	/** @type {String|undefined} [parentKey] - Set this if you want to define one parent circle. This will give you a [nested](https://layercake.graphics/example/CirclePackNested) graphic versus a [grouping of circles](https://layercake.graphics/example/CirclePack). */
+	/** @type {string|undefined} [parentKey] - Set this if you want to define one parent circle. This will give you a [nested](https://layercake.graphics/example/CirclePackNested) graphic versus a [grouping of circles](https://layercake.graphics/example/CirclePack). */
 	export let parentKey = undefined;
 
-	/** @type {String} [valueKey='value'] - The key on each object where the data value lives. */
+	/** @type {string} [valueKey='value'] - The key on each object where the data value lives. */
 	export let valueKey = 'value';
 
 	/** @type {Function} [labelVisibilityThreshold=r => r > 25] - By default, only show the text inside a circle if its radius exceeds a certain size. Provide your own function for different behavior. */
 	export let labelVisibilityThreshold = r => r > 25;
 
-	/** @type {String} [fill='#fff'] - The circle's fill color. */
+	/** @type {string} [fill='#fff'] - The circle's fill color. */
 	export let fill = '#fff';
 
-	/** @type {String} [stroke='#999'] - The circle's stroke color. */
+	/** @type {string} [stroke='#999'] - The circle's stroke color. */
 	export let stroke = '#999';
 
 	/** @type {Number} [strokeWidth=1] - The circle's stroke width, in pixels. */
 	export let strokeWidth = 1;
 
-	/** @type {String} [textColor='#333'] - The label text color. */
+	/** @type {string} [textColor='#333'] - The label text color. */
 	export let textColor = '#333';
 
-	/** @type {String} [textStroke='#000'] - The label text's stroke color. */
+	/** @type {string} [textStroke='#000'] - The label text's stroke color. */
 	export let textStroke = '#000';
 
 	/** @type {Number} [textStrokeWidth=0] - The label text's stroke width, in pixels. */

src/_components/CirclePackForce.svelte

@@ -14,10 +14,10 @@
 	/** @type {Number} [xStrength=0.1] - The value passed into the `.strength` method on `forceX`, which is used as the `'x'` property on the simulation. See [the documentation](/~https://github.com/d3/d3-force#x_strength) for more. */
 	export let xStrength = 0.1;
 
-	/** @type {String|undefined} [nodeColor] Set a color manually otherwise it will default to the `zScale`. */
+	/** @type {string|undefined} [nodeColor] Set a color manually otherwise it will default to the `zScale`. */
 	export let nodeColor = undefined;
 
-	/** @type {String} [nodeStroke='#fff'] - The circle's stroke color. */
+	/** @type {string} [nodeStroke='#fff'] - The circle's stroke color. */
 	export let nodeStroke = '#fff';
 
 	/** @type {Number} [nodeStrokeWidth=1] - The circle's stroke width, in pixels. */

src/_components/Column.svelte

@@ -7,10 +7,10 @@
 
 	const { data, xGet, yGet, x, yRange, xScale, y, height } = getContext('LayerCake');
 
-	/** @type {String} [fill='#00e047'] - The shape's fill color. */
+	/** @type {string} [fill='#00e047'] - The shape's fill color. */
 	export let fill = '#00e047';
 
-	/** @type {String} [stroke='#000'] - The shape's stroke color. */
+	/** @type {string} [stroke='#000'] - The shape's stroke color. */
 	export let stroke = '#000';
 
 	/** @type {Number} [strokeWidth=0] - The shape's stroke width. */

src/_components/Key.html.svelte

@@ -5,10 +5,10 @@
 <script>
 	import { getContext } from 'svelte';
 
-	/** @type {String} [shape='square'] - The shape for each item. Can be 'circle', 'line', or 'square'; */
+	/** @type {string} [shape='square'] - The shape for each item. Can be 'circle', 'line', or 'square'; */
 	export let shape = 'square';
 
-	/** @type {String} [align='start'] - Sets the CSS flexbox justify-content setting for the box as a whole. Can be 'start', 'center' or 'end'. */
+	/** @type {string} [align='start'] - Sets the CSS flexbox justify-content setting for the box as a whole. Can be 'start', 'center' or 'end'. */
 	export let align = 'start';
 
 	/** @type {Function|Object|undefined} [lookup] - Either a function that takes the value and returns a formatted string, or an object of values. If a given value is not present in a lookup object, it returns the original value. */

src/_components/Line-D3.svelte

@@ -8,7 +8,7 @@
 
 	const { data, xGet, yGet } = getContext('LayerCake');
 
-	/** @type {String} [stroke='#ab00d6'] - 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} [stroke='#ab00d6'] - 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 stroke = '#ab00d6';
 
 	/** @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/Line.svelte

@@ -7,7 +7,7 @@
 
 	const { data, xGet, yGet } = getContext('LayerCake');
 
-	/** @type {String} [stroke='#ab00d6'] - 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} [stroke='#ab00d6'] - 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 stroke = '#ab00d6';
 
 	$: path =

src/_components/Map.canvas.svelte

@@ -14,13 +14,13 @@
 	/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
 	export let projection;
 
-	/** @type {String} [stroke='#ccc'] - The shape's stroke color. */
+	/** @type {string} [stroke='#ccc'] - The shape's stroke color. */
 	export let stroke = '#ccc';
 
 	/** @type {Number} [strokeWidth=1] - The shape's stroke width. */
 	export let strokeWidth = 1;
 
-	/** @type {String|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
+	/** @type {string|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
 	export let fill = undefined;
 
 	/** @type {Array|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset. */

src/_components/Map.svg.svelte

@@ -15,10 +15,10 @@
 	/** @type {Number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
 	export let fixedAspectRatio = undefined;
 
-	/** @type {String|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
+	/** @type {string|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
 	export let fill = undefined;
 
-	/** @type {String} [stroke='#333'] - The shape's stroke color. */
+	/** @type {string} [stroke='#333'] - The shape's stroke color. */
 	export let stroke = '#333';
 
 	/** @type {Number} [strokeWidth=0.5] - The shape's stroke width. */

src/_components/MapPoints.canvas.svelte

@@ -16,10 +16,10 @@
 	/** @type {Number} [r=3.5] - The point's radius. */
 	export let r = 3.5;
 
-	/** @type {String} [fill='yellow'] - The point's fill color. */
+	/** @type {string} [fill='yellow'] - The point's fill color. */
 	export let fill = 'yellow';
 
-	/** @type {String} [stroke='#000'] - The point's stroke color. */
+	/** @type {string} [stroke='#000'] - The point's stroke color. */
 	export let stroke = '#000';
 
 	/** @type {Number} [strokeWidth=1] - The point's stroke width. */

src/_components/MapPoints.html.svelte

@@ -13,10 +13,10 @@
 	/** @type {Number} [r=3.5] - The point's radius. */
 	export let r = 3.5;
 
-	/** @type {String} [fill='yellow'] - The point's fill color. */
+	/** @type {string} [fill='yellow'] - The point's fill color. */
 	export let fill = 'yellow';
 
-	/** @type {String} [stroke='#000'] - The point's stroke color. */
+	/** @type {string} [stroke='#000'] - The point's stroke color. */
 	export let stroke = '#000';
 
 	/** @type {Number} [strokeWidth=1] - The point's stroke width, in pixels. */