layerchart 2.0.0-next.61 → 2.0.0-next.63

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/RectClipPath/RectClipPath.base.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import { createId } from '../../utils/createId.js';
+  import { createMotion, parseMotionProp } from '../../utils/motion.svelte.js';
 
   const uid = $props.id();
 
@@ -19,14 +20,37 @@
     id = createId('clipPath-', uid),
     x = 0,
     y = 0,
+    initialX,
+    initialY,
     width,
     height,
+    initialWidth,
+    initialHeight,
     disabled = false,
     invert = false,
+    motion,
     children: childrenProp,
   }: RectClipPathBaseProps = $props();
 
-  const path = $derived(`M${x},${y} h${width} v${height} h${-width} Z`);
+  // When `motion` is undefined `createMotion` returns a passthrough that just
+  // reads the getter, so we can call it unconditionally and let the fast path
+  // handle the no-motion case.
+  const motionX = createMotion(initialX ?? x, () => x, motion && parseMotionProp(motion, 'x'));
+  const motionY = createMotion(initialY ?? y, () => y, motion && parseMotionProp(motion, 'y'));
+  const motionWidth = createMotion(
+    initialWidth ?? width,
+    () => width,
+    motion && parseMotionProp(motion, 'width')
+  );
+  const motionHeight = createMotion(
+    initialHeight ?? height,
+    () => height,
+    motion && parseMotionProp(motion, 'height')
+  );
+
+  const path = $derived(
+    `M${motionX.current},${motionY.current} h${motionWidth.current} v${motionHeight.current} h${-motionWidth.current} Z`
+  );
 </script>
 
 <ClipPath {id} {disabled} {invert} {path}>

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

@@ -8,12 +8,20 @@ export type BaseRectClipPathPropsWithoutHTML = {
     id?: string;
     /** The x position of the clipPath. @default 0 */
     x?: number;
+    /** The initial x position (used as the animation start when `motion` is set). @default x */
+    initialX?: number;
     /** The y position of the clipPath. @default 0 */
     y?: number;
+    /** The initial y position (used as the animation start when `motion` is set). @default y */
+    initialY?: number;
     /** The width of the clipPath. @required */
     width: number;
+    /** The initial width (used as the animation start when `motion` is set). @default width */
+    initialWidth?: number;
     /** The height of the clipPath. @required */
     height: number;
+    /** The initial height (used as the animation start when `motion` is set). @default height */
+    initialHeight?: number;
     /** Whether to disable clipping (show all). @default false */
     disabled?: boolean;
     /** Invert the clip — content renders *outside* the rect. @default false */

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}
   />

package/dist/components/Text/Text.canvas.svelte

@@ -50,6 +50,14 @@
             strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
             opacity: itemOpacity ?? c.staticOpacity,
             paintOrder: 'stroke',
+            ...(rest.fontSize != null
+              ? {
+                  fontSize:
+                    typeof rest.fontSize === 'number'
+                      ? `${rest.fontSize}px`
+                      : rest.fontSize,
+                }
+              : {}),
             ...((rest.textAnchor ?? 'start') !== 'start'
               ? { textAnchor: rest.textAnchor }
               : {}),
@@ -195,6 +203,7 @@
         rest.class,
         c.truncateConfig,
         rest.rotate,
+        rest.fontSize,
         rest.lineHeight,
         rest.textAnchor,
         rest.verticalAnchor,

package/dist/components/Text/Text.html.svelte

