@hyperpackai/hyperui 0.2.0 → 0.3.0

package/dist/components/data.js

@@ -6,6 +6,18 @@ import { injectCSS, cn, h } from "../theme/index.js";
 import { Button } from "./Button/index.js";
 import { Input } from "./Input/index.js";
 import { Select } from "./Select/index.js";
+function rootProps(props, className, extra) {
+    return {
+        ...extra,
+        id: props.id,
+        class: cn(className, props.class),
+        style: mergeStyle(props.style, extra?.style),
+        "data-testid": props.testId
+    };
+}
+function mergeStyle(base, extra) {
+    return [base, extra].filter(Boolean).join(";") || undefined;
+}
 const DATA_CSS = `
 .hu-virtual-table {
   border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
@@ -14,6 +26,11 @@ const DATA_CSS = `
 .hu-virtual-table__inner { position: relative; min-width: 100%; }
 .hu-virtual-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
 .hu-virtual-table thead { position: sticky; inset-block-start: 0; z-index: 1; background: var(--hu-bg-2); }
+.hu-virtual-table--no-sticky thead { position: static; }
+.hu-virtual-table__caption {
+  padding: var(--hu-space-2) var(--hu-space-3); color: var(--hu-text-2);
+  font-size: var(--hu-font-size-sm); text-align: start; caption-side: top;
+}
 .hu-virtual-table th {
   padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
   color: var(--hu-text-2); font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
@@ -23,7 +40,14 @@ const DATA_CSS = `
   padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
   color: var(--hu-text); font-size: var(--hu-font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
+.hu-virtual-table--compact th,
+.hu-virtual-table--compact td { padding: var(--hu-space-1) var(--hu-space-2); }
+.hu-virtual-table--comfortable th,
+.hu-virtual-table--comfortable td { padding: var(--hu-space-3) var(--hu-space-4); }
 .hu-virtual-table tr:hover td { background: var(--hu-bg-2); }
+.hu-virtual-table tr[aria-selected="true"] td { background: var(--hu-primary-bg); }
+.hu-virtual-table tr[aria-disabled="true"] td { color: var(--hu-text-3); cursor: not-allowed; opacity: .72; }
+.hu-virtual-table tr[aria-disabled="true"]:hover td { background: transparent; }
 .hu-virtual-table__empty { padding: var(--hu-space-8); text-align: center; color: var(--hu-text-2); }
 
 .hu-advanced-filters {
@@ -59,6 +83,12 @@ const DATA_CSS = `
   border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
   background: var(--hu-bg); padding: var(--hu-space-4);
 }
