layerchart 2.0.0-next.62 → 2.0.0-next.64

package/dist/components/Dodge/Dodge.test.js

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import { dodge } from './Dodge.shared.svelte.js';
+/** Build inputs for the circular case (`rx === ry === r`). */
+function input(arr) {
+    return arr.map((d, index) => ({
+        x: d.x,
+        rx: d.r,
+        ry: d.r,
+        data: { id: d.id },
+        index,
+    }));
+}
+/** Build inputs for rectangular cases (per-axis half-extents). */
+function rectInput(arr) {
+    return arr.map((d, index) => ({
+        x: d.x,
+        rx: d.rx,
+        ry: d.ry,
+        data: { id: d.id },
+        index,
+    }));
+}
+describe('dodge() — circular packing', () => {
+    it('places a single item at the natural anchor position', () => {
+        const out = dodge(input([{ id: 'a', x: 50, r: 10 }]), {
+            axis: 'y',
+            anchor: 'bottom',
+            padding: 0,
+            baseline: 100,
+        });
+        expect(out).toHaveLength(1);
+        expect(out[0].x).toBe(50);
+        expect(out[0].y).toBe(90); // baseline - r
+    });
+    it('places non-overlapping items both at the anchor', () => {
+        // Two items 100px apart, r=10 each — no horizontal overlap, both can sit at the bottom
+        const out = dodge(input([
+            { id: 'a', x: 0, r: 10 },
+            { id: 'b', x: 100, r: 10 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 100 });
+        expect(out[0].y).toBe(90);
+        expect(out[1].y).toBe(90);
+    });
+    it('stacks overlapping items vertically', () => {
+        // Two items at the same x — must stack with a gap ≥ r1 + r2 + padding = 21.
+        // padding is also applied to the chart edge, so the first item sits 1px
+        // above the bottom (y=89, not 90).
+        const out = dodge(input([
+            { id: 'a', x: 50, r: 10 },
+            { id: 'b', x: 50, r: 10 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 1, baseline: 100 });
+        expect(out[0].y).toBe(89);
+        expect(out[1].y).toBeCloseTo(89 - 21, 5); // gap of sumR+padding
+    });
+    it('returns items in original input order', () => {
+        const out = dodge(input([
+            { id: 'small', x: 50, r: 5 },
+            { id: 'large', x: 50, r: 20 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 100 });
+        expect(out[0].data.id).toBe('small');
+        expect(out[1].data.id).toBe('large');
+        // Algorithm processes input order: small placed first at bottom (y=95),
+        // then large stacks above.
+        expect(out[0].y).toBe(95);
+        expect(out[1].y).toBeLessThan(95);
+    });
+    it('respects anchor=top (stacks downward)', () => {
+        const out = dodge(input([
+            { id: 'a', x: 50, r: 10 },
+            { id: 'b', x: 50, r: 10 },
+        ]), { axis: 'y', anchor: 'top', padding: 0, baseline: 0 });
+        expect(out[0].y).toBe(10); // first at top
+        expect(out[1].y).toBeCloseTo(30, 5); // second below, gap = r1+r2 = 20
+    });
+    it('swaps axes for axis=x', () => {
+        const out = dodge(input([{ id: 'a', x: 30, r: 5 }]), {
+            axis: 'x',
+            anchor: 'left',
+            padding: 0,
+            baseline: 0,
+        });
+        expect(out[0].x).toBe(5); // dodged: at left edge
+        expect(out[0].y).toBe(30); // anchor y preserved
+    });
+});
+describe('dodge() — rectangular packing (rx + ry)', () => {
+    // ry = 8 ⇒ row spacing = 2 * ry = 16 (matches the old `rowHeight: 16` cases).
+    it('places non-overlapping items in row 0', () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 0, rx: 20, ry: 8 }, // spans -20 to 20
+            { id: 'b', x: 100, rx: 20, ry: 8 }, // spans 80 to 120
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 200, rectangular: true });
+        // Row 0 center from bottom = baseline - ry = 192
+        expect(out[0].y).toBe(192);
+        expect(out[1].y).toBe(192);
+    });
+    it('stacks horizontally-overlapping items into separate rows', () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 50, rx: 30, ry: 8 },
+            { id: 'b', x: 60, rx: 30, ry: 8 },
+            { id: 'c', x: 70, rx: 30, ry: 8 },
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 200, rectangular: true });
+        // Input order: a → row 0, b overlaps a → row 1, c overlaps both → row 2
+        // Row centers from bottom: 192, 176, 160.
+        expect(out[0].y).toBe(192);
+        expect(out[1].y).toBe(176);
+        expect(out[2].y).toBe(160);
+    });
+    it("reuses row 0 when later items don't overlap earlier ones in that row", () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 0, rx: 10, ry: 8 },
+            { id: 'b', x: 5, rx: 10, ry: 8 }, // overlaps a → row 1
+            { id: 'c', x: 100, rx: 10, ry: 8 }, // far from both → row 0
+        ]), { axis: 'y', anchor: 'bottom', padding: 0, baseline: 200, rectangular: true });
+        expect(out[0].y).toBe(192);
+        expect(out[1].y).toBe(176);
+        expect(out[2].y).toBe(192);
+    });
+    it('respects anchor=top for rectangular mode', () => {
+        const out = dodge(rectInput([
+            { id: 'a', x: 50, rx: 30, ry: 8 },
+            { id: 'b', x: 60, rx: 30, ry: 8 },
+        ]), { axis: 'y', anchor: 'top', padding: 0, baseline: 0, rectangular: true });
+        // Row 0 from top: 0 + ry = 8. Row 1: 24.
+        expect(out[0].y).toBe(8);
+        expect(out[1].y).toBe(24);
+    });
+});

