layerchart 2.0.0-next.53 → 2.0.0-next.55

package/dist/components/GeoClipPath.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" module>
+  import type { GeoPermissibleObjects } from 'd3-geo';
+  import type { Snippet } from 'svelte';
+
+  import type { ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+  import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
+  import type { Without } from '../utils/types.js';
+
+  export type BaseGeoClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+
+    /**
+     * GeoJSON data defining the clip boundary.
+     */
+    geojson: GeoPermissibleObjects;
+
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Invert the clip — content renders *outside* the geojson shape.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
+    /**
+     * The children snippet to render content inside the clipPath.
+     */
+    children?: ClipPathPropsWithoutHTML['children'];
+  };
+
+  export type GeoClipPathPropsWithoutHTML = BaseGeoClipPathPropsWithoutHTML &
+    Without<GeoPathPropsWithoutHTML, BaseGeoClipPathPropsWithoutHTML>;
+
+  export type GeoClipPathProps = GeoClipPathPropsWithoutHTML;
+</script>
+
+<script lang="ts">
+  import { geoPath as d3GeoPath } from 'd3-geo';
+
+  import ClipPath from './ClipPath.svelte';
+  import { createId } from '../utils/createId.js';
+  import { getGeoContext } from '../contexts/geo.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    geojson,
+    disabled = false,
+    invert = false,
+    children,
+  }: GeoClipPathProps = $props();
+
+  const geo = getGeoContext();
+
+  // d3-geo-path emits an SVG path `d` string that Path2D and
+  // `clip-path: path()` also accept — single source of truth for all layers.
+  const path = $derived(
+    geo.projection && geojson ? (d3GeoPath(geo.projection)(geojson) ?? undefined) : undefined
+  );
+</script>
+
+<ClipPath {id} {disabled} {invert} {children} {path} />

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

@@ -0,0 +1,35 @@
+import type { GeoPermissibleObjects } from 'd3-geo';
+import type { ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
+import type { Without } from '../utils/types.js';
+export type BaseGeoClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+    /**
+     * GeoJSON data defining the clip boundary.
+     */
+    geojson: GeoPermissibleObjects;
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the geojson shape.
+     *
+     * @default false
+     */
+    invert?: boolean;
+    /**
+     * The children snippet to render content inside the clipPath.
+     */
+    children?: ClipPathPropsWithoutHTML['children'];
+};
+export type GeoClipPathPropsWithoutHTML = BaseGeoClipPathPropsWithoutHTML & Without<GeoPathPropsWithoutHTML, BaseGeoClipPathPropsWithoutHTML>;
+export type GeoClipPathProps = GeoClipPathPropsWithoutHTML;
+declare const GeoClipPath: import("svelte").Component<GeoClipPathPropsWithoutHTML, {}, "">;
+type GeoClipPath = ReturnType<typeof GeoClipPath>;
+export default GeoClipPath;

package/dist/components/Grid.svelte

@@ -3,20 +3,31 @@
   import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
   import type { SVGAttributes } from 'svelte/elements';
 
+  /** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+  type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+  };
+
   export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Draw a x-axis lines
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    x?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    x?: boolean | GridLineProps;
 
     /**
-     * Draw a y-axis lines
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    y?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    y?: boolean | GridLineProps;
 
     /**
      * Control the number of x-axis ticks

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

@@ -1,19 +1,29 @@
 import type { Transition, TransitionParams, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { SVGAttributes } from 'svelte/elements';
+/** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+};
 export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Draw a x-axis lines
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    x?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    x?: boolean | GridLineProps;
     /**
-     * Draw a y-axis lines
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    y?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    y?: boolean | GridLineProps;
     /**
      * Control the number of x-axis ticks
      */

package/dist/components/Highlight.svelte

@@ -681,6 +681,7 @@
           y1={line.y1}
           x2={line.x2}
           y2={line.y2}
+          dashArray={[2, 2]}
           {opacity}
           {...extractLayerProps(linesProp, 'lc-highlight-line')}
         />

package/dist/components/Hull.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Without } from '../utils/types.js';
+  import type { Without, CommonStyleProps } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { ComponentProps } from 'svelte';
 
@@ -47,7 +47,7 @@
      * @bindable
      */
     ref?: SVGGElement;
-  };
+  } & CommonStyleProps;
 
   export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
@@ -79,6 +79,12 @@
     onpointermove,
     onclick,
     onpointerleave,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeOpacity,
