layerchart 2.0.0-next.55 → 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/Bar.svelte

@@ -264,13 +264,15 @@
 
   // 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)

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}

package/dist/components/Circle.svelte

@@ -227,6 +227,15 @@
   const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
   const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
   const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
+  const staticBorderWidth = $derived(
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
+  );
 
   // Style options (shared between pixel and data mode)
   function getStyleOptions(
@@ -262,12 +271,13 @@
             'lc-circle',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: [
-            restProps.style as string | undefined,
-            dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
-          ]
-            .filter(Boolean)
-            .join('; ') || undefined,
+          style:
+            [
+              restProps.style as string | undefined,
+              dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
         };
   }
 
@@ -400,6 +410,12 @@
       {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
       {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
       <div
         style:position="absolute"
         style:left="{item.cx}px"
@@ -407,9 +423,10 @@
         style:width="{item.r * 2}px"
         style:height="{item.r * 2}px"
         style:border-radius="50%"
-        style:background-color={resolvedFill}
+        style:background={resolvedFill}
+        style:background-origin="border-box"
         style:opacity={resolvedOpacity}
-        style:border-width={resolvedStrokeWidth}
+        style:border-width={resolvedBorderWidth}
         style:border-color={resolvedStroke}
         style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
         style:transform="translate(-50%, -50%)"
@@ -425,9 +442,10 @@
       style:width="{motionR.current * 2}px"
       style:height="{motionR.current * 2}px"
       style:border-radius="50%"
-      style:background-color={staticFill}
+      style:background={staticFill}
+      style:background-origin="border-box"
       style:opacity={staticOpacity}
-      style:border-width={staticStrokeWidth}
+      style:border-width={staticBorderWidth}
       style:border-color={staticStroke}
       style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
       style:transform="translate(-50%, -50%)"
@@ -455,8 +473,12 @@
     }
 
     /* Html layers */
-    :global(:where(.lc-layout-html .lc-circle):not([background-color])) {
-      background-color: var(--fill-color);
+    :global(:where(.lc-layout-html .lc-circle)) {
+      /* Match SVG sizing (visual extent equals `r * 2`, border on outer edge) */
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-circle):not([background])) {
+      background: var(--fill-color);
     }
     :global(:where(.lc-layout-html .lc-circle):not([border-color])) {
       border-color: var(--stroke-color);

package/dist/components/ClipPath.svelte

@@ -86,14 +86,10 @@
 
   // Outer rect covering the chart bounds — combined with the clip shape under
   // the even-odd fill rule to invert the clip.
-  const outerRect = $derived(
-    `M0,0 H${chartCtx.width} V${chartCtx.height} H0 Z`
-  );
+  const outerRect = $derived(`M0,0 H${chartCtx.width} V${chartCtx.height} H0 Z`);
 
   // Effective path used for canvas + html layers when inverting.
-  const effectivePath = $derived(
-    invert && path ? `${outerRect} ${path}` : path
-  );
+  const effectivePath = $derived(invert && path ? `${outerRect} ${path}` : path);
 
   // Cache the Path2D so `ctx.clip()` gets a stable reference per `path` change.
   const canvasPath = $derived(
@@ -144,9 +140,7 @@
       class="lc-clip-path-div"
       style:position="absolute"
       style:inset="0"
-      style:clip-path={invert
-        ? `path(evenodd, "${effectivePath}")`
-        : `path("${effectivePath}")`}
+      style:clip-path={invert ? `path(evenodd, "${effectivePath}")` : `path("${effectivePath}")`}
     >
       {@render children({ id, url, useId })}
     </div>

package/dist/components/Ellipse.svelte

@@ -310,6 +310,15 @@
   const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
   const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
   const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
+  const staticBorderWidth = $derived(
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
+  );
 
   chartCtx.registerComponent({
     name: 'Ellipse',
@@ -401,6 +410,12 @@
       {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
       {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
       <div
         style:position="absolute"
         style:left="{item.cx}px"
@@ -408,9 +423,10 @@
         style:width="{item.rx * 2}px"
         style:height="{item.ry * 2}px"
         style:border-radius="50%"
-        style:background-color={resolvedFill}
+        style:background={resolvedFill}
+        style:background-origin="border-box"
         style:opacity={resolvedOpacity}
-        style:border-width={resolvedStrokeWidth}
+        style:border-width={resolvedBorderWidth}
         style:border-color={resolvedStroke}
         style:border-style="solid"
         style:transform="translate(-50%, -50%)"
@@ -426,9 +442,10 @@
       style:width="{motionRx.current * 2}px"
       style:height="{motionRy.current * 2}px"
       style:border-radius="50%"
-      style:background-color={staticFill}
+      style:background={staticFill}
+      style:background-origin="border-box"
       style:opacity={staticOpacity}
-      style:border-width={staticStrokeWidth}
+      style:border-width={staticBorderWidth}
       style:border-color={staticStroke}
       style:border-style="solid"
       style:transform="translate(-50%, -50%)"
@@ -454,8 +471,12 @@
     }
 
     /* Html layers */
-    :global(:where(.lc-layout-html .lc-ellipse):not([background-color])) {
-      background-color: var(--fill-color);
+    :global(:where(.lc-layout-html .lc-ellipse)) {
+      /* Match SVG sizing (visual extent equals `rx * 2`×`ry * 2`, border on outer edge) */
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-ellipse):not([background])) {
+      background: var(--fill-color);
     }
     :global(:where(.lc-layout-html .lc-ellipse):not([border-color])) {
       border-color: var(--stroke-color);

package/dist/components/GeoLegend.svelte

@@ -258,9 +258,7 @@
   const width = $derived(Math.ceil(barWidth) + padding * 2);
   const svgHeight = $derived(titleHeight + height + tickLabelHeight + padding * 2 + 3);
   const barY = $derived(
-    labelPlacement === 'top'
-      ? titleHeight + padding + tickLabelHeight
-      : titleHeight + padding
+    labelPlacement === 'top' ? titleHeight + padding + tickLabelHeight : titleHeight + padding
   );
   const tickLabelY = $derived(
     labelPlacement === 'top'