@godxjp/ui 33.15.0 → 33.17.0

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

@@ -2,6 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
+  Dot,
+  Rectangle,
   Area,
   AreaChart as RAreaChart,
   Bar,
@@ -22,6 +24,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
 import { buildCartesianSummary } from "./chart-summary.js";
 import { useCategoryAxisMetrics } from "./chart-category-axis.js";
+import { useChartDatumSelection } from "./chart-datum-selection.js";
 import { listFormat } from "../../lib/intl-cache.js";
 function CartesianChart({
   kind,
@@ -40,6 +43,7 @@ function CartesianChart({
   numberFormat,
   emptyMessage,
   onCategoryClick,
+  onDatumSelect,
   className,
   id,
   curved = false,
@@ -51,6 +55,71 @@ function CartesianChart({
   const { t, locale } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
   const list = React.useMemo(() => listFormat(locale, { style: "narrow", type: "unit" }), [locale]);
+  const points = series.flatMap(
+    (s, seriesIndex) => data.flatMap(
+      (datum, index) => typeof datum[s.dataKey] === "number" && Number.isFinite(datum[s.dataKey]) ? [{ index, series: seriesIndex }] : []
+    )
+  );
+  const markProps = useChartDatumSelection(points);
+  const mark = (seriesIndex, shape, raw) => {
+    const s = series[seriesIndex];
+    const props = raw;
+    const { x = 0, y = 0, width = 0, height: height2 = 0 } = props;
+    const index = props.index;
+    const datum = data[index];
+    if (!datum || typeof datum[s.dataKey] !== "number" || !Number.isFinite(datum[s.dataKey]))
+      return /* @__PURE__ */ jsx("g", {});
+    const action = markProps(
+      index,
+      seriesIndex,
+      t("chart.datumLabel", {
+        label: String(datum[categoryKey] ?? ""),
+        series: s.label ?? s.dataKey,
+        value: fmt.format(Number(datum[s.dataKey]))
+      }),
+      () => onDatumSelect?.(datum, { seriesKey: s.dataKey, index })
+    );
+    return shape === "bar" ? /* @__PURE__ */ jsxs("g", { ...action, children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: Math.min(x, x + width),
+          y: Math.min(y, y + height2),
+          width: Math.abs(width),
+          height: Math.abs(height2),
+          className: "ui-chart-bar-hit",
+          fill: "transparent",
+          style: {
+            "--chart-mark-width": `${Math.abs(width)}px`,
+            "--chart-mark-height": `${Math.abs(height2)}px`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Rectangle,
+        {
+          x: props.x,
+          y: props.y,
+          width: props.width,
+          height: props.height,
+          fill: props.fill,
+          radius: 2
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("g", { ...action, children: [
+      /* @__PURE__ */ jsx("circle", { cx: props.cx, cy: props.cy, className: "ui-chart-point-hit", fill: "transparent" }),
+      /* @__PURE__ */ jsx(Dot, { cx: props.cx, cy: props.cy, fill: chartColor(seriesIndex, s.color) })
+    ] });
+  };
+  const markRef = React.useRef(mark);
+  markRef.current = mark;
+  const shapes = React.useMemo(
+    () => Array.from({ length: series.length }, (_, i) => ({
+      bar: (raw) => markRef.current(i, "bar", raw),
+      dot: (raw) => markRef.current(i, "dot", raw)
+    })),
+    [series.length]
+  );
   const hasData = data.length > 0 && series.length > 0;
   const summary = buildCartesianSummary(
     data,
@@ -161,59 +230,90 @@ function CartesianChart({
   const onBarClick = onCategoryClick ? (_entry, index) => pickCategory(index) : void 0;
   const chart = () => {
     if (kind === "line") {
-      return /* @__PURE__ */ jsxs(RLineChart, { data, onClick: onChartClick, children: [
-        axes(true),
-        series.map((s, i) => /* @__PURE__ */ jsx(
-          Line,
-          {
-            type: curve,
-            dataKey: s.dataKey,
-            name: s.label ?? s.dataKey,
-            stroke: chartColor(i, s.color),
-            dot: showDots
-          },
-          s.dataKey
-        ))
-      ] });
+      return /* @__PURE__ */ jsxs(
+        RLineChart,
+        {
+          accessibilityLayer: onDatumSelect ? false : void 0,
+          data,
+          onClick: onChartClick,
+          children: [
+            axes(true),
+            series.map((s, i) => /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: curve,
+                dataKey: s.dataKey,
+                name: s.label ?? s.dataKey,
+                stroke: chartColor(i, s.color),
+                dot: onDatumSelect ? shapes[i].dot : showDots,
+                activeDot: onDatumSelect ? false : void 0,
+                isAnimationActive: onDatumSelect ? false : void 0
+              },
+              s.dataKey
+            ))
+          ]
+        }
+      );
     }
     if (kind === "area") {
-      return /* @__PURE__ */ jsxs(RAreaChart, { data, onClick: onChartClick, children: [
-        axes(true),
-        series.map((s, i) => /* @__PURE__ */ jsx(
-          Area,
-          {
-            type: curve,
-            dataKey: s.dataKey,
-            name: s.label ?? s.dataKey,
-            stackId: stacked ? "stack" : void 0,
-            stroke: chartColor(i, s.color),
-            fill: s.fillColor ?? chartColor(i, s.color),
-            dot: showDots
-          },
-          s.dataKey
-        ))
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(RBarChart, { data, layout: horizontal ? "vertical" : "horizontal", children: [
-      axes(!horizontal),
-      series.map((s, i) => /* @__PURE__ */ jsx(
-        Bar,
+      return /* @__PURE__ */ jsxs(
+        RAreaChart,
         {
-          dataKey: s.dataKey,
-          name: s.label ?? s.dataKey,
-          stackId: stacked ? "stack" : void 0,
-          fill: chartColor(i, s.color),
-          radius: 2,
-          onClick: onBarClick,
-          background: onCategoryClick ? { fill: "transparent" } : void 0
-        },
-        s.dataKey
-      ))
-    ] });
+          accessibilityLayer: onDatumSelect ? false : void 0,
+          data,
+          onClick: onChartClick,
+          children: [
+            axes(true),
+            series.map((s, i) => /* @__PURE__ */ jsx(
+              Area,
+              {
+                type: curve,
+                dataKey: s.dataKey,
+                name: s.label ?? s.dataKey,
+                stackId: stacked ? "stack" : void 0,
+                stroke: chartColor(i, s.color),
+                fill: s.fillColor ?? chartColor(i, s.color),
+                dot: onDatumSelect ? shapes[i].dot : showDots,
+                activeDot: onDatumSelect ? false : void 0,
+                isAnimationActive: onDatumSelect ? false : void 0
+              },
+              s.dataKey
+            ))
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      RBarChart,
+      {
+        accessibilityLayer: onDatumSelect ? false : void 0,
+        data,
+        layout: horizontal ? "vertical" : "horizontal",
+        children: [
+          axes(!horizontal),
+          series.map((s, i) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: s.dataKey,
+              name: s.label ?? s.dataKey,
+              stackId: stacked ? "stack" : void 0,
+              fill: chartColor(i, s.color),
+              radius: 2,
+              shape: onDatumSelect ? shapes[i].bar : void 0,
+              isAnimationActive: onDatumSelect ? false : void 0,
+              onClick: onBarClick,
+              background: onCategoryClick ? { fill: "transparent" } : void 0
+            },
+            s.dataKey
+          ))
+        ]
+      }
+    );
   };
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
+      interactive: !!onDatumSelect,
       label,
       showCaption,
       description,

package/dist/components/charts/chart-datum-selection.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+/** Roving mark focus. Geometry stays in recharts; data identity stays in the original array. */
+export declare function useChartDatumSelection(points: {
+    index: number;
+    series: number;
+}[]): (index: number, series: number, name: string, select: () => void) => {
+    role: string;
+    "aria-label": string;
+    "data-chart-datum": string;
+    className: string;
+    tabIndex: number;
+    onFocus: (event: React.FocusEvent<SVGElement>) => void;
+    onClick: (event: React.MouseEvent<SVGElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<SVGElement>) => void;
+};

package/dist/components/charts/chart-datum-selection.js

@@ -0,0 +1,97 @@
+"use client";
+import * as React from "react";
+function useChartDatumSelection(points) {
+  const active = React.useRef("");
+  const recovery = React.useRef(null);
+  React.useEffect(() => () => recovery.current?.(), []);
+  const key = (index, series) => `${series}:${index}`;
+  const keys = points.map((p) => key(p.index, p.series));
+  const current = keys.includes(active.current) ? active.current : keys[0];
+  const activate = (node, select) => {
+    const canvas = node.closest(".ui-chart-canvas");
+    const identity = node.dataset.chartDatum;
+    recovery.current?.();
+    let focused = node;
+    const stop = () => {
+      observer.disconnect();
+      document.removeEventListener("keydown", stop, true);
+      document.removeEventListener("pointerdown", stop, true);
+      document.removeEventListener("focusin", onFocusIn, true);
+    };
+    const onFocusIn = (event) => {
+      if (event.target !== focused) stop();
+    };
+    const observer = new MutationObserver(() => {
+      if (focused.isConnected || !canvas?.isConnected || document.activeElement !== document.body)
+        return;
+      const replacement = Array.from(
+        canvas.querySelectorAll("[data-chart-datum]")
+      ).find((mark) => mark.dataset.chartDatum === identity);
+      if (replacement) {
+        focused = replacement;
+        replacement.focus();
+      }
+    });
+    recovery.current = stop;
+    if (canvas) observer.observe(canvas, { childList: true, subtree: true });
+    document.addEventListener("keydown", stop, true);
+    document.addEventListener("pointerdown", stop, true);
+    document.addEventListener("focusin", onFocusIn, true);
+    select();
+  };
+  return (index, series, name, select) => ({
+    role: "button",
+    "aria-label": name,
+    "data-chart-datum": key(index, series),
+    className: "ui-chart-datum ui-focus-ring",
+    tabIndex: current === key(index, series) ? 0 : -1,
+    onFocus: (event) => {
+      event.stopPropagation();
+      active.current = key(index, series);
+      event.currentTarget.closest(".ui-chart-canvas")?.querySelectorAll("[data-chart-datum]").forEach((node) => {
+        node.tabIndex = node === event.currentTarget ? 0 : -1;
+      });
+    },
+    onClick: (event) => {
+      event.stopPropagation();
+      event.currentTarget.focus();
+      activate(event.currentTarget, select);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!event.repeat) activate(event.currentTarget, select);
+        return;
+      }
+      const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+      let target;
+      const along = event.key === "ArrowRight" ? rtl ? -1 : 1 : event.key === "ArrowLeft" ? rtl ? 1 : -1 : 0;
+      const across = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+      if (along) {
+        const row = points.filter((p) => p.series === series);
+        const at = row.findIndex((p) => p.index === index);
+        target = row[Math.max(0, Math.min(row.length - 1, at + along))];
+      } else if (across) {
+        const column = points.filter((p) => p.index === index);
+        const at = column.findIndex((p) => p.series === series);
+        target = column[Math.max(0, Math.min(column.length - 1, at + across))];
+      } else if (event.key === "Home" || event.key === "End") {
+        const row = event.ctrlKey || event.metaKey ? points : points.filter((p) => p.series === series);
+        target = event.key === "Home" ? row[0] : row.at(-1);
+      } else return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!target) return;
+      const next = key(target.index, target.series);
+      const canvas = event.currentTarget.closest(".ui-chart-canvas");
+      const mark = Array.from(
+        canvas?.querySelectorAll("[data-chart-datum]") ?? []
+      ).find((node) => node.dataset.chartDatum === next);
+      mark?.focus();
+    }
+  });
+}
+export {
+  useChartDatumSelection
+};

package/dist/components/charts/chart-frame.d.ts

@@ -16,6 +16,7 @@ export declare function chartHeight(size?: "xs" | "sm" | "md" | "lg", height?: n
 /** A locale-bound number formatter for the active app locale. */
 export declare function useChartNumberFormat(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 type ChartFrameProps = {
+    interactive?: boolean;
     /** Visible caption; also the accessible name via `aria-labelledby` → `<figcaption>`. */
     label: React.ReactNode;
     /**
@@ -54,5 +55,5 @@ type ChartFrameProps = {
  * in a `role="img"` element with a short `aria-label`; the full data is exposed as
  * a sibling visually-hidden list referenced by the figure's `aria-describedby`.
  */
-export declare function ChartFrame({ label, showCaption, description, summaryRows, imgSummary, hasData, height, size, footer, className, id, children, ref, canvasRef, canvasExtra, }: ChartFrameProps): React.JSX.Element;
+export declare function ChartFrame({ interactive, label, showCaption, description, summaryRows, imgSummary, hasData, height, size, footer, className, id, children, ref, canvasRef, canvasExtra, }: ChartFrameProps): React.JSX.Element;
 export {};

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

@@ -29,6 +29,7 @@ function useChartNumberFormat(options) {
   return React.useMemo(() => numberFormat(locale, options), [locale, options]);
 }
 function ChartFrame({
+  interactive = false,
   label,
   showCaption = true,
   description,
@@ -66,7 +67,7 @@ function ChartFrame({
             ref: canvasRef,
             className: "ui-chart-canvas",
             style: { height },
-            role: "img",
+            role: interactive ? "group" : "img",
             "aria-label": imgSummary,
             children: [
               children,

package/dist/components/charts/heatmap-chart.d.ts

@@ -16,4 +16,4 @@ export type { HeatmapChartProp, HeatmapChartProp as HeatmapChartProps, HeatmapCa
  * - **Narrow screens** — the matrix never shrinks a cell below its `size` tier; it scrolls inside
  *   its own box with the row header pinned, so the page never scrolls sideways.
  */
-export declare function HeatmapChart({ rows, columns, data, label, showCaption, description, size, numberFormat, topN, showLegend, emptyMessage, className, id, ref, }: HeatmapChartProp): React.JSX.Element;
+export declare function HeatmapChart({ onDatumSelect, rows, columns, data, label, showCaption, description, size, numberFormat, topN, showLegend, emptyMessage, className, id, ref, }: HeatmapChartProp): React.JSX.Element;

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

@@ -11,6 +11,7 @@ const OPEN_DELAY = 200;
 const CLOSE_GRACE = 100;
 const RAMP = Array.from({ length: HEAT_STEPS }, (_, index) => index + 1);
 function HeatmapChart({
+  onDatumSelect,
   rows,
   columns,
   data,
@@ -91,6 +92,12 @@ function HeatmapChart({
       reveal(cell);
     }
   };
+  const selectCell = (r, c) => {
+    const index = data.findIndex(
+      (datum) => String(datum.row) === String(rows[r]?.key) && String(datum.column) === String(columns[c]?.key) && typeof datum.value === "number" && Number.isFinite(datum.value)
+    );
+    if (index >= 0) onDatumSelect?.(data[index], { seriesKey: String(columns[c].key), index });
+  };
   const onGridKeyDown = (event) => {
     const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
     const lastRow = rows.length - 1;
@@ -193,6 +200,19 @@ function HeatmapChart({
                         },
                         tabIndex: r === activeRow && c === activeColumn ? 0 : -1,
                         className: "ui-chart-heatmap-cell ui-focus-ring",
+                        "data-interactive": onDatumSelect && !empty ? "" : void 0,
+                        "aria-label": onDatumSelect ? t("chart.heatmapCell", {
+                          row: row.label,
+                          column: column.label,
+                          value: text.value
+                        }) : void 0,
+                        onKeyDown: onDatumSelect ? (event) => {
+                          if (event.key !== "Enter" && event.key !== " ") return;
+                          event.preventDefault();
+                          event.stopPropagation();
+                          if (!event.repeat && !empty) selectCell(r, c);
+                        } : void 0,
+                        onClick: onDatumSelect && !empty ? () => selectCell(r, c) : void 0,
                         "data-step": empty ? void 0 : model.steps.get(key),
                         "data-empty": empty ? "" : void 0,
                         "data-emphasized": model.ranks.has(key) ? "" : void 0,

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

@@ -16,5 +16,5 @@ export { AreaChart } from "./area-chart.js";
 export type { AreaChartProp, AreaChartProps } from "./area-chart.js";
 export { PieChart } from "./pie-chart.js";
 export type { PieChartProp, PieChartProps } from "./pie-chart.js";
-export type { ChartSeriesProp, ChartDatum } from "../../props/components/charts.prop.js";
+export type { ChartSeriesProp, ChartDatum, ChartDatumSelect } from "../../props/components/charts.prop.js";
 export { CHART_COLORS } from "./chart-frame.js";

package/dist/components/charts/pie-chart.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { PieChartProp } from "../../props/components/charts.prop.js";
 export type { PieChartProp, PieChartProp as PieChartProps, } from "../../props/components/charts.prop.js";
 /**
@@ -5,4 +6,4 @@ export type { PieChartProp, PieChartProp as PieChartProps, } from "../../props/c
  * Import from the tree-shaken `@godxjp/ui/charts` entry; requires the `recharts`
  * optional peer dependency.
  */
-export declare function PieChart({ data, dataKey, nameKey, colors, label, showCaption, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): import("react").JSX.Element;
+export declare function PieChart({ onDatumSelect, data, dataKey, nameKey, colors, label, showCaption, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): React.JSX.Element;

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

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import {
   Cell,
+  Sector,
   Legend,
   Pie,
   PieChart as RPieChart,
@@ -12,8 +14,10 @@ import {
 import { EmptyState } from "../data-display/empty-state.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
+import { useChartDatumSelection } from "./chart-datum-selection.js";
 import { buildPieSummary } from "./chart-summary.js";
 function PieChart({
+  onDatumSelect,
   data,
   dataKey,
   nameKey,
@@ -33,6 +37,34 @@ function PieChart({
   assertRechartsPeer();
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const points = data.flatMap(
+    (datum, index) => typeof datum[dataKey] === "number" && Number.isFinite(datum[dataKey]) && Number(datum[dataKey]) > 0 ? [{ index, series: 0 }] : []
+  );
+  const markProps = useChartDatumSelection(points);
+  const shape = (raw) => {
+    const props = raw;
+    const datum = data[props.index];
+    if (!datum || !points.some((p) => p.index === props.index)) return /* @__PURE__ */ jsx("g", {});
+    return /* @__PURE__ */ jsx(
+      Sector,
+      {
+        ...props,
+        ...markProps(
+          props.index,
+          0,
+          t("chart.datumLabel", {
+            label: String(datum[nameKey] ?? ""),
+            series: dataKey,
+            value: fmt.format(Number(datum[dataKey]))
+          }),
+          () => onDatumSelect?.(datum, { seriesKey: dataKey, index: props.index })
+        )
+      }
+    );
+  };
+  const shapeRef = React.useRef(shape);
+  shapeRef.current = shape;
+  const stableShape = React.useCallback((raw) => shapeRef.current(raw), []);
   const hasData = data.length > 0;
   const summary = buildPieSummary(
     data,
@@ -45,6 +77,7 @@ function PieChart({
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
+      interactive: !!onDatumSelect,
       label,
       showCaption,
       description,
@@ -54,10 +87,12 @@ function PieChart({
       height: resolvedHeight,
       className,
       id,
-      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(RPieChart, { children: [
+      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(RPieChart, { accessibilityLayer: onDatumSelect ? false : void 0, children: [
         /* @__PURE__ */ jsx(
           Pie,
           {
+            shape: onDatumSelect ? stableShape : void 0,
+            isAnimationActive: onDatumSelect ? false : void 0,
             data,
             dataKey,
             nameKey,

package/dist/components/charts/recharts-peer.d.ts

@@ -32,7 +32,7 @@ export declare const RECHARTS_PEER_MESSAGE: string;
  * recharts-backed chart before it renders anything.
  */
 export declare function assertRechartsPeer(): void;
-export declare const Area: <DataPointType = any, ValueAxisType = any>(props: peer.AreaProps<DataPointType, ValueAxisType>) => import("react").ReactElement, AreaChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
+export declare const Dot: import("react").FC<peer.DotProps>, Rectangle: import("react").FC<peer.RectangleProps>, Sector: import("react").FC<peer.SectorProps>, Area: <DataPointType = any, ValueAxisType = any>(props: peer.AreaProps<DataPointType, ValueAxisType>) => import("react").ReactElement, AreaChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
     ref?: React.Ref<SVGSVGElement>;
 }) => React.ReactElement, Bar: <DataPointType = any, ValueAxisType = any>(props: peer.BarProps<DataPointType, ValueAxisType>) => import("react").ReactElement, BarChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
     ref?: React.Ref<SVGSVGElement>;

package/dist/components/charts/recharts-peer.js

@@ -8,6 +8,9 @@ function assertRechartsPeer() {
   }
 }
 const {
+  Dot,
+  Rectangle,
+  Sector,
   Area,
   AreaChart,
   Bar,
@@ -31,13 +34,16 @@ export {
   BarChart,
   CartesianGrid,
   Cell,
+  Dot,
   Legend,
   Line,
   LineChart,
   Pie,
   PieChart,
   RECHARTS_PEER_MESSAGE,
+  Rectangle,
   ResponsiveContainer,
+  Sector,
   Tooltip,
   XAxis,
   YAxis,

package/dist/components/data-display/index.d.ts

@@ -20,7 +20,7 @@ export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, Car
 export type { StatCardProps, CardBarProps, CardTabItemProp, CardTabItemProps } from "./card.js";
 export { ServiceCatalogCta, ServiceLauncherCard, ServiceLauncherCardSkeleton, } from "./service-launcher-card.js";
 export type { ServiceCatalogCtaProps, ServiceLauncherCardProps, ServiceLauncherCardSkeletonProps, ServiceLauncherStatusTone, } from "./service-launcher-card.js";
-export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./table.js";
 export { Descriptions } from "./descriptions.js";
 export { DataTable, flexRender } from "./data-table.js";
 export type { ColumnDef, Density as TableDensity } from "./data-table.js";

package/dist/components/data-display/index.js

@@ -24,7 +24,15 @@ import {
   ServiceLauncherCard,
   ServiceLauncherCardSkeleton
 } from "./service-launcher-card.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./table.js";
 import { Descriptions } from "./descriptions.js";
 import { DataTable, flexRender } from "./data-table.js";
 import { EmptyState } from "./empty-state.js";
@@ -100,6 +108,7 @@ export {
   Swatch,
   Table,
   TableBody,
+  TableCaption,
   TableCell,
   TableHead,
   TableHeader,

package/dist/components/data-display/table.d.ts

@@ -157,6 +157,15 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
 } & React.RefAttributes<HTMLTableElement>>;
 export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * The table's `<caption>` — its accessible name AND the visible sentence that says what the rows
+ * are and under which conditions they were collected ("Prices for the Holo variant · shipping not
+ * included"). Place it as the FIRST child of `<Table>` (HTML requires it). Without this part a
+ * consumer had to hand-roll a raw `<caption>` or put the sentence outside the table, where it no
+ * longer names it. It sits above the rows (HTML's own side); colour, size and inset are knobs:
+ * `--table-caption-color`, `--table-caption-font-size`, `--table-caption-space-y`.
+ */
+export declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 /**
  * The row's STATE — same wash/rail/`--surface-*` grounding `DataTable`'s own `rowTone` already
  * writes onto `data-tone` (gh#866). Typed here so a hand-composed row can discover it instead of

package/dist/components/data-display/table.js

@@ -196,6 +196,8 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => (
   /* @__PURE__ */ jsx("tbody", { ref, "data-slot": "table-body", className: cn(className), ...props })
 ));
 TableBody.displayName = "TableBody";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, "data-slot": "table-caption", className: cn(className), ...props }));
+TableCaption.displayName = "TableCaption";
 const TableRow = React.forwardRef(({ className, tone, interactive, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
@@ -293,6 +295,7 @@ TableCell.displayName = "TableCell";
 export {
   Table,
   TableBody,
+  TableCaption,
   TableCell,
   TableHead,
   TableHeader,

package/dist/components/general/typography.d.ts

@@ -93,4 +93,5 @@ export declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAtt
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
     weight?: import("../../props/index.js").FontWeightProp;
+    family?: import("../../props/index.js").HeadingFamilyProp;
 } & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/general/typography.js

@@ -530,6 +530,7 @@ const Heading = React.forwardRef(
     align,
     truncate,
     weight = "medium",
+    family,
     className,
     ...props
   }, ref) => React.createElement(as ?? `h${level}`, {
@@ -543,6 +544,8 @@ const Heading = React.forwardRef(
     "data-align": align,
     "data-weight": weight,
     "data-truncate": truncate ? "" : void 0,
+    // Only the opt-in face is stamped; a default heading keeps its markup byte-for-byte.
+    "data-family": family === "editorial" ? "editorial" : void 0,
     className: cn("ui-heading", className),
     ...props
   })

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": "33.15.0",
+  "version": "33.17.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,