layerchart 2.0.0-next.54 → 2.0.0-next.56

package/dist/bench/ComposableLineChart.svelte

@@ -34,7 +34,7 @@
   }: Props = $props();
 </script>
 
-<Chart {data} {x} {y} {width} {height} {series} xDomain={xDomain} yDomain={yDomain}>
+<Chart {data} {x} {y} {width} {height} {series} {xDomain} {yDomain}>
   <Layer type={layer}>
     {#if axis}
       <Axis placement="left" />

package/dist/bench/GeoBench.svelte

@@ -12,14 +12,7 @@
     width?: number;
   };
 
-  let {
-    features,
-    fitGeojson,
-    projection,
-    layer = 'svg',
-    height = 400,
-    width,
-  }: Props = $props();
+  let { features, fitGeojson, projection, layer = 'svg', height = 400, width }: Props = $props();
 </script>
 
 <Chart geo={{ projection, fitGeojson }} {width} {height}>

package/dist/components/AnnotationRange.svelte

@@ -78,7 +78,9 @@
     const y0 = y ? ctx.yScale(y[0] ?? ctx.yDomain[0]) : ctx.yRange[0];
     const y1 = y ? ctx.yScale(y[1] ?? ctx.yDomain[1]) : ctx.yRange[1];
 
-    const bandPadding = isScaleBand(ctx.xScale) ? (ctx.xScale.padding() * ctx.xScale.step()) / 2 : 0;
+    const bandPadding = isScaleBand(ctx.xScale)
+      ? (ctx.xScale.padding() * ctx.xScale.step()) / 2
+      : 0;
     const bandStep = isScaleBand(ctx.xScale) ? ctx.xScale.step() : 0;
 
     return {

package/dist/components/Arc.svelte

@@ -255,9 +255,7 @@
 
   const endAngle = $derived(
     endAngleProp ??
-      degreesToRadians(
-        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
-      )
+      degreesToRadians((ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!)
   );
 
   const motionEndAngle = createMotion(initialValue, () => value, motion);

package/dist/components/ArcLabel.svelte.test.js

@@ -19,7 +19,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,
@@ -46,7 +46,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,
@@ -77,7 +77,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,
@@ -109,7 +109,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,
@@ -141,7 +141,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,
@@ -180,7 +180,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,
@@ -210,7 +210,7 @@ describe('ArcLabel', () => {
             childComponents: [
                 {
                     component: ArcLabel,
-                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps }) => ({
+                    props: ({ centroid, startAngle, endAngle, innerRadius, outerRadius, getArcTextProps, }) => ({
                         centroid,
                         startAngle,
                         endAngle,

package/dist/components/Axis.svelte

@@ -33,10 +33,18 @@
     rule?: boolean | Partial<ComponentProps<typeof Rule>>;
 
     /**
-     * Draw grid lines
+     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
+     * dashArray) to forward onto the underlying grid line.
      * @default false
      */
-    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    grid?:
+      | boolean
+      | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+          stroke?: string;
+          strokeWidth?: number;
+          opacity?: number;
+          dashArray?: number | number[] | string;
+        });
 
     /**
      * Control the number of ticks

package/dist/components/Axis.svelte.d.ts

@@ -28,10 +28,16 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     rule?: boolean | Partial<ComponentProps<typeof Rule>>;
     /**
-     * Draw grid lines
+     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
+     * dashArray) to forward onto the underlying grid line.
      * @default false
      */
-    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    grid?: boolean | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+        stroke?: string;
+        strokeWidth?: number;
+        opacity?: number;
+        dashArray?: number | number[] | string;
+    });
     /**
      * Control the number of ticks
      */

package/dist/components/Bar.svelte

@@ -105,14 +105,13 @@
   import { greatestAbs } from '@layerstack/utils';
 
   import Rect from './Rect.svelte';
-  import Path from './Path.svelte';
 
   import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from '../contexts/chart.js';
   import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import { extractLayerProps } from '../utils/attributes.js';
-  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
+  import { type MotionProp } from '../utils/motion.svelte.js';
   import Arc from './Arc.svelte';
 
   const ctx = getChartContext();
@@ -254,41 +253,31 @@
   const topRight = $derived(['all', 'top', 'right', 'top-right'].includes(rounded));
   const bottomLeft = $derived(['all', 'bottom', 'left', 'bottom-left'].includes(rounded));
   const bottomRight = $derived(['all', 'bottom', 'right', 'bottom-right'].includes(rounded));
-  const width = $derived(dimensions.width);
-  const height = $derived(dimensions.height);
 
-  // Clamp radius to prevent extending beyond bounding box
-  const r = $derived(Math.min(radius, width / 2, height / 2));
-  const diameter = $derived(2 * r);
+  // Per-corner radii: [tl, tr, br, bl], matching CSS `border-radius` shorthand.
+  const corners = $derived<[number, number, number, number]>([
+    topLeft ? radius : 0,
+    topRight ? radius : 0,
+    bottomRight ? radius : 0,
+    bottomLeft ? radius : 0,
+  ]);
 
   // Auto-compute initial values for mount animation when motion is configured
   const resolvedInitialY = $derived(
-    initialY ?? (motion && ctx.valueAxis === 'y' ? Math.max(ctx.yRange[0], ctx.yRange[1]) : undefined)
+    initialY ??
+      (motion && ctx.valueAxis === 'y' ? Math.max(ctx.yRange[0], ctx.yRange[1]) : undefined)
   );
   const resolvedInitialHeight = $derived(
     initialHeight ?? (motion && ctx.valueAxis === 'y' ? 0 : undefined)
   );
   const resolvedInitialX = $derived(
-    initialX ?? (motion && ctx.valueAxis === 'x' ? Math.min(ctx.xRange[0], ctx.xRange[1]) : undefined)
+    initialX ??
+      (motion && ctx.valueAxis === 'x' ? Math.min(ctx.xRange[0], ctx.xRange[1]) : undefined)
   );
   const resolvedInitialWidth = $derived(
     initialWidth ?? (motion && ctx.valueAxis === 'x' ? 0 : undefined)
   );
 
-  const pathData = $derived(
-    `M${dimensions.x + r},${dimensions.y} h${width - diameter}
-      ${topRight ? `a${r},${r} 0 0 1 ${r},${r}` : `h${r}v${r}`}
-      v${height - diameter}
-      ${bottomRight ? `a${r},${r} 0 0 1 ${-r},${r}` : `v${r}h${-r}`}
-      h${diameter - width}
-      ${bottomLeft ? `a${r},${r} 0 0 1 ${-r},${-r}` : `h${-r}v${-r}`}
-      v${diameter - height}
-      ${topLeft ? `a${r},${r} 0 0 1 ${r},${-r}` : `v${-r}h${r}`}
-      z`
-      .split('\n')
-      .join('')
-  );
-
   const onPointerEnter: PointerEventHandler<Element> = (e) => {
     onpointerenter?.(e);
     if (tooltip) ctx.tooltip.show(e, data);
@@ -322,14 +311,14 @@
     onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
-{:else if rounded === 'all' || rounded === 'none' || radius === 0}
+{:else}
   <Rect
     {fill}
     {fillOpacity}
     {stroke}
     {strokeWidth}
     {opacity}
-    rx={rounded === 'none' ? 0 : radius}
+    {corners}
     {motion}
     initialX={resolvedInitialX}
     initialY={resolvedInitialY}
@@ -341,19 +330,4 @@
     onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
-{:else}
-  {@const tweenMotion = extractTweenConfig(motion)}
-  <Path
-    {pathData}
-    {fill}
-    {fillOpacity}
-    {stroke}
-    {strokeWidth}
-    {opacity}
-    motion={tweenMotion}
-    onpointerenter={onPointerEnter}
-    onpointermove={onPointerMove}
-    onpointerleave={onPointerLeave}
-    {...extractLayerProps(restProps, 'lc-bar')}
-  />
 {/if}

package/dist/components/BoxPlot.svelte

@@ -134,21 +134,13 @@
   });
 
   // Resolve final statistics: explicit props take priority over computed values
-  const minVal = $derived(
-    minProp != null ? accessor(minProp)(data) : computedStats?.min
-  );
-  const q1Val = $derived(
-    q1Prop != null ? accessor(q1Prop)(data) : computedStats?.q1
-  );
+  const minVal = $derived(minProp != null ? accessor(minProp)(data) : computedStats?.min);
+  const q1Val = $derived(q1Prop != null ? accessor(q1Prop)(data) : computedStats?.q1);
   const medianVal = $derived(
     medianProp != null ? accessor(medianProp)(data) : computedStats?.median
   );
-  const q3Val = $derived(
-    q3Prop != null ? accessor(q3Prop)(data) : computedStats?.q3
-  );
-  const maxVal = $derived(
-    maxProp != null ? accessor(maxProp)(data) : computedStats?.max
-  );
+  const q3Val = $derived(q3Prop != null ? accessor(q3Prop)(data) : computedStats?.q3);
+  const maxVal = $derived(maxProp != null ? accessor(maxProp)(data) : computedStats?.max);
   const outliersVal = $derived<number[]>(
     outliersProp != null ? (accessor(outliersProp)(data) ?? []) : (computedStats?.outliers ?? [])
   );

package/dist/components/Cell.svelte

@@ -4,7 +4,18 @@
 
   type BaseRectCellProps = Omit<
     RectProps,
-    'width' | 'height' | 'x0' | 'x1' | 'y0' | 'y1' | 'initialX' | 'initialY' | 'initialWidth' | 'initialHeight' | 'motion' | 'ref'
+    | 'width'
+    | 'height'
+    | 'x0'
+    | 'x1'
+    | 'y0'
+    | 'y1'
+    | 'initialX'
+    | 'initialY'
+    | 'initialWidth'
+    | 'initialHeight'
+    | 'motion'
+    | 'ref'
   >;
 
   export type CellProps = BaseRectCellProps & {
@@ -36,13 +47,7 @@
   import Circle from './Circle.svelte';
   import Group from './Group.svelte';
 
-  let {
-    shape = 'rect',
-    r,
-    x,
-    y,
-    ...restProps
-  }: CellProps = $props();
+  let { shape = 'rect', r, x, y, ...restProps }: CellProps = $props();
 
   const chartCtx = getChartContext();
   const cellWidth = $derived(isScaleBand(chartCtx.xScale) ? chartCtx.xScale.bandwidth() : 0);

package/dist/components/Chart.svelte

@@ -22,7 +22,11 @@
   import { geoFitObjectTransform } from '../utils/geo.js';
   import TransformContext from './TransformContext.svelte';
   import BrushContext from './BrushContext.svelte';
-  import { type BrushDomainType, type BrushState, expandBandBrushDomain } from '../states/brush.svelte.js';
+  import {
+    type BrushDomainType,
+    type BrushState,
+    expandBandBrushDomain,
+  } from '../states/brush.svelte.js';
 
   import { setChartContext } from '../contexts/chart.js';
   import { ChartState } from '../states/chart.svelte.js';
@@ -741,7 +745,8 @@
 
   // Resolve which projection properties the transform state applies to
   const resolvedApply = $derived.by(() => {
-    if (transform?.mode !== 'projection') return { rotation: false, scale: false, translate: false };
+    if (transform?.mode !== 'projection')
+      return { rotation: false, scale: false, translate: false };
 
     // Auto-detect globe projections from clipAngle (flat projections return 0, globes return > 0)
     let isGlobe = false;
@@ -773,7 +778,10 @@
   });
 
   const initialTransform = $derived(
-    transform?.mode === 'projection' && (resolvedApply.translate || resolvedApply.scale) && geo?.fitGeojson && geo?.projection
+    transform?.mode === 'projection' &&
+      (resolvedApply.translate || resolvedApply.scale) &&
+      geo?.fitGeojson &&
+      geo?.projection
       ? geoFitObjectTransform(
           geo.projection(),
           [chartState.width, chartState.height],
@@ -827,7 +835,9 @@
         axisScale: number,
         dimension: number,
         baseDomain: number[],
-        extent: { min?: number | Date | 'data'; max?: number | Date | 'data'; minRange?: number } | undefined
+        extent:
+          | { min?: number | Date | 'data'; max?: number | Date | 'data'; minRange?: number }
+          | undefined
       ): number => {
         if (!extent || baseDomain.length < 2 || dimension <= 0) return axisTranslate;
 
@@ -844,13 +854,17 @@
 
         // Normalize reversed domains by flipping the translate
         const reversed = rawD0 > rawD1;
-        const normTranslate = reversed ? dimension * axisScale - axisTranslate - dimension : axisTranslate;
+        const normTranslate = reversed
+          ? dimension * axisScale - axisTranslate - dimension
+          : axisTranslate;
         const numMin = Math.min(rawD0, rawD1);
 
         const rawMinVal = resolveValue(extent.min, baseDomain[0]);
         const rawMaxVal = resolveValue(extent.max, baseDomain[1]);
-        const minVal = rawMinVal != null && rawMaxVal != null ? Math.min(rawMinVal, rawMaxVal) : rawMinVal;
-        const maxVal = rawMinVal != null && rawMaxVal != null ? Math.max(rawMinVal, rawMaxVal) : rawMaxVal;
+        const minVal =
+          rawMinVal != null && rawMaxVal != null ? Math.min(rawMinVal, rawMaxVal) : rawMinVal;
+        const maxVal =
+          rawMinVal != null && rawMaxVal != null ? Math.max(rawMinVal, rawMaxVal) : rawMaxVal;
 
         // Current visible domain from translate/scale
         const f0 = -normTranslate / axisScale / dimension;
@@ -869,11 +883,15 @@
         // Enforce domain min/max (pan boundaries)
         if (minVal != null && visMin < minVal) {
           visMin = minVal;
-          visMax = visMin + (extent.minRange != null && visRange < extent.minRange ? extent.minRange : visRange);
+          visMax =
+            visMin +
+            (extent.minRange != null && visRange < extent.minRange ? extent.minRange : visRange);
         }
         if (maxVal != null && visMax > maxVal) {
           visMax = maxVal;
-          visMin = visMax - (extent.minRange != null && visRange < extent.minRange ? extent.minRange : visRange);
+          visMin =
+            visMax -
+            (extent.minRange != null && visRange < extent.minRange ? extent.minRange : visRange);
           if (minVal != null && visMin < minVal) visMin = minVal;
         }
 
@@ -930,10 +948,9 @@
 
   // Whether this is a band scale domain transform (affects scaleExtent and constrain defaults)
   const isBandDomainTransform = $derived(
-    transform?.mode === 'domain' && (
-      ((transform.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp)) ||
-      ((transform.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp))
-    )
+    transform?.mode === 'domain' &&
+      (((transform.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp)) ||
+        ((transform.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp)))
   );
 
   // For projection mode, scaleExtent is relative to the initial fitted scale (like d3-zoom).
@@ -942,10 +959,10 @@
   const resolvedScaleExtent = $derived.by(() => {
     if (transform?.mode === 'projection' && transform?.scaleExtent && initialTransform) {
       const baseScale = initialTransform.scale;
-      return [
-        transform.scaleExtent[0] * baseScale,
-        transform.scaleExtent[1] * baseScale,
-      ] as [number, number];
+      return [transform.scaleExtent[0] * baseScale, transform.scaleExtent[1] * baseScale] as [
+        number,
+        number,
+      ];
     }
     if (!isBandDomainTransform) return transform?.scaleExtent;
     const userExtent = transform?.scaleExtent;
@@ -972,7 +989,12 @@
   // The viewport (at current zoom) must overlap with the translateExtent world bounds.
   // As zoom increases, the allowed translate range grows proportionally.
   const projectionTranslateConstrain = $derived.by(() => {
-    if (transform?.mode !== 'projection' || !transform?.translateExtent || !initialTransform || resolvedApply.rotation) {
+    if (
+      transform?.mode !== 'projection' ||
+      !transform?.translateExtent ||
+      !initialTransform ||
+      resolvedApply.rotation
+    ) {
       return undefined;
     }
 
@@ -998,10 +1020,8 @@
   // Default constrain for band scale domain transforms: prevent panning past data boundaries
   const bandScaleConstrain = $derived.by(() => {
     if (!isBandDomainTransform) return undefined;
-    const xIsBand =
-      (transform!.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp);
-    const yIsBand =
-      (transform!.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp);
+    const xIsBand = (transform!.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp);
+    const yIsBand = (transform!.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp);
 
     return (t: { scale: number; translate: { x: number; y: number } }) => {
       let { scale, translate } = t;
@@ -1021,7 +1041,17 @@
   // Compose user-provided constrain with domainExtent constrain and band scale constrain
   const composedConstrain = $derived.by(() => {
     const userConstrain = transform?.constrain;
-    const constrains = [bandScaleConstrain, domainExtentConstrain, projectionTranslateConstrain, userConstrain].filter(Boolean) as Array<(t: { scale: number; translate: { x: number; y: number } }) => { scale: number; translate: { x: number; y: number } }>;
+    const constrains = [
+      bandScaleConstrain,
+      domainExtentConstrain,
+      projectionTranslateConstrain,
+      userConstrain,
+    ].filter(Boolean) as Array<
+      (t: { scale: number; translate: { x: number; y: number } }) => {
+        scale: number;
+        translate: { x: number; y: number };
+      }
+    >;
     if (constrains.length === 0) return undefined;
     if (constrains.length === 1) return constrains[0];
     return (t: { scale: number; translate: { x: number; y: number } }) => {
@@ -1089,7 +1119,14 @@
   >
     {#key chartState.isMounted}
       <!-- svelte-ignore ownership_invalid_binding -->
-      {@const { domainExtent: _de, constrain: _uc, apply: _apply, scaleExtent: _se, translateExtent: _te, ...transformProps } = transform ?? {}}
+      {@const {
+        domainExtent: _de,
+        constrain: _uc,
+        apply: _apply,
+        scaleExtent: _se,
+        translateExtent: _te,
+        ...transformProps
+      } = transform ?? {}}
       <TransformContext
         bind:state={chartState.transformState}
         mode={transform?.mode ?? 'none'}
@@ -1100,7 +1137,9 @@
         scaleExtent={resolvedScaleExtent}
         translateExtent={resolvedTranslateExtent}
         constrain={composedConstrain}
-        disablePointer={(brush === true || (typeof brush === 'object' && !brush.disabled)) || transform?.disablePointer}
+        disablePointer={brush === true ||
+          (typeof brush === 'object' && !brush.disabled) ||
+          transform?.disablePointer}
         {ondragstart}
         {onTransform}
         {ondragend}
@@ -1108,7 +1147,11 @@
         <!-- svelte-ignore ownership_invalid_binding -->
         <BrushContext {...enhancedBrushProps} bind:state={chartState.brushState}>
           <!-- svelte-ignore ownership_invalid_binding -->
-          <TooltipContext onclick={onTooltipClick} {...getObjectOrNull(tooltipContext)} bind:state={chartState.tooltipState}>
+          <TooltipContext
+            onclick={onTooltipClick}
+            {...getObjectOrNull(tooltipContext)}
+            bind:state={chartState.tooltipState}
+          >
             <ChartChildren {children} {tooltipContext} {...restProps} />
           </TooltipContext>
         </BrushContext>

package/dist/components/ChartChildren.svelte

@@ -195,7 +195,12 @@
     {#if typeof grid === 'function'}
       {@render grid(snippetProps)}
     {:else if grid}
-      <Grid x={context.valueAxis === 'x' || context.radial} y={context.valueAxis === 'y' || context.radial} {...getObjectOrNull(grid)} {...props.grid} />
+      <Grid
+        x={context.valueAxis === 'x' || context.radial}
+        y={context.valueAxis === 'y' || context.radial}
+        {...getObjectOrNull(grid)}
+        {...props.grid}
+      />
     {/if}
 
     <ChartClipPath disabled={!context.props.brush && context.transformState?.mode !== 'domain'}>
@@ -212,7 +217,12 @@
       {#if typeof rule === 'function'}
         {@render rule(snippetProps)}
       {:else if rule}
-        <Rule x={context.valueAxis === 'x' ? 0 : false} y={context.valueAxis === 'y' ? 0 : false} {...getObjectOrNull(rule)} {...props.rule} />
+        <Rule
+          x={context.valueAxis === 'x' ? 0 : false}
+          y={context.valueAxis === 'y' ? 0 : false}
+          {...getObjectOrNull(rule)}
+          {...props.rule}
+        />
       {/if}
     {:else if axis}
       {#if axis !== 'x'}
@@ -236,12 +246,20 @@
       {#if typeof rule === 'function'}
         {@render rule(snippetProps)}
       {:else if rule}
-        <Rule x={context.valueAxis === 'x' ? 0 : false} y={context.valueAxis === 'y' ? 0 : false} {...getObjectOrNull(rule)} {...props.rule} />
+        <Rule
+          x={context.valueAxis === 'x' ? 0 : false}
+          y={context.valueAxis === 'y' ? 0 : false}
+          {...getObjectOrNull(rule)}
+          {...props.rule}
+        />
       {/if}
     {/if}
 
     <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
-    <ChartClipPath disabled={!context.props.brush && context.transformState?.mode !== 'domain'} full>
+    <ChartClipPath
+      disabled={!context.props.brush && context.transformState?.mode !== 'domain'}
+      full
+    >
       {#if typeof points === 'function'}
         {@render points(snippetProps)}
       {:else if points}