svelteplot 0.10.3 → 0.11.0

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

@@ -1,18 +1,164 @@
-import Rect from './Rect.svelte';
-import type { DataRecord } from '../types/index.js';
-import { type ComponentProps } from 'svelte';
+import type { DataRow } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
-interface RectYMarkProps extends Omit<ComponentProps<typeof Rect>, 'y'> {
-    stack?: Partial<StackOptions>;
-}
-declare function $$render<Datum extends DataRecord>(): {
-    props: RectYMarkProps;
+declare function $$render<Datum extends DataRow>(): {
+    props: Omit<Partial<{
+        filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data.js").RawValue>>;
+        facet: "auto" | "include" | "exclude";
+        fx: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        fy: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/data.js").RawValue>>;
+        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", Record<string | symbol, import("../types/data.js").RawValue>>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/data.js").RawValue>>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/data.js").RawValue>>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/data.js").RawValue>>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Record<string | symbol, import("../types/data.js").RawValue>>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Record<string | symbol, import("../types/data.js").RawValue>>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Record<string | symbol, import("../types/data.js").RawValue>>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Record<string | symbol, import("../types/data.js").RawValue>>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Record<string | symbol, import("../types/data.js").RawValue>>;
+        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.js").RawValue, Record<string | symbol, import("../types/data.js").RawValue>>;
+        stroke: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        opacity: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data.js").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data.js").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data.js").RawValue>>;
+        clipPath: string;
+        mask: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data.js").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data.js").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data.js").RawValue>>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/data.js").RawValue>, index: number) => void;
+        class: string;
+        style: string;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/data.js").RawValue>>;
+        title: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data.js").RawValue>>;
+    }> & import("../types/mark.js").LinkableMarkProps<Record<string | symbol, import("../types/data.js").RawValue>> & import("../types/mark.js").BaseRectMarkProps<Record<string | symbol, import("../types/data.js").RawValue>> & {
+        data?: Record<string | symbol, import("../types/data.js").RawValue>[] | undefined;
+        x?: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        x1?: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        x2?: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        y?: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        y1?: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        y2?: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
+        interval?: number | string;
+        class?: string;
+        canvas?: boolean;
+    }, "data" | "y"> & {
+        /** the input data array; each element becomes one rectangle */
+        data?: Datum[];
+        /** options for stacking rect data values */
+        stack?: Partial<StackOptions>;
+    };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Datum extends DataRecord> {
+declare class __sveltets_Render<Datum extends DataRow> {
     props(): ReturnType<typeof $$render<Datum>>['props'];
     events(): ReturnType<typeof $$render<Datum>>['events'];
     slots(): ReturnType<typeof $$render<Datum>>['slots'];
@@ -20,13 +166,13 @@ declare class __sveltets_Render<Datum extends DataRecord> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+    new <Datum extends DataRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
     } & ReturnType<__sveltets_Render<Datum>['exports']>;
-    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /** Convenience wrapper for rectangles oriented along the x axis */
 declare const RectY: $$IsomorphicComponent;
-type RectY<Datum extends DataRecord> = InstanceType<typeof RectY<Datum>>;
+type RectY<Datum extends DataRow> = InstanceType<typeof RectY<Datum>>;
 export default RectY;

package/dist/marks/RegressionX.svelte

@@ -3,24 +3,31 @@
 -->
 
 <script module lang="ts">
-    export type RegressionXMarkProps = RegressionMarkProps;
+    import type { ChannelAccessor } from '../types/index.js';
+    import type { RegressionOptions } from './helpers/Regression.svelte';
+
+    export type RegressionXMarkProps = RegressionOptions & {
+        data?: Record<string | symbol, any>[];
+        z?: ChannelAccessor;
+        canvas?: boolean;
+    };
 </script>
 
 <script lang="ts">
     import { resolveChannel } from '../helpers/resolve.js';
-    import type { ChannelName } from '../types/index.js';
+    import type { ChannelName, DataRecord } from '../types/index.js';
     import Mark from '../Mark.svelte';
-    import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
+    import Regression from './helpers/Regression.svelte';
     import { groups as d3Groups } from 'd3-array';
 
-    let { data = [{}], ...options }: RegressionXMarkProps = $props();
+    let { data = [{} as DataRecord], ...options }: RegressionXMarkProps = $props();
 
     let groupBy: ChannelName | null =
         options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
     // separate groups
     let groups = $derived(
         groupBy !== null
-            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options)).map(
+            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options as any)).map(
                   (g) => g[1]
               )
             : [data]