package/dist/components/Image/Image.html.svelte

@@ -104,11 +104,3 @@
     {...rest as any}
   />
 {/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-image)) {
-      pointer-events: none;
-    }
-  }
-</style>

package/dist/components/Image/Image.svg.svelte

@@ -127,12 +127,4 @@
     {opacity}
     class={cls('lc-image', className)}
   />
-{/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-image)) {
-      pointer-events: none;
-    }
-  }
-</style>
+{/if}

package/dist/components/Pattern/Pattern.canvas.svelte

@@ -22,11 +22,14 @@
     height = size,
     lines: linesProp,
     circles: circlesProp,
+    rects: rectsProp,
     background,
     children,
   }: PatternProps = $props();
 
-  const shapes = $derived(buildPatternShapes(linesProp, circlesProp, size, width, height));
+  const shapes = $derived(
+    buildPatternShapes(linesProp, circlesProp, size, width, height, rectsProp)
+  );
 
   let canvasPattern = $state<CanvasPattern | null>(null);
 

package/dist/components/Pattern/Pattern.shared.svelte.d.ts

@@ -21,6 +21,22 @@ export type PatternCircleDef = {
     /** The opacity of the circle @default 1 */
     opacity?: number;
 };
+export type PatternRectDef = {
+    /**
+     * Inset from each edge of the pattern tile, in pixels. Useful for cell
+     * grids — set to half the desired gap between cells.
+     * @default 0
+     */
+    inset?: number;
+    /** Horizontal corner radius, or `"100%"` for a full ellipse / circle. */
+    rx?: number | string;
+    /** Vertical corner radius. Defaults to `rx` if not provided. */
+    ry?: number | string;
+    /** Fill color @default 'var(--color-surface-content)' */
+    color?: string;
+    /** Opacity @default 1 */
+    opacity?: number;
+};
 export type PatternPropsWithoutHTML = {
     /** The id of the pattern */
     id?: string;
@@ -34,6 +50,8 @@ export type PatternPropsWithoutHTML = {
     lines?: boolean | PatternLineDef | PatternLineDef[];
     /** The number of circles to render */
     circles?: boolean | PatternCircleDef | PatternCircleDef[];
+    /** Rect(s) to render in each pattern tile */
+    rects?: boolean | PatternRectDef | PatternRectDef[];
     /** The background color of the pattern */
     background?: string;
     /** Render as a child of the pattern. Note: only supported on the `<Svg>` layer. */
@@ -59,9 +77,20 @@ export type LineShape = {
     strokeWidth: string | number;
     opacity: number;
 };
-export type PatternShape = CircleShape | LineShape;
+export type RectShape = {
+    type: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number | string;
+    ry?: number | string;
+    fill: string;
+    opacity: number;
+};
+export type PatternShape = CircleShape | LineShape | RectShape;
 /**
  * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
  * Pure function — no reactivity.
  */
-export declare function buildPatternShapes(linesProp: PatternPropsWithoutHTML['lines'], circlesProp: PatternPropsWithoutHTML['circles'], size: number, width: number, height: number): PatternShape[];
+export declare function buildPatternShapes(linesProp: PatternPropsWithoutHTML['lines'], circlesProp: PatternPropsWithoutHTML['circles'], size: number, width: number, height: number, rectsProp?: PatternPropsWithoutHTML['rects']): PatternShape[];

package/dist/components/Pattern/Pattern.shared.svelte.js

@@ -2,7 +2,7 @@
  * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
  * Pure function — no reactivity.
  */
-export function buildPatternShapes(linesProp, circlesProp, size, width, height) {
+export function buildPatternShapes(linesProp, circlesProp, size, width, height, rectsProp) {
     const shapes = [];
     if (linesProp) {
         const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
@@ -67,5 +67,24 @@ export function buildPatternShapes(linesProp, circlesProp, size, width, height)
             }
         }
     }
+    if (rectsProp) {
+        const rectDefs = Array.isArray(rectsProp) ? rectsProp : rectsProp === true ? [{}] : [rectsProp];
+        for (const rect of rectDefs) {
+            const inset = rect.inset ?? 0;
+            const fill = rect.color ?? 'var(--color-surface-content, currentColor)';
+            const opacity = rect.opacity ?? 1;
+            shapes.push({
+                type: 'rect',
+                x: inset,
+                y: inset,
+                width: Math.max(0, width - 2 * inset),
+                height: Math.max(0, height - 2 * inset),
+                rx: rect.rx,
+                ry: rect.ry,
+                fill,
+                opacity,
+            });
+        }
+    }
     return shapes;
 }

package/dist/components/Pattern/Pattern.svg.svelte

@@ -19,13 +19,16 @@
     height = size,
     lines: linesProp,
     circles: circlesProp,
+    rects: rectsProp,
     background,
     patternContent,
     children,
     ...rest
   }: PatternProps = $props();
 
