@vanduo-oss/vd3-cbun 1.3.2 → 1.4.1

package/CHANGELOG.md

@@ -4,6 +4,89 @@ All notable changes to `@vanduo-oss/vd3-cbun` are documented here. This file
 tracks the PACKAGE only — never docs-site content. Per-component VERSION
 constants are listed alongside each bundle release.
 
+## 1.4.1 — 2026-09-12
+
+Patch release: hex-grid adaptive rendering, draw vector polish, charts
+accessibility, and a code-editor wrap-mode caret fix. Additive and
+backward-compatible; only `VD_HEX_VERSION` takes a minor (`1.0.1 → 1.1.0`).
+`VD_CHARTS_VERSION`, `VD_CODE_EDITOR_VERSION`, and `VD_DRAW_VERSION` stay
+`1.1.0` (no serialization change).
+
+### Changed
+
+- **hex-grid** — adaptive, DPR-aware, culled rendering. New `pixelRatio`
+  (`number | 'auto'`, default `'auto'` = `min(devicePixelRatio, 2)`) sizes the
+  canvas backing store to `CSS size × ratio` with a seeded
+  `setTransform(ratio, …)` so world/CSS coordinates and hit-testing are
+  unchanged (`pixelRatio: 1` restores the old buffer). New `cull` (default
+  `true`) draws only cells intersecting the viewport via a spatial bucket index
+  rebuilt on grid regeneration; with culling on, `setCustomRender` now fires
+  only for visible cells (`cull: false` restores whole-grid iteration). Pan and
+  zoom rAF-coalesce to one frame; above 8000 visible cells a gesture blits the
+  last sharp frame and a sharp culled re-render follows when idle (~120 ms) or
+  on pointer up. Adds `getVisibleHexes()`, `getRenderStats()`,
+  `setPixelRatio()`, `setCull()`; `destroy()` now also cancels pending
+  rAF/timeouts and releases the frame canvas. Vue wrapper gains `pixelRatio` /
+  `cull` props. Takes `VD_HEX_VERSION` `1.0.1 → 1.1.0`.
+
+- **draw** — vector polish without a schema bump. Freehand input is EMA-smoothed
+  (`smoothPoint`) and progressively simplified (Ramer–Douglas–Peucker) so
+  strokes stay smooth without point bloat. SVG nodes are cached and dirtied
+  per-shape; renders rAF-batch. Two-finger pinch-to-zoom (midpoint-anchored)
+  and two-finger pan land for touch. Text wraps to the shape width via SVG
+  `<tspan>`s and is inline-editable on double-click in select mode; arrow
+  marker heads follow the stroke color (sanitized `<defs>` ids, including
+  `toSVG()`). Tool-aware canvas cursors, panning grab state, and compass
+  resize handles. O(1) `_shapesById` lookup. Vue option props (`readonly`,
+  `snap`, `history`, `historyLimit`) update through surgical setters
+  (`setReadonly`, `setSnap`, `setHistoryEnabled`, `setHistoryLimit`) instead
+  of destroying the editor. `fitView(padding?)` takes an optional padding
+  (default `40`). `VD_DRAW_VERSION` stays `1.1.0`.
+
+- **charts** — WAI-ARIA Graphics Module 1.0 on the SVG shell
+  (`role="graphics-document document"`, `graphics-object` / `graphics-symbol`
+  on marks, contextual `aria-roledescription`). Arrow-key navigation moves
+  focus between interactive marks with a roving tooltip. An accessible HTML
+  data table ships by default as `sr-only` (WCAG 1.1.1 / G73–G74);
+  `dataTable: false` suppresses it and `dataTable: 'visible'` shows it.
+  `ariaRoleDescription` overrides the SVG role description (default
+  `` `${kind} chart` ``). Dark-mode and `:focus-visible` chrome. Vue wrapper
+  forwards `dataTable` and `ariaRoleDescription`. `VD_CHARTS_VERSION` stays
+  `1.1.0`.
+
+- **code-editor** — wrap mode reserves a shared `scrollbar-gutter: stable` on
+  both the textarea and the highlight `<pre>` so a visible scrollbar no longer
+  shrinks only the editable layer and misaligns the caret on wrapped lines.
+  OpenSpec synced; standalone core / editing / tokenizer / Vue / Playwright
+  suites added. `VD_CODE_EDITOR_VERSION` stays `1.1.0`.
+
+- OpenSpec: archived `sync-shipped-cbun-specs`, `hex-grid-render-perf`, and
+  `draw-vector-polish-perf` — Catmull-Rom `line.smooth`, `VdDraw` template-ref
+  CRUD, flowchart `--vd-bg-*` chrome, corrected CI `test:types`-after-build
+  order, and real Purpose lines on all seven capabilities. No additional
+  component API or serialization change beyond the bullets above.
+
+Component versions in this release: **charts 1.1.0, code-editor 1.1.0, draw
+1.1.0, flowchart 1.2.0, hex-grid 1.1.0, music-player 1.0.1**.
+
+## 1.4.0 — 2026-08-16
+
+**code-editor** — snippet-safe first-party highlighter so docs snippets can drop
+highlight.js. `highlight(source, lang, { trailingNewline? })` defaults
+`trailingNewline` to `false` (no extra `\n` inside `<pre>`); pass `true` only
+for the textarea overlay line-count. New tokenizer-only subpath
+`@vanduo-oss/vd3-cbun/code-editor/highlight` exports `highlight`, `tokenize`,
+`renderTokensToHtml`, and `LANGUAGES` without evaluating the editor core or Vue
+wrapper. `vue` is a real SFC tokenizer (HTML `<script>` / `<style>` also embed
+JS/TS/CSS). JS/TS emit `${}` interpolations and `regex` tokens; CSS highlights
+selectors, pseudos, and `--vd-*` custom properties and no longer marks `a` in
+`.a:hover` as a property. `jsx` / `tsx` / `jsonc` stay JS / TS / JSON aliases
+(not dedicated grammars). The editor DOM overlay path is unchanged. Takes
+`VD_CODE_EDITOR_VERSION` `1.0.1 → 1.1.0`.
+
+Component versions in this release: **charts 1.1.0, code-editor 1.1.0, draw
+1.1.0, flowchart 1.2.0, hex-grid 1.0.1, music-player 1.0.1**.
+
 ## 1.3.2 — 2026-08-13
 
 **draw** — line shapes accept an optional `smooth` boolean; when true and there