+    strokeWidth,
+    opacity,
     class: className,
     ref: refProp = $bindable(),
     ...restProps
@@ -112,6 +118,12 @@
     <GeoPath
       geojson={polygon}
       {curve}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
       class={['lc-hull-path', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
@@ -125,6 +137,12 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
       class={['lc-hull-class', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}

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

@@ -1,4 +1,4 @@
-import type { Without } from '../utils/types.js';
+import type { Without, CommonStyleProps } from '../utils/types.js';
 import type { ComponentProps } from 'svelte';
 export type HullPropsWithoutHTML = {
     /**
@@ -32,7 +32,7 @@ export type HullPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGGElement;
-};
+} & CommonStyleProps;
 export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 import { Delaunay } from 'd3-delaunay';
 import { type GroupProps } from './Group.svelte';

package/dist/components/Line.svelte

@@ -111,6 +111,14 @@
 
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
+
+    /**
+     * Dashed-line pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). Works across `<Svg>`, `<Canvas>`, and `<Html>`
+     * layers — HTML approximates the pattern via `repeating-linear-gradient`.
+     */
+    dashArray?: number | number[] | string;
   } & DataDrivenStyleProps;
 
   export type LineProps = LinePropsWithoutHTML &
@@ -137,6 +145,7 @@
 
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
+  import { parseDashArray, dashArrayToGradient } from '../utils/path.js';
 
   const uid = $props.id();
 
@@ -162,9 +171,13 @@
     markerMid,
     motion,
     fillOpacity,
+    dashArray,
     ...restProps
   }: LineProps = $props();
 
+  const dashArrayResolved = $derived(parseDashArray(dashArray));
+  const dashArrayAttr = $derived(dashArrayResolved ? dashArrayResolved.join(' ') : undefined);
+
   // Data mode detection
   const dataMode = $derived(hasAnyDataProp(x1, y1, x2, y2));
 
@@ -285,7 +298,12 @@
             'lc-line',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: restProps.style as string | undefined,
+          style: [
+            restProps.style as string | undefined,
+            dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+          ]
+            .filter(Boolean)
+            .join('; ') || undefined,
         };
   }
 
@@ -358,6 +376,7 @@
               opacity,
               className,
               restProps.style,
+              dashArrayAttr,
             ],
           }
         : undefined,
@@ -390,6 +409,7 @@
         marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
         marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
         marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+        stroke-dasharray={dashArrayAttr}
         class={cls('lc-line', resolvedClass)}
         {...restProps}
       />
@@ -408,6 +428,7 @@
       marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+      stroke-dasharray={dashArrayAttr}
       class={cls('lc-line', staticClassName)}
       {...restProps}
     />
@@ -435,7 +456,10 @@
         style:transform="translateY(-50%) rotate({angle}deg)"
         style:transform-origin="0 50%"
         style:opacity={resolvedOpacity}
-        style:background-color={resolvedStroke}
+        style:background={dashArrayResolved
+          ? dashArrayToGradient(dashArrayResolved, resolvedStroke ?? 'var(--stroke-color)')
+          : undefined}
+        style:background-color={dashArrayResolved ? undefined : resolvedStroke}
         class={cls('lc-line', resolvedClass)}
         style={restProps.style}
       ></div>
@@ -455,7 +479,10 @@
       style:transform="translateY(-50%) rotate({angle}deg)"
       style:transform-origin="0 50%"
       style:opacity={staticOpacity}
-      style:background-color={staticStroke}
+      style:background={dashArrayResolved
+        ? dashArrayToGradient(dashArrayResolved, staticStroke ?? 'var(--stroke-color)')
+        : undefined}
+      style:background-color={dashArrayResolved ? undefined : staticStroke}
       class={cls('lc-line', staticClassName)}
       style={restProps.style}
     ></div>

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

@@ -93,6 +93,13 @@ export type LinePropsWithoutHTML = {
     markerEnd?: MarkerOptions;
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
+    /**
+     * Dashed-line pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). Works across `<Svg>`, `<Canvas>`, and `<Html>`
+     * layers — HTML approximates the pattern via `repeating-linear-gradient`.
+     */
+    dashArray?: number | number[] | string;
 } & DataDrivenStyleProps;
 export type LineProps = LinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, LinePropsWithoutHTML>;
 declare const Line: import("svelte").Component<LineProps, {}, "">;

package/dist/components/Link.svelte