-  const shapes = $derived(buildPatternShapes(linesProp, circlesProp, size, width, height));
+  const shapes = $derived(
+    buildPatternShapes(linesProp, circlesProp, size, width, height, rectsProp)
+  );
 </script>
 
 <defs>
@@ -62,6 +65,19 @@
           opacity={circle.opacity}
         />
       {/each}
+
+      {#each shapes.filter((s) => s.type === 'rect') as rect}
+        <rect
+          x={rect.x}
+          y={rect.y}
+          width={rect.width}
+          height={rect.height}
+          rx={rect.rx as number | string | undefined}
+          ry={rect.ry as number | string | undefined}
+          fill={rect.fill}
+          opacity={rect.opacity}
+        />
+      {/each}
     {/if}
   </pattern>
 </defs>

package/dist/components/Raster/Raster.base.svelte

@@ -16,11 +16,7 @@
   import { max, min } from 'd3-array';
   import { rgb } from 'd3-color';
 
-  import {
-    accessor as resolveAccessor,
-    chartDataArray,
-    type Accessor,
-  } from '../../utils/common.js';
+  import { accessor as resolveAccessor, chartDataArray, type Accessor } from '../../utils/common.js';
   import { getChartContext } from '../../contexts/chart.js';
   import { getGeoContext } from '../../contexts/geo.js';
   import { gridCellCenterToBounds, resolveRasterBounds } from '../../utils/index.js';
@@ -89,9 +85,7 @@
     if (!ctx.width || !ctx.height) return new Float64Array(0);
 
     if (isGridMode) {
-      return dataProp instanceof Float64Array
-        ? dataProp
-        : Float64Array.from(dataProp as number[]);
+      return dataProp instanceof Float64Array ? dataProp : Float64Array.from(dataProp as number[]);
     }
 
     if (typeof valueProp === 'function' && valueProp.length >= 2) {

package/dist/components/Rect/Rect.canvas.svelte

@@ -1,8 +1,5 @@
 <script lang="ts" module>
-  export type {
-    RectProps,
-    RectPropsWithoutHTML,
-  } from './Rect.shared.svelte.js';
+  export type { RectProps, RectPropsWithoutHTML } from './Rect.shared.svelte.js';
 </script>
 
 <script lang="ts">
@@ -90,6 +87,7 @@
             height: item.height,
             rx: c.rx,
             ry: c.ry,
+            corners: c.resolveCorners(item.width, item.height),
           },
           styleOpts
         );