package/README.md

@@ -8,13 +8,12 @@ tree-shakeable subpath exports. It replaces the four per-repo publishes
 (`@vanduo-oss/charts`, `@vanduo-oss/flowchart`, `@vanduo-oss/hex-grid`,
 `@vanduo-oss/music-player`) of the old line.
 
-**Status: 1.3.2.** Six Vue3-only component families — charts, code-editor, draw,
+**Status: 1.4.1.** Six Vue3-only component families — charts, code-editor, draw,
 flowchart, hex-grid, music-player — each on its own tree-shakeable subpath, with
-the esbuild metafile isolation guard in place. (1.3.0 adds chart mark-click
-emits + bounded draw/flowchart deserialization; 1.3.1 dark-aware flowchart
-chrome, icon toolbar, and short-parent sizing; 1.3.2 Catmull-Rom smooth lines
-and Vue shape CRUD on `VdDraw`; see the
-[changelog](./CHANGELOG.md).)
+the esbuild metafile isolation guard in place. (1.4.1 adds hex-grid DPR/culling,
+draw vector polish and multi-touch, charts WAI-ARIA + keyboard + data table, and
+a wrap-mode scrollbar guard; 1.4.0 the snippet-safe `./code-editor/highlight`
+tokenizer; see the [changelog](./CHANGELOG.md).)
 
 ## Install
 
@@ -36,6 +35,7 @@ import { VdChart } from '@vanduo-oss/vd3-cbun/charts';
 import '@vanduo-oss/vd3-cbun/charts/css';
 
 import { VdCodeEditor } from '@vanduo-oss/vd3-cbun/code-editor';
