svelteplot 0.2.6-next.5 → 0.2.6

package/dist/marks/ColorLegend.svelte

@@ -1,3 +1,9 @@
+<script module lang="ts">
+    export type ColorLegendMarkProps = {
+        class: string | null;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '../index.js';
@@ -7,11 +13,7 @@
 
     import type { DefaultOptions, PlotContext } from '../types.js';
 
-    let {
-        width = 250,
-        tickSpacing = 30,
-        class: className = null
-    }: { width?: number; tickSpacing?: number; class?: string } = $props();
+    let { class: className = null }: ColorLegendMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -45,7 +47,7 @@
             <div class="title">{@html legendTitle}</div>
         {/if}
         {#if scaleType === 'ordinal' || scaleType === 'categorical'}
-            {#each plot.scales.color.domain as value}
+            {#each plot.scales.color.domain as value (value)}
                 {@const symbolV = plot.scales.symbol.fn(value)}
                 {@const symbolType = maybeSymbol(symbolV)}
                 <div class="item">
@@ -98,7 +100,7 @@
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
                         <stop offset="0%" stop-color={range[0]} />
-                        {#each ticks as t, i}
+                        {#each ticks as t, i (i)}
                             {@const offset = (100 * (t - domain[0])) / (domain[1] - domain[0])}
                             <stop
                                 offset="{offset - 0.001}%"
@@ -130,7 +132,7 @@
                 x={{ domain, tickSpacing, tickFormat }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
-                        {#each ticks as t}
+                        {#each ticks as t (t)}
                             <stop
                                 offset="{(100 * (t - domain[0])) / (domain[1] - domain[0])}%"
                                 stop-color={plot.scales.color.fn(t)} />

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

@@ -1,13 +1,11 @@
-type $$ComponentProps = {
-    width?: number;
-    tickSpacing?: number;
-    class?: string;
+export type ColorLegendMarkProps = {
+    class: string | null;
 };
 /**
  * The ColorLegend is an HTML mark that can be placed in the header, footer and overlay
  * snippets. You can activate an implicit ColorLegend above the chart using the global
  * color.legend scale option.
  */
-declare const ColorLegend: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ColorLegend: import("svelte").Component<ColorLegendMarkProps, {}, "">;
 type ColorLegend = ReturnType<typeof ColorLegend>;
 export default ColorLegend;

package/dist/marks/CustomMark.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
-    {#each data as datum}
+    {#each data as datum, i (i)}
         {@const x_ = resolveChannel('x', datum, { x, y })}
         {@const y_ = resolveChannel('y', datum, { x, y })}
         {#if isValid(x_) && isValid(y_)}

package/dist/marks/CustomMarkHTML.svelte

@@ -75,7 +75,7 @@
 </script>
 
 {#snippet customMarks()}
-    {#each data as datum}
+    {#each data as datum, i (i)}
         {@const [px, py] = getXY(datum)}
         {#if isValid(px) && isValid(py)}
             <div

package/dist/marks/DifferenceY.svelte

@@ -1,19 +1,5 @@
-<script lang="ts">
-    import type {
-        BaseMarkProps,
-        ChannelAccessor,
-        CurveName,
-        DataRecord,
-        PlotContext
-    } from '../types.js';
-    import { Line, Area } from '../index.js';
-    import { randomId, coalesce } from '../helpers/index.js';
-    import { getContext } from 'svelte';
-    import { extent, max, min } from 'd3-array';
-    import { resolveChannel } from '../helpers/resolve.js';
-    import type { CurveFactory } from 'd3-shape';
-
-    type DifferenceYMarkProps = {
+<script module lang="ts">
+    export type DifferenceYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
         data: DataRecord[];
         /*
          * the horizontal position of the comparison; bound to the x scale
@@ -33,14 +19,30 @@
          */
         y2: ChannelAccessor;
         y: ChannelAccessor;
+        fillOpacity?: number;
         positiveFill?: string;
         positiveFillOpacity?: number;
         negativeFill?: string;
         negativeFillOpacity?: number;
-        stroke: boolean | ChannelAccessor;
         curve?: CurveName | CurveFactory;
         tension?: number;
-    } & BaseMarkProps;
+    };
+</script>
+
+<script lang="ts">
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        CurveName,
+        DataRecord,
+        PlotContext
+    } from '../types.js';
+    import { Line, Area } from '../index.js';
+    import { randomId, coalesce } from '../helpers/index.js';
+    import { getContext } from 'svelte';
+    import { extent, max, min } from 'd3-array';
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { CurveFactory } from 'd3-shape';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
@@ -105,7 +107,7 @@
         data={croppedX1}
         {...options}
         fill={options.positiveFill || 'pink'}
-        fillOpacity={coalesce(options.positiveFillOpacity, 1)}
+        fillOpacity={coalesce(options.positiveFillOpacity, options.fillOpacity, 1)}
         x1={coalesce(x1, x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)} />
@@ -127,7 +129,7 @@
         data={croppedX2}
         {...options}
         fill={options.negativeFill || 'cyan'}
-        fillOpacity={coalesce(options.negativeFillOpacity, 1)}
+        fillOpacity={coalesce(options.negativeFillOpacity, options.fillOpacity, 1)}
         x1={coalesce(x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y2, y)} />

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

@@ -1,6 +1,4 @@
-import type { BaseMarkProps, ChannelAccessor, CurveName, DataRecord } from '../types.js';
-import type { CurveFactory } from 'd3-shape';
-type DifferenceYMarkProps = {
+export type DifferenceYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data: DataRecord[];
     x1: ChannelAccessor;
     /**
@@ -17,14 +15,16 @@ type DifferenceYMarkProps = {
      */
     y2: ChannelAccessor;
     y: ChannelAccessor;
+    fillOpacity?: number;
     positiveFill?: string;
     positiveFillOpacity?: number;
     negativeFill?: string;
     negativeFillOpacity?: number;
-    stroke: boolean | ChannelAccessor;
     curve?: CurveName | CurveFactory;
     tension?: number;
-} & BaseMarkProps;
+};
+import type { BaseMarkProps, ChannelAccessor, CurveName, DataRecord } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
 declare const DifferenceY: import("svelte").Component<DifferenceYMarkProps, {}, "">;
 type DifferenceY = ReturnType<typeof DifferenceY>;
 export default DifferenceY;

package/dist/marks/Dot.svelte

@@ -1,3 +1,18 @@
+<!-- @component
+    Creates dots or symbols at specified positions with customizable size and appearance
+-->
+<script module lang="ts">
+    export type DotMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        r?: ChannelAccessor;
+        symbol?: ChannelAccessor | Snippet<[number, string]>;
+        canvas?: boolean;
+        dotClass?: ConstantAccessor<string>;
+    };
+</script>
+
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import type {
@@ -19,38 +34,13 @@
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
 
-    type DotProps = BaseMarkProps & {
-        data: DataRecord[];
-        x: ChannelAccessor;
-        y: ChannelAccessor;
-        r?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        symbol?: ChannelAccessor | Snippet<[number, string]>;
-        children?: Snippet;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
-        canvas?: boolean;
-        dotClass?: ConstantAccessor<string>;
-        in?: any;
-        inParams?: any;
-        out?: any;
-        outParams?: any;
-        transition?: any;
-        wrap?: Snippet;
-    };
-
     let {
         data = [{}],
         canvas = false,
         class: className = '',
         dotClass = null,
-        in: tIn = undefined,
-        inParams = undefined,
-        out: tOut = undefined,
-        outParams = undefined,
         ...options
-    }: DotProps = $props();
+    }: DotMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -98,7 +88,7 @@
             {#if canvas}
                 <DotCanvas data={scaledData} {mark} />
             {:else}
-                {#each scaledData as d}
+                {#each scaledData as d, i (i)}
                     {#if d.valid && isValid(d.r)}
                         {@const [style, styleClass] = resolveStyles(
                             plot,

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

@@ -1,25 +1,15 @@
-import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
-type DotProps = BaseMarkProps & {
+export type DotMarkProps = BaseMarkProps & {
     data: DataRecord[];
     x: ChannelAccessor;
     y: ChannelAccessor;
     r?: ChannelAccessor;
-    fill?: ChannelAccessor;
-    stroke?: ChannelAccessor;
     symbol?: ChannelAccessor | Snippet<[number, string]>;
-    children?: Snippet;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
     canvas?: boolean;
     dotClass?: ConstantAccessor<string>;
-    in?: any;
-    inParams?: any;
-    out?: any;
-    outParams?: any;
-    transition?: any;
-    wrap?: Snippet;
 };
-declare const Dot: import("svelte").Component<DotProps, {}, "">;
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+/** Creates dots or symbols at specified positions with customizable size and appearance */
+declare const Dot: import("svelte").Component<DotMarkProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;
 export default Dot;

package/dist/marks/DotX.svelte

@@ -1,15 +1,16 @@
+<!-- @component
+    Creates a horizontal dot plot with x values along a single y position
+-->
+<script module lang="ts">
+    export type DotXMarkProps = Omit<DotMarkProps, 'y'>;
+</script>
+
 <script lang="ts">
-    import Dot from './Dot.svelte';
+    import Dot, { type DotMarkProps } from './Dot.svelte';
     import { recordizeX } from '../index.js';
-    import type { BaseMarkProps, DataRow } from '../types.js';
-    import type { ChannelAccessor } from '../types.js';
-
-    type DotXProps = BaseMarkProps & {
-        data: DataRow[];
-        x?: ChannelAccessor;
-    };
+    import type { DataRow } from '../types.js';
 
-    let { data = [{}], ...options }: DotXProps = $props();
+    let { data = [{}], ...options }: DotXMarkProps = $props();
 
     const args = $derived(recordizeX({ data, ...options, y: 1 }, { withIndex: false }));
 </script>

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

@@ -1,9 +1,6 @@
-import type { BaseMarkProps, DataRow } from '../types.js';
-import type { ChannelAccessor } from '../types.js';
-type DotXProps = BaseMarkProps & {
-    data: DataRow[];
-    x?: ChannelAccessor;
-};
-declare const DotX: import("svelte").Component<DotXProps, {}, "">;
+export type DotXMarkProps = Omit<DotMarkProps, 'y'>;
+import { type DotMarkProps } from './Dot.svelte';
+/** Creates a horizontal dot plot with x values along a single y position */
+declare const DotX: import("svelte").Component<DotXMarkProps, {}, "">;
 type DotX = ReturnType<typeof DotX>;
 export default DotX;

package/dist/marks/DotY.svelte

@@ -1,8 +1,15 @@
+<!-- @component
+    Creates a vertical dot plot with y values along a single x position
+-->
+<script module lang="ts">
+    export type DotYMarkProps = Omit<DotMarkProps, 'y'>;
+</script>
+
 <script lang="ts">
-    import Dot from './Dot.svelte';
+    import Dot, { type DotMarkProps } from './Dot.svelte';
     import { recordizeY } from '../index.js';
 
-    let { data = [{}], ...options } = $props();
+    let { data = [{}], ...options }: DotYMarkProps = $props();
 
     const args = $derived(recordizeY({ data, ...options, x: 0 }, { withIndex: false }));
 </script>

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

@@ -1,5 +1,6 @@
-declare const DotY: import("svelte").Component<{
-    data?: any[];
-} & Record<string, any>, {}, "">;
+export type DotYMarkProps = Omit<DotMarkProps, 'y'>;
+import { type DotMarkProps } from './Dot.svelte';
+/** Creates a vertical dot plot with y values along a single x position */
+declare const DotY: import("svelte").Component<DotYMarkProps, {}, "">;
 type DotY = ReturnType<typeof DotY>;
 export default DotY;

package/dist/marks/Frame.svelte

@@ -1,16 +1,20 @@
-<script lang="ts">
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
-    import type { BaseMarkProps } from '../types.js';
-    import { resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
-    import { addEventHandlers } from './helpers/events.js';
-
-    type FrameMarkProps = BaseMarkProps &
+<!-- 
+    @component 
+    Renders a simple frame around the entire plot domain 
+-->
+<script module lang="ts">
+    export type FrameMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
+    > &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
         > & {
+            fill: string;
+            stroke: string;
+            fillOpacity: number;
+            strokeOpacity: number;
             automatic?: boolean;
             inset?: number;
             insetLeft?: number;
@@ -18,33 +22,40 @@
             insetTop?: number;
             insetBottom?: number;
         };
+</script>
 
-    let { automatic, class: className = '', ...options }: FrameMarkProps = $props();
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { BaseMarkProps } from '../types.js';
+    import RectPath from './helpers/RectPath.svelte';
+
+    let {
+        automatic,
+        class: className = 'frame',
+        fill,
+        stroke,
+        fillOpacity,
+        strokeOpacity,
+        ...options
+    }: FrameMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
-
-    const dx = $derived(resolveProp(options.dx, null, 0));
-    const dy = $derived(resolveProp(options.dy, null, 0));
-
-    const {
-        insetLeft = options.inset || 0,
-        insetTop = options.inset || 0,
-        insetRight = options.inset || 0,
-        insetBottom = options.inset || 0
-    } = $derived(options);
 </script>
 
 <Mark type="frame" {automatic}>
-    <rect
-        class={['frame', className]}
-        transform={dx || dy ? `translate(${dx},${dy})` : null}
-        style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
-        x={plot.options.marginLeft + +insetLeft}
-        y={plot.options.marginTop + +insetTop}
-        rx={resolveProp(options.rx, null, null)}
-        ry={resolveProp(options.ry, null, null)}
-        width={plot.facetWidth - (insetLeft || 0) - (insetRight || 0)}
-        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
-        use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
+    {#snippet children({ usedScales })}
+        <RectPath
+            class={className}
+            datum={{ fill, stroke, fillOpacity, strokeOpacity, datum: {}, valid: true }}
+            x={plot.options.marginLeft}
+            y={plot.options.marginTop}
+            width={plot.facetWidth}
+            height={plot.facetHeight}
+            {usedScales}
+            fallbackStyle="stroke"
+            options={{ ...options, fill, stroke, fillOpacity, strokeOpacity }} />
+    {/snippet}
 </Mark>

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

@@ -1,6 +1,8 @@
-import type { BaseRectMarkProps } from '../types.js';
-import type { BaseMarkProps } from '../types.js';
-type FrameMarkProps = BaseMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
+export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
+    fill: string;
+    stroke: string;
+    fillOpacity: number;
+    strokeOpacity: number;
     automatic?: boolean;
     inset?: number;
     insetLeft?: number;
@@ -8,6 +10,9 @@ type FrameMarkProps = BaseMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLe
     insetTop?: number;
     insetBottom?: number;
 };
+import type { BaseRectMarkProps } from '../types.js';
+import type { BaseMarkProps } from '../types.js';
+/** Renders a simple frame around the entire plot domain */
 declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;
 type Frame = ReturnType<typeof Frame>;
 export default Frame;

package/dist/marks/Geo.svelte

@@ -1,10 +1,26 @@
+<!-- @component
+    Renders geographical data using projections and GeoJSON geometries
+-->
+<script module lang="ts">
+    export type GeoMarkProps = {
+        data: DataRecord[];
+        geoType?: 'sphere' | 'graticule';
+        dragRotate: boolean;
+        canvas: boolean;
+        href: ConstantAccessor<string>;
+        target: ConstantAccessor<string>;
+    } & BaseMarkProps &
+        LinkableMarkProps;
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import type {
         DataRecord,
         PlotContext,
         BaseMarkProps,
-        ConstantAccessor
+        ConstantAccessor,
+        LinkableMarkProps
     } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
@@ -19,15 +35,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    type GeoMarkProps = {
-        data: DataRecord[];
-        geoType?: 'sphere' | 'graticule';
-        dragRotate: boolean;
-        canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
-    } & BaseMarkProps;
-
     let {
         data = [{}],
         canvas = false,
@@ -90,7 +97,7 @@
             {#if canvas}
                 <GeoCanvas data={scaledData} {path} {mark} {usedScales} />
             {:else}
-                {#each scaledData as d}
+                {#each scaledData as d, i (i)}
                     {#if d.valid}
                         {#if options.href}
                             <a

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

@@ -1,12 +1,13 @@
-import type { DataRecord, BaseMarkProps, ConstantAccessor } from '../types.js';
-type GeoMarkProps = {
+export type GeoMarkProps = {
     data: DataRecord[];
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
     href: ConstantAccessor<string>;
     target: ConstantAccessor<string>;
-} & BaseMarkProps;
+} & BaseMarkProps & LinkableMarkProps;
+import type { DataRecord, BaseMarkProps, ConstantAccessor, LinkableMarkProps } from '../types.js';
+/** Renders geographical data using projections and GeoJSON geometries */
 declare const Geo: import("svelte").Component<GeoMarkProps, {}, "">;
 type Geo = ReturnType<typeof Geo>;
 export default Geo;

package/dist/marks/Graticule.svelte

@@ -1,8 +1,21 @@
+<!-- @component
+    Renders a geographic graticule grid with customizable step sizes
+-->
+<script module lang="ts">
+    import type { DefaultOptions, BaseMarkProps } from '../types.js';
+    export type GraticuleMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'
+    > & {
+        step?: number;
+        stepX?: number;
+        stepY?: number;
+    };
+</script>
+
 <script lang="ts">
     import Geo from './Geo.svelte';
     import { geoGraticule } from 'd3-geo';
-    import type { DefaultOptions, BaseMarkProps } from '../types.js';
-
     import { getContext } from 'svelte';
 
     const DEFAULTS = {
@@ -10,12 +23,6 @@
         ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
     };
 
-    type GraticuleMarkProps = BaseMarkProps & {
-        step?: number;
-        stepX?: number;
-        stepY?: number;
-    };
-
     let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();
 
     let graticule = $derived.by(() => {

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

@@ -1,9 +1,10 @@
 import type { BaseMarkProps } from '../types.js';
-type GraticuleMarkProps = BaseMarkProps & {
+export type GraticuleMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'> & {
     step?: number;
     stepX?: number;
     stepY?: number;
 };
+/** Renders a geographic graticule grid with customizable step sizes */
 declare const Graticule: import("svelte").Component<GraticuleMarkProps, {}, "">;
 type Graticule = ReturnType<typeof Graticule>;
 export default Graticule;

package/dist/marks/GridX.svelte

@@ -1,3 +1,13 @@
+<!-- @component
+    Renders vertical gridlines at x-axis tick positions
+-->
+<script module lang="ts">
+    export type GridXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data?: RawValue[];
+        automatic?: boolean;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
@@ -7,11 +17,6 @@
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
-    type GridXMarkProps = BaseMarkProps & {
-        data?: RawValue[];
-        automatic?: boolean;
-    };
-
     let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -45,7 +50,7 @@
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">
-            {#each ticks as tick}
+            {#each ticks as tick, t (t)}
                 {#if testFilter(tick, options)}
                     {@const x =
                         plot.scales.x.fn(tick) +

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

@@ -1,8 +1,9 @@
-import type { BaseMarkProps, RawValue } from '../types.js';
-type GridXMarkProps = BaseMarkProps & {
+export type GridXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data?: RawValue[];
     automatic?: boolean;
 };
+import type { BaseMarkProps, RawValue } from '../types.js';
+/** Renders vertical gridlines at x-axis tick positions */
 declare const GridX: import("svelte").Component<GridXMarkProps, {}, "">;
 type GridX = ReturnType<typeof GridX>;
 export default GridX;