svelteplot 0.2.10 → 0.3.0

package/dist/marks/RuleX.svelte

@@ -24,10 +24,23 @@
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
 
-    let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
+    let markProps: RuleXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rule,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').ruleX
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: RuleXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/RuleY.svelte

@@ -24,10 +24,23 @@
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
 
-    let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
+    let markProps: RuleYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rule,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').ruleY
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: RuleYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/Sphere.svelte

@@ -8,8 +8,19 @@
 
 <script lang="ts">
     import Geo from './Geo.svelte';
+    import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
 
-    let { ...args }: SphereMarkProps = $props();
+    let markProps: SphereMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').sphere
+    };
+
+    const { ...options }: SphereMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 </script>
 
-<Geo data={[{ type: 'Sphere' }]} {...args} geoType="sphere" />
+<Geo data={[{ type: 'Sphere' }]} {...options} geoType="sphere" />

package/dist/marks/Spike.svelte

@@ -8,16 +8,26 @@
 
 <script lang="ts">
     import Vector, { type VectorMarkProps } from './Vector.svelte';
-    let { data = [{}], ...options }: SpikeMarkProps = $props();
+    import type { PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
+
+    let markProps: SpikeMarkProps = $props();
+
+    const DEFAULTS = {
+        fill: 'currentColor',
+        fillOpacity: 0.3,
+        strokeWidth: 1,
+        anchor: 'start' as const,
+        stroke: 'currentColor',
+        sort: { channel: '-y' },
+        shape: 'spike' as const,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').spike
+    };
+
+    const { data = [{}], ...options }: SpikeMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 </script>
 
-<Vector
-    {data}
-    fill={options.stroke || 'currentColor'}
-    fillOpacity={0.3}
-    strokeWidth={1}
-    anchor="start"
-    stroke="currentColor"
-    sort={{ channel: '-y' }}
-    {...options}
-    shape="spike" />
+<Vector {data} {...options} />

package/dist/marks/Text.svelte

@@ -39,13 +39,30 @@
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import Mark from '../Mark.svelte';
     import { sort } from '../index.js';
 
-    let { data = [{}], class: className = null, ...options }: TextMarkProps = $props();
+    const DEFAULTS = {
+        fontSize: 12,
+        fontWeight: 500,
+        strokeWidth: 1.6,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').text
+    };
+
+    let markProps: TextMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: TextMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
@@ -54,7 +71,7 @@
         bottom: 'auto',
         middle: 'central',
         top: 'hanging'
-    };
+    } as const;
 
     const args = $derived(
         sort({
@@ -77,9 +94,10 @@
         'strokeOpacity',
         'fillOpacity'
     ]}
+    required={['x', 'y']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <GroupMultiple class="text {className || null}" length={className ? 2 : args.data.length}>
+        <GroupMultiple class="text {className}" length={className ? 2 : args.data.length}>
             {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const title = resolveProp(args.title, d.datum, '')}

package/dist/marks/TickX.svelte

@@ -31,7 +31,8 @@
         BaseMarkProps,
         ChannelAccessor,
         DataRow,
-        FacetContext
+        FacetContext,
+        PlotDefaults
     } from '../types.js';
     import { recordizeX } from '../index.js';
     import { projectX, projectY } from '../helpers/scales.js';
@@ -41,7 +42,19 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    let { data = [{}], ...options }: TickXMarkProps = $props();
+    let markProps: TickXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tick,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tickX
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: TickXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
 

package/dist/marks/TickY.svelte

@@ -32,7 +32,8 @@
         ChannelAccessor,
         DataRow,
         FacetContext,
-        ConstantAccessor
+        ConstantAccessor,
+        PlotDefaults
     } from '../types.js';
     import { recordizeY } from '../index.js';
     import { projectX, projectY } from '../helpers/scales.js';
@@ -42,7 +43,19 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    let { data = [{}], ...options }: TickYMarkProps = $props();
+    let markProps: TickYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tick,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tickY
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: TickYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
 

package/dist/marks/Vector.svelte

@@ -9,7 +9,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext
+        FacetContext,
+        PlotDefaults
     } from '../types.js';
 
     type D3Path = ReturnType<typeof import('d3-path').path>;
@@ -53,19 +54,26 @@
     const defaultRadius = 3.5;
 
     // The size of the arrowhead is proportional to its length, but we still allow