+import { highlight, tokenize, LANGUAGES } from '@vanduo-oss/vd3-cbun/code-editor/highlight';
 import '@vanduo-oss/vd3-cbun/code-editor/css';
 
 import { VdDraw } from '@vanduo-oss/vd3-cbun/draw';
@@ -51,6 +51,20 @@ import { VdMusicPlayer } from '@vanduo-oss/vd3-cbun/music-player';
 import '@vanduo-oss/vd3-cbun/music-player/css';
 ```
 
+`VdHexGrid` / `VdHexGridCore` accept `pixelRatio` (`number | 'auto'`, default
+`'auto'` = `min(devicePixelRatio, 2)`) and `cull` (default `true`, viewport
+culling). Large grids coalesce pan/zoom into one frame and blit the last sharp
+frame while gesturing, then re-render sharply when idle. `getVisibleHexes()` and
+`getRenderStats()` expose the culled/render state; `setPixelRatio()` and
+`setCull()` update them in place. `pixelRatio: 1` and `cull: false` restore the
+pre-1.1 buffer size and whole-grid iteration.
+
+`highlight(source, lang, { trailingNewline? })` defaults `trailingNewline` to
+`false` (snippet-safe inside `<pre>`). `./code-editor/highlight` does not load
+the editor or Vue wrapper. First-party languages include `vue` (SFC);
+`jsx` / `tsx` / `jsonc` are aliases that fall back to the JS / TS / JSON
+tokenizers — they are not dedicated grammars.
+
 The root import exposes only the per-component VERSION-constants map:
 
 ```js
@@ -84,8 +98,8 @@ Notes:
 The bundle's own semver (`package.json` version) is decoupled from the
 components inside it. Each component carries a VERSION constant tracked in
 `component-versions.json` at the repo root and asserted in tests against the
-exported `VD3_CBUN_VERSIONS` map. charts, code-editor, hex-grid, and music-player
-sit at `1.0.1`, draw at `1.1.0`; **flowchart continues its
+exported `VD3_CBUN_VERSIONS` map. code-editor sits at `1.1.0`; charts at
+`1.1.0`; hex-grid at `1.1.0`; music-player at `1.0.1`; draw at `1.1.0`; **flowchart continues its
 old-line lineage at `1.2.0`** because `VD_FLOWCHART_VERSION` is load-bearing —
 it is serialized into user documents via `toJSON().version`. A new component
 enters the manifest at `1.0.0` (`draw` did, in bundle 1.2.0).
@@ -132,7 +146,8 @@ tokens works — but it is the canonical source.)
 | `@vanduo-oss/vd3-cbun`                    | Root — the `VD3_CBUN_VERSIONS` per-component version map      |
 | `@vanduo-oss/vd3-cbun/charts`             | `VdChart` + typed chart wrappers, factories, scales, `resolveTheme` |
 | `@vanduo-oss/vd3-cbun/charts/css`         | Charts stylesheet (`dist/charts/vd3-charts.css`)             |
-| `@vanduo-oss/vd3-cbun/code-editor`        | `VdCodeEditor` + `VdCodeEditorCore`, `tokenize`, `highlight`, `LANGUAGES` |
+| `@vanduo-oss/vd3-cbun/code-editor`        | `VdCodeEditor` + `VdCodeEditorCore`, `tokenize`, `highlight`, `renderTokensToHtml`, `LANGUAGES` |
+| `@vanduo-oss/vd3-cbun/code-editor/highlight` | Tokenizer-only: `highlight`, `tokenize`, `renderTokensToHtml`, `LANGUAGES` (no editor / Vue) |
 | `@vanduo-oss/vd3-cbun/code-editor/css`    | Code-editor stylesheet (`dist/code-editor/vd3-code-editor.css`) |
 | `@vanduo-oss/vd3-cbun/draw`               | `VdDraw` + `VdDrawCore`, `BRUSH_PRESETS`, `DRAW_TOOLS`, `VD_DRAW_VERSION` |
 | `@vanduo-oss/vd3-cbun/draw/css`           | Draw stylesheet (`dist/draw/vd3-draw.css`)                   |

package/SKILL.md