package/dist/components/Rect/Rect.canvas.svelte.d.ts

@@ -1,4 +1,4 @@
-export type { RectProps, RectPropsWithoutHTML, } from './Rect.shared.svelte.js';
+export type { RectProps, RectPropsWithoutHTML } from './Rect.shared.svelte.js';
 import { type RectProps } from './Rect.shared.svelte.js';
 declare const Rect: import("svelte").Component<RectProps, {}, "">;
 type Rect = ReturnType<typeof Rect>;

package/dist/components/Rect/Rect.html.svelte

@@ -1,8 +1,5 @@
 <script lang="ts" module>
-  export type {
-    RectProps,
-    RectPropsWithoutHTML,
-  } from './Rect.shared.svelte.js';
+  export type { RectProps, RectPropsWithoutHTML } from './Rect.shared.svelte.js';
 </script>
 
 <script lang="ts">
@@ -11,10 +8,7 @@
   import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
   import { RectState, rectMarkInfo, type RectProps } from './Rect.shared.svelte.js';
 
-  let {
-    children,
-    ...rest
-  }: RectProps = $props();
+  let { children, ...rest }: RectProps = $props();
 
   const c = new RectState(() => rest as RectProps);
 
@@ -55,7 +49,7 @@
       style:border-width={resolvedBorderWidth}
       style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
       style:border-color={resolvedStroke}
-      style:border-radius="{c.rx}px"
+      style:border-radius={c.borderRadius(item.width, item.height) ?? `${c.rx}px`}
       class={cls('lc-rect', resolvedClass)}
     ></div>
   {/each}

package/dist/components/Rect/Rect.html.svelte.d.ts

@@ -1,4 +1,4 @@
-export type { RectProps, RectPropsWithoutHTML, } from './Rect.shared.svelte.js';
+export type { RectProps, RectPropsWithoutHTML } from './Rect.shared.svelte.js';
 import { type RectProps } from './Rect.shared.svelte.js';
 declare const Rect: import("svelte").Component<RectProps, {}, "">;
 type Rect = ReturnType<typeof Rect>;

package/dist/components/Rect/Rect.shared.svelte.d.ts

