@godxjp/ui 32.14.0 → 32.15.0

package/dist/components/charts/heatmap-chart.js

@@ -0,0 +1,293 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { Tooltip, TooltipAnchorContext, TooltipContent } from "../feedback/tooltip.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useChartNumberFormat } from "./chart-frame.js";
+import { HEAT_STEPS, buildHeatmapModel, heatmapCellKey } from "./chart-summary.js";
+const OPEN_DELAY = 200;
+const CLOSE_GRACE = 100;
+const RAMP = Array.from({ length: HEAT_STEPS }, (_, index) => index + 1);
+function HeatmapChart({
+  rows,
+  columns,
+  data,
+  label,
+  showCaption = true,
+  description,
+  size = "md",
+  numberFormat,
+  topN,
+  showLegend = true,
+  emptyMessage,
+  className,
+  id,
+  ref
+}) {
+  const { t } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat);
+  const countFmt = useChartNumberFormat();
+  const model = React.useMemo(
+    () => buildHeatmapModel(rows, columns, data, topN),
+    [rows, columns, data, topN]
+  );
+  const hasData = rows.length > 0 && columns.length > 0 && model.present > 0;
+  const reactId = React.useId();
+  const baseId = id ?? reactId;
+  const titleId = `${baseId}-title`;
+  const descId = `${baseId}-desc`;
+  const [active, setActive] = React.useState([0, 0]);
+  const activeRow = Math.min(active[0], Math.max(0, rows.length - 1));
+  const activeColumn = Math.min(active[1], Math.max(0, columns.length - 1));
+  const scrollRef = React.useRef(null);
+  const cellRefs = React.useRef(/* @__PURE__ */ new Map());
+  const anchorRef = React.useRef(null);
+  const timer = React.useRef(void 0);
+  const [tip, setTip] = React.useState(null);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const showTip = (r, c, node, delay) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      anchorRef.current = node;
+      setTip([r, c]);
+    }, delay);
+  };
+  const hideTip = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setTip(null), CLOSE_GRACE);
+  };
+  React.useEffect(() => {
+    if (!tip) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        clearTimeout(timer.current);
+        setTip(null);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [tip]);
+  const reveal = (cell) => {
+    const scroller = scrollRef.current;
+    const header = cell.parentElement?.querySelector("th");
+    if (!scroller || !header) return;
+    const cellBox = cell.getBoundingClientRect();
+    const headerBox = header.getBoundingClientRect();
+    if (getComputedStyle(scroller).direction === "rtl") {
+      if (cellBox.right > headerBox.left) scroller.scrollLeft += cellBox.right - headerBox.left;
+    } else if (cellBox.left < headerBox.right) {
+      scroller.scrollLeft -= headerBox.right - cellBox.left;
+    }
+  };
+  const moveTo = (r, c) => {
+    const row = Math.max(0, Math.min(rows.length - 1, r));
+    const column = Math.max(0, Math.min(columns.length - 1, c));
+    setActive([row, column]);
+    const cell = cellRefs.current.get(`${row}:${column}`);
+    if (cell) {
+      cell.focus();
+      reveal(cell);
+    }
+  };
+  const onGridKeyDown = (event) => {
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const lastRow = rows.length - 1;
+    const lastColumn = columns.length - 1;
+    const ctrl = event.ctrlKey || event.metaKey;
+    switch (event.key) {
+      case "ArrowRight":
+        moveTo(activeRow, activeColumn + (rtl ? -1 : 1));
+        break;
+      case "ArrowLeft":
+        moveTo(activeRow, activeColumn + (rtl ? 1 : -1));
+        break;
+      case "ArrowDown":
+        moveTo(activeRow + 1, activeColumn);
+        break;
+      case "ArrowUp":
+        moveTo(activeRow - 1, activeColumn);
+        break;
+      case "Home":
+        moveTo(ctrl ? 0 : activeRow, 0);
+        break;
+      case "End":
+        moveTo(ctrl ? lastRow : activeRow, lastColumn);
+        break;
+      case "Escape":
+        clearTimeout(timer.current);
+        setTip(null);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const cellText = (r, c) => {
+    const key = heatmapCellKey(rows[r].key, columns[c].key);
+    const value = model.values.get(key);
+    const rank = model.ranks.get(key);
+    return {
+      value: value === void 0 ? t("chart.heatmapNoData") : fmt.format(value),
+      top: rank === void 0 ? void 0 : t("chart.heatmapTop", { rank: countFmt.format(rank) })
+    };
+  };
+  const summary = model.highest ? `${t("chart.heatmapSummary", {
+    rows: countFmt.format(rows.length),
+    columns: countFmt.format(columns.length)
+  })} ${t("chart.heatmapHighest", {
+    value: fmt.format(model.highest.value),
+    row: model.highest.row.label,
+    column: model.highest.column.label
+  })}` : "";
+  const tipText = tip && tip[0] < rows.length && tip[1] < columns.length ? cellText(tip[0], tip[1]) : null;
+  const span = model.max - model.min;
+  const bound = (step) => model.min + span * step / HEAT_STEPS;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref,
+      id,
+      "data-slot": "chart",
+      "data-size": size,
+      className: cn("ui-chart ui-chart-heatmap", className),
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      children: [
+        /* @__PURE__ */ jsx("figcaption", { id: titleId, className: showCaption ? "ui-chart-title" : "sr-only", children: label }),
+        hasData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "ui-chart-heatmap-scroll", children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              role: "grid",
+              "aria-labelledby": titleId,
+              className: "ui-chart-heatmap-grid",
+              onKeyDown: onGridKeyDown,
+              children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { className: "ui-chart-heatmap-corner" }),
+                  columns.map((column) => /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      scope: "col",
+                      className: "ui-chart-heatmap-column-header",
+                      children: column.label
+                    },
+                    String(column.key)
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { scope: "row", className: "ui-chart-heatmap-row-header", children: row.label }),
+                  columns.map((column, c) => {
+                    const key = heatmapCellKey(row.key, column.key);
+                    const empty = !model.values.has(key);
+                    const text = cellText(r, c);
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        role: "gridcell",
+                        ref: (node) => {
+                          if (node) cellRefs.current.set(`${r}:${c}`, node);
+                          else cellRefs.current.delete(`${r}:${c}`);
+                        },
+                        tabIndex: r === activeRow && c === activeColumn ? 0 : -1,
+                        className: "ui-chart-heatmap-cell ui-focus-ring",
+                        "data-step": empty ? void 0 : model.steps.get(key),
+                        "data-empty": empty ? "" : void 0,
+                        "data-emphasized": model.ranks.has(key) ? "" : void 0,
+                        onFocus: (event) => {
+                          setActive([r, c]);
+                          showTip(r, c, event.currentTarget, 0);
+                        },
+                        onBlur: hideTip,
+                        onPointerEnter: (event) => showTip(r, c, event.currentTarget, OPEN_DELAY),
+                        onPointerLeave: hideTip,
+                        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.top ? `${text.value}, ${text.top}` : text.value })
+                      },
+                      String(column.key)
+                    );
+                  })
+                ] }, String(row.key))) })
+              ]
+            }
+          ) }),
+          showLegend ? /* @__PURE__ */ jsxs("div", { className: "ui-chart-heatmap-legend", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ui-chart-heatmap-legend-scale", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-legend-label", "aria-hidden": "true", children: fmt.format(model.min) }),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  role: "list",
+                  className: "ui-chart-heatmap-legend-ramp",
+                  "aria-label": t("chart.heatmapLegend"),
+                  children: RAMP.map((step) => /* @__PURE__ */ jsx("li", { className: "ui-chart-heatmap-legend-swatch", "data-step": step, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: fmt.formatRange(bound(step - 1), bound(step)) }) }, step))
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-legend-label", "aria-hidden": "true", children: fmt.format(model.max) })
+            ] }),
+            model.empty > 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-chart-heatmap-legend-item", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ui-chart-heatmap-legend-swatch",
+                  "data-empty": "",
+                  "aria-hidden": "true"
+                }
+              ),
+              t("chart.heatmapNoData")
+            ] }) : null,
+            model.ranks.size > 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-chart-heatmap-legend-item", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ui-chart-heatmap-legend-swatch",
+                  "data-step": HEAT_STEPS,
+                  "data-emphasized": "",
+                  "aria-hidden": "true"
+                }
+              ),
+              t("chart.heatmapLegendTop", { count: countFmt.format(model.ranks.size) })
+            ] }) : null
+          ] }) : null
+        ] }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") }),
+        /* @__PURE__ */ jsxs("p", { id: descId, className: "sr-only", children: [
+          description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            description,
+            " "
+          ] }) : null,
+          hasData ? summary : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            open: tip !== null,
+            onOpenChange: (next) => {
+              if (!next) setTip(null);
+            },
+            children: /* @__PURE__ */ jsx(TooltipAnchorContext.Provider, { value: anchorRef, children: tip && tipText ? /* @__PURE__ */ jsxs(
+              TooltipContent,
+              {
+                className: "ui-chart-heatmap-tooltip",
+                onPointerEnter: () => clearTimeout(timer.current),
+                onPointerLeave: hideTip,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-tooltip-title", children: t("chart.heatmapCell", {
+                    row: rows[tip[0]]?.label ?? "",
+                    column: columns[tip[1]]?.label ?? "",
+                    value: tipText.value
+                  }) }),
+                  tipText.top ? /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-tooltip-note", children: tipText.top }) : null
+                ]
+              },
+              `${tip[0]}:${tip[1]}`
+            ) : null })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  HeatmapChart
+};

