svelteplot 0.10.3 → 0.11.0

package/dist/marks/Frame.svelte.d.ts

@@ -3,77 +3,160 @@ declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
-        fx: import("../types/channel").ChannelAccessor<Datum>;
-        fy: import("../types/channel").ChannelAccessor<Datum>;
+        fx: import("../types/channel.js").ChannelAccessor<Datum>;
+        fy: import("../types/channel.js").ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: import("../types/channel").ChannelAccessor<Datum>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: import("../types/channel.js").ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Datum>;
-        stroke: import("../types/channel").ChannelAccessor<Datum>;
+        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        stroke: import("../types/channel.js").ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
         strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
         strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: import("../types/channel").ChannelAccessor<Datum>;
+        opacity: import("../types/channel.js").ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }>, "fill" | "fillOpacity" | "stroke" | "strokeOpacity"> & BaseRectMarkProps<Datum> & LinkableMarkProps<Datum> & {
-        fill?: string;
-        stroke?: string;
+        /** the fill color of the frame; true maps to 'currentColor' */
+        fill?: string | boolean;
+        /** the stroke color of the frame; true maps to 'currentColor' */
+        stroke?: string | boolean;
+        /** the fill opacity of the frame */
         fillOpacity?: number;
+        /** the stroke opacity of the frame */
         strokeOpacity?: number;
+        /** the overall opacity of the frame */
         opacity?: number;
+        /** whether this frame was automatically added by the Plot component */
         automatic?: boolean;
+        /** shorthand to inset the frame from all edges, in pixels */
         inset?: number;
+        /** inset the frame from the left edge, in pixels */
         insetLeft?: number;
+        /** inset the frame from the right edge, in pixels */
         insetRight?: number;
+        /** inset the frame from the top edge, in pixels */
         insetTop?: number;
+        /** inset the frame from the bottom edge, in pixels */
         insetBottom?: number;
     };
     exports: {};

package/dist/marks/Geo.svelte

@@ -3,7 +3,9 @@
 -->
 <script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
     interface GeoMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input GeoJSON data array */
         data?: Datum[] | { type: 'Sphere' }[];
+        /** internal: whether this is a sphere or graticule geo mark */
         geoType?: 'sphere' | 'graticule';
         /**
          * todo: implement?
@@ -21,6 +23,7 @@
          * radius for point features
          */
         r?: ChannelAccessor<Datum>;