-    // the relative size of the head to be controlled via the mark’s width option;
+    // the relative size of the head to be controlled via the mark's width option;
     // doubling the default radius will produce an arrowhead that is twice as big.
-    // That said, we’ll probably want a arrow with a fixed head size, too.
+    // That said, we'll probably want a arrow with a fixed head size, too.
     const wingRatio = defaultRadius * 5;
 
-    let {
+    let markProps: VectorMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').vector
+    };
+    const {
         data = [{}],
         canvas,
         shape = 'arrow',
         anchor = 'middle',
         r = defaultRadius,
         ...options
-    }: VectorMarkProps = $props();
+    }: VectorMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/transforms/sort.d.ts

@@ -4,10 +4,10 @@ export declare const IS_SORTED: unique symbol;
 export declare function sort({ data, ...channels }: TransformArg<DataRecord>, options?: {
     reverse?: boolean;
 }): {
-    [IS_SORTED]: string | number | true | symbol | Date | ((d: DataRow) => import("../types.js").RawValue) | {
+    [IS_SORTED]: string | number | true | symbol | Date | ((d: DataRow) => import("../types.js").RawValue) | ((a: import("../types.js").RawValue, b: import("../types.js").RawValue) => number) | {
         channel: string;
         order?: "ascending" | "descending";
-    } | ((a: import("../types.js").RawValue, b: import("../types.js").RawValue) => number);
+    };
     sort: null;
     filter?: import("../types.js").ConstantAccessor<boolean>;
     facet?: "auto" | "include" | "exclude" | undefined;

package/dist/types.d.ts

@@ -4,6 +4,37 @@ import type { MouseEventHandler } from 'svelte/elements';
 import type { MarkerShape } from './marks/helpers/Marker.svelte';
 import type { Writable } from 'svelte/store';
 import type * as CSS from 'csstype';
+import type { AreaMarkProps } from './marks/Area.svelte';
+import type { ArrowMarkProps } from './marks/Arrow.svelte';
+import type { AxisXMarkProps } from './marks/AxisX.svelte';
+import type { AxisYMarkProps } from './marks/AxisY.svelte';
+import type { BarXMarkProps } from './marks/BarX.svelte';
+import type { CellMarkProps } from './marks/Cell.svelte';
+import type { DotMarkProps } from './marks/Dot.svelte';
+import type { FrameMarkProps } from './marks/Frame.svelte';
+import type { GeoMarkProps } from './marks/Geo.svelte';
+import type { GraticuleMarkProps } from './marks/Graticule.svelte';
+import type { LineMarkProps } from './marks/Line.svelte';
+import type { LinkMarkProps } from './marks/Link.svelte';
+import type { RectMarkProps } from './marks/Rect.svelte';
+import type { RuleXMarkProps } from './marks/RuleX.svelte';
+import type { SphereMarkProps } from './marks/Sphere.svelte';
+import type { SpikeMarkProps } from './marks/Spike.svelte';
+import type { TextMarkProps } from './marks/Text.svelte';
+import type { TickXMarkProps } from './marks/TickX.svelte';
+import type { VectorMarkProps } from './marks/Vector.svelte';
+import type { BrushMarkProps } from './marks/Brush.svelte';
+import type { BrushXMarkProps } from './marks/BrushX.svelte';
+import type { BrushYMarkProps } from './marks/BrushY.svelte';
+import type { RectXMarkProps } from './marks/RectX.svelte';
+import type { RectYMarkProps } from './marks/RectY.svelte';
+import type { RuleYMarkProps } from './marks/RuleY.svelte';
+import type { TickYMarkProps } from './marks/TickY.svelte';
+import type { GridYMarkProps } from './marks/GridY.svelte';
+import type { GridXMarkProps } from './marks/GridX.svelte';
+import type { PointerMarkProps } from './marks/Pointer.svelte';
+import type { BoxXMarkProps } from './marks/BoxX.svelte';
+import type { BoxYMarkProps } from './marks/BoxY.svelte';
 export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
 export type ScaleName = 'x' | 'y' | 'r' | 'color' | 'opacity' | 'length' | 'symbol' | 'fx' | 'fy' | 'projection';
 export type ScaleType = 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'time' | 'point' | 'ordinal' | 'sequential' | 'band' | 'categorical' | 'cyclical' | 'threshold' | 'quantile-cont' | 'quantile' | 'quantize' | 'diverging' | 'diverging-log' | 'diverging-pow' | 'diverging-sqrt' | 'diverging-symlog';
@@ -300,51 +331,6 @@ export type PlotOptions = {
      */
     css: (d: string) => string | undefined;
 };
-export type PlotDefaults = {
-    axisXAnchor: AxisXAnchor;
-    axisYAnchor: AxisYAnchor;
-    xTickSpacing: number;
-    yTickSpacing: number;
-    height: number;
-    inset: number;
-    colorScheme: ColorScheme | string[];
-    categoricalColorScheme: ColorScheme | string[];
-    dotRadius: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a point scale
-     */
-    pointScaleHeight: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a band scale
-     */
-    bandScaleHeight: number;
-    /**
-     * add frame to plots by default
-     */
-    frame: boolean;
-    grid: boolean;
-    axes: boolean;
-    /**
-     * initial width of the plot before measuring the actual width
-     */
-    initialWidth: number;
-    /**
-     * locale, used for automatic axis ticks
-     */
-    locale: string;
-    /**
-     * default number format for axis ticks
-     */
-    numberFormat: Intl.NumberFormatOptions;
-    markerDotRadius: number;
-    /**
-     * fallback color to be used for null/NA
-     */
-    unknown: string;
-    css: (d: string) => string | undefined;
-};
 export type GenericMarkOptions = Record<string | symbol, any>;
 export type DataRecord = Record<string | symbol, RawValue> & {
     ___orig___?: RawValue | [RawValue, RawValue];
@@ -492,27 +478,27 @@ export type LinkableMarkProps = {
     /**
      * if set, the mark element will be wrapped in a <a> link element
      */
-    href: ConstantAccessor<string>;
+    href?: ConstantAccessor<string>;
     /**
      * the relationship of the target object to the link object (e.g. "noopener")
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#rel
      */
-    rel: ConstantAccessor<string>;
+    rel?: ConstantAccessor<string>;
     /**
      * the link target mime type, e.g. "text/csv"
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#type
      */
-    type: ConstantAccessor<string>;
+    type?: ConstantAccessor<string>;
     /**
      * the target of the link, e.g. "_blank" or "_self"
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target
      */
-    target: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string>;
+    target?: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string>;
     /**
      * if set to true, the link will be downloaded instead of navigating to it
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
      */
-    download: ConstantAccessor<boolean>;
+    download?: ConstantAccessor<boolean>;
     [key: `data-sveltekit-${string}`]: string | boolean;
 };
 export type BaseMarkProps = Partial<{
@@ -618,11 +604,12 @@ export type AutoMarginStores = {
     autoMarginRight: Writable<Map<string, number>>;
     autoMarginBottom: Writable<Map<string, number>>;
 };
+type IgnoreDefaults = 'data' | 'facet' | ChannelName | 'title' | 'automatic' | 'children';
 /**
  * these are the default options for the plot marks that can be set using
  * the 'svelteplot/defaults' context.
  */
-export type DefaultOptions = {
+export type PlotDefaults = {
     /**
      * default plot height
      */
@@ -632,41 +619,32 @@ export type DefaultOptions = {
      */
     inset: number;
     /**
-     * default tick line length
-     */
-    tickSize: number;
-    /**
-     * default padding between tick line and tick label
-     */
-    tickPadding: number;
-    /**
-     * default font size for tick labels
-     */
-    tickFontSize: number;
-    /**
-     * default anchor for x axis
+     * default color scheme
      */
-    axisXAnchor: 'bottom' | 'top';
+    colorScheme: ColorScheme;
+    categoricalColorScheme: ColorScheme | string[];
     /**
-     * default anchor for y axis
+     * fallback color to be used for null/NA
      */
-    axisYAnchor: 'left' | 'right';
+    unknown: string;
     /**
-     * default spacing between ticks in AxisX and GridX
+     * optional @emotion/css function to style the plot
      */
-    xTickSpacing: number;
+    css: (d: string) => string | undefined;
     /**
-     * default spacing between ticks in AxisY and GridY
+     * for computing the automatic height based on the number of
+     * domain items in a point scale
      */
-    yTickSpacing: number;
+    pointScaleHeight: number;
     /**
-     * default color scheme
+     * for computing the automatic height based on the number of
+     * domain items in a band scale
      */
-    colorScheme: ColorScheme;
+    bandScaleHeight: number;
     /**
-     * default step for graticule, in degrees
+     * initial width of the plot before measuring the actual width
      */
-    graticuleStep: number;
+    initialWidth: number;
     /**
      * locale, used for automatic axis ticks
      */
@@ -679,6 +657,180 @@ export type DefaultOptions = {
      * default dot radius for line markers, used in dot, circle, and circle-stroke markers
      */
     markerDotRadius: number;
+    /**
+     * default props for area marks, applied to area, areaX, and areaY marks
+     */
+    area: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for areaX marks
+     */
+    areaX: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for areaY marks
+     */
+    areaY: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for arrow marks
+     */
+    arrow: Partial<Omit<ArrowMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for axis marks, applied to both axisX and axisY marks
+     */
+    axis: Partial<Omit<AxisXMarkProps, 'data' | 'facet' | ChannelName | 'facetAnchor' | 'labelAnchor' | 'anchor'> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for axisX marks
+     */
+    axisX: Partial<Omit<AxisXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for axisY marks
+     */
+    axisY: Partial<Omit<AxisYMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for bar marks, applied to both barX and barY marks
+     */
+    bar: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for barX marks
+     */
+    barX: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for barY marks
+     */
+    barY: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for box marks, applied to boxX and boxY marks
+     */
+    box: Partial<Omit<BoxXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for boxX marks
+     */
+    boxX: Partial<Omit<BoxXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for boxY marks
+     */
+    boxY: Partial<Omit<BoxYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for brush marks, applied to brush, brushX and brushY marks
+     */
+    brush: Partial<Omit<BrushMarkProps, IgnoreDefaults | 'limitDimension'>>;
+    /**
+     * default props for brushX marks
+     */
+    brushX: Partial<Omit<BrushXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for brushY marks
+     */
+    brushY: Partial<Omit<BrushYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for cell marks
+     */
+    cell: Partial<Omit<CellMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for dot marks
+     */
+    dot: Partial<Omit<DotMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for frame marks
+     */
+    frame: Partial<FrameMarkProps & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for geo marks
+     */
+    geo: Partial<Omit<GeoMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for graticule marks
+     */
+    graticule: Partial<Omit<GraticuleMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for grid marks, applied to both gridX and gridY marks
+     */
+    grid: Partial<Omit<GridXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for gridX marks
+     */
+    gridX: Partial<Omit<GridXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for gridY marks
+     */
+    gridY: Partial<Omit<GridYMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for line marks
+     */
+    line: Partial<Omit<LineMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for link marks
+     */
+    link: Partial<Omit<LinkMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for pointer marks
+     */
+    pointer: Partial<Omit<PointerMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rect marks, applied to rect and rectX marks
+     */
+    rect: Partial<Omit<RectMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rectX marks
+     */
+    rectX: Partial<Omit<RectXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rectY marks
+     */
+    rectY: Partial<Omit<RectYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    rule: Partial<Omit<RuleXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    ruleX: Partial<Omit<RuleXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    ruleY: Partial<Omit<RuleYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for sphere marks
+     */
+    sphere: Partial<SphereMarkProps>;
+    /**
+     * default props for spike marks
+     */
+    spike: Partial<Omit<SpikeMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for text marks
+     */
+    text: Partial<Omit<TextMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tick marks, applied to tickX and tickY marks
+     */
+    tick: Partial<Omit<TickXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tickX marks
+     */
+    tickX: Partial<Omit<TickXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tickY marks
+     */
+    tickY: Partial<Omit<TickYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for vector marks
+     */
+    vector: Partial<Omit<VectorMarkProps, IgnoreDefaults>>;
 };
 export type MapIndexObject = {
     mapIndex: (I: number[], S: RawValue[], T: RawValue[]) => void;

package/dist/ui/ExamplesGrid.svelte

@@ -36,7 +36,7 @@
             border: 1px solid #88888822;
             border-radius: 2px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-            padding: 1.5ex;
+            padding: 1.5ex 1.5ex 0.4ex 1.5ex;
         }
 
         &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.10",
+    "version": "0.3.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",