package/dist/components/charts/index.d.ts

@@ -9,6 +9,9 @@ export type { BarChartProp, BarChartProps } from "./bar-chart.js";
  */
 export { CompactBarTrend } from "./compact-bar-trend.js";
 export type { CompactBarTrendProp, CompactBarTrendProps } from "./compact-bar-trend.js";
+/** Dependency-free rows × columns heatmap — isolated entry `@godxjp/ui/charts/heatmap-chart`. */
+export { HeatmapChart } from "./heatmap-chart.js";
+export type { HeatmapChartProp, HeatmapChartProps, HeatmapCategory, HeatmapDatum, } from "./heatmap-chart.js";
 export { AreaChart } from "./area-chart.js";
 export type { AreaChartProp, AreaChartProps } from "./area-chart.js";
 export { PieChart } from "./pie-chart.js";

package/dist/components/charts/index.js

@@ -1,6 +1,7 @@
 import { LineChart } from "./line-chart.js";
 import { BarChart } from "./bar-chart.js";
 import { CompactBarTrend } from "./compact-bar-trend.js";
+import { HeatmapChart } from "./heatmap-chart.js";
 import { AreaChart } from "./area-chart.js";
 import { PieChart } from "./pie-chart.js";
 import { CHART_COLORS } from "./chart-frame.js";