@@ -43,30 +43,47 @@ the scales (`scaleLinear`, `scaleTime`, `scaleBand`, `scalePoint`,
 `scaleOrdinal`), accessor/tick helpers (`createAccessor`, `ticks`,
 `niceDomain`), the path builders (`linePath`, `areaPath`, `arcPath`), and
 `resolveTheme`. No name collision, so the core factories keep their own names.
-CSS ships at `@vanduo-oss/vd3-cbun/charts/css`. `VD_CHARTS_VERSION` is `1.0.1`.
+CSS ships at `@vanduo-oss/vd3-cbun/charts/css`. Charts expose WAI-ARIA Graphics
+roles, arrow-key mark navigation, and an accessible data table (`dataTable`:
+`true` / `false` / `'visible'`; `ariaRoleDescription` overrides the SVG
+description). `VD_CHARTS_VERSION` is `1.1.0`.
 
 ## Code-editor
 
 ```js
 import { VdCodeEditor, VdCodeEditorCore } from '@vanduo-oss/vd3-cbun/code-editor';
+import { highlight, tokenize, LANGUAGES } from '@vanduo-oss/vd3-cbun/code-editor/highlight';
 import '@vanduo-oss/vd3-cbun/code-editor/css';
+
+const html = highlight(source, 'vue'); // snippet-safe; no extra trailing newline
+const overlay = highlight(source, 'javascript', { trailingNewline: true });
 ```
 
 `VdCodeEditor` is the Vue 3 wrapper (`v-model` binds the contents); the
 framework-agnostic editor core shares the class name, so it is re-exported as
 `VdCodeEditorCore`. It is a lightweight, first-party **textarea-overlay** editor
 — a native `<textarea>` over a `<pre>` highlight layer painted by homegrown,
-ReDoS-safe tokenizers (JavaScript/TypeScript, HTML, CSS, JSON, Markdown, Shell,
-Python) — with a line-number gutter + active-line highlight, auto-indent and
-bracket/quote auto-close, read-only mode, a copy button, a placeholder, and a
-large-input performance guard. No third-party editor and no runtime dependency
-beyond `vue`; rendering is escaping-safe and `innerHTML`-free, and the wrapper is
-SSR-safe (DOM touched only on mount). The subpath also re-exports the pure
-`tokenize`, `highlight`, and `LANGUAGES` helpers plus `VD_CODE_EDITOR_VERSION`.
-Key props: `language`, `readOnly`, `lineNumbers`, `tabSize`, `wrap`,
-`placeholder`, `maxLength`; events: `update:modelValue`, `change`, `focus`,
-`blur`, `ready`. CSS ships at `@vanduo-oss/vd3-cbun/code-editor/css`.
-`VD_CODE_EDITOR_VERSION` is `1.0.0`.
+ReDoS-safe tokenizers (JavaScript/TypeScript, HTML, Vue SFC, CSS, JSON,
+Markdown, Shell, Python) — with a line-number gutter + active-line highlight,
+auto-indent and bracket/quote auto-close, read-only mode, a copy button, a
+placeholder, and a large-input performance guard. No third-party editor and no
+runtime dependency beyond `vue`; rendering is escaping-safe and `innerHTML`-free,
+and the wrapper is SSR-safe (DOM touched only on mount).
+
+`./code-editor/highlight` is the **tokenizer-only** entry (`highlight`,
+`tokenize`, `renderTokensToHtml`, `LANGUAGES`) — it does not evaluate the editor
+core or Vue wrapper. `highlight(source, lang, { trailingNewline? })` defaults
+`trailingNewline` to `false` (safe inside `<pre>`); pass `true` only for the
+textarea overlay line-count. `jsx` / `tsx` / `jsonc` are aliases that fall back
+to the JS / TS / JSON tokenizers — they are not dedicated grammars. `vue` is a
+real SFC tokenizer (`<script>` / `<style>` embed, `{{ }}`, `v-*` / `@` / `:`).
+
+The main `./code-editor` subpath also re-exports those helpers plus
+`VD_CODE_EDITOR_VERSION`. Key props: `language`, `readOnly`, `lineNumbers`,
+`tabSize`, `wrap`, `placeholder`, `maxLength`; events: `update:modelValue`,
+`change`, `focus`, `blur`, `ready`. Wrap mode shares `scrollbar-gutter: stable`
+on the textarea and highlight layer so the caret stays aligned. CSS ships at
+`@vanduo-oss/vd3-cbun/code-editor/css`. `VD_CODE_EDITOR_VERSION` is `1.1.0`.
 
 ## Draw
 