@@ -82,6 +82,9 @@ TODO:
 	*/
   import Connector, { type ConnectorProps } from './Connector.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
+  import { getChartContext } from '../contexts/chart.js';
+
+  const ctx = getChartContext();
 
   let {
     data,
@@ -95,6 +98,7 @@ TODO:
     explicitCoords,
     type = 'd3',
     sweep = 'none',
+    radius = 20,
     ...restProps
   }: LinkProps = $props();
 
@@ -125,12 +129,14 @@ TODO:
   const xAccessor = $derived.by(() => {
     if (xProp) return xProp;
     if (sankey) return (d: any) => (d.isSource ? d.node.x1 : d.node.x0);
+    if (ctx.radial) return (d: any) => d.x;
     return (d: any) => (orientation === 'horizontal' ? d.y : d.x);
   });
 
   const yAccessor = $derived.by(() => {
     if (yProp) return yProp;
     if (sankey) return (d: any) => d.y;
+    if (ctx.radial) return (d: any) => d.y;
     return (d: any) => (orientation === 'horizontal' ? d.x : d.y);
   });
 
@@ -165,6 +171,7 @@ TODO:
       return FALLBACK_COORDS;
     }
   });
+
 </script>
 
 <Connector
@@ -173,5 +180,7 @@ TODO:
   {type}
   {curve}
   {sweep}
+  {radius}
+  radial={ctx.radial}
   {...extractLayerProps(restProps, 'lc-link')}
 />

package/dist/components/Pie.svelte

@@ -108,7 +108,10 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.config.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians(
+        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
+      )
   );
 
   const motionEndAngle = createMotion(0, () => endAngle, motion);
@@ -116,7 +119,10 @@
   const pie = $derived.by(() => {
     let _pie = d3pie<any>()
       .startAngle(
-        startAngleProp ?? degreesToRadians(ctx.config.xRange ? min(ctx.xRange) : min(range))
+        startAngleProp ??
+          degreesToRadians(
+            (ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!
+          )
       )
       .endAngle(motionEndAngle.current)
       .padAngle(padAngle)

package/dist/components/Rect.svelte

@@ -5,7 +5,13 @@
   import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
   import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-  import type { Insets } from '../utils/rect.svelte.js';
+  import {
+    resolveCorners,
+    cornersUniform,
+    type Corners,
+    type Insets,
+  } from '../utils/rect.svelte.js';
+  import { roundedRectPath, parseDashArray } from '../utils/path.js';
 
   export type RectPropsWithoutHTML = {
     /**
@@ -119,6 +125,20 @@
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
+
+    /**
+     * Per-corner radii. Accepts a number (all corners equal — same as `rx`),
+     * a `[tl, tr, br, bl]` tuple, or `{ topLeft, topRight, bottomRight, bottomLeft }`.
+     * Takes precedence over `rx`/`ry` when corners differ.
+     */
+    corners?: Corners;
+
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
   } & DataDrivenStyleProps;
@@ -175,6 +195,8 @@
     key: keyFn = (_: any, i: number) => i,
     ref: refProp = $bindable(),
     motion,
+    corners,
+    dashArray,
     class: className,
     onclick,
     ondblclick,
@@ -279,10 +301,26 @@
     });
   });
 
+  // Fold a uniform `corners` value into rx/ry so SVG `<rect>` renders rounded
+  // corners without needing a `<path>`. When corners are per-corner different,
+  // `pixelPathData` kicks in below and SVG emits a `<path>` instead.
+  const dashArrayResolved = $derived(parseDashArray(dashArray));
+  const dashArrayAttr = $derived(dashArrayResolved ? dashArrayResolved.join(' ') : undefined);
+
+  const cornersUniformValue = $derived.by(() => {
+    if (corners === undefined) return undefined;
+    if (typeof corners === 'number') return corners;
+    const resolved = resolveCorners(corners, Infinity, Infinity);
+    return cornersUniform(resolved) ? resolved[0] : undefined;
+  });
+  const cornersNonUniform = $derived(
+    corners !== undefined && cornersUniformValue === undefined
+  );
+
   // Normalize rx/ry - if only one is provided, use it for both (SVG behavior)
   // Coerce to number for canvas rendering (SVG allows string like "50%")