@@ -9,6 +10,7 @@ export {
   BarChart,
   CHART_COLORS,
   CompactBarTrend,
+  HeatmapChart,
   LineChart,
   PieChart
 };

package/dist/components/feedback/tooltip.d.ts

@@ -1,6 +1,15 @@
 import * as React from "react";
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";
+/**
+ * Anchors `TooltipContent` to an element that is NOT a `TooltipTrigger` (gh#1045). `TooltipTrigger`
+ * wraps its child in RAC's `Focusable`, which stamps `tabIndex=0` on it — right for a button, wrong for a truncated `Text` inside a `treeitem`, where it
+ * would add a second tab stop. The ellipsis tooltip drives `open` itself and hands its own element
+ * here as the positioning target (RAC `Tooltip`'s `triggerRef`). HeatmapChart (gh#1330) does the
+ * same with ONE tooltip for its whole grid, anchored to the active cell. Module-internal: not in
+ * the feedback index.
+ */
+export declare const TooltipAnchorContext: React.Context<React.RefObject<Element | null> | null>;
 interface TooltipProviderProps {
     /** Delay mở dùng chung cho mọi `Tooltip` bên trong, tính bằng ms. */
     delayDuration?: number;

package/dist/components/feedback/tooltip.js

@@ -12,7 +12,9 @@ import {
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 const DEFAULT_DELAY_DURATION = 200;
-const TooltipAnchorContext = React.createContext(null);
+const TooltipAnchorContext = React.createContext(
+  null
+);
 function toPlacement(side, align) {
   if (align === "center") return side;
   if (side === "top" || side === "bottom") return `${side} ${align}`;
@@ -223,6 +225,7 @@ function EllipsisTooltip({
 export {
   EllipsisTooltip,
   Tooltip,
+  TooltipAnchorContext,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "32.14.0",
+  "version": "32.15.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -787,7 +787,14 @@
     "summaryCartesian": "Chart with {series} series across {points} data points",
     "summaryPie": "Pie chart with {slices} slices",
     "summaryTrend": "Bar trend with {points} data points",
-    "trendCurrent": "current"
+    "trendCurrent": "current",
+    "heatmapSummary": "Heatmap, {rows} × {columns}",
+    "heatmapHighest": "Highest: {value} at {row}, {column}",
+    "heatmapNoData": "No data",
+    "heatmapTop": "Top {rank}",
+    "heatmapLegend": "Color scale",
+    "heatmapLegendTop": "Top {count}",
+    "heatmapCell": "{row}, {column}: {value}"
   },
   "rangeTimeline": {
     "childRows": "Child rows",

package/dist/i18n/messages/ja.json

@@ -761,7 +761,14 @@
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
     "summaryPie": "{slices}区分の円グラフ",
     "summaryTrend": "{points}データ点の推移棒グラフ",
-    "trendCurrent": "現在"
+    "trendCurrent": "現在",
+    "heatmapSummary": "ヒートマップ（{rows}行×{columns}列）",
+    "heatmapHighest": "最大 {value}（{row}・{column}）",
+    "heatmapNoData": "データなし",
+    "heatmapTop": "上位{rank}位",
+    "heatmapLegend": "色の濃さの凡例",
+    "heatmapLegendTop": "上位{count}件",
+    "heatmapCell": "{row}・{column}：{value}"
   },
   "rangeTimeline": {
     "childRows": "子の行",

package/dist/i18n/messages/vi.json

@@ -762,7 +762,14 @@
     "summaryCartesian": "Biểu đồ gồm {series} chuỗi trên {points} điểm dữ liệu",
     "summaryPie": "Biểu đồ tròn gồm {slices} phần",
     "summaryTrend": "Biểu đồ cột xu hướng gồm {points} điểm dữ liệu",
-    "trendCurrent": "hiện tại"
+    "trendCurrent": "hiện tại",
+    "heatmapSummary": "Bản đồ nhiệt {rows} × {columns}",
+    "heatmapHighest": "Cao nhất: {value} tại {row}, {column}",
+    "heatmapNoData": "Không có dữ liệu",
+    "heatmapTop": "Hạng {rank}",
+    "heatmapLegend": "Thang màu",
+    "heatmapLegendTop": "{count} ô cao nhất",
+    "heatmapCell": "{row}, {column}: {value}"
   },
   "rangeTimeline": {
     "childRows": "Hàng con",

package/dist/props/components/charts.prop.d.ts

@@ -138,6 +138,64 @@ export type CompactBarTrendProp = {
     id?: IdProp;
     ref?: React.Ref<HTMLElement>;
 };
+/** One category on a HeatmapChart axis — a row (weekday) or a column (hour). */
+export type HeatmapCategory = {
+    /** Stable key the `data` cells refer to (`row` / `column`). */
+    key: string | number;
+    /** Already-translated display label — the axis tick and the table header. */
+    label: string;
+};
+/** One HeatmapChart cell. A cell absent from `data`, or with a non-finite `value`, is EMPTY. */
+export type HeatmapDatum = {
+    /** `key` of the row this cell belongs to. */
+    row: string | number;
+    /** `key` of the column this cell belongs to. */
+    column: string | number;
+    /** The measured value. `null`/`undefined`/`NaN` mean "no data" — not zero. */
+    value: number | null | undefined;
+};
+/**
+ * @see HeatmapChart
+ *
+ * Dependency-free (no `recharts`) rows × columns matrix — a weekday × hour heatmap. Cell intensity
+ * steps through the `--chart-heat-1..5` ramp; an empty cell is outlined, a zero cell is filled.
+ */
+export type HeatmapChartProp = {
+    /** Row categories, top to bottom (the y axis — weekdays). */
+    rows: HeatmapCategory[];
+    /** Column categories, start to end (the x axis — hours). */
+    columns: HeatmapCategory[];
+    /** Cell values, keyed by `row` + `column`. Order does not matter; a missing cell is empty. */
+    data: HeatmapDatum[];
+    /** Accessible name + visible caption for the chart. REQUIRED (the grid needs a name). */
+    label: LabelProp;
+    /**
+     * Paint `label` as a visible caption above the plot. `false` keeps it in the DOM as `sr-only`,
+     * so the figure and its grid keep their accessible name.
+     */
+    showCaption?: boolean;
+    /** Extra context appended to the screen-reader description. */
+    description?: DescriptionProp;
+    /**
+     * CELL size tier — `xs|sm|md|lg` (`--chart-heatmap-cell-size-*`). Not a canvas height: the matrix
+     * is as tall as its rows, and when the columns do not fit it scrolls inside its own box.
+     */
+    size?: SizeProp;
+    /** `Intl.NumberFormat` options for cell values, the tooltip and the legend (locale is automatic). */
+    numberFormat?: Intl.NumberFormatOptions;
+    /**
+     * Emphasize the N highest cells with an outline ring and a "top N" note in the tooltip and the
+     * text alternative — never colour alone. Ties keep `data` order. Omitted or 0 = no emphasis.
+     */
+    topN?: number;
+    /** Show the colour-scale legend under the matrix. */
+    showLegend?: boolean;
+    /** Message shown when there are no rows, no columns or no cells. Defaults to a localized "no data". */
+    emptyMessage?: EmptyMessageProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+    ref?: React.Ref<HTMLElement>;
+};
 /** @see AreaChart */
 export type AreaChartProp = ChartCartesianBase & {
     /** Stack series areas instead of overlaying them. */

package/dist/props/registry.d.ts

@@ -2331,6 +2331,43 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Forwarded ref to the <figure> element.";
         }];
     };
+    readonly HeatmapChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+            readonly field: "rows";
+            readonly local: true;
+            readonly reason: "Row categories (y axis) — key + translated label.";
+        }, {
+            readonly field: "columns";
+            readonly local: true;
+            readonly reason: "Column categories (x axis) — key + translated label.";
+        }, {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Cell values keyed by row + column.";
+        }, {
+            readonly field: "showCaption";
+            readonly local: true;
+            readonly reason: "Paint the caption; false keeps it sr-only so the accessible name survives.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl.NumberFormat options for cell values, tooltip and legend.";
+        }, {
+            readonly field: "topN";
+            readonly local: true;
+            readonly reason: "Emphasize the N highest cells (ring + text note, never colour alone).";
+        }, {
+            readonly field: "showLegend";
+            readonly local: true;
+            readonly reason: "Chart-specific legend toggle.";
+        }, {
+            readonly field: "ref";
+            readonly local: true;
+            readonly reason: "Forwarded ref to the <figure> element.";
+        }];
+    };
     readonly AreaChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";

package/dist/props/registry.js

@@ -2762,6 +2762,42 @@ const COMPONENT_PROP_REGISTRY = {
       { field: "ref", local: true, reason: "Forwarded ref to the <figure> element." }
     ]
   },
+  HeatmapChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "rows", local: true, reason: "Row categories (y axis) \u2014 key + translated label." },
+      {
+        field: "columns",
+        local: true,
+        reason: "Column categories (x axis) \u2014 key + translated label."
+      },
+      { field: "data", local: true, reason: "Cell values keyed by row + column." },
+      {
+        field: "showCaption",
+        local: true,
+        reason: "Paint the caption; false keeps it sr-only so the accessible name survives."
+      },
+      {
+        field: "numberFormat",
+        local: true,
+        reason: "Intl.NumberFormat options for cell values, tooltip and legend."
+      },
+      {
+        field: "topN",
+        local: true,
+        reason: "Emphasize the N highest cells (ring + text note, never colour alone)."
+      },
+      { field: "showLegend", local: true, reason: "Chart-specific legend toggle." },
+      { field: "ref", local: true, reason: "Forwarded ref to the <figure> element." }
+    ]
+  },
   AreaChartProp: {
     group: "data-display",
     file: "components/charts.prop.ts",