@@ -93,8 +110,12 @@ carry `brush` / `color` / `opacity` / per-point `pressure`) via a
 also re-exports `BRUSH_PRESETS`, `DRAW_TOOLS`, `DRAW_SHAPE_TYPES`, and
 `VD_DRAW_VERSION`. Key props: `data`, `tool`, `readonly`, `gridSize`, `snap`,
 `autoFit`, `history`, `historyLimit`; events: `change`, `select`, `viewport`,
-`ready`. CSS ships at `@vanduo-oss/vd3-cbun/draw/css`. `VD_DRAW_VERSION` is
-`1.1.0`.
+`ready`. Live EMA brush smoothing + RDP simplification, incremental SVG cache,
+two-finger pinch/pan, multi-line text wrap, double-click text edit, and surgical
+Vue setters (`setReadonly` / `setSnap` / `setHistoryEnabled` /
+`setHistoryLimit`) so option props do not recreate the editor.
+`fitView(padding?)` defaults padding to `40`. CSS ships at
+`@vanduo-oss/vd3-cbun/draw/css`. `VD_DRAW_VERSION` is `1.1.0`.
 
 ## Flowchart
 
@@ -136,7 +157,13 @@ subpath (coordinate transforms, rotation, distance, plus the terrain tables:
 and the `isPassable` / `getMovementCost` / `getTerrainYields` / `getTerrainColor`
 helpers). Hex-grid ships **no CSS** — it renders to a canvas and reads `--vd-*`
 theme tokens off the host element via `getComputedStyle`. `VD_HEX_VERSION` is
-`1.0.1`.
+`1.1.0`. The core accepts `pixelRatio` (`number | 'auto'`, default `'auto'` =
+`min(devicePixelRatio, 2)`) and `cull` (default `true`, viewport culling).
+Pan/zoom gestures rAF-coalesce to one frame and, above ~8000 visible cells,
+blit the last sharp frame before a sharp culled re-render when idle; data APIs
+stay synchronous. `getVisibleHexes()`, `getRenderStats()`, `setPixelRatio()`,
+and `setCull()` expose/update this state; `pixelRatio: 1` and `cull: false`
+restore the pre-1.1 behavior.
 
 ## Music-player
 

package/dist/charts/core.d.ts

@@ -105,6 +105,10 @@ export interface BaseChartOptions<T = Row> {
   legend?: boolean | LegendOptions;
   /** Draw value labels on each mark. */
   dataLabels?: boolean | DataLabelsOption;
+  /** Accessible data table fallback for screen readers (WCAG 1.1.1). Set `false` to disable or `'visible'` to display visually. Default is `true` (visually hidden). */
+  dataTable?: boolean | 'visible';
+  /** Custom ARIA role description override for the chart root (defaults to `${kind} chart`). */
+  ariaRoleDescription?: string;
 }
 
 export interface CartesianChartOptions<T = Row> extends BaseChartOptions<T> {

package/dist/charts/index.cjs

@@ -495,6 +495,74 @@ function makeInteractive(mark, hasClick, hasTooltip) {
     mark.setAttribute("focusable", "true");
   }
 }
