@icen.ai/ui 0.11.0 → 0.11.1

package/dist/index.d.mts

@@ -23,7 +23,7 @@ export { OpenPopoverOptions, PanelSizing, PopoverAlign, PopoverLayout, PopoverLa
 export { initAccordion } from './behaviors/accordion.mjs';
 export { initTree } from './behaviors/tree.mjs';
 export { initCarousel } from './behaviors/carousel.mjs';
-export { ChartCalendarOptions, ChartChromeOptions, ChartDatum, ChartDatumDetail, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartI18nLabels, ChartLineOptions, ChartMark, ChartMarkData, ChartMarkTone, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, DatumChartHandle, GraphEdgeSpec, GraphLayoutOptions, GraphNodeSpec, GraphSpec, HeatmapDatum, MapPointSpec, MapSpec, RadarSeries, bindChartEvents, chartFormatValue, inferChartType, layoutGraph, lttb, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderGraph, renderHBar, renderHeatmap, renderLine, renderMap, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.mjs';
+export { ChartA11ySpec, ChartCalendarOptions, ChartChromeOptions, ChartDatum, ChartDatumDetail, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartI18nLabels, ChartLineOptions, ChartMark, ChartMarkData, ChartMarkTone, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, DatumChartHandle, GraphEdgeSpec, GraphLayoutOptions, GraphNodeSpec, GraphSpec, HeatmapDatum, MapPointSpec, MapSpec, RadarSeries, bindChartEvents, chartFormatValue, inferChartType, layoutGraph, lttb, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderGraph, renderHBar, renderHeatmap, renderLine, renderMap, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.mjs';
 export { initNav } from './behaviors/nav.mjs';
 export { initSidebar } from './behaviors/sidebar.mjs';
 export { NotificationAction, NotificationCenterHandle, NotificationConfig, NotificationConfirmOptions, NotificationHandle, NotificationKind, NotificationOptions, NotificationPushInput, NotificationRecord, NotificationUpdatePatch, createNotificationCenter, initNotification, notify } from './behaviors/notification.mjs';

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@icen.ai/ui",
-  version: "0.11.0",
+  version: "0.11.1",
   description: "Icen Design System \u2014 \u8BBE\u8BA1 tokens\uFF086 \u4E3B\u9898 \xD7 4 \u539F\u8BED \xD7 \u660E\u6697\uFF09+ \u65E0\u6846\u67B6\u7EC4\u4EF6 CSS/\u884C\u4E3A JS + AI \u539F\u751F\u7EC4\u4EF6\u65CF\uFF087 \u6001\u72B6\u6001\u673A/\u591A\u6A21\u6001/\u5B9A\u4EF7\u5BA1\u8BA1\uFF09+ \u56FE\u8868\u901A\u7528\u5C42\uFF08ChartSpec \u7EAF JSON\uFF09+ AI \u5DE5\u5177\u4F53\u7CFB",
   repository: {
     type: "git",
@@ -63,6 +63,7 @@ var package_default = {
     dtcg: "bun scripts/dtcg.mjs",
     "design-tokens": "bun scripts/design-tokens.mjs",
     guard: "bun scripts/guard/index.ts",
+    meta: "bun scripts/meta.mjs",
     contracts: "bun scripts/contracts.ts --check",
     "contracts:update": "bun scripts/contracts.ts --write",
     "contracts:diff": "bun scripts/contracts.ts --diff",
@@ -1148,6 +1149,19 @@ var ICEN_LOCALE_ZH_CN = {
   "charts.noData": "\u6682\u65E0\u6570\u636E",
   "charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
   "charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
+  "charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
+  "charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
+  "charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
+  "charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
+  "charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
+  "charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
+  "charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
+  "charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
+  "charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
+  "charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
+  "charts.a11y.trendDown": "\u4E0B\u964D",
+  "charts.a11y.trendFlat": "\u6301\u5E73",
+  "charts.a11y.trendUp": "\u4E0A\u5347",
   "charts.type.area": "\u9762\u79EF\u56FE",
   "charts.type.donut": "\u73AF\u5F62\u56FE",
   "charts.type.gauge": "\u4EEA\u8868\u76D8",
@@ -1984,6 +1998,19 @@ var ICEN_LOCALE_EN_US = {
   "charts.noData": "No data",
   "charts.resetZoom": "Reset zoom",
   "charts.sampled": "Sampled \u2192 {p0} points",
+  "charts.a11y.keyboardHint": "Arrow keys browse points, Home/End jump to ends, Esc resets zoom",
+  "charts.a11y.max": "max {p0} ({p1})",
+  "charts.a11y.min": "min {p0} ({p1})",
+  "charts.a11y.point": "{p0}: {p1}, point {p2} of {p3}",
+  "charts.a11y.pointSeries": "{p0} \xB7 {p1}: {p2}, point {p3} of {p4}",
+  "charts.a11y.range": "categories {p0} to {p1}",
+  "charts.a11y.scatterRange": "x {p0}\u2013{p1}, y {p2}\u2013{p3}",
+  "charts.a11y.seriesCount": "{p0} series",
+  "charts.a11y.tableCaption": "{p0} data table",
+  "charts.a11y.trend": "first-series trend: {p0}",
+  "charts.a11y.trendDown": "down",
+  "charts.a11y.trendFlat": "flat",
+  "charts.a11y.trendUp": "up",
   "charts.type.area": "Area chart",
   "charts.type.donut": "Donut chart",
   "charts.type.gauge": "Gauge",
@@ -13070,6 +13097,14 @@ function normalizeChartSpec(raw) {
   }
   if (s.zoom === "x" || s.zoom === "brush") spec.zoom = s.zoom;
   if (typeof s.loading === "boolean") spec.loading = s.loading;
+  if (s.a11y && typeof s.a11y === "object") {
+    const a = s.a11y;
+    const a11y = {};
+    if (typeof a.summary === "boolean") a11y.summary = a.summary;
+    if (typeof a.table === "boolean") a11y.table = a.table;
+    if (typeof a.keyboard === "boolean") a11y.keyboard = a.keyboard;
+    if (Object.keys(a11y).length > 0) spec.a11y = a11y;
+  }
   if (Array.isArray(s.marks)) {
     const marks = [];
     for (const raw2 of s.marks) {
@@ -13425,6 +13460,81 @@ function paintVBarChartMarks(root, view, spec, marks, formatValue2, warned) {
 function chartAriaLabel(title, typeName) {
   return title ? `${typeName}\uFF1A${title}` : typeName;
 }
+function summarizeChart(view, type, fmt2) {
+  const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const parts = [];
+  if (series.length > 1) parts.push(t("charts.a11y.seriesCount", { p0: series.length }));
+  if (type === "scatter") {
+    const pts = view.points ?? [];
+    if (pts.length > 0) {
+      const xs = pts.map((p) => p.x);
+      const ys = pts.map((p) => p.y);
+      parts.push(t("charts.a11y.scatterRange", { p0: fmt2(Math.min(...xs)), p1: fmt2(Math.max(...xs)), p2: fmt2(Math.min(...ys)), p3: fmt2(Math.max(...ys)) }));
+    }
+    return parts.join("\uFF1B");
+  }
+  const labels = view.labels ?? [];
+  if (labels.length > 1) parts.push(t("charts.a11y.range", { p0: labels[0], p1: labels[labels.length - 1] }));
+  let min = Infinity;
+  let max = -Infinity;
+  let minAt = "";
+  let maxAt = "";
+  for (const s of series) {
+    s.values.forEach((v, i) => {
+      if (v < min) {
+        min = v;
+        minAt = labels[i] ?? String(i + 1);
+      }
+      if (v > max) {
+        max = v;
+        maxAt = labels[i] ?? String(i + 1);
+      }
+    });
+  }
+  if (Number.isFinite(min) && Number.isFinite(max)) {
+    parts.push(t("charts.a11y.min", { p0: fmt2(min), p1: minAt }));
+    parts.push(t("charts.a11y.max", { p0: fmt2(max), p1: maxAt }));
+  }
+  const first = series[0]?.values ?? [];
+  if (first.length > 1) {
+    const d = first[first.length - 1] - first[0];
+    const key = Math.abs(d) < 1e-9 ? "charts.a11y.trendFlat" : d > 0 ? "charts.a11y.trendUp" : "charts.a11y.trendDown";
+    parts.push(t("charts.a11y.trend", { p0: t(key) }));
+  }
+  return parts.join("\uFF1B");
+}
+function buildChartTable(view, spec, type, fmt2) {
+  const table = document.createElement("table");
+  table.className = "icen-chart-table";
+  const caption = document.createElement("caption");
+  caption.textContent = t("charts.a11y.tableCaption", { p0: spec.title ?? String(type) });
+  table.appendChild(caption);
+  const addRow = (target, cells, head) => {
+    const tr = document.createElement("tr");
+    for (const c of cells) {
+      const cell = document.createElement(head ? "th" : "td");
+      if (head) cell.scope = target.tagName === "THEAD" ? "col" : "row";
+      cell.textContent = c;
+      tr.appendChild(cell);
+    }
+    target.appendChild(tr);
+  };
+  const thead = table.createTHead();
+  const tbody = table.createTBody();
+  if (type === "scatter") {
+    addRow(thead, ["x", "y"], true);
+    for (const p of view.points ?? []) addRow(tbody, [fmt2(p.x), fmt2(p.y)], false);
+    return table;
+  }
+  const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const labels = view.labels ?? [];
+  addRow(thead, ["", ...series.map((s, i) => s.name || String(i + 1))], true);
+  const n = Math.max(labels.length, ...series.map((s) => s.values.length));
+  for (let i = 0; i < n; i++) {
+    addRow(tbody, [labels[i] ?? String(i + 1), ...series.map((s) => fmt2(s.values[i] ?? 0))], false);
+  }
+  return table;
+}
 function svgDimsOf(svg6) {
   const vb = (svg6.getAttribute("viewBox") ?? "").split(/\s+/).map(Number);
   const w = Number.isFinite(vb[2]) && (vb[2] ?? 0) > 0 ? vb[2] : CHART_LINE_W;
@@ -13765,6 +13875,7 @@ function renderChart(el2, raw) {
     if (!isZoomableType(t2) || fullLength() < 2) return;
     const plot = t2 === "vbar" ? root.querySelector(".icen-chart-vbar") : root.querySelector(".icen-chart-line svg");
     if (!plot) return;
+    plot.style.touchAction = current2.zoom === "x" ? "pan-y" : "none";
     const on = (type, fn) => {
       plot.addEventListener(type, fn);
     };
@@ -13820,6 +13931,149 @@ function renderChart(el2, raw) {
       render();
     });
   };
+  const KB_TYPES = /* @__PURE__ */ new Set(["line", "area", "vbar", "hbar", "scatter"]);
+  const kbCursor = { si: 0, i: 0, active: false };
+  let liveRegion = null;
+  let a11ySeq = 0;
+  const a11yOf = () => ({
+    summary: current2.a11y?.summary !== false,
+    table: current2.a11y?.table === true,
+    keyboard: current2.a11y?.keyboard !== false
+  });
+  const seriesViewOf = (view) => view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const kbPointCount = (view) => typeOf() === "scatter" ? view.points?.length ?? 0 : Math.max(0, ...seriesViewOf(view).map((s) => s.values.length), view.labels?.length ?? 0);
+  const kbCursorEl = () => {
+    const t2 = typeOf();
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return null;
+    const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
+    const i = clampNum(kbCursor.i, 0, n - 1);
+    if (t2 === "line" || t2 === "area") {
+      const svg6 = root.querySelector(".icen-chart-line svg");
+      if (!svg6) return null;
+      const dots = svg6.querySelectorAll("circle");
+      let base = 0;
+      for (let k = 0; k < si; k++) base += Math.min(series[k].values.length, n);
+      return dots.item(base + i) ?? null;
+    }
+    if (t2 === "scatter") return root.querySelector(".icen-chart-scatter svg")?.querySelectorAll("circle").item(i) ?? null;
+    if (t2 === "vbar") return root.querySelectorAll(".icen-chart-vbar-bar").item(series.length > 1 ? i * series.length + si : i) ?? null;
+    if (t2 === "hbar") return root.querySelectorAll(".icen-chart-hbar-bar").item(i) ?? null;
+    return null;
+  };
+  const announceKb = (text) => {
+    if (!liveRegion || !liveRegion.isConnected) {
+      liveRegion = document.createElement("div");
+      liveRegion.className = "icen-chart-live";
+      liveRegion.setAttribute("aria-live", "polite");
+      root.appendChild(liveRegion);
+    }
+    liveRegion.textContent = "";
+    liveRegion.textContent = text;
+  };
+  const applyKbCursor = () => {
+    for (const el3 of root.querySelectorAll(".icen-chart-kb-focus")) el3.classList.remove("icen-chart-kb-focus");
+    if (!kbCursor.active) return;
+    kbCursorEl()?.classList.add("icen-chart-kb-focus");
+  };
+  const announceCursor = () => {
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return;
+    const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
+    const i = clampNum(kbCursor.i, 0, Math.max(0, n - 1));
+    const fmt2 = chartFormatValue(current2.format);
+    if (typeOf() === "scatter") {
+      const p = view.points?.[i];
+      if (!p) return;
+      announceKb(t("charts.a11y.point", { p0: `x ${fmt2(p.x)}`, p1: `y ${fmt2(p.y)}`, p2: i + 1, p3: n }));
+      return;
+    }
+    const label = view.labels?.[i] ?? String(i + 1);
+    const value = series[si]?.values[i] ?? 0;
+    if (series.length > 1) announceKb(t("charts.a11y.pointSeries", { p0: series[si].name || String(si + 1), p1: label, p2: fmt2(value), p3: i + 1, p4: n }));
+    else announceKb(t("charts.a11y.point", { p0: label, p1: fmt2(value), p2: i + 1, p3: n }));
+  };
+  const onKbKeydown = (e) => {
+    const conf = a11yOf();
+    if (!conf.keyboard || !KB_TYPES.has(typeOf())) return;
+    const g = root.querySelector("[data-icen-chart-kb]");
+    if (!g || e.target !== g) return;
+    if (e.key === "Escape") {
+      if (zoomWindow) {
+        zoomWindow = null;
+        kbCursor.active = false;
+        render();
+      }
+      return;
+    }
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return;
+    const siMax = Math.max(0, series.length - 1);
+    let moved = true;
+    switch (e.key) {
+      case "ArrowRight":
+        kbCursor.i = clampNum(kbCursor.i + 1, 0, n - 1);
+        break;
+      case "ArrowLeft":
+        kbCursor.i = clampNum(kbCursor.i - 1, 0, n - 1);
+        break;
+      case "ArrowDown":
+        kbCursor.si = clampNum(kbCursor.si + 1, 0, siMax);
+        break;
+      case "ArrowUp":
+        kbCursor.si = clampNum(kbCursor.si - 1, 0, siMax);
+        break;
+      case "Home":
+        kbCursor.i = 0;
+        break;
+      case "End":
+        kbCursor.i = n - 1;
+        break;
+      default:
+        moved = false;
+    }
+    if (!moved) return;
+    e.preventDefault();
+    kbCursor.active = true;
+    applyKbCursor();
+    announceCursor();
+  };
+  root.addEventListener("keydown", onKbKeydown);
+  const applyChartA11yPlus = (view, spec, type, formatValue2) => {
+    const conf = a11yOf();
+    const graphic = root.querySelector('[role="img"]');
+    if (!graphic) return;
+    const body = root.querySelector(".icen-chart-body") ?? graphic.parentElement ?? root;
+    const summaryParts = [];
+    if (conf.summary) summaryParts.push(summarizeChart(view, type, formatValue2));
+    if (conf.keyboard && KB_TYPES.has(type)) summaryParts.push(t("charts.a11y.keyboardHint"));
+    const summaryText = summaryParts.filter(Boolean).join("\uFF1B");
+    if (summaryText) {
+      const p = document.createElement("p");
+      p.className = "icen-chart-summary";
+      p.id = `icen-chart-a11y-${++a11ySeq}`;
+      p.textContent = summaryText;
+      body.appendChild(p);
+      graphic.setAttribute("aria-describedby", p.id);
+    } else {
+      graphic.removeAttribute("aria-describedby");
+    }
+    if (conf.keyboard && KB_TYPES.has(type)) {
+      graphic.setAttribute("tabindex", "0");
+      graphic.setAttribute("data-icen-chart-kb", "");
+    } else {
+      graphic.removeAttribute("tabindex");
+      graphic.removeAttribute("data-icen-chart-kb");
+    }
+    if (conf.table) body.appendChild(buildChartTable(view, spec, type, formatValue2));
+    applyKbCursor();
+  };
   const render = () => {
     if (!current2.type) current2 = { ...current2, type: inferChartType(current2) };
     const spec = current2;
@@ -13900,6 +14154,7 @@ function renderChart(el2, raw) {
       }
     }
     if (loading) return;
+    applyChartA11yPlus(view, spec, type, formatValue2);
     paintChartMarks(root, view, spec, formatValue2, warnedMarks);
     bindZoomGesture();
   };
@@ -13981,6 +14236,7 @@ function renderChart(el2, raw) {
       releaseFluidWidth(root);
       hiddenLegendKeys.delete(root);
       zoomDragCleanup?.();
+      root.removeEventListener("keydown", onKbKeydown);
       root.textContent = "";
       root.classList.remove("is-loading");
       unbindEvents();

package/dist/react.mjs

@@ -349,6 +349,19 @@ var ICEN_LOCALE_ZH_CN = {
   "charts.noData": "\u6682\u65E0\u6570\u636E",
   "charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
   "charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
+  "charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
+  "charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
+  "charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
+  "charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
+  "charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
+  "charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
+  "charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
+  "charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
+  "charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
+  "charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
+  "charts.a11y.trendDown": "\u4E0B\u964D",
+  "charts.a11y.trendFlat": "\u6301\u5E73",
+  "charts.a11y.trendUp": "\u4E0A\u5347",
   "charts.type.area": "\u9762\u79EF\u56FE",
   "charts.type.donut": "\u73AF\u5F62\u56FE",
   "charts.type.gauge": "\u4EEA\u8868\u76D8",
@@ -2241,6 +2254,14 @@ function normalizeChartSpec(raw) {
   }
   if (s.zoom === "x" || s.zoom === "brush") spec.zoom = s.zoom;
   if (typeof s.loading === "boolean") spec.loading = s.loading;
+  if (s.a11y && typeof s.a11y === "object") {
+    const a = s.a11y;
+    const a11y = {};
+    if (typeof a.summary === "boolean") a11y.summary = a.summary;
+    if (typeof a.table === "boolean") a11y.table = a.table;
+    if (typeof a.keyboard === "boolean") a11y.keyboard = a.keyboard;
+    if (Object.keys(a11y).length > 0) spec.a11y = a11y;
+  }
   if (Array.isArray(s.marks)) {
     const marks = [];
     for (const raw2 of s.marks) {
@@ -2596,6 +2617,81 @@ function paintVBarChartMarks(root, view, spec, marks, formatValue, warned) {
 function chartAriaLabel(title, typeName) {
   return title ? `${typeName}\uFF1A${title}` : typeName;
 }
+function summarizeChart(view, type, fmt2) {
+  const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const parts = [];
+  if (series.length > 1) parts.push(t("charts.a11y.seriesCount", { p0: series.length }));
+  if (type === "scatter") {
+    const pts = view.points ?? [];
+    if (pts.length > 0) {
+      const xs = pts.map((p) => p.x);
+      const ys = pts.map((p) => p.y);
+      parts.push(t("charts.a11y.scatterRange", { p0: fmt2(Math.min(...xs)), p1: fmt2(Math.max(...xs)), p2: fmt2(Math.min(...ys)), p3: fmt2(Math.max(...ys)) }));
+    }
+    return parts.join("\uFF1B");
+  }
+  const labels = view.labels ?? [];
+  if (labels.length > 1) parts.push(t("charts.a11y.range", { p0: labels[0], p1: labels[labels.length - 1] }));
+  let min = Infinity;
+  let max = -Infinity;
+  let minAt = "";
+  let maxAt = "";
+  for (const s of series) {
+    s.values.forEach((v, i) => {
+      if (v < min) {
+        min = v;
+        minAt = labels[i] ?? String(i + 1);
+      }
+      if (v > max) {
+        max = v;
+        maxAt = labels[i] ?? String(i + 1);
+      }
+    });
+  }
+  if (Number.isFinite(min) && Number.isFinite(max)) {
+    parts.push(t("charts.a11y.min", { p0: fmt2(min), p1: minAt }));
+    parts.push(t("charts.a11y.max", { p0: fmt2(max), p1: maxAt }));
+  }
+  const first = series[0]?.values ?? [];
+  if (first.length > 1) {
+    const d = first[first.length - 1] - first[0];
+    const key = Math.abs(d) < 1e-9 ? "charts.a11y.trendFlat" : d > 0 ? "charts.a11y.trendUp" : "charts.a11y.trendDown";
+    parts.push(t("charts.a11y.trend", { p0: t(key) }));
+  }
+  return parts.join("\uFF1B");
+}
+function buildChartTable(view, spec, type, fmt2) {
+  const table = document.createElement("table");
+  table.className = "icen-chart-table";
+  const caption = document.createElement("caption");
+  caption.textContent = t("charts.a11y.tableCaption", { p0: spec.title ?? String(type) });
+  table.appendChild(caption);
+  const addRow = (target, cells, head) => {
+    const tr = document.createElement("tr");
+    for (const c of cells) {
+      const cell = document.createElement(head ? "th" : "td");
+      if (head) cell.scope = target.tagName === "THEAD" ? "col" : "row";
+      cell.textContent = c;
+      tr.appendChild(cell);
+    }
+    target.appendChild(tr);
+  };
+  const thead = table.createTHead();
+  const tbody = table.createTBody();
+  if (type === "scatter") {
+    addRow(thead, ["x", "y"], true);
+    for (const p of view.points ?? []) addRow(tbody, [fmt2(p.x), fmt2(p.y)], false);
+    return table;
+  }
+  const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const labels = view.labels ?? [];
+  addRow(thead, ["", ...series.map((s, i) => s.name || String(i + 1))], true);
+  const n = Math.max(labels.length, ...series.map((s) => s.values.length));
+  for (let i = 0; i < n; i++) {
+    addRow(tbody, [labels[i] ?? String(i + 1), ...series.map((s) => fmt2(s.values[i] ?? 0))], false);
+  }
+  return table;
+}
 function svgDimsOf(svg) {
   const vb = (svg.getAttribute("viewBox") ?? "").split(/\s+/).map(Number);
   const w = Number.isFinite(vb[2]) && (vb[2] ?? 0) > 0 ? vb[2] : CHART_LINE_W;
@@ -2936,6 +3032,7 @@ function renderChart(el, raw) {
     if (!isZoomableType(t2) || fullLength() < 2) return;
     const plot = t2 === "vbar" ? root.querySelector(".icen-chart-vbar") : root.querySelector(".icen-chart-line svg");
     if (!plot) return;
+    plot.style.touchAction = current2.zoom === "x" ? "pan-y" : "none";
     const on = (type, fn) => {
       plot.addEventListener(type, fn);
     };
@@ -2991,6 +3088,149 @@ function renderChart(el, raw) {
       render();
     });
   };
+  const KB_TYPES = /* @__PURE__ */ new Set(["line", "area", "vbar", "hbar", "scatter"]);
+  const kbCursor = { si: 0, i: 0, active: false };
+  let liveRegion = null;
+  let a11ySeq = 0;
+  const a11yOf = () => ({
+    summary: current2.a11y?.summary !== false,
+    table: current2.a11y?.table === true,
+    keyboard: current2.a11y?.keyboard !== false
+  });
+  const seriesViewOf = (view) => view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const kbPointCount = (view) => typeOf() === "scatter" ? view.points?.length ?? 0 : Math.max(0, ...seriesViewOf(view).map((s) => s.values.length), view.labels?.length ?? 0);
+  const kbCursorEl = () => {
+    const t2 = typeOf();
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return null;
+    const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
+    const i = clampNum(kbCursor.i, 0, n - 1);
+    if (t2 === "line" || t2 === "area") {
+      const svg = root.querySelector(".icen-chart-line svg");
+      if (!svg) return null;
+      const dots = svg.querySelectorAll("circle");
+      let base = 0;
+      for (let k = 0; k < si; k++) base += Math.min(series[k].values.length, n);
+      return dots.item(base + i) ?? null;
+    }
+    if (t2 === "scatter") return root.querySelector(".icen-chart-scatter svg")?.querySelectorAll("circle").item(i) ?? null;
+    if (t2 === "vbar") return root.querySelectorAll(".icen-chart-vbar-bar").item(series.length > 1 ? i * series.length + si : i) ?? null;
+    if (t2 === "hbar") return root.querySelectorAll(".icen-chart-hbar-bar").item(i) ?? null;
+    return null;
+  };
+  const announceKb = (text) => {
+    if (!liveRegion || !liveRegion.isConnected) {
+      liveRegion = document.createElement("div");
+      liveRegion.className = "icen-chart-live";
+      liveRegion.setAttribute("aria-live", "polite");
+      root.appendChild(liveRegion);
+    }
+    liveRegion.textContent = "";
+    liveRegion.textContent = text;
+  };
+  const applyKbCursor = () => {
+    for (const el2 of root.querySelectorAll(".icen-chart-kb-focus")) el2.classList.remove("icen-chart-kb-focus");
+    if (!kbCursor.active) return;
+    kbCursorEl()?.classList.add("icen-chart-kb-focus");
+  };
+  const announceCursor = () => {
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return;
+    const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
+    const i = clampNum(kbCursor.i, 0, Math.max(0, n - 1));
+    const fmt2 = chartFormatValue(current2.format);
+    if (typeOf() === "scatter") {
+      const p = view.points?.[i];
+      if (!p) return;
+      announceKb(t("charts.a11y.point", { p0: `x ${fmt2(p.x)}`, p1: `y ${fmt2(p.y)}`, p2: i + 1, p3: n }));
+      return;
+    }
+    const label = view.labels?.[i] ?? String(i + 1);
+    const value = series[si]?.values[i] ?? 0;
+    if (series.length > 1) announceKb(t("charts.a11y.pointSeries", { p0: series[si].name || String(si + 1), p1: label, p2: fmt2(value), p3: i + 1, p4: n }));
+    else announceKb(t("charts.a11y.point", { p0: label, p1: fmt2(value), p2: i + 1, p3: n }));
+  };
+  const onKbKeydown = (e) => {
+    const conf = a11yOf();
+    if (!conf.keyboard || !KB_TYPES.has(typeOf())) return;
+    const g = root.querySelector("[data-icen-chart-kb]");
+    if (!g || e.target !== g) return;
+    if (e.key === "Escape") {
+      if (zoomWindow) {
+        zoomWindow = null;
+        kbCursor.active = false;
+        render();
+      }
+      return;
+    }
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return;
+    const siMax = Math.max(0, series.length - 1);
+    let moved = true;
+    switch (e.key) {
+      case "ArrowRight":
+        kbCursor.i = clampNum(kbCursor.i + 1, 0, n - 1);
+        break;
+      case "ArrowLeft":
+        kbCursor.i = clampNum(kbCursor.i - 1, 0, n - 1);
+        break;
+      case "ArrowDown":
+        kbCursor.si = clampNum(kbCursor.si + 1, 0, siMax);
+        break;
+      case "ArrowUp":
+        kbCursor.si = clampNum(kbCursor.si - 1, 0, siMax);
+        break;
+      case "Home":
+        kbCursor.i = 0;
+        break;
+      case "End":
+        kbCursor.i = n - 1;
+        break;
+      default:
+        moved = false;
+    }
+    if (!moved) return;
+    e.preventDefault();
+    kbCursor.active = true;
+    applyKbCursor();
+    announceCursor();
+  };
+  root.addEventListener("keydown", onKbKeydown);
+  const applyChartA11yPlus = (view, spec, type, formatValue) => {
+    const conf = a11yOf();
+    const graphic = root.querySelector('[role="img"]');
+    if (!graphic) return;
+    const body = root.querySelector(".icen-chart-body") ?? graphic.parentElement ?? root;
+    const summaryParts = [];
+    if (conf.summary) summaryParts.push(summarizeChart(view, type, formatValue));
+    if (conf.keyboard && KB_TYPES.has(type)) summaryParts.push(t("charts.a11y.keyboardHint"));
+    const summaryText = summaryParts.filter(Boolean).join("\uFF1B");
+    if (summaryText) {
+      const p = document.createElement("p");
+      p.className = "icen-chart-summary";
+      p.id = `icen-chart-a11y-${++a11ySeq}`;
+      p.textContent = summaryText;
+      body.appendChild(p);
+      graphic.setAttribute("aria-describedby", p.id);
+    } else {
+      graphic.removeAttribute("aria-describedby");
+    }
+    if (conf.keyboard && KB_TYPES.has(type)) {
+      graphic.setAttribute("tabindex", "0");
+      graphic.setAttribute("data-icen-chart-kb", "");
+    } else {
+      graphic.removeAttribute("tabindex");
+      graphic.removeAttribute("data-icen-chart-kb");
+    }
+    if (conf.table) body.appendChild(buildChartTable(view, spec, type, formatValue));
+    applyKbCursor();
+  };
   const render = () => {
     if (!current2.type) current2 = { ...current2, type: inferChartType(current2) };
     const spec = current2;
@@ -3071,6 +3311,7 @@ function renderChart(el, raw) {
       }
     }
     if (loading) return;
+    applyChartA11yPlus(view, spec, type, formatValue);
     paintChartMarks(root, view, spec, formatValue, warnedMarks);
     bindZoomGesture();
   };
@@ -3152,6 +3393,7 @@ function renderChart(el, raw) {
       releaseFluidWidth(root);
       hiddenLegendKeys.delete(root);
       zoomDragCleanup?.();
+      root.removeEventListener("keydown", onKbKeydown);
       root.textContent = "";
       root.classList.remove("is-loading");
       unbindEvents();

package/dist/registry.json

@@ -1,11 +1,12 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "tokens": [
     "colors.css",
     "scrollbars.css",
     "style-profiles.css",
     "typography.css",
+    "motion.css",
     "design.css",
     "chinese.css",
     "soviet.css",
@@ -239,6 +240,7 @@
     "kb-who-can",
     "mentions",
     "modal",
+    "motion",
     "nav",
     "notification",
     "panel",