+        /** SVG filter attribute applied to each geo path element */
         svgFilter?: ConstantAccessor<string | undefined, Datum>;
     }
     import type {
@@ -64,17 +67,19 @@
     });
 
     const path = $derived(
-        callWithProps(geoPath, [plot.scales.projection], {
-            ...(options.r
-                ? { pointRadius: (d) => plot.scales.r.fn(resolveChannel('r', d, options)) }
-                : { pointRadius: 3 })
-        })
+        callWithProps(
+            geoPath,
+            [plot.scales.projection],
+            options.r
+                ? { pointRadius: (d: any) => plot.scales.r.fn(resolveChannel('r', d, options)) }
+                : { pointRadius: 3 }
+        )
     );
 
     const args = $derived(
         sort(
             recordize({
-                data,
+                data: data as any[],
                 ...(options.r ? { sort: { channel: '-r' } } : {}),
                 ...options
             })
@@ -96,24 +101,28 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        <Anchor {options} datum={d.datum}>
+                        <Anchor options={options as any} datum={d.datum}>
                             {@const title = resolveProp(args.title, d.datum, '')}
                             {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
                             {@const [style, styleClass] = resolveStyles(
                                 plot,
                                 d,
-                                args,
-                                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                                args as any,
+                                GEOJSON_PREFER_STROKE.has((geometry as any)?.type)
+                                    ? 'stroke'
+                                    : 'fill',
                                 usedScales
                             )}
                             <path
-                                d={path(geometry)}
+                                d={path(geometry as any)}
                                 {style}
                                 class={[styleClass]}
-                                filter={resolveProp(args.svgFilter, d.datum, undefined)}
+                                filter={resolveProp(args.svgFilter, d.datum, undefined) as
+                                    | string
+                                    | undefined}
                                 {@attach addEventHandlers({
                                     plot,
-                                    options: args,
+                                    options: args as any,
                                     datum: d?.datum
                                 })}>
                                 {#if title}<title>{title}</title>{/if}

package/dist/marks/Geo.svelte.d.ts

@@ -11,6 +11,16 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -24,49 +34,113 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }> & LinkableMarkProps<Datum> & {
+        /** the input GeoJSON data array */
         data?: Datum[] | {
             type: "Sphere";
         }[];
+        /** internal: whether this is a sphere or graticule geo mark */
         geoType?: "sphere" | "graticule";
         /**
          * todo: implement?
@@ -84,6 +158,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
          * radius for point features
          */
         r?: ChannelAccessor<Datum>;
+        /** SVG filter attribute applied to each geo path element */
         svgFilter?: ConstantAccessor<string | undefined, Datum>;
     };
     exports: {};

package/dist/marks/Graticule.svelte

@@ -7,8 +7,11 @@
         BaseMarkProps<GeoJSON.GeoJsonObject>,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'
     > {
+        /** the step size for both longitude and latitude gridlines in degrees */
         step?: number;
+        /** the step size for longitude gridlines in degrees */
         stepX?: number;
+        /** the step size for latitude gridlines in degrees */
         stepY?: number;
     }
     import Geo from './Geo.svelte';

package/dist/marks/Graticule.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { BaseMarkProps } from '../types/index.js';
 interface GraticuleMarkProps extends Omit<BaseMarkProps<GeoJSON.GeoJsonObject>, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'> {
+    /** the step size for both longitude and latitude gridlines in degrees */
     step?: number;
+    /** the step size for longitude gridlines in degrees */
     stepX?: number;
+    /** the step size for latitude gridlines in degrees */
     stepY?: number;
 }
 /** Renders a geographic graticule grid with customizable step sizes */

package/dist/marks/GridX.svelte

@@ -3,27 +3,40 @@
 -->
 <script lang="ts" generics="Datum = RawValue">
     interface GridXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** custom values at which to draw vertical gridlines */
         data?: Datum[];
+        /** whether these gridlines were automatically added by the Plot component */
         automatic?: boolean;
+        /** the starting vertical position of the gridline */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position of the gridline */
         y2?: ChannelAccessor<Datum>;
     }
     import Mark from '../Mark.svelte';
-    import type { BaseMarkProps, RawValue, DataRecord, ChannelAccessor } from '../types/index.js';
+    import type {
+        BaseMarkProps,
+        RawValue,
+        DataRecord,
+        ChannelAccessor,
+        ScaledDataRecord
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
-    import isDataRecord from '../helpers/isDataRecord';
-    import { INDEX } from '../constants';
+    import isDataRecord from '../helpers/isDataRecord.js';
+    import { INDEX } from '../constants.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: GridXMarkProps = $props();
 
+    const _plotDefaults = getPlotDefaults();
+    const _grid = _plotDefaults.grid;
+    const _gridX = _plotDefaults.gridX;
     const DEFAULTS = {
-        ...getPlotDefaults().grid,
-        ...getPlotDefaults().gridX
+        ...(_grid != null && _grid !== true ? _grid : {}),
+        ...(_gridX != null && _gridX !== true ? _gridX : {})
     };
 
     const {
@@ -55,37 +68,39 @@
                   autoTickCount
               )
         ).map((d, i) =>
-            isDataRecord(d) ? { ...d, [INDEX]: i } : { [RAW_VALUE]: d, [INDEX]: i }
+            isDataRecord(d) ? { ...d, [INDEX]: i } : { [RAW_VALUE]: d as RawValue, [INDEX]: i }
         ) as DataRecord[]
     );
 </script>
 
 <Mark
     type="gridX"
-    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick as RawValue })) : []}
     channels={['y1', 'y2', 'x', 'stroke', 'strokeOpacity']}
-    {...{ ...options, x: RAW_VALUE }}
+    {...{ ...options, x: RAW_VALUE } as any}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">
             {#each ticks as tick, t (t)}
-                {#if testFilter(tick, options)}
+                {#if testFilter(tick as any, options as any)}
                     {@const x =
                         plot.scales.x.fn(tick[RAW_VALUE]) +
                         (plot.scales.x.type === 'band' ? plot.scales.x.fn.bandwidth() * 0.5 : 0)}
-                    {@const y1_ = resolveChannel('y1', tick, options)}
-                    {@const y2_ = resolveChannel('y2', tick, options)}
-                    {@const dx = +resolveProp(options?.dx, tick, 0)}
-                    {@const dy = +resolveProp(options?.dy, tick, 0)}
+                    {@const y1_ = resolveChannel('y1', tick as any, options as any)}
+                    {@const y2_ = resolveChannel('y2', tick as any, options as any)}
+                    {@const dx = resolveProp(options.dx, tick as any, 0) ?? 0}
+                    {@const dy = resolveProp(options.dy, tick as any, 0) ?? 0}
                     {@const y1 =
-                        options.y1 != null ? plot.scales.y.fn(y1_) : plot.options.marginTop}
+                        options.y1 != null && y1_ != null
+                            ? plot.scales.y.fn(y1_)
+                            : plot.options.marginTop}
                     {@const y2 =
-                        options.y2 != null
+                        options.y2 != null && y2_ != null
                             ? plot.scales.y.fn(y2_)
                             : plot.options.marginTop + plot.facetHeight}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
-                        { datum: tick },
+                        { datum: tick } as ScaledDataRecord,
                         options,
                         'stroke',
                         usedScales,