-  const rx = $derived(Number(rxProp ?? ryProp) || 0);
-  const ry = $derived(Number(ryProp ?? rxProp) || 0);
+  const rx = $derived(Number(rxProp ?? ryProp ?? cornersUniformValue) || 0);
+  const ry = $derived(Number(ryProp ?? rxProp ?? cornersUniformValue) || 0);
 
   // --- Pixel mode ---
   let ref = $state<SVGRectElement>();
@@ -335,6 +373,27 @@
   );
   const htmlRestProps = $derived(restProps as unknown as HTMLAttributes<HTMLDivElement>);
 
+  // Resolved per-corner radii for the static (pixel-mode) rect, clamped to bounds.
+  const resolvedCorners = $derived(
+    corners !== undefined
+      ? resolveCorners(corners, motionWidth.current, motionHeight.current)
+      : undefined
+  );
+  const borderRadiusStyle = $derived(
+    resolvedCorners ? resolvedCorners.map((c) => `${c}px`).join(' ') : undefined
+  );
+  const pixelPathData = $derived(
+    resolvedCorners && cornersNonUniform
+      ? roundedRectPath(
+          motionX.current,
+          motionY.current,
+          motionWidth.current,
+          motionHeight.current,
+          resolvedCorners
+        )
+      : undefined
+  );
+
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
     itemFill?: string | undefined,
@@ -371,7 +430,12 @@
             'lc-rect',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: restProps.style as string | undefined,
+          style: [
+            restProps.style as string | undefined,
+            dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+          ]
+            .filter(Boolean)
+            .join('; ') || undefined,
         };
   }
 
@@ -422,6 +486,7 @@
           height: motionHeight.current,
           rx,
           ry,
+          corners: resolvedCorners,
         },
         styleOpts
       );
@@ -475,6 +540,8 @@
               restProps.style,
               rx,
               ry,
+              resolvedCorners,
+              dashArrayAttr,
             ],
           }
         : undefined,
@@ -504,6 +571,7 @@
         opacity={resolvedOpacity}
         {rx}
         {ry}
+        stroke-dasharray={dashArrayAttr}
         class={cls('lc-rect', resolvedClass)}
         {...restProps}
         {onclick}
@@ -515,6 +583,28 @@
         {onpointerout}
       />
     {/each}
+  {:else if pixelPathData}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <path
+      d={pixelPathData}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-opacity={staticStrokeOpacity}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
+      stroke-dasharray={dashArrayAttr}
+      class={cls('lc-rect', staticClassName)}
+      {...(restProps as unknown as SVGAttributes<SVGPathElement>)}
+      {onclick}
+      {ondblclick}
+      {onpointerenter}
+      {onpointermove}
+      {onpointerleave}
+      {onpointerover}
+      {onpointerout}
+    />
   {:else}
     <rect
       x={motionX.current}
@@ -529,6 +619,7 @@
       opacity={staticOpacity}
       {rx}
       {ry}
+      stroke-dasharray={dashArrayAttr}
       class={cls('lc-rect', staticClassName)}
       {...restProps}
       {onclick}
@@ -561,7 +652,7 @@
         style:background={resolvedFill}
         style:opacity={resolvedOpacity}
         style:border-width="{resolvedStrokeWidth}px"
-        style:border-style="solid"
+        style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
         style:border-color={resolvedStroke}
         style:border-radius="{rx}px"
         class={cls('lc-rect', resolvedClass)}
@@ -587,9 +678,9 @@
       style:background={staticFill}
       style:opacity={staticOpacity}
       style:border-width={staticBorderWidth}
-      style:border-style="solid"
+      style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
       style:border-color={staticStroke}
-      style:border-radius="{rx}px"
+      style:border-radius={borderRadiusStyle ?? `${rx}px`}
       class={cls('lc-rect', staticClassName)}
       {...htmlRestProps}
       {onclick}

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

@@ -3,7 +3,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { CommonEvents, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-import type { Insets } from '../utils/rect.svelte.js';
+import { type Corners, type Insets } from '../utils/rect.svelte.js';
 export type RectPropsWithoutHTML = {
     /**
      * The x position of the rectangle.
@@ -101,6 +101,18 @@ export type RectPropsWithoutHTML = {
     ref?: SVGRectElement;
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
+    /**
+     * Per-corner radii. Accepts a number (all corners equal — same as `rx`),
+     * a `[tl, tr, br, bl]` tuple, or `{ topLeft, topRight, bottomRight, bottomLeft }`.
+     * Takes precedence over `rx`/`ry` when corners differ.
+     */
+    corners?: Corners;
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
 } & DataDrivenStyleProps;