@@ -42,14 +42,14 @@ export type RectPropsWithoutHTML = {
      *
      * @default 0
      */
-    width?: number;
+    width?: DataProp;
     initialWidth?: number;
     /**
      * The height of the rectangle (pixels).
      *
      * @default 0
      */
-    height?: number;
+    height?: DataProp;
     initialHeight?: number;
     /**
      * Left/start x edge (data mode).
@@ -158,6 +158,9 @@ export declare class RectState {
     get motionY(): any;
     get motionWidth(): any;
     get motionHeight(): any;
+    resolveCorners(width: number, height: number): import("../../utils/rect.svelte.js").CornerRadii | undefined;
+    roundedRectPath(x: number, y: number, width: number, height: number): string | undefined;
+    borderRadius(width: number, height: number): string | undefined;
     resolvedCorners: import("../../utils/rect.svelte.js").CornerRadii | undefined;
     borderRadiusStyle: string | undefined;
     pixelPathData: string | undefined;

package/dist/components/Rect/Rect.shared.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from 'svelte';
-import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair } from '../../utils/dataProp.js';
 import { chartDataArray } from '../../utils/common.js';
 import { resolveCorners, cornersUniform, resolveInsets, } from '../../utils/rect.svelte.js';
 import { roundedRectPath, parseDashArray } from '../../utils/path.js';
@@ -32,7 +32,7 @@ export class RectState {
     geo = getGeoContext();
     // Data mode detection
     hasEdgeProps = $derived(hasAnyDataProp(this.#getProps().x0, this.#getProps().y0, this.#getProps().x1, this.#getProps().y1));
-    dataMode = $derived(hasAnyDataProp(this.#getProps().x, this.#getProps().y) || this.hasEdgeProps);
+    dataMode = $derived(hasAnyDataProp(this.#getProps().x, this.#getProps().y, this.#getProps().width, this.#getProps().height) || this.hasEdgeProps);
     // Data resolution
     #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
     resolvedItems = $derived.by(() => {
@@ -92,8 +92,10 @@ export class RectState {
             return {
                 x: resolvedX + resolvedInsets.left,
                 y: resolvedY + resolvedInsets.top,
-                width: Math.max(0, (props.width ?? 0) - resolvedInsets.left - resolvedInsets.right),
-                height: Math.max(0, (props.height ?? 0) - resolvedInsets.top - resolvedInsets.bottom),
+                width: Math.max(0, resolveDataProp(props.width, d, undefined, 0) - resolvedInsets.left - resolvedInsets.right),
+                height: Math.max(0, resolveDataProp(props.height, d, undefined, 0) -
+                    resolvedInsets.top -
+                    resolvedInsets.bottom),
             };
         }
     }
@@ -133,11 +135,24 @@ export class RectState {
         return this.#motionHeight.current;
     }
     // Resolved per-corner radii (clamped to current bounds)
-    resolvedCorners = $derived.by(() => {
+    resolveCorners(width, height) {
         const corners = this.#getProps().corners;
         if (corners === undefined)
             return undefined;
-        return resolveCorners(corners, this.motionWidth, this.motionHeight);
+        return resolveCorners(corners, width, height);
+    }
+    roundedRectPath(x, y, width, height) {
+        const corners = this.resolveCorners(width, height);
+        if (!corners || !this.cornersNonUniform)
+            return undefined;
+        return roundedRectPath(x, y, width, height, corners);
+    }
+    borderRadius(width, height) {
+        const corners = this.resolveCorners(width, height);
+        return corners ? corners.map((c) => `${c}px`).join(' ') : undefined;
+    }
+    resolvedCorners = $derived.by(() => {
+        return this.resolveCorners(this.motionWidth, this.motionHeight);
     });
     borderRadiusStyle = $derived(this.resolvedCorners ? this.resolvedCorners.map((c) => `${c}px`).join(' ') : undefined);
     pixelPathData = $derived.by(() => {
@@ -158,9 +173,7 @@ export class RectState {
     staticStrokeWidth = $derived(typeof this.#getProps().strokeWidth === 'number'
         ? this.#getProps().strokeWidth
         : undefined);
-    staticOpacity = $derived(typeof this.#getProps().opacity === 'number'
-        ? this.#getProps().opacity
-        : undefined);
+    staticOpacity = $derived(typeof this.#getProps().opacity === 'number' ? this.#getProps().opacity : undefined);
     staticClassName = $derived(typeof this.#getProps().class === 'string' ? this.#getProps().class : undefined);
     // Match SVG's implicit `stroke-width: 1` default
     staticBorderWidth = $derived.by(() => {
@@ -176,13 +189,13 @@ export class RectState {
         const initial = getProps();
         const initialX = initial.initialX ?? (typeof initial.x === 'number' ? initial.x : 0);
         const initialY = initial.initialY ?? (typeof initial.y === 'number' ? initial.y : 0);
-        const initialWidth = initial.initialWidth ?? initial.width ?? 0;
-        const initialHeight = initial.initialHeight ?? initial.height ?? 0;
+        const initialWidth = initial.initialWidth ?? (typeof initial.width === 'number' ? initial.width : 0);
+        const initialHeight = initial.initialHeight ?? (typeof initial.height === 'number' ? initial.height : 0);
         const motion = initial.motion;
         this.#motionX = createMotion(initialX, () => (typeof getProps().x === 'number' ? getProps().x : 0), motion === undefined ? undefined : parseMotionProp(motion, 'x'));
         this.#motionY = createMotion(initialY, () => (typeof getProps().y === 'number' ? getProps().y : 0), motion === undefined ? undefined : parseMotionProp(motion, 'y'));
-        this.#motionWidth = createMotion(initialWidth, () => getProps().width ?? 0, motion === undefined ? undefined : parseMotionProp(motion, 'width'));
-        this.#motionHeight = createMotion(initialHeight, () => getProps().height ?? 0, motion === undefined ? undefined : parseMotionProp(motion, 'height'));
+        this.#motionWidth = createMotion(initialWidth, () => (typeof getProps().width === 'number' ? getProps().width : 0), motion === undefined ? undefined : parseMotionProp(motion, 'width'));
+        this.#motionHeight = createMotion(initialHeight, () => (typeof getProps().height === 'number' ? getProps().height : 0), motion === undefined ? undefined : parseMotionProp(motion, 'height'));
         this.#dataMotionMap = createDataMotionMap(motion);
         if (this.#dataMotionMap) {
             const motionMap = this.#dataMotionMap;

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

@@ -47,6 +47,28 @@ describe('Rect', () => {
             const rects = page.getByTestId(componentTestId).elements();
             await expect.poll(() => rects.length).toBe(3);
         });
+        it('should resolve width and height from data', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data: [{ x: 20, y: 30, width: 80, height: 40 }],
+                    x: 'x',
+                    y: 'y',
+                    xDomain: [0, 100],
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'x',
+                    y: 'y',
+                    width: 'width',
+                    height: 'height',
+                },
+            });
+            const rect = page.getByTestId(componentTestId);
+            await expect.element(rect).toBeInTheDocument();
+            expect(rect.element()?.getAttribute('width')).toBe('80');
+            expect(rect.element()?.getAttribute('height')).toBe('40');
+        });
     });
     describe('data mode - colors', () => {
         const data = [
@@ -153,6 +175,29 @@ describe('Rect', () => {
             const width = Number(firstRect?.getAttribute('width'));
             expect(width).toBeGreaterThan(0);
         });
+        it('should render non-uniform corners from edge props', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data: [data[0]],
+                    x: ['x0', 'x1'],
+                    y: 'count',
+                    xDomain: [0, 100],
+                    yDomain: [0, 15],
+                },
+                componentProps: {
+                    x0: 'x0',
+                    x1: 'x1',
+                    y0: (d) => 0,
+                    y1: 'count',
+                    corners: [12, 4, 10, 2],
+                },
+            });
+            const rect = page.getByTestId(componentTestId);
+            await expect.element(rect).toBeInTheDocument();
+            expect(rect.element()?.tagName.toLowerCase()).toBe('path');
+            expect(rect.element()?.getAttribute('d')).toContain('a');
+        });
         it('should use explicit data prop over chart context data', async () => {
             const explicitData = [{ x0: 0, x1: 50, count: 5 }];
             render(TestHarness, {

package/dist/components/Rect/Rect.svg.svelte

@@ -1,8 +1,5 @@
 <script lang="ts" module>
-  export type {
-    RectProps,
-    RectPropsWithoutHTML,
-  } from './Rect.shared.svelte.js';
+  export type { RectProps, RectPropsWithoutHTML } from './Rect.shared.svelte.js';
 </script>
 
 <script lang="ts">
@@ -64,23 +61,41 @@
     {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
     {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
     {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
-    <rect
-      {...rest as any}
-      x={item.x}
-      y={item.y}
-      width={item.width}
-      height={item.height}
-      fill={resolvedFill}
-      fill-opacity={resolvedFillOpacity}
-      stroke={resolvedStroke}
-      stroke-opacity={resolvedStrokeOpacity}
-      stroke-width={resolvedStrokeWidth}
-      opacity={resolvedOpacity}
-      rx={c.rx}
-      ry={c.ry}
-      stroke-dasharray={c.dashArrayAttr}
-      class={cls('lc-rect', resolvedClass)}
-    />
+    {@const pathData = c.roundedRectPath(item.x, item.y, item.width, item.height)}
+    {#if pathData}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <path
+        {...rest as unknown as SVGAttributes<SVGPathElement>}
+        d={pathData}
+        fill={resolvedFill}
+        fill-opacity={resolvedFillOpacity}
+        stroke={resolvedStroke}
+        stroke-opacity={resolvedStrokeOpacity}
+        stroke-width={resolvedStrokeWidth}
+        opacity={resolvedOpacity}
+        stroke-dasharray={c.dashArrayAttr}
+        class={cls('lc-rect', resolvedClass)}
+      />
+    {:else}
+      <rect
+        {...rest as any}
+        x={item.x}
+        y={item.y}
+        width={item.width}
+        height={item.height}
+        fill={resolvedFill}
+        fill-opacity={resolvedFillOpacity}
+        stroke={resolvedStroke}
+        stroke-opacity={resolvedStrokeOpacity}
+        stroke-width={resolvedStrokeWidth}
+        opacity={resolvedOpacity}
+        rx={c.rx}
+        ry={c.ry}
+        stroke-dasharray={c.dashArrayAttr}
+        class={cls('lc-rect', resolvedClass)}
+      />
+    {/if}
   {/each}
 {:else if c.pixelPathData}
   <!-- svelte-ignore a11y_click_events_have_key_events -->

package/dist/components/Rect/Rect.svg.svelte.d.ts

@@ -1,4 +1,4 @@
-export type { RectProps, RectPropsWithoutHTML, } from './Rect.shared.svelte.js';
+export type { RectProps, RectPropsWithoutHTML } from './Rect.shared.svelte.js';
 import { type RectProps } from './Rect.shared.svelte.js';
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
 type Rect = ReturnType<typeof Rect>;

package/dist/components/Spline/Spline.base.svelte

@@ -39,7 +39,7 @@
       pathData={seg.d}
       stroke={seg.stroke}
       fill={seg.fill}
-      opacity={seg.opacity ?? c.seriesOpacity}
+      opacity={seg.opacity ?? (c.seriesOpacity === 1 ? undefined : c.seriesOpacity)}
       {...c.series?.props}
       {...restProps}
     />
@@ -49,7 +49,8 @@
     pathData={c.isTweened ? c.tweenedPath : c.d}
     stroke={(typeof stroke === 'string' ? stroke : undefined) ?? c.series?.color}
     fill={typeof fill === 'string' ? fill : undefined}
-    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? c.seriesOpacity}
+    opacity={(typeof opacity === 'number' ? opacity : undefined) ??
+      (c.seriesOpacity === 1 ? undefined : c.seriesOpacity)}
     {...c.series?.props}
     {...restProps}
   />