+function setupKeyboardNavigation(svg, markGroup) {
+  svg.addEventListener("keydown", (event) => {
+    const active = document.activeElement;
+    if (!active || !markGroup.contains(active)) return;
+    const marks = Array.from(markGroup.querySelectorAll('[tabindex="0"]'));
+    if (!marks.length) return;
+    const currentIndex = marks.indexOf(active);
+    if (currentIndex === -1) return;
+    let targetIndex = -1;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      targetIndex = (currentIndex + 1) % marks.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      targetIndex = (currentIndex - 1 + marks.length) % marks.length;
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      targetIndex = 0;
+    } else if (event.key === "End") {
+      event.preventDefault();
+      targetIndex = marks.length - 1;
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      active.blur();
+    }
+    if (targetIndex !== -1 && marks[targetIndex]) {
+      marks[targetIndex].focus();
+    }
+  });
+}
+function renderDataTable(instance, tableData) {
+  const { target, options } = instance;
+  if (options.dataTable === false) return;
+  if (!tableData || !tableData.rows || !tableData.rows.length) return;
+  const table = document.createElement("table");
+  table.className = "vd-chart-data-table";
+  if (options.dataTable !== "visible") {
+    table.classList.add("vd-chart-sr-only");
+  }
+  const caption = document.createElement("caption");
+  caption.textContent = tableData.caption || options.title || options.ariaLabel || `${instance.kind} chart data`;
+  table.appendChild(caption);
+  if (tableData.headers && tableData.headers.length) {
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    tableData.headers.forEach((h2) => {
+      const th = document.createElement("th");
+      th.setAttribute("scope", "col");
+      th.textContent = String(h2);
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+  }
+  const tbody = document.createElement("tbody");
+  tableData.rows.forEach((row) => {
+    const tr = document.createElement("tr");
+    row.forEach((cell, idx) => {
+      const el = idx === 0 ? document.createElement("th") : document.createElement("td");
+      if (idx === 0) el.setAttribute("scope", "row");
+      el.textContent = cell == null ? "" : String(cell);
+      tr.appendChild(el);
+    });
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+  target.appendChild(table);
+}
 function createSvgShell(instance) {
   const { target, options } = instance;
   const size = measureTarget(target, options);
@@ -511,7 +579,8 @@ function createSvgShell(instance) {
     width: size.width,
     height: size.height,
     viewBox: `0 0 ${size.width} ${size.height}`,
-    role: "img"
+    role: options.role || "graphics-document document",
+    "aria-roledescription": options.ariaRoleDescription || `${instance.kind} chart`
   });
   const titleId = nextId("vd-chart-title");
   const descId = nextId("vd-chart-desc");
@@ -582,7 +651,7 @@ function drawAxisLine(svg, x1, y1, x2, y2, theme) {
 }
 function drawCartesianAxes(svg, config) {
   const { plot, xScale, yScale, xTicks, yTicks, theme, options, categoricalX } = config;
-  const axisGroup = append(svg, svgEl("g", { class: "vd-chart-axes" }));
+  const axisGroup = append(svg, svgEl("g", { class: "vd-chart-axes", "aria-hidden": "true" }));
   yTicks.forEach((tick) => {
     const y = yScale(tick);
     if (!isFiniteNumber(y)) return;
@@ -825,7 +894,14 @@ function drawDataLabel(svg, x, y, value, cfg, theme, anchor = "middle") {
 function drawAnnotations(svg, options, plot, xScale, yScale, theme) {
   const annotations = toArray(options.annotations);
   if (!annotations.length) return;
-  const group = append(svg, svgEl("g", { class: "vd-chart-annotations" }));
+  const group = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-annotations",
+      role: "graphics-object",
+      "aria-roledescription": "annotations"
+    })
+  );
   annotations.forEach((ann) => {
     const color = ann.color || theme.mutedTextColor;
     const dash = ann.dash === false ? null : "4 3";
@@ -945,7 +1021,14 @@ function renderBarChart(instance) {
   });
   drawAnnotations(svg, options, plot, xScale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-bars" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-bars",
+      role: "graphics-object",
+      "aria-roledescription": "data points"
+    })
+  );
   const baseline = yScale(Math.min(Math.max(0, yDomain[0]), yDomain[1]));
   rows.forEach((row) => {
     const x = xScale(row.x);
@@ -963,6 +1046,7 @@ function renderBarChart(instance) {
       rx: 3,
       fill,
       role: "graphics-symbol",
+      "aria-roledescription": "bar",
       "aria-label": `${formatCategory(row.x)}: ${formatNumber(row.y)}`
     });
     makeInteractive(rect, typeof options.onBarClick === "function", options.tooltip !== false);
@@ -984,6 +1068,12 @@ function renderBarChart(instance) {
     if (labels) drawDataLabel(svg, x + xScale.bandwidth() / 2, rectY - 4, row.y, labels, theme);
     append(markGroup, rect);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "Category", options.yAxis?.label || "Value"],
+    rows: rows.map((r) => [formatCategory(r.x), formatNumber(r.y)])
+  });
   if (options.legend && color && color.scale) {
     renderTopLegend(
       svg,
@@ -1037,7 +1127,14 @@ function renderMultiBarChart(instance) {
   });
   drawAnnotations(svg, options, plot, xScale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-bars" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-bars",
+      role: "graphics-object",
+      "aria-roledescription": "grouped bars"
+    })
+  );
   const baseline = yScale(Math.min(Math.max(0, yDomain[0]), yDomain[1]));
   seriesList.forEach((series) => {
     const fill = seriesColor(series, theme);
@@ -1057,6 +1154,7 @@ function renderMultiBarChart(instance) {
         rx: 3,
         fill,
         role: "graphics-symbol",
+        "aria-roledescription": "bar",
         "aria-label": `${series.name} \u2014 ${formatCategory(row.x)}: ${formatNumber(row.y)}`
       });
       makeInteractive(rect, typeof options.onBarClick === "function", options.tooltip !== false);
@@ -1089,6 +1187,20 @@ function renderMultiBarChart(instance) {
       append(markGroup, rect);
     });
   });
+  setupKeyboardNavigation(svg, markGroup);
+  const tableRows = categories.map((cat) => {
+    const rowCells = [cat];
+    seriesList.forEach((s) => {
+      const match = s.rows.find((r) => String(r.x) === cat);
+      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    });
+    return rowCells;
+  });
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "Category", ...seriesList.map((s) => s.name)],
+    rows: tableRows
+  });
   if (options.legend !== false) {
     renderTopLegend(
       svg,
@@ -1149,7 +1261,14 @@ function renderLineLikeChart(instance, mode) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: `vd-chart-marks vd-chart-${mode}` }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: `vd-chart-marks vd-chart-${mode}`,
+      role: "graphics-object",
+      "aria-roledescription": `${mode} series`
+    })
+  );
   if (mode === "area") {
     const baseline = yScale(Math.max(0, yDomain[0]));
     append(
@@ -1186,6 +1305,7 @@ function renderLineLikeChart(instance, mode) {
         stroke: color,
         "stroke-width": 2,
         role: "graphics-symbol",
+        "aria-roledescription": "data point",
         "aria-label": `${formatCategory(point.xValue)}: ${formatNumber(point.yValue)}`
       });
       makeInteractive(
@@ -1215,6 +1335,12 @@ function renderLineLikeChart(instance, mode) {
       (point) => drawDataLabel(svg, point.x, point.y - 8, point.yValue, labels, theme)
     );
   }
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", options.yAxis?.label || "Y"],
+    rows: points.map((p) => [formatCategory(p.xValue), formatNumber(p.yValue)])
+  });
 }
 function renderMultiLineChart(instance, mode) {
   const shell = createSvgShell(instance);
@@ -1250,7 +1376,14 @@ function renderMultiLineChart(instance, mode) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: `vd-chart-marks vd-chart-${mode}` }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: `vd-chart-marks vd-chart-${mode}`,
+      role: "graphics-object",
+      "aria-roledescription": `multi-series ${mode}`
+    })
+  );
   const baseline = yScale(Math.max(0, yDomain[0]));
   seriesList.forEach((series) => {
     const stroke = seriesColor(series, theme);
@@ -1297,6 +1430,7 @@ function renderMultiLineChart(instance, mode) {
           stroke,
           "stroke-width": 2,
           role: "graphics-symbol",
+          "aria-roledescription": "data point",
           "aria-label": `${series.name} ${formatCategory(point.xValue)}: ${formatNumber(point.yValue)}`
         });
         makeInteractive(
@@ -1329,6 +1463,21 @@ function renderMultiLineChart(instance, mode) {
       );
     }
   });