@@ -46,6 +46,9 @@
       {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
       style:white-space="pre-wrap"
       style:line-height={rest.lineHeight ?? '1em'}
+      style:font-size={typeof rest.fontSize === 'number'
+        ? `${rest.fontSize}px`
+        : rest.fontSize}
       style:color={resolvedFill}
       style:opacity={resolvedOpacity ?? resolvedFillOpacity}
       class={['lc-text', resolvedClass]}
@@ -74,6 +77,9 @@
     {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
     style:white-space="pre-wrap"
     style:line-height={rest.lineHeight ?? '1em'}
+    style:font-size={typeof rest.fontSize === 'number'
+      ? `${rest.fontSize}px`
+      : rest.fontSize}
     style:color={c.staticFill}
     style:opacity={c.staticOpacity ?? c.staticFillOpacity}
     class={['lc-text', c.staticClassName]}

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

@@ -88,8 +88,20 @@ export type TextPropsWithoutHTML = {
      */
     lineHeight?: string;
     /**
-     * Cap height of the text
-     * @default '0.71em'
+     * Font size of the text. A number is treated as pixels; a string passes
+     * through (e.g. `'12px'`, `'1.25em'`). When set, vertical centering math
+     * derives `capHeight` from this value automatically (as `fontSize * 0.71`),
+     * so per-item scaled labels with `verticalAnchor="middle"` align correctly
+     * without an explicit `capHeight` override.
+     */
+    fontSize?: number | string;
+    /**
+     * Cap height of the text — used by vertical anchor math to align the text
+     * to its visual center (as opposed to the font box). Defaults to `0.71em`,
+     * but if `fontSize` is set, defaults to `fontSize * 0.71` so centering
+     * stays correct as text scales.
+     *
+     * @default '0.71em' (or `fontSize * 0.71` when `fontSize` is set)
      */
     capHeight?: string;
     /**
@@ -182,6 +194,17 @@ export declare function getPathLength(pathRef: SVGPathElement | undefined): numb
  * Convert css value to pixel value (ex. 0.71em => 11.36)
  */
 export declare function getPixelValue(cssValue: number | string): number;
+/**
+ * Resolve the cap-height used by vertical-anchor math.
+ *
+ * Priority:
+ *   1. Explicit `capHeight` prop
+ *   2. `fontSize * 0.71` when `fontSize` is set (keeps centering correct as
+ *      labels scale per-item)
+ *   3. `'0.71em'` (legacy default — only correct for ~16px text since
+ *      `getPixelValue` resolves `em` against 16, not the actual font-size)
+ */
+export declare function resolveCapHeight(capHeight: string | undefined, fontSize: number | string | undefined): number | string;
 export declare function isValidXOrY(xOrY: string | number | undefined): boolean;
 /** Build the standard `markInfo` payload used by every Text variant. */
 export declare function textMarkInfo(props: TextProps, dataMode: boolean): {

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

@@ -58,6 +58,23 @@ export function getPixelValue(cssValue) {
             return 0;
     }
 }
+/**
+ * Resolve the cap-height used by vertical-anchor math.
+ *
+ * Priority:
+ *   1. Explicit `capHeight` prop
+ *   2. `fontSize * 0.71` when `fontSize` is set (keeps centering correct as
+ *      labels scale per-item)
+ *   3. `'0.71em'` (legacy default — only correct for ~16px text since
+ *      `getPixelValue` resolves `em` against 16, not the actual font-size)
+ */
+export function resolveCapHeight(capHeight, fontSize) {
+    if (capHeight != null)
+        return capHeight;
+    if (fontSize != null)
+        return getPixelValue(fontSize) * 0.71;
+    return '0.71em';
+}
 export function isValidXOrY(xOrY) {
     return ((typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
         typeof xOrY === 'string');
@@ -89,7 +106,9 @@ export class TextState {
     // Path measurement (only meaningful for SVG layer where the textPath element exists)
     pathRef = $state();
     // Data mode detection
-    dataMode = $derived(isTextDataProp(this.#getProps().x) || isTextDataProp(this.#getProps().y));
+    dataMode = $derived(this.#getProps().data != null ||
+        isTextDataProp(this.#getProps().x) ||
+        isTextDataProp(this.#getProps().y));
     // Data resolution
     #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
     resolvedItems = $derived.by(() => {
@@ -115,9 +134,21 @@ export class TextState {
             const [projX, projY] = resolveGeoDataPair(props.x, props.y, d, this.geo.projection);
             return { x: projX, y: projY };
         }
+        // When x/y are omitted, fall back to the chart's accessors (xGet/yGet) —
+        // mirroring the Circle / Points / Dodge pattern.
+        const xDefault = typeof props.x === 'number'
+            ? props.x
+            : props.x == null && this.chartCtx.config.x != null
+                ? Number(this.chartCtx.xGet(d)) || 0
+                : 0;
+        const yDefault = typeof props.y === 'number'
+            ? props.y
+            : props.y == null && this.chartCtx.config.y != null
+                ? Number(this.chartCtx.yGet(d)) || 0
+                : 0;
         return {
-            x: resolveDataProp(props.x, d, this.chartCtx.xScale, 0),
-            y: resolveDataProp(props.y, d, this.chartCtx.yScale, 0),
+            x: resolveDataProp(props.x, d, this.chartCtx.xScale, xDefault),
+            y: resolveDataProp(props.y, d, this.chartCtx.yScale, yDefault),
         };
     }
     resolveTextValue(d) {
@@ -220,7 +251,7 @@ export class TextState {
         const props = this.#getProps();
         const verticalAnchor = props.verticalAnchor ?? 'end';
         const lineHeight = props.lineHeight ?? '1em';
-        const capHeight = props.capHeight ?? '0.71em';
+        const capHeight = resolveCapHeight(props.capHeight, props.fontSize);
         if (verticalAnchor === 'start') {
             return getPixelValue(lineHeight);
         }
@@ -233,7 +264,7 @@ export class TextState {
         const props = this.#getProps();
         const verticalAnchor = props.verticalAnchor ?? 'end';
         const lineHeight = props.lineHeight ?? '1em';
-        const capHeight = props.capHeight ?? '0.71em';
+        const capHeight = resolveCapHeight(props.capHeight, props.fontSize);
         if (verticalAnchor === 'start')
             return getPixelValue(lineHeight);
         if (verticalAnchor === 'middle')

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

@@ -148,5 +148,45 @@ describe('Text', () => {
             const texts = page.getByTestId(componentTestId).elements();
             await expect.poll(() => texts.length).toBe(1);
         });
+        it('should enter data mode when only `data` prop is set, using chart accessors', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data,
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            const ys = texts.map((t) => Number(t.getAttribute('y')));
+            expect(ys[0]).toBeGreaterThan(ys[1]);
+            expect(ys[1]).toBeGreaterThan(ys[2]);
+        });
+        it('should fall back to chart x accessor when only y is omitted', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data,
+                    x: 'date',
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            const ys = texts.map((t) => Number(t.getAttribute('y')));
+            expect(ys[0]).toBeGreaterThan(ys[2]);
+        });
     });
 });