+.hu-data-grid__header { display: flex; flex-direction: column; gap: var(--hu-space-1); }
+.hu-data-grid__title {
+  margin: 0; color: var(--hu-text); font-size: var(--hu-font-size-lg);
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-data-grid__description { margin: 0; color: var(--hu-text-2); font-size: var(--hu-font-size-sm); }
 .hu-data-grid__toolbar {
   display: flex; align-items: center; justify-content: space-between;
   gap: var(--hu-space-3); flex-wrap: wrap;
@@ -143,12 +173,21 @@ const DATA_CSS = `
 .hu-pivot-grid__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
 .hu-pivot-grid__table { overflow: auto; border: 1px solid var(--hu-border); border-radius: var(--hu-radius); }
 .hu-pivot-grid__table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.hu-pivot-grid__table--sticky thead { position: sticky; inset-block-start: 0; z-index: 1; }
+.hu-pivot-grid__caption {
+  padding: var(--hu-space-2) var(--hu-space-3); color: var(--hu-text-2);
+  font-size: var(--hu-font-size-sm); text-align: start; caption-side: top;
+}
 .hu-pivot-grid__table th,
 .hu-pivot-grid__table td {
   padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
   border-inline-end: 1px solid var(--hu-border); font-size: var(--hu-font-size-xs);
   color: var(--hu-text); text-align: end; white-space: nowrap;
 }
+.hu-pivot-grid__table--compact th,
+.hu-pivot-grid__table--compact td { padding: var(--hu-space-1) var(--hu-space-2); }
+.hu-pivot-grid__table--comfortable th,
+.hu-pivot-grid__table--comfortable td { padding: var(--hu-space-3) var(--hu-space-4); }
 .hu-pivot-grid__table th { background: var(--hu-bg-2); color: var(--hu-text-2); font-weight: var(--hu-font-weight-semibold); text-align: start; }
 .hu-pivot-grid__total { font-weight: var(--hu-font-weight-semibold); background: var(--hu-bg-2); }
 @media (max-width: 720px) {
@@ -168,14 +207,18 @@ export function VirtualTable(props) {
     const visibleRows = props.rows.slice(startIndex, startIndex + visibleCount);
     const totalHeight = props.rows.length * rowHeight;
     const offset = startIndex * rowHeight;
-    return h("div", {
-        class: cn("hu-virtual-table", props.class),
+    const selectedRows = props.selectedRows ? new Set(props.selectedRows) : undefined;
+    const stickyHeader = props.stickyHeader !== false;
+    return h("div", rootProps(props, cn("hu-virtual-table", props.density && props.density !== "default" && `hu-virtual-table--${props.density}`, !stickyHeader && "hu-virtual-table--no-sticky"), {
         style: props.height !== undefined ? `height:${toCssUnit(props.height)}` : undefined,
         role: "region",
-        "aria-label": "Virtualized table"
-    }, h("div", { class: "hu-virtual-table__inner", style: `height:${totalHeight}px` }, h("table", { role: "table", "aria-rowcount": props.rows.length }, h("thead", {}, h("tr", { role: "row" }, ...props.columns.map((column) => h("th", {
+        "aria-label": props["aria-label"] ?? "Virtualized table",
+        "aria-labelledby": props["aria-labelledby"]
+    }), h("div", { class: "hu-virtual-table__inner", style: `height:${totalHeight}px` }, h("table", { role: "table", "aria-rowcount": props.rows.length }, props.caption && h("caption", { class: "hu-virtual-table__caption" }, props.caption), h("thead", {}, h("tr", { role: "row" }, ...props.columns.map((column) => h("th", {
         key: column.key,
+        id: getColumnId(column),
         role: "columnheader",
+        "aria-label": column.headerLabel,
         style: [
             column.width !== undefined && `width:${toCssUnit(column.width)}`,
             column.align && `text-align:${column.align}`
@@ -185,15 +228,21 @@ export function VirtualTable(props) {
         : visibleRows.map((row, localIndex) => {
             const index = startIndex + localIndex;
             const key = props.rowKey?.(row, index) ?? String(row["id"] ?? index);
+            const disabled = props.isRowDisabled?.(row, index) ?? false;
             return h("tr", {
                 key,
                 role: "row",
                 "aria-rowindex": index + 1,
+                "aria-label": props.getRowLabel?.(row, index),
+                "aria-selected": selectedRows?.has(key) ? "true" : undefined,
+                "aria-disabled": disabled ? "true" : undefined,
                 style: `height:${rowHeight}px`,
-                onClick: props.onRowClick ? () => props.onRowClick?.(row, index) : undefined
+                onClick: props.onRowClick && !disabled ? () => props.onRowClick?.(row, index) : undefined
             }, ...props.columns.map((column) => h("td", {
                 key: column.key,
                 role: "cell",
+                headers: getColumnId(column),
+                "aria-label": column.cellLabel?.(row, index),
                 style: column.align ? `text-align:${column.align}` : undefined
             }, column.render ? column.render(row, index) : row[column.key])));
         })))));
@@ -214,7 +263,7 @@ export function AdvancedFilters(props) {
     injectCSS("hu-data", DATA_CSS);
     const fieldOptions = props.fields.map((field) => ({ value: field.key, label: field.label }));
     const operatorOptions = FILTER_OPERATORS.map((operator) => ({ value: operator.value, label: operator.label }));
-    return h("section", { class: cn("hu-advanced-filters", props.class), "aria-label": props.title ?? "Advanced filters" }, h("div", { class: "hu-advanced-filters__header" }, h("div", { class: "hu-advanced-filters__title" }, props.title ?? "Advanced filters"), Button({ type: "button", variant: "secondary", size: "sm", children: "Add filter", onClick: props.onAddRule })), h("div", { class: "hu-advanced-filters__rules" }, (props.rules?.length ?? 0) === 0
+    return h("section", rootProps(props, "hu-advanced-filters", { "aria-label": props.title ?? "Advanced filters" }), h("div", { class: "hu-advanced-filters__header" }, h("div", { class: "hu-advanced-filters__title" }, props.title ?? "Advanced filters"), Button({ type: "button", variant: "secondary", size: "sm", children: "Add filter", onClick: props.onAddRule })), h("div", { class: "hu-advanced-filters__rules" }, (props.rules?.length ?? 0) === 0
         ? h("div", { class: "hu-advanced-filters__empty" }, "No filters applied.")
         : props.rules.map((rule) => h("div", { key: rule.id, class: "hu-advanced-filters__rule", role: "group", "aria-label": `Filter ${rule.id}` }, Select({
             label: "Field",
@@ -236,7 +285,7 @@ export function SearchBuilder(props) {
     injectCSS("hu-data", DATA_CSS);
     const tokens = props.tokens ?? [];
     const query = props.query ?? "";
-    return h("section", { class: cn("hu-search-builder", props.class), "aria-label": "Search builder" }, h("div", { class: "hu-search-builder__bar", role: "search" }, h("div", { class: "hu-search-builder__query" }, Input({
+    return h("section", rootProps(props, "hu-search-builder", { "aria-label": "Search builder" }), h("div", { class: "hu-search-builder__bar", role: "search" }, h("div", { class: "hu-search-builder__query" }, Input({
         value: query,
         placeholder: props.placeholder ?? "Search…",
         onInput: (e) => props.onQueryChange?.(e.target.value)
@@ -260,14 +309,19 @@ export function DataGrid(props) {
             key: "__select",
             header: "",
             width: 44,
+            headerLabel: "Select rows",
             render: (row, index) => {
                 const key = rowKey(row, index);
                 const checked = selected.has(key);
+                const disabled = props.isRowDisabled?.(row, index) ?? false;
                 return h("input", {
                     type: "checkbox",
                     checked,
+                    disabled,
                     "aria-label": `Select row ${index + 1}`,
                     onChange: (e) => {
+                        if (disabled)
+                            return;
                         const next = new Set(selected);
                         if (e.target.checked)
                             next.add(key);
@@ -280,11 +334,14 @@ export function DataGrid(props) {
         }
         : undefined;
     const tableColumns = selectionColumn ? [selectionColumn, ...visibleColumns] : visibleColumns;
-    return h("section", { class: cn("hu-data-grid", props.class), "aria-label": "Data grid" }, h("div", { class: "hu-data-grid__toolbar" }, h("div", { class: "hu-data-grid__search" }, Input({
+    return h("section", rootProps(props, "hu-data-grid", {
+        "aria-label": props["aria-label"] ?? props.title ?? "Data grid",
+        "aria-labelledby": props["aria-labelledby"]
+    }), (props.title || props.description) && h("div", { class: "hu-data-grid__header" }, props.title && h("h2", { class: "hu-data-grid__title" }, props.title), props.description && h("p", { class: "hu-data-grid__description" }, props.description)), h("div", { class: "hu-data-grid__toolbar" }, h("div", { class: "hu-data-grid__search" }, Input({
         value: props.query ?? "",
-        placeholder: "Search rows...",
+        placeholder: props.searchPlaceholder ?? "Search rows...",
         onInput: (e) => props.onQueryChange?.(e.target.value)
-    })), h("div", { class: "hu-data-grid__actions" }, props.toolbarActions, props.filters && Button({ type: "button", variant: "secondary", size: "sm", children: "Add filter", onClick: props.onFilterAdd }))), props.showColumnControls && h("div", { class: "hu-data-grid__columns", "aria-label": "Column visibility" }, ...props.columns.map((column) => h("label", { class: "hu-data-grid__column-toggle" }, h("input", {
+    })), h("div", { class: "hu-data-grid__actions" }, props.toolbarActions, props.filters && Button({ type: "button", variant: "secondary", size: "sm", children: "Add filter", onClick: props.onFilterAdd }))), props.showColumnControls && h("div", { class: "hu-data-grid__columns", "aria-label": props.columnControlsLabel ?? "Column visibility" }, ...props.columns.map((column) => h("label", { class: "hu-data-grid__column-toggle" }, h("input", {
         type: "checkbox",
         checked: column.visible !== false,
         onChange: (e) => props.onColumnVisibilityChange?.(column.key, e.target.checked)
@@ -294,10 +351,18 @@ export function DataGrid(props) {
         onAddRule: props.onFilterAdd,
         onRemoveRule: props.onFilterRemove,
         onRuleChange: props.onFilterChange
-    }), props.selectedRows && h("div", { class: "hu-data-grid__selection", "aria-live": "polite" }, `${props.selectedRows.length} selected`), VirtualTable({
+    }), props.selectedRows && h("div", { class: "hu-data-grid__selection", "aria-live": "polite" }, props.selectedRowsLabel?.(props.selectedRows.length) ?? `${props.selectedRows.length} selected`), VirtualTable({
         columns: tableColumns,
         rows: props.rows,
+        caption: props.caption,
+        "aria-label": props.tableLabel,
+        "aria-labelledby": props.tableLabelledBy,
+        density: props.density,
+        stickyHeader: props.stickyHeader,
         rowKey,
+        selectedRows: props.selectedRows,
+        getRowLabel: props.getRowLabel,
+        isRowDisabled: props.isRowDisabled,
         rowHeight: props.rowHeight,
         height: props.height,
         startIndex: props.visibleStartIndex,
@@ -324,8 +389,11 @@ export function DataExporter(props) {
     const format = props.format ?? "csv";
     const filename = props.filename ?? `export.${format}`;
     const selectedColumns = getSelectedExportColumns(props.columns, props.selectedColumns);
-    return h("section", { class: cn("hu-data-transfer", props.class), "aria-label": props.title ?? "Data exporter" }, h("div", { class: "hu-data-transfer__header" }, h("div", {}, h("div", { class: "hu-data-transfer__title" }, props.title ?? "Export data"), h("div", { class: "hu-data-transfer__meta" }, props.description ?? `${props.rows.length} rows available`)), h("div", { class: "hu-data-transfer__meta", "aria-live": "polite" }, `${selectedColumns.length} columns selected`)), h("div", { class: "hu-data-transfer__controls" }, Select({
-        label: "Format",
+    return h("section", rootProps(props, "hu-data-transfer", {
+        "aria-label": props["aria-label"] ?? props.title ?? "Data exporter",
+        "aria-labelledby": props["aria-labelledby"]
+    }), h("div", { class: "hu-data-transfer__header" }, h("div", {}, h("div", { class: "hu-data-transfer__title" }, props.title ?? "Export data"), h("div", { class: "hu-data-transfer__meta" }, props.description ?? `${props.rows.length} rows available`)), h("div", { class: "hu-data-transfer__meta", "aria-live": "polite" }, props.selectedColumnsLabel?.(selectedColumns.length) ?? `${selectedColumns.length} columns selected`)), h("div", { class: "hu-data-transfer__controls" }, Select({
+        label: props.formatLabel ?? "Format",
         value: format,
         options: [
             { label: "CSV", value: "csv" },
@@ -333,12 +401,12 @@ export function DataExporter(props) {
         ],
         onChange: (e) => props.onFormatChange?.(e.target.value)
     }), Input({
-        label: "Filename",
+        label: props.filenameLabel ?? "Filename",
         value: filename,
         onInput: (e) => props.onFilenameChange?.(e.target.value)
     }), Button({
         type: "button",
-        children: "Export",
+        children: props.exportLabel ?? "Export",
         disabled: selectedColumns.length === 0,
         onClick: () => props.onExport?.({
             format,
@@ -347,12 +415,18 @@ export function DataExporter(props) {
             columns: selectedColumns,
             content: serializeExport(props.rows, selectedColumns, format, props.includeHeaders !== false)
         })
-    })), h("div", { class: "hu-data-transfer__columns", "aria-label": "Export columns" }, ...props.columns.map((column) => {
+    })), h("div", { class: "hu-data-transfer__columns", "aria-label": props.columnsLabel ?? "Export columns" }, ...props.columns.map((column) => {
         const checked = selectedColumns.some((selected) => selected.key === column.key);
         return h("label", { class: "hu-data-transfer__column" }, h("input", {
             type: "checkbox",
             checked,
-            onChange: (e) => props.onColumnToggle?.(column.key, e.target.checked)
+            disabled: column.disabled,
+            "aria-label": column.headerLabel ?? `Export ${column.header}`,
+            onChange: (e) => {
+                if (column.disabled)
+                    return;
+                props.onColumnToggle?.(column.key, e.target.checked);
+            }
         }), column.header);
     })));
 }
@@ -363,19 +437,23 @@ export function DataImporter(props) {
     const previewRows = props.previewRows ?? [];
     const columns = props.columns ?? inferImportColumns(previewRows);
     const status = props.status ?? (props.fileName ? "ready" : "idle");
-    return h("section", { class: cn("hu-data-transfer", props.class), "aria-label": props.title ?? "Data importer" }, h("div", { class: "hu-data-transfer__header" }, h("div", {}, h("div", { class: "hu-data-transfer__title" }, props.title ?? "Import data"), h("div", { class: "hu-data-transfer__meta" }, props.description ?? "Upload a file, validate mapped columns, then import.")), h("div", { class: "hu-data-transfer__meta", "aria-live": "polite" }, `${previewRows.length} preview rows`)), h("div", { class: "hu-data-transfer__controls" }, Select({
-        label: "Format",
+    return h("section", rootProps(props, "hu-data-transfer", {
+        "aria-label": props["aria-label"] ?? props.title ?? "Data importer",
+        "aria-labelledby": props["aria-labelledby"]
+    }), h("div", { class: "hu-data-transfer__header" }, h("div", {}, h("div", { class: "hu-data-transfer__title" }, props.title ?? "Import data"), h("div", { class: "hu-data-transfer__meta" }, props.description ?? "Upload a file, validate mapped columns, then import.")), h("div", { class: "hu-data-transfer__meta", "aria-live": "polite" }, props.previewRowsLabel?.(previewRows.length) ?? `${previewRows.length} preview rows`)), h("div", { class: "hu-data-transfer__controls" }, Select({
+        label: props.formatLabel ?? "Format",
         value: format,
         options: [
             { label: "CSV", value: "csv" },
             { label: "JSON", value: "json" }
         ],
         onChange: (e) => props.onFormatChange?.(e.target.value)
-    }), h("label", { class: "hu-data-transfer__dropzone" }, h("span", { class: "hu-data-transfer__meta" }, props.fileName ?? "Choose import file"), h("input", {
+    }), h("label", { class: "hu-data-transfer__dropzone" }, h("span", { class: "hu-data-transfer__meta" }, props.fileName ?? props.fileLabel ?? "Choose import file"), h("input", {
         class: "hu-data-transfer__file",
         type: "file",
         accept,
         multiple: props.multiple,
+        "aria-label": props.fileLabel ?? "Choose import file",
         onChange: (e) => {
             const file = e.target.files?.[0];
             if (file)
@@ -383,10 +461,21 @@ export function DataImporter(props) {
         }
     })), Button({
         type: "button",
-        children: "Import",
+        children: props.importLabel ?? "Import",
         disabled: previewRows.length === 0 || status === "error" || status === "parsing",
         onClick: () => props.onImport?.(previewRows)
-    })), props.fileName && h("div", { class: "hu-data-transfer__status", role: "status" }, `${props.fileName}${props.maxFileSize ? ` · max ${formatBytes(props.maxFileSize)}` : ""}`), props.error && h("div", { class: "hu-data-transfer__error", role: "alert" }, props.error), previewRows.length > 0 && h("div", { class: "hu-data-transfer__preview", "aria-label": "Import preview" }, h("table", {}, h("thead", {}, h("tr", {}, ...columns.map((column) => h("th", { key: column.key, scope: "col" }, `${column.header}${column.required ? " *" : ""}`)))), h("tbody", {}, ...previewRows.slice(0, 5).map((row, index) => h("tr", { key: String(row["id"] ?? index) }, ...columns.map((column) => h("td", { key: column.key }, row[column.key] ?? ""))))))), props.onClear && Button({ type: "button", variant: "ghost", size: "sm", children: "Clear import", onClick: props.onClear }));
+    })), props.fileName && h("div", { class: "hu-data-transfer__status", role: "status" }, props.statusLabel?.(status, props.fileName) ?? `${props.fileName}${props.maxFileSize ? ` · max ${formatBytes(props.maxFileSize)}` : ""}`), props.error && h("div", { class: "hu-data-transfer__error", role: "alert" }, props.error), previewRows.length > 0 && h("div", { class: "hu-data-transfer__preview", "aria-label": props.previewLabel ?? "Import preview" }, h("table", { role: "table", "aria-rowcount": previewRows.length }, props.previewCaption && h("caption", { class: "hu-virtual-table__caption" }, props.previewCaption), h("thead", {}, h("tr", {}, ...columns.map((column) => h("th", {
+        key: column.key,
+        id: getImportColumnId(column),
+        scope: "col",
+        role: "columnheader",
+        "aria-label": column.headerLabel
+    }, `${column.header}${column.required ? " *" : ""}`)))), h("tbody", {}, ...previewRows.slice(0, 5).map((row, index) => h("tr", { key: String(row["id"] ?? index), role: "row", "aria-rowindex": index + 1 }, ...columns.map((column) => h("td", {
+        key: column.key,
+        role: "cell",
+        headers: getImportColumnId(column),
+        "aria-label": column.cellLabel?.(row, index)
+    }, row[column.key] ?? ""))))))), props.onClear && Button({ type: "button", variant: "ghost", size: "sm", children: props.clearLabel ?? "Clear import", onClick: props.onClear }));
 }
 export function TreeGrid(props) {
     injectCSS("hu-data", DATA_CSS);
@@ -394,14 +483,17 @@ export function TreeGrid(props) {
     const flatRows = flattenTreeGridRows(props.rows, expanded);
     const visibleColumns = props.columns.filter((column) => column.visible !== false);
     const firstColumn = visibleColumns[0]?.key;
-    return h("div", {
-        class: cn("hu-virtual-table hu-tree-grid", props.class),
+    const stickyHeader = props.stickyHeader !== false;
+    return h("div", rootProps(props, cn("hu-virtual-table hu-tree-grid", props.density && props.density !== "default" && `hu-virtual-table--${props.density}`, !stickyHeader && "hu-virtual-table--no-sticky"), {
         style: props.height !== undefined ? `height:${toCssUnit(props.height)}` : undefined,
         role: "region",
-        "aria-label": "Tree grid"
-    }, h("table", { role: "treegrid", "aria-rowcount": flatRows.length }, h("thead", {}, h("tr", { role: "row" }, ...visibleColumns.map((column) => h("th", {
+        "aria-label": props["aria-label"] ?? "Tree grid",
+        "aria-labelledby": props["aria-labelledby"]
+    }), h("table", { role: "treegrid", "aria-rowcount": flatRows.length }, props.caption && h("caption", { class: "hu-virtual-table__caption" }, props.caption), h("thead", {}, h("tr", { role: "row" }, ...visibleColumns.map((column) => h("th", {
         key: column.key,
+        id: getColumnId(column),
         role: "columnheader",
+        "aria-label": column.headerLabel,
         style: [
             column.width !== undefined && `width:${toCssUnit(column.width)}`,
             column.align && `text-align:${column.align}`
@@ -411,18 +503,23 @@ export function TreeGrid(props) {
         : flatRows.map(({ row, level }, index) => {
             const hasChildren = (row.children?.length ?? 0) > 0;
             const isExpanded = expanded.has(row.id);
+            const disabled = row.disabled || (props.isRowDisabled?.(row, index, level) ?? false);
             return h("tr", {
                 key: row.id,
                 role: "row",
                 "aria-level": level,
                 "aria-expanded": hasChildren ? String(isExpanded) : undefined,
                 "aria-selected": props.selected === row.id ? "true" : undefined,
+                "aria-disabled": disabled ? "true" : undefined,
+                "aria-label": props.getRowLabel?.(row, index, level),
                 "aria-rowindex": index + 1,
                 style: props.rowHeight ? `height:${props.rowHeight}px` : undefined,
-                onClick: props.onRowClick ? () => props.onRowClick?.(row) : undefined
+                onClick: props.onRowClick && !disabled ? () => props.onRowClick?.(row) : undefined
             }, ...visibleColumns.map((column) => h("td", {
                 key: column.key,
                 role: "gridcell",
+                headers: getColumnId(column),
+                "aria-label": column.cellLabel?.(row.data, index),
                 style: column.align ? `text-align:${column.align}` : undefined
             }, column.key === firstColumn
                 ? h("span", {
@@ -434,8 +531,10 @@ export function TreeGrid(props) {
                         class: "hu-tree-grid__toggle",
                         "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${row.id}`,
                         "aria-expanded": String(isExpanded),
-                        disabled: row.disabled,
+                        disabled,
                         onClick: (e) => {
+                            if (disabled)
+                                return;
                             e.stopPropagation?.();
                             props.onToggle?.(row.id, !isExpanded);
                         }
@@ -448,13 +547,46 @@ export function PivotGrid(props) {
     injectCSS("hu-data", DATA_CSS);
     const aggregation = props.aggregation ?? "sum";
     const matrix = buildPivotMatrix(props.rows, props.rowFields, props.columnField, props.valueField, aggregation);
-    return h("section", { class: cn("hu-pivot-grid", props.class), "aria-label": props.title ?? "Pivot grid" }, h("div", { class: "hu-pivot-grid__header" }, h("div", {}, h("div", { class: "hu-pivot-grid__title" }, props.title ?? "Pivot grid"), h("div", { class: "hu-pivot-grid__meta" }, `${props.rows.length} rows · ${aggregation}`)), h("div", { class: "hu-pivot-grid__meta", "aria-live": "polite" }, `${matrix.rowKeys.length} groups · ${matrix.columnKeys.length} columns`)), h("div", { class: "hu-pivot-grid__table", role: "region", "aria-label": "Pivot results" }, h("table", { role: "table" }, h("thead", {}, h("tr", { role: "row" }, h("th", { role: "columnheader", scope: "col" }, props.rowFields.map((field) => field.header).join(" / ") || "Group"), ...matrix.columnKeys.map((columnKey) => h("th", { key: columnKey, role: "columnheader", scope: "col" }, columnKey)), h("th", { role: "columnheader", scope: "col" }, "Total"))), h("tbody", {}, matrix.rowKeys.length === 0
-        ? h("tr", {}, h("td", { colspan: matrix.columnKeys.length + 2, class: "hu-virtual-table__empty" }, "No pivot data."))
-        : matrix.rowKeys.map((rowKey) => h("tr", { key: rowKey, role: "row" }, h("th", { role: "rowheader", scope: "row" }, rowKey), ...matrix.columnKeys.map((columnKey) => h("td", { key: columnKey, role: "cell" }, formatPivotValue(matrix.values.get(`${rowKey}\u0000${columnKey}`) ?? 0, props, rowKey, columnKey, aggregation))), h("td", { class: "hu-pivot-grid__total", role: "cell" }, formatPivotValue(matrix.rowTotals.get(rowKey) ?? 0, props, rowKey, "__total", aggregation))))), matrix.rowKeys.length > 0 && h("tfoot", {}, h("tr", { role: "row" }, h("th", { scope: "row" }, "Total"), ...matrix.columnKeys.map((columnKey) => h("td", { key: columnKey, class: "hu-pivot-grid__total" }, formatPivotValue(matrix.columnTotals.get(columnKey) ?? 0, props, "__total", columnKey, aggregation))), h("td", { class: "hu-pivot-grid__total" }, formatPivotValue(matrix.grandTotal, props, "__total", "__total", aggregation)))))));
+    const groupHeaderId = getPivotFieldId(props.rowFields[0], "group");
+    const totalHeaderId = "hu-pivot-total";
+    return h("section", rootProps(props, "hu-pivot-grid", {
+        "aria-label": props["aria-label"] ?? props.title ?? "Pivot grid",
+        "aria-labelledby": props["aria-labelledby"]
+    }), h("div", { class: "hu-pivot-grid__header" }, h("div", {}, h("div", { class: "hu-pivot-grid__title" }, props.title ?? "Pivot grid"), h("div", { class: "hu-pivot-grid__meta" }, `${props.rows.length} rows · ${aggregation}`)), h("div", { class: "hu-pivot-grid__meta", "aria-live": "polite" }, `${matrix.rowKeys.length} groups · ${matrix.columnKeys.length} columns`)), h("div", {
+        class: cn("hu-pivot-grid__table", props.density && props.density !== "default" && `hu-pivot-grid__table--${props.density}`, props.stickyHeader && "hu-pivot-grid__table--sticky"),
+        role: "region",
+        "aria-label": props.resultsLabel ?? "Pivot results",
+        "aria-labelledby": props.resultsLabelledBy
+    }, h("table", { role: "table" }, props.caption && h("caption", { class: "hu-pivot-grid__caption" }, props.caption), h("thead", {}, h("tr", { role: "row" }, h("th", {
+        id: groupHeaderId,
+        role: "columnheader",
+        scope: "col",
+        "aria-label": props.rowFields.map((field) => field.headerLabel).filter(Boolean).join(" / ") || undefined
+    }, props.rowFields.map((field) => field.header).join(" / ") || "Group"), ...matrix.columnKeys.map((columnKey) => h("th", { key: columnKey, id: getPivotColumnId(columnKey), role: "columnheader", scope: "col" }, columnKey)), h("th", { id: totalHeaderId, role: "columnheader", scope: "col" }, "Total"))), h("tbody", {}, matrix.rowKeys.length === 0
+        ? h("tr", {}, h("td", { colspan: matrix.columnKeys.length + 2, class: "hu-virtual-table__empty" }, props.emptyMessage ?? "No pivot data."))
+        : matrix.rowKeys.map((rowKey) => h("tr", { key: rowKey, role: "row" }, h("th", { id: getPivotRowId(rowKey), role: "rowheader", scope: "row", headers: groupHeaderId }, rowKey), ...matrix.columnKeys.map((columnKey) => h("td", { key: columnKey, role: "cell", headers: `${getPivotRowId(rowKey)} ${getPivotColumnId(columnKey)}` }, formatPivotValue(matrix.values.get(`${rowKey}\u0000${columnKey}`) ?? 0, props, rowKey, columnKey, aggregation))), h("td", { class: "hu-pivot-grid__total", role: "cell", headers: `${getPivotRowId(rowKey)} ${totalHeaderId}` }, formatPivotValue(matrix.rowTotals.get(rowKey) ?? 0, props, rowKey, "__total", aggregation))))), matrix.rowKeys.length > 0 && h("tfoot", {}, h("tr", { role: "row" }, h("th", { id: "hu-pivot-footer-total", role: "rowheader", scope: "row", headers: groupHeaderId }, "Total"), ...matrix.columnKeys.map((columnKey) => h("td", { key: columnKey, class: "hu-pivot-grid__total", role: "cell", headers: `hu-pivot-footer-total ${getPivotColumnId(columnKey)}` }, formatPivotValue(matrix.columnTotals.get(columnKey) ?? 0, props, "__total", columnKey, aggregation))), h("td", { class: "hu-pivot-grid__total", role: "cell", headers: `hu-pivot-footer-total ${totalHeaderId}` }, formatPivotValue(matrix.grandTotal, props, "__total", "__total", aggregation)))))));
 }
 function toCssUnit(value) {
     return typeof value === "number" ? `${value}px` : value;
 }
+function getColumnId(column) {
+    return column.id ?? `hu-virtual-col-${column.key}`;
+}
+function getImportColumnId(column) {
+    return column.id ?? `hu-import-col-${column.key}`;
+}
+function getPivotFieldId(field, fallback) {
+    return field?.id ?? `hu-pivot-${fallback}`;
+}
+function getPivotColumnId(value) {
+    return `hu-pivot-col-${toDomId(value)}`;
+}
+function getPivotRowId(value) {
+    return `hu-pivot-row-${toDomId(value)}`;
+}
+function toDomId(value) {
+    return value.toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "value";
+}
 function getSelectedExportColumns(columns, selectedColumns) {
     if (selectedColumns) {
         const selected = new Set(selectedColumns);