+  setupKeyboardNavigation(svg, markGroup);
+  const uniqueX = unique(allRows.map((r) => r.x));
+  const tableRows = uniqueX.map((xVal) => {
+    const rowCells = [formatCategory(xVal)];
+    seriesList.forEach((s) => {
+      const match = s.rows.find((r) => r.x === xVal);
+      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    });
+    return rowCells;
+  });
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", ...seriesList.map((s) => s.name)],
+    rows: tableRows
+  });
   if (options.legend !== false) {
     renderTopLegend(
       svg,
@@ -1380,7 +1529,14 @@ function renderScatterChart(instance) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-scatter" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-scatter",
+      role: "graphics-object",
+      "aria-roledescription": "data points"
+    })
+  );
   rows.forEach((row) => {
     const cx = xInfo.scale(xInfo.mapValue(row.x));
     const cy = yScale(row.y);
@@ -1394,6 +1550,7 @@ function renderScatterChart(instance) {
       fill,
       opacity: options.pointOpacity ?? 0.88,
       role: "graphics-symbol",
+      "aria-roledescription": "data point",
       "aria-label": `${formatCategory(row.x)}: ${formatNumber(row.y)}`
     });
     makeInteractive(circle, typeof options.onPointClick === "function", options.tooltip !== false);
@@ -1414,6 +1571,12 @@ function renderScatterChart(instance) {
     if (labels) drawDataLabel(svg, cx, cy - 8, row.y, labels, theme);
     append(markGroup, circle);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", options.yAxis?.label || "Y"],
+    rows: rows.map((r) => [formatCategory(r.x), formatNumber(r.y)])
+  });
   if (options.legend && color && color.scale) {
     renderTopLegend(
       svg,
@@ -1482,7 +1645,14 @@ function renderDonutChart(instance) {
   const innerRadius = outerRadius * ratio;
   const colorScale = scaleOrdinal({ domain: rows.map((row) => row.label), range: theme.colors });
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-slices" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-slices",
+      role: "graphics-object",
+      "aria-roledescription": "pie slices"
+    })
+  );
   let cursor = -Math.PI / 2;
   rows.forEach((row) => {
     const angle = row.value / total * TAU;
@@ -1496,6 +1666,7 @@ function renderDonutChart(instance) {
       stroke: theme.backgroundColor,
       "stroke-width": 2,
       role: "graphics-symbol",
+      "aria-roledescription": "slice",
       "aria-label": `${formatCategory(row.label)}: ${formatNumber(row.value)}`
     });
     makeInteractive(path, typeof options.onSliceClick === "function", options.tooltip !== false);
@@ -1520,6 +1691,16 @@ function renderDonutChart(instance) {
     }
     append(markGroup, path);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: ["Category", "Value", "Percentage"],
+    rows: rows.map((r) => [
+      formatCategory(r.label),
+      formatNumber(r.value),
+      total > 0 ? `${Math.round(r.value / total * 100)}%` : "0%"
+    ])
+  });
   if (innerRadius > 16 && options.centerLabel !== false) {
     append(
       svg,
@@ -1702,7 +1883,11 @@ var CHART_PROPS = {
   xFormat: { type: Function, default: void 0 },
   yFormat: { type: Function, default: void 0 },
   xAxis: { type: Object, default: void 0 },
-  yAxis: { type: Object, default: void 0 }
+  yAxis: { type: Object, default: void 0 },
+  // Accessible data table: `true` (sr-only, default) / `false` / `'visible'`.
+  dataTable: { type: [Boolean, String], default: void 0 },
+  // Override the SVG `aria-roledescription` (defaults to `${kind} chart`).
+  ariaRoleDescription: { type: String, default: void 0 }
 };
 function optionsFrom(target, props, emit) {
   return {
@@ -1736,6 +1921,8 @@ function optionsFrom(target, props, emit) {
     yFormat: props.yFormat,
     xAxis: props.xAxis,
     yAxis: props.yAxis,
+    dataTable: props.dataTable,
+    ariaRoleDescription: props.ariaRoleDescription,
     // Forward the core's mark-click callbacks as the Vue emit family. Passing
     // all three unconditionally is safe: the core only fires the callback
     // relevant to the rendered chart type (bars → onBarClick, points →