@mcp-b/viz-components 0.3.11 → 0.4.0

package/dist/{chart-BSbFRQju.js → chart-DtyJvCtm.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { bin, extent } from "d3-array";
 import { scaleBand, scaleLinear } from "d3-scale";
 import { arc, area, line, pie } from "d3-shape";
@@ -191,9 +191,10 @@ var SigveloChart = class extends SigveloElement {
     `;
 		const categoryTicks = svg`${labels.map((label, index) => {
 			if (index % labelStride !== 0 && index !== labels.length - 1) return nothing;
+			const x = PADDING.left + (xBand(index) ?? 0) + xBand.bandwidth() / 2;
 			return svg`<text
         class="tick-label"
-        x=${PADDING.left + (xBand(index) ?? 0) + xBand.bandwidth() / 2}
+        x=${x}
         y=${PADDING.top + innerHeight + 22}
         text-anchor="middle"
         >${label}</text

package/dist/components/chart/chart.d.ts

@@ -1,9 +1,8 @@
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
-
 //#region src/components/chart/chart.d.ts
-type ChartType = "bar" | "line" | "area" | "scatter" | "donut" | "histogram";
-type ChartDatum = Readonly<Record<string, string | number | boolean | null>>;
+export type ChartType = "bar" | "line" | "area" | "scatter" | "donut" | "histogram";
+export type ChartDatum = Readonly<Record<string, string | number | boolean | null>>;
 /**
  * <sigvelo-chart>
  *
@@ -12,7 +11,7 @@ type ChartDatum = Readonly<Record<string, string | number | boolean | null>>;
  * @status stable
  * @since 1.0
  */
-declare class SigveloChart extends SigveloElement {
+export declare class SigveloChart extends SigveloElement {
   #private;
   static styles: CSSResultGroup;
   type: ChartType;
@@ -28,5 +27,4 @@ declare global {
     "sigvelo-chart": SigveloChart;
   }
 }
-//#endregion
-export { ChartDatum, ChartType, SigveloChart };
+//#endregion

package/dist/components/chart/chart.js

@@ -1,2 +1,2 @@
-import { t as SigveloChart } from "../../chart-BSbFRQju.js";
+import { t as SigveloChart } from "../../chart-DtyJvCtm.js";
 export { SigveloChart };

package/dist/components/chart-card/chart-card.d.ts

@@ -1,13 +1,12 @@
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
-
 //#region src/components/chart-card/chart-card.d.ts
 /**
  * @tag sigvelo-chart-card
  * @summary A titled card composition for a chart or thematic map.
  * @slot - A chart or distribution component.
  */
-declare class SigveloChartCard extends SigveloElement {
+export declare class SigveloChartCard extends SigveloElement {
   static styles: CSSResultGroup;
   heading: string;
   description: string;
@@ -18,5 +17,4 @@ declare global {
     "sigvelo-chart-card": SigveloChartCard;
   }
 }
-//#endregion
-export { SigveloChartCard };
+//#endregion

package/dist/components/chart-card/chart-card.js

@@ -1,4 +1,4 @@
-import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { t as __decorate } from "../../decorate-BkO8ArQg.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";

package/dist/components/distribution/distribution.d.ts

@@ -1,9 +1,9 @@
+import "../chart/chart.js";
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
-
 //#region src/components/distribution/distribution.d.ts
 /** @tag sigvelo-distribution @summary Renders a numeric distribution as a bounded histogram. */
-declare class SigveloDistribution extends SigveloElement {
+export declare class SigveloDistribution extends SigveloElement {
   static styles: CSSResultGroup;
   values: readonly (number | null)[];
   label: string;
@@ -14,5 +14,4 @@ declare global {
     "sigvelo-distribution": SigveloDistribution;
   }
 }
-//#endregion
-export { SigveloDistribution };
+//#endregion

package/dist/components/distribution/distribution.js

@@ -1,5 +1,5 @@
-import "../../chart-BSbFRQju.js";
-import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import "../../chart-DtyJvCtm.js";
+import { t as __decorate } from "../../decorate-BkO8ArQg.js";
 import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";

package/dist/components/legend/legend.d.ts

@@ -1,13 +1,12 @@
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
-
 //#region src/components/legend/legend.d.ts
-interface LegendItem {
+export interface LegendItem {
   label: string;
   color: string;
 }
 /** @tag sigvelo-viz-legend @summary Displays a compact color legend for charts and thematic maps. */
-declare class SigveloVizLegend extends SigveloElement {
+export declare class SigveloVizLegend extends SigveloElement {
   static styles: CSSResultGroup;
   /**
    * The visible text above the swatches, which also names the region.
@@ -25,5 +24,4 @@ declare global {
     "sigvelo-viz-legend": SigveloVizLegend;
   }
 }
-//#endregion
-export { LegendItem, SigveloVizLegend };
+//#endregion

package/dist/components/legend/legend.js

@@ -1,4 +1,4 @@
-import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { t as __decorate } from "../../decorate-BkO8ArQg.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
@@ -21,7 +21,7 @@ const styles = css`
   .swatch {
     inline-size: 12px;
     block-size: 12px;
-    border-radius: 2px;
+    border-radius: var(--sigvelo-radius-xs);
     border: 1px solid var(--sigvelo-color-neutral-border-muted);
   }
 `;

package/dist/components/metric-card/metric-card.d.ts

@@ -1,9 +1,8 @@
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
-
 //#region src/components/metric-card/metric-card.d.ts
 /** @tag sigvelo-metric-card @summary A labeled key-metric card composition. */
-declare class SigveloMetricCard extends SigveloElement {
+export declare class SigveloMetricCard extends SigveloElement {
   static styles: CSSResultGroup;
   label: string;
   value: string;
@@ -15,5 +14,4 @@ declare global {
     "sigvelo-metric-card": SigveloMetricCard;
   }
 }
-//#endregion
-export { SigveloMetricCard };
+//#endregion

package/dist/components/metric-card/metric-card.js

@@ -1,4 +1,4 @@
-import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { t as __decorate } from "../../decorate-BkO8ArQg.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";

package/dist/{decorate-DcF3lt7P.js → decorate-BkO8ArQg.js}

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { t as SigveloChart } from "./chart-BSbFRQju.js";
+import { t as SigveloChart } from "./chart-DtyJvCtm.js";
 import { SigveloChartCard } from "./components/chart-card/chart-card.js";
 import { SigveloDistribution } from "./components/distribution/distribution.js";
 import { SigveloVizLegend } from "./components/legend/legend.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/viz-components",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "D3-backed, framework-agnostic Sigvelo visualization web components.",
   "keywords": [
     "charts",
@@ -27,31 +27,31 @@
     "access": "public"
   },
   "dependencies": {
-    "@mcp-b/wc-support": "0.3.11"
+    "@mcp-b/wc-support": "0.3.13"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.10",
-    "@storybook/addon-a11y": "^10.5.7",
-    "@storybook/addon-docs": "^10.5.7",
-    "@storybook/addon-vitest": "^10.5.7",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@storybook/addon-a11y": "10.5.7",
+    "@storybook/addon-docs": "10.5.7",
+    "@storybook/addon-vitest": "10.5.7",
     "@storybook/web-components-vite": "10.5.7",
     "@types/d3-array": "^3.2.2",
     "@types/d3-format": "^3.0.4",
     "@types/d3-geo": "^3.1.1",
     "@types/d3-scale": "^4.0.9",
-    "@types/d3-shape": "^3.1.8",
+    "@types/d3-shape": "^3.2.0",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.2",
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "lit": "^3.3.3",
-    "playwright": "~1.61.1",
-    "storybook": "^10.5.7",
+    "playwright": "1.61.1",
+    "storybook": "10.5.7",
     "tinyglobby": "^0.2.17",
     "typescript": "^6.0.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
-    "vitest": "^4.1.10"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
+    "vitest": "^4.1.11"
   },
   "peerDependencies": {
     "d3-array": "^3.2.4",