smithkit 0.5.0 → 0.7.0

package/dist/lib/interaction/SmithCursor.js

@@ -22,8 +22,8 @@ export class SmithCursor {
         this.group = new SmithGroup().attr('pointer-events', 'none');
         this.impedance = {
             group: new SmithGroup({
-                stroke: 'var(--smithkit-cursor-impedanceColor)',
-                strokeWidth: 'var(--smithkit-cursor-lineWidth)',
+                stroke: 'var(--smithkit-cursor-impedance-color)',
+                strokeWidth: 'var(--smithkit-cursor-line-width)',
                 fill: 'none',
             }),
             resistance: { circle: new SmithCircle({ p: [0, 0], r: 1 }) },
@@ -37,8 +37,8 @@ export class SmithCursor {
         this.impedance.reactance.line.nonScalingStroke();
         this.admittance = {
             group: new SmithGroup({
-                stroke: 'var(--smithkit-cursor-admittanceColor)',
-                strokeWidth: 'var(--smithkit-cursor-lineWidth)',
+                stroke: 'var(--smithkit-cursor-admittance-color)',
+                strokeWidth: 'var(--smithkit-cursor-line-width)',
                 fill: 'none',
             }),
             conductance: { circle: new SmithCircle({ p: [0, 0], r: 1 }) },
@@ -51,8 +51,8 @@ export class SmithCursor {
         this.admittance.susceptance.arc.nonScalingStroke();
         this.admittance.susceptance.line.nonScalingStroke();
         this.point = new SmithLine([0, 0], [0, 0], {
-            stroke: 'var(--smithkit-cursor-pointColor)',
-            strokeWidth: 'var(--smithkit-cursor-pointSize)',
+            stroke: 'var(--smithkit-cursor-point-color)',
+            strokeWidth: 'var(--smithkit-cursor-point-size)',
             fill: 'none',
         });
         this.point.nonScalingStroke();

package/dist/lib/layers.d.ts

@@ -1,19 +1,33 @@
 import type { Complex } from './math/Complex.js';
 export interface GridStyle {
-    stroke: string;
-    /** Non-scaling stroke width in CSS pixels. */
-    majorWidth: number;
-    /** Non-scaling stroke width in CSS pixels. */
-    minorWidth: number;
-    textColor: string;
-    textFontFamily: string;
-    /** Base font size in chart units; adaptive layout enforces a 9 CSS px minimum in the default view. */
-    textFontSize: number;
+    line: {
+        color: string;
+        /** Non-scaling stroke width in CSS pixels. */
+        majorWidth: number;
+        /** Non-scaling stroke width in CSS pixels. */
+        minorWidth: number;
+    };
+    text: {
+        color: string;
+        fontFamily: string;
+        /** Base font size in chart units; adaptive layout enforces a 9 CSS px minimum in the default view. */
+        fontSize: number;
+    };
+}
+/** A grid style patch. Omitted nested properties retain their existing values. */
+export interface GridStyleOptions {
+    line?: Partial<GridStyle['line']>;
+    text?: Partial<GridStyle['text']>;
 }
 export interface CircleStyle {
-    stroke: string;
-    /** Non-scaling stroke width in CSS pixels. */
-    strokeWidth: number;
+    line: {
+        color: string;
+        /** Non-scaling stroke width in CSS pixels. */
+        width: number;
+    };
+}
+export interface CircleStyleOptions {
+    line?: Partial<CircleStyle['line']>;
 }
 export type GridDetail = 'basic' | 'standard' | 'detailed';
 /** Grid styling uses SVG user units, except non-scaling stroke widths in screen pixels. */
@@ -23,11 +37,11 @@ export interface GridLayer {
     setLabelsVisible(visible: boolean): void;
     /** Default: standard. Basic shows only the principal normalized values. */
     setDetail(detail: GridDetail): void;
-    setStyle(style: Partial<GridStyle>): void;
+    setStyle(style: GridStyleOptions): void;
 }
 export interface CircleLayer {
     setVisible(visible: boolean): void;
-    setStyle(style: Partial<CircleStyle>): void;
+    setStyle(style: CircleStyleOptions): void;
     /** Replace the complete set after validation; duplicates are ignored and empty clears it. */
     setValues(values: readonly number[]): void;
     addValue(value: number): void;

package/dist/lib/math/Complex.d.ts

@@ -117,7 +117,7 @@ export declare class Complex {
     private static hyperbolicProduct;
     private static hyperbolicReciprocal;
     /**
-     * Elliptic coordinates for principal inverse functions (x,y >= 0).
+     * Elliptic coordinates for principal inverse functions (non-negative x and y).
      * With a = (|z+1| + |z-1|)/2, return acosh(a) and sqrt(a²-x²).
      * Rationalized hypot differences retain tiny components near the branch cuts.
      * Principal branches: https://dlmf.nist.gov/4.37

package/dist/lib/math/Complex.js

@@ -34,7 +34,7 @@ export class Complex {
         }
         if (args.length === 2) {
             const arg0 = args[0];
-            const arg1 = args[1];
+            const arg1 = args[1] === undefined ? 0 : args[1];
             if (typeof arg0 === 'number' && typeof arg1 === 'number') {
                 return new Complex(arg0, arg1);
             }
@@ -598,7 +598,7 @@ export class Complex {
         return Complex.reciprocal(denominator).mul(Math.exp(Math.LN2 - x));
     }
     /**
-     * Elliptic coordinates for principal inverse functions (x,y >= 0).
+     * Elliptic coordinates for principal inverse functions (non-negative x and y).
      * With a = (|z+1| + |z-1|)/2, return acosh(a) and sqrt(a²-x²).
      * Rationalized hypot differences retain tiny components near the branch cuts.
      * Principal branches: https://dlmf.nist.gov/4.37

package/dist/lib/measurements.d.ts

@@ -3,14 +3,24 @@ import type { SmithReading } from './rf/RfCalculations.js';
 export type TraceRenderMode = 'points' | 'line' | 'both';
 export interface TraceStyle {
     mode: TraceRenderMode;
-    /** Non-scaling SVG stroke width in CSS pixels. Default: 2. */
-    lineWidth: number;
-    /** Point radius in CSS pixels; remains constant under chart zoom and container resize. Default: 2. */
-    pointRadius: number;
-    /** Maximum additional line simplification error in CSS pixels. Zero disables it (default). */
-    lineTolerancePx: number;
-}
-export interface TraceOptions extends Partial<TraceStyle> {
+    line: {
+        /** Non-scaling SVG stroke width in CSS pixels. Default: 2. */
+        width: number;
+        /** Maximum additional line simplification error in CSS pixels. Zero disables it (default). */
+        tolerancePx: number;
+    };
+    point: {
+        /** Radius in CSS pixels; constant under chart zoom and container resize. Default: 2. */
+        radius: number;
+    };
+}
+/** A partial style patch; omitted nested properties retain their current values. */
+export interface TraceStyleOptions {
+    mode?: TraceRenderMode;
+    line?: Partial<TraceStyle['line']>;
+    point?: Partial<TraceStyle['point']>;
+}
+export interface TraceOptions extends TraceStyleOptions {
     name?: string;
     /** A solid CSS color, such as '#2563eb' or 'orange'. */
     color?: string;
@@ -29,6 +39,8 @@ export interface MarkerInfo {
     readonly sampleIndex: number;
 }
 export interface TraceInfo extends Readonly<TraceStyle> {
+    readonly line: Readonly<TraceStyle['line']>;
+    readonly point: Readonly<TraceStyle['point']>;
     readonly id: string;
     readonly name: string;
     readonly color: string;

package/dist/lib/options.d.ts

@@ -1,11 +1,11 @@
 import type { SmithAppearance } from './appearance/types.js';
-import type { CircleStyle, GridDetail, GridStyle } from './layers.js';
+import type { CircleStyleOptions, GridDetail, GridStyleOptions } from './layers.js';
 /** Settings for an individual impedance/admittance grid layer. */
 export interface GridLayerOptions {
     visible?: boolean;
     detail?: GridDetail;
     labelsVisible?: boolean;
-    style?: Partial<GridStyle>;
+    style?: GridStyleOptions;
 }
 /** Shared settings for all four grids, followed by per-layer overrides. */
 export interface GridOptions {
@@ -13,7 +13,7 @@ export interface GridOptions {
     detail?: GridDetail;
     /** Default: true. */
     labelsVisible?: boolean;
-    style?: Partial<GridStyle>;
+    style?: GridStyleOptions;
     layers?: {
         resistance?: GridLayerOptions;
         reactance?: GridLayerOptions;
@@ -24,7 +24,7 @@ export interface GridOptions {
 export interface CircleLayerOptions {
     /** Default: false. */
     visible?: boolean;
-    style?: Partial<CircleStyle>;
+    style?: CircleStyleOptions;
     /** Replace the default values. Empty hides all circles; duplicate values are ignored. */
     values?: readonly number[];
 }

package/dist/lib/rendering/ChartHost.d.ts

@@ -0,0 +1,5 @@
+/** Recognize HTML hosts across windows without accessing browser globals at import time. */
+export declare class ChartHost {
+    private constructor();
+    static isElement(value: unknown): value is HTMLElement;
+}

package/dist/lib/rendering/ChartHost.js

@@ -0,0 +1,14 @@
+/** Recognize HTML hosts across windows without accessing browser globals at import time. */
+export class ChartHost {
+    constructor() { }
+    static isElement(value) {
+        if (!value || typeof value !== 'object') {
+            return false;
+        }
+        if (typeof HTMLElement !== 'undefined' && value instanceof HTMLElement) {
+            return true;
+        }
+        const elementType = value.ownerDocument?.defaultView?.HTMLElement;
+        return elementType !== undefined && value instanceof elementType;
+    }
+}

package/dist/lib/rendering/SvgChartRenderer.d.ts

@@ -4,7 +4,7 @@ import type { SmithMarker } from '../traces/SmithMarker.js';
 import { TraceInput } from '../samples.js';
 import { Complex } from '../math/Complex.js';
 import type { ChartLayers, PeripheralScales } from '../layers.js';
-import type { TraceStyle } from '../measurements.js';
+import type { TraceStyleOptions } from '../measurements.js';
 /** Internal SVG backend. Owns chart elements, view transforms, and SVG gestures. */
 export declare class SvgChartRenderer {
     private onCursorChange;
@@ -64,6 +64,6 @@ export declare class SvgChartRenderer {
     private cursorContainer;
     private drawReactanceAxis;
     /** Construct trace rendering without exposing chart containers or scalers to Smith. */
-    createTrace(values: TraceInput, color: string, style: Partial<TraceStyle>, onMarkerDrag: (marker: SmithMarker, dragging: boolean) => void): SmithData;
+    createTrace(values: TraceInput, color: string, style: TraceStyleOptions, onMarkerDrag: (marker: SmithMarker, dragging: boolean) => void): SmithData;
     removeTrace(trace: SmithData): void;
 }

package/dist/lib/rendering/SvgChartRenderer.js

@@ -93,7 +93,7 @@ export class SvgChartRenderer {
         this.cursor = this.initCursor();
         const cursorContainer = this.cursorContainer();
         this.reactanceAxis = this.drawReactanceAxis({
-            stroke: 'var(--smithkit-boundary-stroke)',
+            stroke: 'var(--smithkit-boundary-color)',
             strokeWidth: 'var(--smithkit-boundary-width)',
             fill: 'none',
         });
@@ -356,7 +356,7 @@ export class SvgChartRenderer {
         this.traces.forEach((d) => d.zoom(transform));
     }
     cursorContainer() {
-        const shape = this.drawReactanceAxis({ fill: 'transparent', stroke: 'none' });
+        const shape = this.drawReactanceAxis({ fill: 'transparent', stroke: 'none', strokeWidth: '0' });
         shape.Element.style('pointer-events', 'all')
             .on('pointermove.smithkit', (event) => {
             this.cursorMove(d3.pointer(event));

package/dist/lib/scales/SmithPeripheralScales.js

@@ -44,7 +44,7 @@ export class SmithPeripheralScales extends SmithGroup {
             .attr('cy', 250)
             .attr('r', (radius) => radius)
             .attr('fill', 'none')
-            .attr('stroke', 'var(--smithkit-scales-boundaryColor)')
+            .attr('stroke', 'var(--smithkit-scales-boundary-color)')
             .attr('stroke-width', 1.1)
             .attr('vector-effect', 'non-scaling-stroke');
         this.axes.each(function (scale, index) {
@@ -62,7 +62,7 @@ export class SmithPeripheralScales extends SmithGroup {
                     .attr('cy', 250)
                     .attr('r', radius)
                     .attr('fill', 'none')
-                    .attr('stroke', 'var(--smithkit-scales-stroke)')
+                    .attr('stroke', 'var(--smithkit-scales-line-color)')
                     .attr('stroke-width', 0.6)
                     .attr('vector-effect', 'non-scaling-stroke');
             }
@@ -77,7 +77,7 @@ export class SmithPeripheralScales extends SmithGroup {
                     .attr('y1', y1)
                     .attr('x2', x2)
                     .attr('y2', y2)
-                    .attr('stroke', 'var(--smithkit-scales-stroke)')
+                    .attr('stroke', 'var(--smithkit-scales-line-color)')
                     .attr('stroke-width', major ? 0.8 : 0.5)
                     .attr('vector-effect', 'non-scaling-stroke');
                 const captionDistance = Math.abs(((angle - captionAngle + 540) % 360) - 180);
@@ -93,9 +93,9 @@ export class SmithPeripheralScales extends SmithGroup {
                         .attr('transform', `rotate(${rotation},${x},${y})`)
                         .attr('text-anchor', 'middle')
                         .attr('dominant-baseline', 'central')
-                        .attr('font-family', 'var(--smithkit-fontFamily)')
-                        .attr('font-size', 'var(--smithkit-scales-peripheralFontSize)')
-                        .attr('fill', 'var(--smithkit-scales-textColor)')
+                        .attr('font-family', 'var(--smithkit-text-fontFamily)')
+                        .attr('font-size', 'var(--smithkit-scales-peripheral-fontSize)')
+                        .attr('fill', 'var(--smithkit-scales-text-color)')
                         .text(scale.unit === 'λ' ? value.toFixed(2) : String(value));
                 }
             }
@@ -118,11 +118,11 @@ export class SmithPeripheralScales extends SmithGroup {
                 .append('text')
                 .attr('class', 'peripheral-caption')
                 .attr('text-anchor', 'middle')
-                .attr('font-family', 'var(--smithkit-fontFamily)')
-                .attr('font-size', 'var(--smithkit-scales-peripheralFontSize)')
+                .attr('font-family', 'var(--smithkit-text-fontFamily)')
+                .attr('font-size', 'var(--smithkit-scales-peripheral-fontSize)')
                 .attr('font-weight', 500)
                 .attr('letter-spacing', 0.3)
-                .attr('fill', 'var(--smithkit-scales-textColor)')
+                .attr('fill', 'var(--smithkit-scales-text-color)')
                 .append('textPath')
                 .attr('href', `#${pathId}`)
                 .attr('startOffset', '50%')
@@ -132,8 +132,8 @@ export class SmithPeripheralScales extends SmithGroup {
                 .attr('class', 'peripheral-indicator')
                 .attr('r', 3)
                 .attr('visibility', 'hidden')
-                .attr('fill', 'var(--smithkit-scales-indicatorColor)')
-                .attr('stroke', 'var(--smithkit-scales-indicatorOutline)')
+                .attr('fill', 'var(--smithkit-scales-indicator-color)')
+                .attr('stroke', 'var(--smithkit-scales-indicator-outline)')
                 .attr('stroke-width', 1);
         });
         this.updateLabelVisibility();

package/dist/lib/scales/SmithScales.d.ts

@@ -9,7 +9,10 @@ export declare class SmithScales {
     private readonly start;
     private readonly length;
     private readonly axes;
+    /** Configure independent scales for later mounting with draw(). */
     constructor(appearance?: SmithAppearance);
+    /** Configure and mount immediately. String targets are CSS selectors, as in draw(). */
+    constructor(target: string | HTMLElement, appearance?: SmithAppearance);
     /** Replace the preset and overrides without changing readings or layout. */
     setAppearance(appearance: SmithAppearance): void;
     draw(target: string | HTMLElement): void;

package/dist/lib/scales/SmithScales.js

@@ -1,4 +1,5 @@
 import { ImageExporter } from '../svg/ImageExporter.js';
+import { ChartHost } from '../rendering/ChartHost.js';
 import { Theme } from '../appearance/Theme.js';
 import { SvgTheme } from '../appearance/SvgTheme.js';
 import { select, format } from 'd3';
@@ -27,16 +28,27 @@ export class SmithScales {
         .style('display', 'block')
         .style('width', '100%')
         .style('height', 'auto');
-    constructor(appearance = {}) {
+    constructor(targetOrAppearance = {}, configuration) {
+        const target = typeof targetOrAppearance === 'string' || ChartHost.isElement(targetOrAppearance)
+            ? targetOrAppearance
+            : undefined;
+        if (target === undefined && configuration !== undefined) {
+            throw new TypeError('A container is required before the second appearance argument.');
+        }
+        const appearance = target === undefined
+            ? targetOrAppearance
+            : configuration === undefined
+                ? {}
+                : configuration;
         this.setAppearance(appearance);
         const labels = this.axes.append('g').attr('data-role', 'labels').attr('pointer-events', 'none');
         labels
             .append('text')
             .attr('x', this.start)
             .attr('y', 12)
-            .attr('font-family', 'var(--smithkit-fontFamily)')
-            .attr('font-size', 'var(--smithkit-scales-titleFontSize)')
-            .attr('fill', 'var(--smithkit-scales-textColor)')
+            .attr('font-family', 'var(--smithkit-text-fontFamily)')
+            .attr('font-size', 'var(--smithkit-scales-title-fontSize)')
+            .attr('fill', 'var(--smithkit-scales-text-color)')
             .text((scale) => scale.title);
         labels
             .append('text')
@@ -44,10 +56,10 @@ export class SmithScales {
             .attr('data-role', 'scale-value')
             .attr('x', this.start)
             .attr('y', 25)
-            .attr('font-family', 'var(--smithkit-fontFamily)')
-            .attr('font-size', 'var(--smithkit-scales-valueFontSize)')
+            .attr('font-family', 'var(--smithkit-text-fontFamily)')
+            .attr('font-size', 'var(--smithkit-scales-value-fontSize)')
             .attr('font-weight', 600)
-            .attr('fill', 'var(--smithkit-scales-valueColor)')
+            .attr('fill', 'var(--smithkit-scales-value-color)')
             .text('—');
         this.axes
             .append('line')
@@ -56,7 +68,7 @@ export class SmithScales {
             .attr('x2', this.start + this.length)
             .attr('y1', 36)
             .attr('y2', 36)
-            .attr('stroke', 'var(--smithkit-scales-stroke)')
+            .attr('stroke', 'var(--smithkit-scales-line-color)')
             .attr('stroke-width', 1);
         const start = this.start;
         const length = this.length;
@@ -70,7 +82,7 @@ export class SmithScales {
             ticks
                 .append('line')
                 .attr('y2', 5)
-                .attr('stroke', 'var(--smithkit-scales-stroke)')
+                .attr('stroke', 'var(--smithkit-scales-line-color)')
                 .attr('stroke-width', 1);
             select(this)
                 .select('[data-role=labels]')
@@ -80,9 +92,9 @@ export class SmithScales {
                 .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`)
                 .append('text')
                 .attr('y', 17)
-                .attr('font-size', 'var(--smithkit-scales-fontSize)')
-                .attr('font-family', 'var(--smithkit-fontFamily)')
-                .attr('fill', 'var(--smithkit-scales-textColor)')
+                .attr('font-size', 'var(--smithkit-scales-text-fontSize)')
+                .attr('font-family', 'var(--smithkit-text-fontFamily)')
+                .attr('fill', 'var(--smithkit-scales-text-color)')
                 .attr('text-anchor', (_, i) => i === 0 ? 'start' : i === scale.values.length - 1 ? 'end' : 'middle')
                 .text((value) => (value === Infinity ? '∞' : String(value)));
         });
@@ -93,11 +105,20 @@ export class SmithScales {
             .attr('cx', this.start)
             .attr('cy', 36)
             .attr('r', 4)
-            .attr('fill', 'var(--smithkit-scales-indicatorColor)')
-            .attr('stroke', 'var(--smithkit-scales-indicatorOutline)')
+            .attr('fill', 'var(--smithkit-scales-indicator-color)')
+            .attr('stroke', 'var(--smithkit-scales-indicator-outline)')
             .attr('stroke-width', 1);
         labels.raise();
         this.axes.append('title').text((scale) => scale.description ?? scale.title);
+        if (target !== undefined) {
+            try {
+                this.draw(target);
+            }
+            catch (error) {
+                this.destroy();
+                throw error;
+            }
+        }
     }
     /** Replace the preset and overrides without changing readings or layout. */
     setAppearance(appearance) {
@@ -147,7 +168,7 @@ export class SmithScales {
             .style('visibility', 'visible');
     }
     /** Export mounted scales, optionally with a separate reading and its description. */
-    toSvg(options) {
+    toSvg(options = {}) {
         this.assertAlive();
         const container = this.container.node();
         const style = getComputedStyle(container);
@@ -157,11 +178,11 @@ export class SmithScales {
             : undefined, readout?.label
             ? {
                 text: readout.label,
-                color: style.getPropertyValue('--smithkit-scales-textColor').trim(),
-                fontFamily: style.getPropertyValue('--smithkit-fontFamily').trim(),
+                color: style.getPropertyValue('--smithkit-scales-text-color').trim(),
+                fontFamily: style.getPropertyValue('--smithkit-text-fontFamily').trim(),
             }
             : undefined);
-        return options === undefined ? source : ImageExporter.svg([source], options);
+        return ImageExporter.svg([source], options);
     }
     /** Export mounted scales as PNG without changing their live readings. */
     async toPng(options = {}) {

package/dist/lib/svg/LabelLayout.js

@@ -81,7 +81,6 @@ export class LabelLayout {
                     label,
                     order,
                     scale,
-                    matrix: matrix,
                     baseSize: parseFloat(style(label).fontSize),
                     priority: Number(label.dataset.labelPriority ?? 0),
                 },
@@ -93,10 +92,18 @@ export class LabelLayout {
                 this.resizedFonts.set(label, label.style.fontSize);
                 label.style.fontSize = `${9 / scale}px`;
             }
+            // WebKit can retain the old em offset after the font size changes.
+            // Reapply it before measuring so live and exported SVG use the same position.
+            const dx = label.getAttribute('dx');
+            if (dx?.endsWith('em')) {
+                label.setAttribute('dx', dx);
+            }
         }
         const measured = candidates.map((entry) => ({
             ...entry,
-            box: LabelLayout.transformBox(entry.label.getBBox(), entry.matrix),
+            // Screen bounds include the browser's glyph/paint envelope. Normalizing
+            // them keeps collision decisions independent of the current zoom.
+            box: LabelLayout.transformBox(entry.label.getBoundingClientRect(), normalize),
         }));
         measured.sort((a, b) => b.priority - a.priority || a.order - b.order);
         const occupied = [];

package/dist/lib/traces/SmithData.d.ts

@@ -1,5 +1,5 @@
 import { SmithGroup } from '../svg/SmithGroup.js';
-import type { TraceStyle, MarkerSelectionStrategy } from '../measurements.js';
+import type { TraceStyle, TraceStyleOptions, MarkerSelectionStrategy } from '../measurements.js';
 import { SmithMarker } from './SmithMarker.js';
 import { SmithScaler } from '../svg/SmithScaler.js';
 import type { TraceInput, TraceSample } from '../samples.js';
@@ -22,7 +22,7 @@ export declare class SmithData {
     private selectHandler;
     private visible;
     private handler;
-    constructor(data: TraceInput, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, markerDragHandler?: ((marker: SmithMarker, dragging: boolean) => void) | undefined, markerContainer?: SmithGroup, style?: Partial<TraceStyle>);
+    constructor(data: TraceInput, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, markerDragHandler?: ((marker: SmithMarker, dragging: boolean) => void) | undefined, markerContainer?: SmithGroup, style?: TraceStyleOptions);
     setViewportScale(scale: number): void;
     zoom(transform: TraceTransform): void;
     addMarker(sampleIndex?: number): number;
@@ -40,7 +40,7 @@ export declare class SmithData {
         path: string;
     } | undefined;
     get Style(): TraceStyle;
-    setStyle(options: Partial<TraceStyle>): void;
+    setStyle(options: TraceStyleOptions): void;
     setVisible(visible: boolean): void;
     private moveMarker;
     private updateReading;

package/dist/lib/traces/SmithMarker.js

@@ -45,6 +45,7 @@ export class SmithMarker extends SmithShape {
             .attr('fill', 'none')
             .attr('pointer-events', 'all')
             .attr('stroke', 'none')
+            .attr('stroke-width', 0)
             .attr('aria-hidden', 'true');
         this.focusRing = g
             .append('g')
@@ -53,8 +54,8 @@ export class SmithMarker extends SmithShape {
             .attr('pointer-events', 'none')
             .attr('aria-hidden', 'true');
         for (const [stroke, width] of [
-            ['var(--smithkit-marker-focusHaloColor)', 5],
-            ['var(--smithkit-marker-focusColor)', 2.5],
+            ['var(--smithkit-marker-focus-halo)', 5],
+            ['var(--smithkit-marker-focus-color)', 2.5],
         ]) {
             this.focusRing
                 .append('circle')
@@ -66,17 +67,17 @@ export class SmithMarker extends SmithShape {
         this.triangle = g
             .append('polygon')
             .attr('stroke', 'none')
-            .attr('fill', 'var(--smithkit-marker-outlineColor)');
+            .attr('fill', 'var(--smithkit-marker-outline-color)');
         this.inner = g.append('polygon').attr('stroke', 'none').attr('fill', color);
         this.text = g
             .append('text')
             .attr('pointer-events', 'none')
             .attr('aria-hidden', 'true')
-            .attr('font-family', 'var(--smithkit-fontFamily)')
+            .attr('font-family', 'var(--smithkit-text-fontFamily)')
             .attr('font-weight', 'normal')
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'middle')
-            .attr('fill', 'var(--smithkit-marker-textColor)')
+            .attr('fill', 'var(--smithkit-marker-text-color)')
             .text(marker.toString());
         this.zoom(1);
         const drag = d3

package/dist/lib/traces/TraceRenderer.d.ts

@@ -1,6 +1,6 @@
 import { SmithGroup } from '../svg/SmithGroup.js';
 import { SmithScaler } from '../svg/SmithScaler.js';
-import type { TraceStyle } from '../measurements.js';
+import type { TraceStyle, TraceStyleOptions } from '../measurements.js';
 import { TraceBuffer } from './TraceBuffer.js';
 export interface TraceTransform {
     x: number;
@@ -19,7 +19,7 @@ export declare class TraceRenderer {
     private group;
     private lineDetail;
     private lineIndices;
-    constructor(data: TraceBuffer, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, style?: Partial<TraceStyle>);
+    constructor(data: TraceBuffer, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, style?: TraceStyleOptions);
     private drawTrace;
     private selectLineIndices;
     private linePath;
@@ -35,7 +35,7 @@ export declare class TraceRenderer {
     private zoomDataPoints;
     setColor(color: string): void;
     get Style(): TraceStyle;
-    setStyle(options: Partial<TraceStyle>): void;
+    setStyle(options: TraceStyleOptions): void;
     private redraw;
     setVisible(visible: boolean): void;
     update(data: TraceBuffer): void;