@@ -29,6 +36,6 @@
 
 <Mark type="regression">
     {#each groups as group, g (g)}
-        <Regression data={group} dependent="x" {...options} />
+        <Regression data={group as any} dependent="x" {...options as any} />
     {/each}
 </Mark>

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

@@ -1,6 +1,11 @@
-export type RegressionXMarkProps = RegressionMarkProps;
-import { type RegressionMarkProps } from './helpers/Regression.svelte';
+import type { ChannelAccessor } from '../types/index.js';
+import type { RegressionOptions } from './helpers/Regression.svelte';
+export type RegressionXMarkProps = RegressionOptions & {
+    data?: Record<string | symbol, any>[];
+    z?: ChannelAccessor;
+    canvas?: boolean;
+};
 /** Calculates and displays a regression line with x as the dependent variable */
-declare const RegressionX: import("svelte").Component<any, {}, "">;
+declare const RegressionX: import("svelte").Component<RegressionXMarkProps, {}, "">;
 type RegressionX = ReturnType<typeof RegressionX>;
 export default RegressionX;

package/dist/marks/RegressionY.svelte

@@ -2,24 +2,31 @@
     Calculates and displays a regression line with y as the dependent variable
 -->
 <script module lang="ts">
-    export type RegressionYMarkProps = RegressionMarkProps;
+    import type { ChannelAccessor } from '../types/index.js';
+    import type { RegressionOptions } from './helpers/Regression.svelte';
+
+    export type RegressionYMarkProps = RegressionOptions & {
+        data?: Record<string | symbol, any>[];
+        z?: ChannelAccessor;
+        canvas?: boolean;
+    };
 </script>
 
 <script lang="ts">
     import { resolveChannel } from '../helpers/resolve.js';
-    import type { ChannelName } from '../types/index.js';
+    import type { ChannelName, DataRecord } from '../types/index.js';
     import Mark from '../Mark.svelte';
-    import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
+    import Regression from './helpers/Regression.svelte';
     import { groups as d3Groups } from 'd3-array';
 
-    let { data = [{}], ...options }: RegressionYMarkProps = $props();
+    let { data = [{} as DataRecord], ...options }: RegressionYMarkProps = $props();
 
     let groupBy: ChannelName | null =
         options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
     // separate groups
     let groups = $derived(
         groupBy !== null
-            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options)).map(
+            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options as any)).map(
                   (g) => g[1]
               )
             : [data]
@@ -28,6 +35,6 @@
 
 <Mark type="regression">
     {#each groups as group, i (i)}
-        <Regression data={group} dependent="y" {...options} />
+        <Regression data={group as any} dependent="y" {...options as any} />
     {/each}
 </Mark>

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

@@ -1,6 +1,11 @@
-export type RegressionYMarkProps = RegressionMarkProps;
-import { type RegressionMarkProps } from './helpers/Regression.svelte';
+import type { ChannelAccessor } from '../types/index.js';
+import type { RegressionOptions } from './helpers/Regression.svelte';
+export type RegressionYMarkProps = RegressionOptions & {
+    data?: Record<string | symbol, any>[];
+    z?: ChannelAccessor;
+    canvas?: boolean;
+};
 /** Calculates and displays a regression line with y as the dependent variable */
-declare const RegressionY: import("svelte").Component<any, {}, "">;
+declare const RegressionY: import("svelte").Component<RegressionYMarkProps, {}, "">;
 type RegressionY = ReturnType<typeof RegressionY>;
 export default RegressionY;

package/dist/marks/RuleX.svelte

@@ -3,13 +3,21 @@
 -->
 <script lang="ts" generics="Datum = DataRecord | RawValue">
     interface RuleXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** the input data array; each element becomes one vertical rule */
         data?: Datum[];
+        /** the horizontal position channel for the rule */
         x?: ChannelAccessor<Datum>;
+        /** the starting vertical position of the rule */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position of the rule */
         y2?: ChannelAccessor<Datum>;
+        /** shorthand to inset the rule from both ends, in pixels */
         inset?: ConstantAccessor<number, Datum>;
+        /** inset the rule from the top, in pixels */
         insetTop?: ConstantAccessor<number, Datum>;
+        /** inset the rule from the bottom, in pixels */
         insetBottom?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
@@ -19,6 +27,7 @@
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import type {
         DataRecord,
+        DataRow,
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
@@ -43,19 +52,17 @@
     });
 
     const plot = usePlot();
-    const args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
+    const args = $derived(
+        recordizeX({ data: data as DataRow[], ...options }, { withIndex: false })
+    );
 </script>
 
-<Mark
-    type="ruleX"
-    channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']}
-    {...markProps}
-    {...args}>
+<Mark type="ruleX" channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         {#if canvas}
             <RuleCanvas
                 data={scaledData}
-                options={args}
+                options={args as any}
                 {usedScales}
                 orientation="vertical"
                 marginTop={plot.options.marginTop}
@@ -65,13 +72,13 @@
                 class="rule-x {className || ''}"
                 length={className ? 2 : scaledData.length}>
                 {#each scaledData as d, i (i)}
-                    {@const inset = resolveProp(args.inset, d.datum, 0)}
-                    {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
-                    {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
+                    {@const inset = resolveProp(args.inset, d.datum, 0) as number}
+                    {@const insetTop = resolveProp(args.insetTop, d.datum, 0) as number}
+                    {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0) as number}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         d,
-                        args,
+                        args as any,
                         'stroke',
                         usedScales
                     )}

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

@@ -7,10 +7,20 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        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: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -24,53 +34,123 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         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>;
     }>, "fill" | "fillOpacity"> & {
+        /** the input data array; each element becomes one vertical rule */
         data?: Datum[];
+        /** the horizontal position channel for the rule */
         x?: ChannelAccessor<Datum>;
+        /** the starting vertical position of the rule */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position of the rule */
         y2?: ChannelAccessor<Datum>;
+        /** shorthand to inset the rule from both ends, in pixels */
         inset?: ConstantAccessor<number, Datum>;
+        /** inset the rule from the top, in pixels */
         insetTop?: ConstantAccessor<number, Datum>;
+        /** inset the rule from the bottom, in pixels */
         insetBottom?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     };
     exports: {};