@ecoma-io/loom 0.4.0 → 0.5.0

package/dist/packages/primitives/data-grid/src/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","names":[],"sources":["../../../../../packages/primitives/data-grid/src/DataGrid.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataGridLabels } from \"@ecoma-io/loom-labels\";\nimport type { TableAlign, TableDensity } from \"@ecoma-io/loom-table\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const DATA_GRID_LABELS: DataGridLabels = {\n  region: \"Data grid\",\n  selectAll: \"Select all rows\",\n  selectRow: \"Select row\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** One column: what it reads, whether it sorts, how it aligns. */\nexport interface DataGridColumn {\n  /** The row field this column renders; also the sort key. */\n  key: string;\n  /** The column header's text. */\n  header: string;\n  /** Renders the header as the tri-state sort control. */\n  sortable?: boolean;\n  /** Text alignment; numeric columns want `\"right\"`. */\n  align?: TableAlign;\n  /** Any CSS width, e.g. `\"6rem\"` — pins the column in the scrolling grid. */\n  width?: string;\n}\n\n/** Sort direction, compact union — `aria-sort` takes the full ARIA tokens. */\nexport type DataGridSort = \"asc\" | \"desc\";\n\n/** Which column is sorted, and which way. Absent: nothing is. */\nexport type DataGridSortState = { key: string; direction: DataGridSort } | undefined;\n\n/**\n * DataGrid — the WAI-ARIA grids pattern: `Table`'s visual language with the\n * interactive half added. Table reads, DataGrid acts — rows are selectable\n * (`v-model:selectedRowKeys`, select-all with a real `aria-checked=\"mixed\"`),\n * sortable headers carry `aria-sort`, and a row answers Enter/double-click\n * through `@row-activate`.\n *\n * The keyboard model is the APG one, and it is the reason this is not a\n * Table variant: the cell matrix holds exactly one Tab stop (roving\n * tabindex), so Tab enters and leaves the grid once while the arrow keys,\n * Home/End and their Ctrl variants move focus cell to cell. Focus — not\n * the pointer — is what a grid sells.\n *\n * There is no `aria-rowcount` on purpose: every row is in the DOM, so the\n * count is the DOM's to state. The attribute earns its place the day the\n * grid virtualizes, not before — an asserted virtual size over a real\n * partial DOM is the lie `aria-rowcount` exists to correct.\n */\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport Checkbox from \"@ecoma-io/loom-checkbox\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { headAlignClass, nextSort, tableRowVariants } from \"@ecoma-io/loom-table\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The columns, left to right. */\n    columns: DataGridColumn[];\n    /** The row objects; a column renders `row[column.key]`. */\n    rows: Array<Record<string, unknown>>;\n    /** The row field whose value keys selection. Defaults to `\"id\"`. */\n    rowKey?: string;\n    /** Adds the selection column: per-row checkboxes plus select-all with its mixed state. */\n    selectable?: boolean;\n    /**\n     * The selected row keys when the host owns the selection through\n     * `v-model:selectedRowKeys`; omit the binding and the grid owns the\n     * state itself while still reporting every change.\n     */\n    selectedRowKeys?: Array<string | number>;\n    /**\n     * The active sort when the host owns it through `v-model:sort`; omit it\n     * and the headers cycle on their own while still reporting each change.\n     */\n    sort?: DataGridSortState;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** The grid's accessible name, read before a screen reader enters it. */\n    caption?: string;\n    /** Names what the grid says on its own account, as any subset of `DataGridLabels`. */\n    labels?: LabelOverrides<DataGridLabels>;\n  }>(),\n  { rowKey: \"id\", selectable: false, density: \"comfortable\" },\n);\n\nconst emit = defineEmits<{\n  \"update:selectedRowKeys\": [value: Array<string | number>];\n  \"update:sort\": [value: DataGridSortState];\n  \"sort-change\": [value: DataGridSortState];\n  rowActivate: [row: Record<string, unknown>];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"dataGrid\", DATA_GRID_LABELS, () => props.labels);\n\n// ---------- selection ----------\n\nconst innerSelected = ref<Array<string | number>>([]);\nconst selected = computed(() => props.selectedRowKeys ?? innerSelected.value);\n\nconst keyOf = (row: Record<string, unknown>): string | number =>\n  row[props.rowKey] as string | number;\nconst isSelected = (row: Record<string, unknown>): boolean => selected.value.includes(keyOf(row));\n\nfunction setSelection(next: Array<string | number>): void {\n  innerSelected.value = next;\n  emit(\"update:selectedRowKeys\", next);\n}\n\nconst allSelected = computed(\n  () => props.rows.length > 0 && props.rows.every((row) => isSelected(row)),\n);\nconst someSelected = computed(\n  () => !allSelected.value && props.rows.some((row) => isSelected(row)),\n);\n\n// Checkbox's own third state: reka renders it as `aria-checked=\"mixed\"`,\n// which is the select-all announcement the grid owes — a dash glyph alone is\n// shape-only semantics.\nconst selectAllState = computed<\"indeterminate\" | boolean>(() =>\n  allSelected.value ? true : someSelected.value ? \"indeterminate\" : false,\n);\n\nfunction toggleAll(): void {\n  setSelection(allSelected.value ? [] : props.rows.map((row) => keyOf(row)));\n}\n\nfunction toggleRow(row: Record<string, unknown>): void {\n  setSelection(\n    isSelected(row)\n      ? selected.value.filter((key) => key !== keyOf(row))\n      : [...selected.value, keyOf(row)],\n  );\n}\n\nconst innerSort = ref<DataGridSortState>(undefined);\nconst currentSort = computed<DataGridSortState>(() => props.sort ?? innerSort.value);\n\nconst sortDirectionOf = (col: DataGridColumn): DataGridSort | undefined =>\n  currentSort.value?.key === col.key ? currentSort.value.direction : undefined;\n\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst ariaSortOf = (col: DataGridColumn): (typeof ARIA_SORT)[DataGridSort] | undefined => {\n  const direction = sortDirectionOf(col);\n  return direction ? ARIA_SORT[direction] : undefined;\n};\nconst sortIconOf = (col: DataGridColumn) => {\n  const direction = sortDirectionOf(col);\n  return direction ? SORT_ICON[direction] : ChevronsUpDown;\n};\nconst sortWordsOf = (col: DataGridColumn): string => {\n  const direction = sortDirectionOf(col);\n  return direction === \"asc\"\n    ? text.value.sortedAscending\n    : direction === \"desc\"\n      ? text.value.sortedDescending\n      : text.value.sort;\n};\n\nfunction toggleSort(col: DataGridColumn): void {\n  const direction = nextSort(sortDirectionOf(col));\n  const next: DataGridSortState = direction ? { key: col.key, direction } : undefined;\n  innerSort.value = next;\n  // `sort-change` for hosts following the sketch's `@sort-change`,\n  // `update:sort` so `v-model:sort` works the way every other control's does.\n  emit(\"update:sort\", next);\n  emit(\"sort-change\", next);\n}\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));\n\n// Rows: -1 is the header row, 0.. are body rows. Columns count the selection\n// column first when `selectable`. Exactly one cell carries tabindex 0 — the\n// active cell — so Tab enters and leaves the grid once; everything else is\n// -1 and reachable only through the matrix moves.\nconst activeCell = ref({ row: props.rows.length > 0 ? 0 : -1, col: 0 });\nconst bodyColumnIndex = (i: number): number => (props.selectable ? i + 1 : i);\nconst isCellActive = (row: number, col: number): boolean =>\n  activeCell.value.row === row && activeCell.value.col === col;\n\n// Rows arriving or leaving can strand the active cell outside the matrix. The\n// floor is -1, not 0: the header row is a valid roving stop too, and a floor\n// of 0 would push the header onto a body row that does not exist once every\n// row is gone, leaving the grid with no Tab stop at all.\nwatch(\n  () => [props.rows.length, props.selectable, props.columns.length] as const,\n  () => {\n    const previous = activeCell.value;\n    const next = {\n      row: Math.min(Math.max(previous.row, -1), Math.max(props.rows.length - 1, -1)),\n      col: Math.min(previous.col, colCount.value - 1),\n    };\n    activeCell.value = next;\n    // A shrink that moves the active cell strands real focus too: the focused\n    // cell unmounts, focus falls to <body>, and onFocusin — which only hears\n    // focus arriving inside the grid — never learns. The clamped cell is\n    // within the surviving matrix, so it exists to take focus back.\n    if (\n      (previous.row !== next.row || previous.col !== next.col) &&\n      table.value?.contains(document.activeElement)\n    ) {\n      focusCell(next.row, next.col);\n    }\n  },\n);\n\nconst table = ref<HTMLElement | null>(null);\nconst region = ref<HTMLElement | null>(null);\n\nfunction focusCell(row: number, col: number): void {\n  activeCell.value = { row, col };\n  table.value?.querySelector<HTMLElement>(`[data-r='${row}'][data-c='${col}']`)?.focus();\n}\n\nfunction moveTo(row: number, col: number): void {\n  focusCell(\n    // The floor is -1, not 0, for the same reason the watcher below uses it:\n    // with no body row, 0 would clamp onto a row that does not exist and\n    // strand the grid with no Tab stop (the header is `data-r=\"-1\"`).\n    Math.min(Math.max(row, -1), Math.max(props.rows.length - 1, -1)),\n    Math.min(Math.max(col, 0), colCount.value - 1),\n  );\n}\n\n// Focus can also arrive outside the keymap — a pointer tap lands directly on\n// a cell — and the roving Tab stop has to follow whoever actually holds it.\nfunction onFocusin(event: FocusEvent): void {\n  const cell = (event.target as Element).closest(\"[data-r]\");\n  if (cell) {\n    activeCell.value = {\n      row: Number(cell.getAttribute(\"data-r\")),\n      col: Number(cell.getAttribute(\"data-c\")),\n    };\n  }\n}\n\nfunction activateCell(row: number, col: number): void {\n  if (row < 0) {\n    const col_ = props.columns[col - (props.selectable ? 1 : 0)];\n    if (col_?.sortable) toggleSort(col_);\n    return;\n  }\n  const target = props.rows[row];\n  if (target) emit(\"rowActivate\", target);\n}\n\nfunction spaceCell(row: number, col: number): void {\n  if (!props.selectable) return;\n  if (row < 0) {\n    if (col === 0) toggleAll();\n    return;\n  }\n  const target = props.rows[row];\n  if (target) toggleRow(target);\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const cell = (event.target as Element).closest(\"[data-r]\");\n  if (!cell) return;\n  const row = Number(cell.getAttribute(\"data-r\"));\n  const col = Number(cell.getAttribute(\"data-c\"));\n  const lastRow = Math.max(props.rows.length - 1, 0);\n  const lastCol = colCount.value - 1;\n\n  switch (event.key) {\n    case \"ArrowRight\":\n      moveTo(row, col + 1);\n      break;\n    case \"ArrowLeft\":\n      moveTo(row, col - 1);\n      break;\n    case \"ArrowDown\":\n      moveTo(row + 1, col);\n      break;\n    case \"ArrowUp\":\n      moveTo(row - 1, col);\n      break;\n    case \"Home\":\n      event.ctrlKey || event.metaKey ? moveTo(0, 0) : moveTo(row, 0);\n      break;\n    case \"End\":\n      event.ctrlKey || event.metaKey ? moveTo(lastRow, lastCol) : moveTo(row, lastCol);\n      break;\n    case \"Enter\":\n      activateCell(row, col);\n      break;\n    case \" \":\n      spaceCell(row, col);\n      break;\n    default:\n      return;\n  }\n  event.preventDefault();\n}\n\n// ---------- scroll region (Table's mechanism, verbatim in spirit) ----------\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed.\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself, for the reason Table's\n       wrapper documents: a wide grid overflows its region instead of\n       stretching the page. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <!-- Roving focus ring, not focus-visible: the moves that matter here are\n         programmatic (arrow keys), and a ring that only answers\n         focus-visible hides the one thing a grid must never hide — which\n         cell holds focus. -->\n    <!-- tabindex=\"-1\" marks the interactive grid focusable without adding a\n         Tab stop: the cells own the single roving stop, the container is\n         only a target for programmatic/assistive-tech focus. -->\n    <table\n      ref=\"table\"\n      role=\"grid\"\n      tabindex=\"-1\"\n      :data-density=\"density\"\n      class=\"w-full border-collapse text-left text-sm focus:outline-none [&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap [&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground [&[data-density='comfortable']_td]:py-3 [&[data-density='compact']_td]:py-1.5 [&[data-density='compact']_th]:py-1.5 [&_tbody_tr:last-child_td]:border-b-0\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <thead>\n        <!-- Inside role=\"grid\" the native tr→row mapping does not apply; the\n             plugin cannot see the ancestor role, so the explicit role is load-bearing. -->\n        <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n        <tr role=\"row\">\n          <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n          <th\n            v-if=\"selectable\"\n            scope=\"col\"\n            role=\"columnheader\"\n            data-r=\"-1\"\n            :data-c=\"0\"\n            :tabindex=\"isCellActive(-1, 0) ? 0 : -1\"\n            class=\"focus:outline-2 focus:-outline-offset-2 focus:outline-ring\"\n          >\n            <Checkbox\n              :model-value=\"selectAllState\"\n              :aria-label=\"text.selectAll\"\n              tabindex=\"-1\"\n              @update:model-value=\"toggleAll()\"\n            />\n          </th>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n          <th\n            v-for=\"(col, i) in columns\"\n            :key=\"col.key\"\n            scope=\"col\"\n            role=\"columnheader\"\n            :aria-sort=\"ariaSortOf(col)\"\n            :data-r=\"-1\"\n            :data-c=\"bodyColumnIndex(i)\"\n            :tabindex=\"isCellActive(-1, bodyColumnIndex(i)) ? 0 : -1\"\n            :style=\"col.width ? { width: col.width } : undefined\"\n            :class=\"\n              cn(\n                headAlignClass(col.align),\n                'focus:outline-2 focus:-outline-offset-2 focus:outline-ring',\n              )\n            \"\n          >\n            <!-- The sort button is reachable only through its header cell:\n                 a second Tab stop inside the matrix would break the\n                 enter-once contract. Enter on the cell sorts instead. -->\n            <button\n              v-if=\"col.sortable\"\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n              @click=\"toggleSort(col)\"\n            >\n              <span class=\"inline-flex items-center gap-1 font-semibold\">{{ col.header }}</span>\n              <component\n                :is=\"sortIconOf(col)\"\n                class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n                aria-hidden=\"true\"\n              />\n              <span class=\"sr-only\">{{ sortWordsOf(col) }}</span>\n            </button>\n            <template v-else>{{ col.header }}</template>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n        <tr\n          v-for=\"(row, r) in rows\"\n          :key=\"String(keyOf(row))\"\n          role=\"row\"\n          :aria-selected=\"selectable ? isSelected(row) : undefined\"\n          :class=\"\n            cn(\n              tableRowVariants({\n                state: selectable ? (isSelected(row) ? 'selected' : 'interactive') : 'none',\n              }),\n            )\n          \"\n          @dblclick=\"emit('rowActivate', row)\"\n        >\n          <td\n            v-if=\"selectable\"\n            role=\"gridcell\"\n            :data-r=\"r\"\n            :data-c=\"0\"\n            :tabindex=\"isCellActive(r, 0) ? 0 : -1\"\n            class=\"focus:outline-2 focus:-outline-offset-2 focus:outline-ring\"\n          >\n            <Checkbox\n              :model-value=\"isSelected(row)\"\n              :aria-label=\"text.selectRow\"\n              tabindex=\"-1\"\n              @update:model-value=\"toggleRow(row)\"\n            />\n          </td>\n          <td\n            v-for=\"(col, i) in columns\"\n            :key=\"col.key\"\n            role=\"gridcell\"\n            :data-r=\"r\"\n            :data-c=\"bodyColumnIndex(i)\"\n            :tabindex=\"isCellActive(r, bodyColumnIndex(i)) ? 0 : -1\"\n            :class=\"\n              cn(\n                headAlignClass(col.align),\n                'focus:outline-2 focus:-outline-offset-2 focus:outline-ring',\n              )\n            \"\n          >\n            <!-- @slot One cell's content — a Badge, a RowActions cluster —\n                 with `row`, `column` and `value` scoped in. -->\n            <slot name=\"cell\" :row=\"row\" :column=\"col\" :value=\"row[col.key]\">\n              {{ row[col.key] ?? \"\" }}\n            </slot>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/data-grid/src/DataGrid.vue.d.ts

@@ -0,0 +1,128 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { DataGridLabels } from "../../../labels/src/index";
+import type { TableAlign, TableDensity } from "../../table/src/index";
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it,
+ * and exported so a host can build a partial vocabulary against the real
+ * thing rather than a transcription of it.
+ */
+export declare const DATA_GRID_LABELS: DataGridLabels;
+/** One column: what it reads, whether it sorts, how it aligns. */
+export interface DataGridColumn {
+    /** The row field this column renders; also the sort key. */
+    key: string;
+    /** The column header's text. */
+    header: string;
+    /** Renders the header as the tri-state sort control. */
+    sortable?: boolean;
+    /** Text alignment; numeric columns want `"right"`. */
+    align?: TableAlign;
+    /** Any CSS width, e.g. `"6rem"` — pins the column in the scrolling grid. */
+    width?: string;
+}
+/** Sort direction, compact union — `aria-sort` takes the full ARIA tokens. */
+export type DataGridSort = "asc" | "desc";
+/** Which column is sorted, and which way. Absent: nothing is. */
+export type DataGridSortState = {
+    key: string;
+    direction: DataGridSort;
+} | undefined;
+/**
+ * DataGrid — the WAI-ARIA grids pattern: `Table`'s visual language with the
+ * interactive half added. Table reads, DataGrid acts — rows are selectable
+ * (`v-model:selectedRowKeys`, select-all with a real `aria-checked="mixed"`),
+ * sortable headers carry `aria-sort`, and a row answers Enter/double-click
+ * through `@row-activate`.
+ *
+ * The keyboard model is the APG one, and it is the reason this is not a
+ * Table variant: the cell matrix holds exactly one Tab stop (roving
+ * tabindex), so Tab enters and leaves the grid once while the arrow keys,
+ * Home/End and their Ctrl variants move focus cell to cell. Focus — not
+ * the pointer — is what a grid sells.
+ *
+ * There is no `aria-rowcount` on purpose: every row is in the DOM, so the
+ * count is the DOM's to state. The attribute earns its place the day the
+ * grid virtualizes, not before — an asserted virtual size over a real
+ * partial DOM is the lie `aria-rowcount` exists to correct.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The columns, left to right. */
+    columns: DataGridColumn[];
+    /** The row objects; a column renders `row[column.key]`. */
+    rows: Array<Record<string, unknown>>;
+    /** The row field whose value keys selection. Defaults to `"id"`. */
+    rowKey?: string;
+    /** Adds the selection column: per-row checkboxes plus select-all with its mixed state. */
+    selectable?: boolean;
+    /**
+     * The selected row keys when the host owns the selection through
+     * `v-model:selectedRowKeys`; omit the binding and the grid owns the
+     * state itself while still reporting every change.
+     */
+    selectedRowKeys?: Array<string | number>;
+    /**
+     * The active sort when the host owns it through `v-model:sort`; omit it
+     * and the headers cycle on their own while still reporting each change.
+     */
+    sort?: DataGridSortState;
+    /** Row padding. Compact suits dense application chrome. */
+    density?: TableDensity;
+    /** The grid's accessible name, read before a screen reader enters it. */
+    caption?: string;
+    /** Names what the grid says on its own account, as any subset of `DataGridLabels`. */
+    labels?: LabelOverrides<DataGridLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sort": (value: DataGridSortState) => any;
+    "update:selectedRowKeys": (value: (string | number)[]) => any;
+    "sort-change": (value: DataGridSortState) => any;
+    rowActivate: (row: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The columns, left to right. */
+    columns: DataGridColumn[];
+    /** The row objects; a column renders `row[column.key]`. */
+    rows: Array<Record<string, unknown>>;
+    /** The row field whose value keys selection. Defaults to `"id"`. */
+    rowKey?: string;
+    /** Adds the selection column: per-row checkboxes plus select-all with its mixed state. */
+    selectable?: boolean;
+    /**
+     * The selected row keys when the host owns the selection through
+     * `v-model:selectedRowKeys`; omit the binding and the grid owns the
+     * state itself while still reporting every change.
+     */
+    selectedRowKeys?: Array<string | number>;
+    /**
+     * The active sort when the host owns it through `v-model:sort`; omit it
+     * and the headers cycle on their own while still reporting each change.
+     */
+    sort?: DataGridSortState;
+    /** Row padding. Compact suits dense application chrome. */
+    density?: TableDensity;
+    /** The grid's accessible name, read before a screen reader enters it. */
+    caption?: string;
+    /** Names what the grid says on its own account, as any subset of `DataGridLabels`. */
+    labels?: LabelOverrides<DataGridLabels>;
+}> & Readonly<{
+    "onUpdate:sort"?: (value: DataGridSortState) => any;
+    "onUpdate:selectedRowKeys"?: (value: (string | number)[]) => any;
+    "onSort-change"?: (value: DataGridSortState) => any;
+    onRowActivate?: (row: Record<string, unknown>) => any;
+}>, {
+    density: TableDensity;
+    rowKey: string;
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    cell?: (props: {
+        row: Record<string, unknown>;
+        column: DataGridColumn;
+        value: unknown;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=DataGrid.vue.d.ts.map

package/dist/packages/primitives/data-grid/src/DataGrid.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,347 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { tableRowVariants } from "../../table/src/TableRow.vue_vue_type_script_setup_true_lang.js";
+import { headAlignClass, nextSort } from "../../table/src/TableHead.vue_vue_type_script_setup_true_lang.js";
+import "../../table/src/index.js";
+import Checkbox_default from "../../checkbox/src/Checkbox.js";
+import "../../checkbox/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch } from "vue";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "@lucide/vue";
+//#region packages/primitives/data-grid/src/DataGrid.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "tabindex"];
+var _hoisted_2 = ["data-density"];
+var _hoisted_3 = { role: "row" };
+var _hoisted_4 = ["tabindex"];
+var _hoisted_5 = [
+	"aria-sort",
+	"data-c",
+	"tabindex"
+];
+var _hoisted_6 = ["onClick"];
+var _hoisted_7 = { class: "inline-flex items-center gap-1 font-semibold" };
+var _hoisted_8 = { class: "sr-only" };
+var _hoisted_9 = ["aria-selected", "onDblclick"];
+var _hoisted_10 = ["data-r", "tabindex"];
+var _hoisted_11 = [
+	"data-r",
+	"data-c",
+	"tabindex"
+];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it,
+* and exported so a host can build a partial vocabulary against the real
+* thing rather than a transcription of it.
+*/
+var DATA_GRID_LABELS = {
+	region: "Data grid",
+	selectAll: "Select all rows",
+	selectRow: "Select row",
+	sortedAscending: "Sorted ascending",
+	sortedDescending: "Sorted descending",
+	sort: "Sort"
+};
+/**
+* DataGrid — the WAI-ARIA grids pattern: `Table`'s visual language with the
+* interactive half added. Table reads, DataGrid acts — rows are selectable
+* (`v-model:selectedRowKeys`, select-all with a real `aria-checked="mixed"`),
+* sortable headers carry `aria-sort`, and a row answers Enter/double-click
+* through `@row-activate`.
+*
+* The keyboard model is the APG one, and it is the reason this is not a
+* Table variant: the cell matrix holds exactly one Tab stop (roving
+* tabindex), so Tab enters and leaves the grid once while the arrow keys,
+* Home/End and their Ctrl variants move focus cell to cell. Focus — not
+* the pointer — is what a grid sells.
+*
+* There is no `aria-rowcount` on purpose: every row is in the DOM, so the
+* count is the DOM's to state. The attribute earns its place the day the
+* grid virtualizes, not before — an asserted virtual size over a real
+* partial DOM is the lie `aria-rowcount` exists to correct.
+*/
+var DataGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "DataGrid",
+	props: {
+		columns: {},
+		rows: {},
+		rowKey: { default: "id" },
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		selectedRowKeys: {},
+		sort: {},
+		density: { default: "comfortable" },
+		caption: {},
+		labels: {}
+	},
+	emits: [
+		"update:selectedRowKeys",
+		"update:sort",
+		"sort-change",
+		"rowActivate"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("dataGrid", DATA_GRID_LABELS, () => props.labels);
+		const innerSelected = ref([]);
+		const selected = computed(() => props.selectedRowKeys ?? innerSelected.value);
+		const keyOf = (row) => row[props.rowKey];
+		const isSelected = (row) => selected.value.includes(keyOf(row));
+		function setSelection(next) {
+			innerSelected.value = next;
+			emit("update:selectedRowKeys", next);
+		}
+		const allSelected = computed(() => props.rows.length > 0 && props.rows.every((row) => isSelected(row)));
+		const someSelected = computed(() => !allSelected.value && props.rows.some((row) => isSelected(row)));
+		const selectAllState = computed(() => allSelected.value ? true : someSelected.value ? "indeterminate" : false);
+		function toggleAll() {
+			setSelection(allSelected.value ? [] : props.rows.map((row) => keyOf(row)));
+		}
+		function toggleRow(row) {
+			setSelection(isSelected(row) ? selected.value.filter((key) => key !== keyOf(row)) : [...selected.value, keyOf(row)]);
+		}
+		const innerSort = ref(void 0);
+		const currentSort = computed(() => props.sort ?? innerSort.value);
+		const sortDirectionOf = (col) => currentSort.value?.key === col.key ? currentSort.value.direction : void 0;
+		const ARIA_SORT = {
+			asc: "ascending",
+			desc: "descending"
+		};
+		const SORT_ICON = {
+			asc: ChevronUp,
+			desc: ChevronDown
+		};
+		const ariaSortOf = (col) => {
+			const direction = sortDirectionOf(col);
+			return direction ? ARIA_SORT[direction] : void 0;
+		};
+		const sortIconOf = (col) => {
+			const direction = sortDirectionOf(col);
+			return direction ? SORT_ICON[direction] : ChevronsUpDown;
+		};
+		const sortWordsOf = (col) => {
+			const direction = sortDirectionOf(col);
+			return direction === "asc" ? text.value.sortedAscending : direction === "desc" ? text.value.sortedDescending : text.value.sort;
+		};
+		function toggleSort(col) {
+			const direction = nextSort(sortDirectionOf(col));
+			const next = direction ? {
+				key: col.key,
+				direction
+			} : void 0;
+			innerSort.value = next;
+			emit("update:sort", next);
+			emit("sort-change", next);
+		}
+		const colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+		const activeCell = ref({
+			row: props.rows.length > 0 ? 0 : -1,
+			col: 0
+		});
+		const bodyColumnIndex = (i) => props.selectable ? i + 1 : i;
+		const isCellActive = (row, col) => activeCell.value.row === row && activeCell.value.col === col;
+		watch(() => [
+			props.rows.length,
+			props.selectable,
+			props.columns.length
+		], () => {
+			const previous = activeCell.value;
+			const next = {
+				row: Math.min(Math.max(previous.row, -1), Math.max(props.rows.length - 1, -1)),
+				col: Math.min(previous.col, colCount.value - 1)
+			};
+			activeCell.value = next;
+			if ((previous.row !== next.row || previous.col !== next.col) && table.value?.contains(document.activeElement)) focusCell(next.row, next.col);
+		});
+		const table = ref(null);
+		const region = ref(null);
+		function focusCell(row, col) {
+			activeCell.value = {
+				row,
+				col
+			};
+			table.value?.querySelector(`[data-r='${row}'][data-c='${col}']`)?.focus();
+		}
+		function moveTo(row, col) {
+			focusCell(Math.min(Math.max(row, -1), Math.max(props.rows.length - 1, -1)), Math.min(Math.max(col, 0), colCount.value - 1));
+		}
+		function onFocusin(event) {
+			const cell = event.target.closest("[data-r]");
+			if (cell) activeCell.value = {
+				row: Number(cell.getAttribute("data-r")),
+				col: Number(cell.getAttribute("data-c"))
+			};
+		}
+		function activateCell(row, col) {
+			if (row < 0) {
+				const col_ = props.columns[col - (props.selectable ? 1 : 0)];
+				if (col_?.sortable) toggleSort(col_);
+				return;
+			}
+			const target = props.rows[row];
+			if (target) emit("rowActivate", target);
+		}
+		function spaceCell(row, col) {
+			if (!props.selectable) return;
+			if (row < 0) {
+				if (col === 0) toggleAll();
+				return;
+			}
+			const target = props.rows[row];
+			if (target) toggleRow(target);
+		}
+		function onKeydown(event) {
+			const cell = event.target.closest("[data-r]");
+			if (!cell) return;
+			const row = Number(cell.getAttribute("data-r"));
+			const col = Number(cell.getAttribute("data-c"));
+			const lastRow = Math.max(props.rows.length - 1, 0);
+			const lastCol = colCount.value - 1;
+			switch (event.key) {
+				case "ArrowRight":
+					moveTo(row, col + 1);
+					break;
+				case "ArrowLeft":
+					moveTo(row, col - 1);
+					break;
+				case "ArrowDown":
+					moveTo(row + 1, col);
+					break;
+				case "ArrowUp":
+					moveTo(row - 1, col);
+					break;
+				case "Home":
+					event.ctrlKey || event.metaKey ? moveTo(0, 0) : moveTo(row, 0);
+					break;
+				case "End":
+					event.ctrlKey || event.metaKey ? moveTo(lastRow, lastCol) : moveTo(row, lastCol);
+					break;
+				case "Enter":
+					activateCell(row, col);
+					break;
+				case " ":
+					spaceCell(row, col);
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		}
+		const scrollable = ref(false);
+		function measure() {
+			const el = region.value;
+			if (el) scrollable.value = el.scrollWidth > el.clientWidth;
+		}
+		let observer;
+		onMounted(() => {
+			measure();
+			observer = new ResizeObserver(measure);
+			if (table.value) observer.observe(table.value);
+			window.addEventListener("resize", measure, { passive: true });
+		});
+		onBeforeUnmount(() => {
+			observer?.disconnect();
+			window.removeEventListener("resize", measure);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "region",
+				ref: region,
+				role: "region",
+				"aria-label": __props.caption ?? unref(text).region,
+				tabindex: scrollable.value ? 0 : void 0,
+				class: "w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo"
+			}, [createElementVNode("table", {
+				ref_key: "table",
+				ref: table,
+				role: "grid",
+				tabindex: "-1",
+				"data-density": __props.density,
+				class: "w-full border-collapse text-left text-sm focus:outline-none [&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap [&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground [&[data-density='comfortable']_td]:py-3 [&[data-density='compact']_td]:py-1.5 [&[data-density='compact']_th]:py-1.5 [&_tbody_tr:last-child_td]:border-b-0",
+				onKeydown,
+				onFocusin
+			}, [createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3, [__props.selectable ? (openBlock(), createElementBlock("th", {
+				key: 0,
+				scope: "col",
+				role: "columnheader",
+				"data-r": "-1",
+				"data-c": 0,
+				tabindex: isCellActive(-1, 0) ? 0 : -1,
+				class: "focus:outline-2 focus:-outline-offset-2 focus:outline-ring"
+			}, [createVNode(unref(Checkbox_default), {
+				"model-value": selectAllState.value,
+				"aria-label": unref(text).selectAll,
+				tabindex: "-1",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => toggleAll())
+			}, null, 8, ["model-value", "aria-label"])], 8, _hoisted_4)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col, i) => {
+				return openBlock(), createElementBlock("th", {
+					key: col.key,
+					scope: "col",
+					role: "columnheader",
+					"aria-sort": ariaSortOf(col),
+					"data-r": -1,
+					"data-c": bodyColumnIndex(i),
+					tabindex: isCellActive(-1, bodyColumnIndex(i)) ? 0 : -1,
+					style: normalizeStyle(col.width ? { width: col.width } : void 0),
+					class: normalizeClass(unref(cn)(unref(headAlignClass)(col.align), "focus:outline-2 focus:-outline-offset-2 focus:outline-ring"))
+				}, [col.sortable ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					class: "inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo",
+					onClick: ($event) => toggleSort(col)
+				}, [
+					createElementVNode("span", _hoisted_7, toDisplayString(col.header), 1),
+					(openBlock(), createBlock(resolveDynamicComponent(sortIconOf(col)), {
+						class: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+						"aria-hidden": "true"
+					})),
+					createElementVNode("span", _hoisted_8, toDisplayString(sortWordsOf(col)), 1)
+				], 8, _hoisted_6)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(col.header), 1)], 64))], 14, _hoisted_5);
+			}), 128))])]), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, r) => {
+				return openBlock(), createElementBlock("tr", {
+					key: String(keyOf(row)),
+					role: "row",
+					"aria-selected": __props.selectable ? isSelected(row) : void 0,
+					class: normalizeClass(unref(cn)(unref(tableRowVariants)({ state: __props.selectable ? isSelected(row) ? "selected" : "interactive" : "none" }))),
+					onDblclick: ($event) => emit("rowActivate", row)
+				}, [__props.selectable ? (openBlock(), createElementBlock("td", {
+					key: 0,
+					role: "gridcell",
+					"data-r": r,
+					"data-c": 0,
+					tabindex: isCellActive(r, 0) ? 0 : -1,
+					class: "focus:outline-2 focus:-outline-offset-2 focus:outline-ring"
+				}, [createVNode(unref(Checkbox_default), {
+					"model-value": isSelected(row),
+					"aria-label": unref(text).selectRow,
+					tabindex: "-1",
+					"onUpdate:modelValue": ($event) => toggleRow(row)
+				}, null, 8, [
+					"model-value",
+					"aria-label",
+					"onUpdate:modelValue"
+				])], 8, _hoisted_10)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col, i) => {
+					return openBlock(), createElementBlock("td", {
+						key: col.key,
+						role: "gridcell",
+						"data-r": r,
+						"data-c": bodyColumnIndex(i),
+						tabindex: isCellActive(r, bodyColumnIndex(i)) ? 0 : -1,
+						class: normalizeClass(unref(cn)(unref(headAlignClass)(col.align), "focus:outline-2 focus:-outline-offset-2 focus:outline-ring"))
+					}, [renderSlot(_ctx.$slots, "cell", {
+						row,
+						column: col,
+						value: row[col.key]
+					}, () => [createTextVNode(toDisplayString(row[col.key] ?? ""), 1)])], 10, _hoisted_11);
+				}), 128))], 42, _hoisted_9);
+			}), 128))])], 40, _hoisted_2)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { DATA_GRID_LABELS, DataGrid_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataGrid.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/data-grid/src/DataGrid.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/data-grid/src/DataGrid.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataGridLabels } from \"@ecoma-io/loom-labels\";\nimport type { TableAlign, TableDensity } from \"@ecoma-io/loom-table\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const DATA_GRID_LABELS: DataGridLabels = {\n  region: \"Data grid\",\n  selectAll: \"Select all rows\",\n  selectRow: \"Select row\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** One column: what it reads, whether it sorts, how it aligns. */\nexport interface DataGridColumn {\n  /** The row field this column renders; also the sort key. */\n  key: string;\n  /** The column header's text. */\n  header: string;\n  /** Renders the header as the tri-state sort control. */\n  sortable?: boolean;\n  /** Text alignment; numeric columns want `\"right\"`. */\n  align?: TableAlign;\n  /** Any CSS width, e.g. `\"6rem\"` — pins the column in the scrolling grid. */\n  width?: string;\n}\n\n/** Sort direction, compact union — `aria-sort` takes the full ARIA tokens. */\nexport type DataGridSort = \"asc\" | \"desc\";\n\n/** Which column is sorted, and which way. Absent: nothing is. */\nexport type DataGridSortState = { key: string; direction: DataGridSort } | undefined;\n\n/**\n * DataGrid — the WAI-ARIA grids pattern: `Table`'s visual language with the\n * interactive half added. Table reads, DataGrid acts — rows are selectable\n * (`v-model:selectedRowKeys`, select-all with a real `aria-checked=\"mixed\"`),\n * sortable headers carry `aria-sort`, and a row answers Enter/double-click\n * through `@row-activate`.\n *\n * The keyboard model is the APG one, and it is the reason this is not a\n * Table variant: the cell matrix holds exactly one Tab stop (roving\n * tabindex), so Tab enters and leaves the grid once while the arrow keys,\n * Home/End and their Ctrl variants move focus cell to cell. Focus — not\n * the pointer — is what a grid sells.\n *\n * There is no `aria-rowcount` on purpose: every row is in the DOM, so the\n * count is the DOM's to state. The attribute earns its place the day the\n * grid virtualizes, not before — an asserted virtual size over a real\n * partial DOM is the lie `aria-rowcount` exists to correct.\n */\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport Checkbox from \"@ecoma-io/loom-checkbox\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { headAlignClass, nextSort, tableRowVariants } from \"@ecoma-io/loom-table\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The columns, left to right. */\n    columns: DataGridColumn[];\n    /** The row objects; a column renders `row[column.key]`. */\n    rows: Array<Record<string, unknown>>;\n    /** The row field whose value keys selection. Defaults to `\"id\"`. */\n    rowKey?: string;\n    /** Adds the selection column: per-row checkboxes plus select-all with its mixed state. */\n    selectable?: boolean;\n    /**\n     * The selected row keys when the host owns the selection through\n     * `v-model:selectedRowKeys`; omit the binding and the grid owns the\n     * state itself while still reporting every change.\n     */\n    selectedRowKeys?: Array<string | number>;\n    /**\n     * The active sort when the host owns it through `v-model:sort`; omit it\n     * and the headers cycle on their own while still reporting each change.\n     */\n    sort?: DataGridSortState;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** The grid's accessible name, read before a screen reader enters it. */\n    caption?: string;\n    /** Names what the grid says on its own account, as any subset of `DataGridLabels`. */\n    labels?: LabelOverrides<DataGridLabels>;\n  }>(),\n  { rowKey: \"id\", selectable: false, density: \"comfortable\" },\n);\n\nconst emit = defineEmits<{\n  \"update:selectedRowKeys\": [value: Array<string | number>];\n  \"update:sort\": [value: DataGridSortState];\n  \"sort-change\": [value: DataGridSortState];\n  rowActivate: [row: Record<string, unknown>];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"dataGrid\", DATA_GRID_LABELS, () => props.labels);\n\n// ---------- selection ----------\n\nconst innerSelected = ref<Array<string | number>>([]);\nconst selected = computed(() => props.selectedRowKeys ?? innerSelected.value);\n\nconst keyOf = (row: Record<string, unknown>): string | number =>\n  row[props.rowKey] as string | number;\nconst isSelected = (row: Record<string, unknown>): boolean => selected.value.includes(keyOf(row));\n\nfunction setSelection(next: Array<string | number>): void {\n  innerSelected.value = next;\n  emit(\"update:selectedRowKeys\", next);\n}\n\nconst allSelected = computed(\n  () => props.rows.length > 0 && props.rows.every((row) => isSelected(row)),\n);\nconst someSelected = computed(\n  () => !allSelected.value && props.rows.some((row) => isSelected(row)),\n);\n\n// Checkbox's own third state: reka renders it as `aria-checked=\"mixed\"`,\n// which is the select-all announcement the grid owes — a dash glyph alone is\n// shape-only semantics.\nconst selectAllState = computed<\"indeterminate\" | boolean>(() =>\n  allSelected.value ? true : someSelected.value ? \"indeterminate\" : false,\n);\n\nfunction toggleAll(): void {\n  setSelection(allSelected.value ? [] : props.rows.map((row) => keyOf(row)));\n}\n\nfunction toggleRow(row: Record<string, unknown>): void {\n  setSelection(\n    isSelected(row)\n      ? selected.value.filter((key) => key !== keyOf(row))\n      : [...selected.value, keyOf(row)],\n  );\n}\n\nconst innerSort = ref<DataGridSortState>(undefined);\nconst currentSort = computed<DataGridSortState>(() => props.sort ?? innerSort.value);\n\nconst sortDirectionOf = (col: DataGridColumn): DataGridSort | undefined =>\n  currentSort.value?.key === col.key ? currentSort.value.direction : undefined;\n\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst ariaSortOf = (col: DataGridColumn): (typeof ARIA_SORT)[DataGridSort] | undefined => {\n  const direction = sortDirectionOf(col);\n  return direction ? ARIA_SORT[direction] : undefined;\n};\nconst sortIconOf = (col: DataGridColumn) => {\n  const direction = sortDirectionOf(col);\n  return direction ? SORT_ICON[direction] : ChevronsUpDown;\n};\nconst sortWordsOf = (col: DataGridColumn): string => {\n  const direction = sortDirectionOf(col);\n  return direction === \"asc\"\n    ? text.value.sortedAscending\n    : direction === \"desc\"\n      ? text.value.sortedDescending\n      : text.value.sort;\n};\n\nfunction toggleSort(col: DataGridColumn): void {\n  const direction = nextSort(sortDirectionOf(col));\n  const next: DataGridSortState = direction ? { key: col.key, direction } : undefined;\n  innerSort.value = next;\n  // `sort-change` for hosts following the sketch's `@sort-change`,\n  // `update:sort` so `v-model:sort` works the way every other control's does.\n  emit(\"update:sort\", next);\n  emit(\"sort-change\", next);\n}\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));\n\n// Rows: -1 is the header row, 0.. are body rows. Columns count the selection\n// column first when `selectable`. Exactly one cell carries tabindex 0 — the\n// active cell — so Tab enters and leaves the grid once; everything else is\n// -1 and reachable only through the matrix moves.\nconst activeCell = ref({ row: props.rows.length > 0 ? 0 : -1, col: 0 });\nconst bodyColumnIndex = (i: number): number => (props.selectable ? i + 1 : i);\nconst isCellActive = (row: number, col: number): boolean =>\n  activeCell.value.row === row && activeCell.value.col === col;\n\n// Rows arriving or leaving can strand the active cell outside the matrix. The\n// floor is -1, not 0: the header row is a valid roving stop too, and a floor\n// of 0 would push the header onto a body row that does not exist once every\n// row is gone, leaving the grid with no Tab stop at all.\nwatch(\n  () => [props.rows.length, props.selectable, props.columns.length] as const,\n  () => {\n    const previous = activeCell.value;\n    const next = {\n      row: Math.min(Math.max(previous.row, -1), Math.max(props.rows.length - 1, -1)),\n      col: Math.min(previous.col, colCount.value - 1),\n    };\n    activeCell.value = next;\n    // A shrink that moves the active cell strands real focus too: the focused\n    // cell unmounts, focus falls to <body>, and onFocusin — which only hears\n    // focus arriving inside the grid — never learns. The clamped cell is\n    // within the surviving matrix, so it exists to take focus back.\n    if (\n      (previous.row !== next.row || previous.col !== next.col) &&\n      table.value?.contains(document.activeElement)\n    ) {\n      focusCell(next.row, next.col);\n    }\n  },\n);\n\nconst table = ref<HTMLElement | null>(null);\nconst region = ref<HTMLElement | null>(null);\n\nfunction focusCell(row: number, col: number): void {\n  activeCell.value = { row, col };\n  table.value?.querySelector<HTMLElement>(`[data-r='${row}'][data-c='${col}']`)?.focus();\n}\n\nfunction moveTo(row: number, col: number): void {\n  focusCell(\n    // The floor is -1, not 0, for the same reason the watcher below uses it:\n    // with no body row, 0 would clamp onto a row that does not exist and\n    // strand the grid with no Tab stop (the header is `data-r=\"-1\"`).\n    Math.min(Math.max(row, -1), Math.max(props.rows.length - 1, -1)),\n    Math.min(Math.max(col, 0), colCount.value - 1),\n  );\n}\n\n// Focus can also arrive outside the keymap — a pointer tap lands directly on\n// a cell — and the roving Tab stop has to follow whoever actually holds it.\nfunction onFocusin(event: FocusEvent): void {\n  const cell = (event.target as Element).closest(\"[data-r]\");\n  if (cell) {\n    activeCell.value = {\n      row: Number(cell.getAttribute(\"data-r\")),\n      col: Number(cell.getAttribute(\"data-c\")),\n    };\n  }\n}\n\nfunction activateCell(row: number, col: number): void {\n  if (row < 0) {\n    const col_ = props.columns[col - (props.selectable ? 1 : 0)];\n    if (col_?.sortable) toggleSort(col_);\n    return;\n  }\n  const target = props.rows[row];\n  if (target) emit(\"rowActivate\", target);\n}\n\nfunction spaceCell(row: number, col: number): void {\n  if (!props.selectable) return;\n  if (row < 0) {\n    if (col === 0) toggleAll();\n    return;\n  }\n  const target = props.rows[row];\n  if (target) toggleRow(target);\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const cell = (event.target as Element).closest(\"[data-r]\");\n  if (!cell) return;\n  const row = Number(cell.getAttribute(\"data-r\"));\n  const col = Number(cell.getAttribute(\"data-c\"));\n  const lastRow = Math.max(props.rows.length - 1, 0);\n  const lastCol = colCount.value - 1;\n\n  switch (event.key) {\n    case \"ArrowRight\":\n      moveTo(row, col + 1);\n      break;\n    case \"ArrowLeft\":\n      moveTo(row, col - 1);\n      break;\n    case \"ArrowDown\":\n      moveTo(row + 1, col);\n      break;\n    case \"ArrowUp\":\n      moveTo(row - 1, col);\n      break;\n    case \"Home\":\n      event.ctrlKey || event.metaKey ? moveTo(0, 0) : moveTo(row, 0);\n      break;\n    case \"End\":\n      event.ctrlKey || event.metaKey ? moveTo(lastRow, lastCol) : moveTo(row, lastCol);\n      break;\n    case \"Enter\":\n      activateCell(row, col);\n      break;\n    case \" \":\n      spaceCell(row, col);\n      break;\n    default:\n      return;\n  }\n  event.preventDefault();\n}\n\n// ---------- scroll region (Table's mechanism, verbatim in spirit) ----------\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed.\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself, for the reason Table's\n       wrapper documents: a wide grid overflows its region instead of\n       stretching the page. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <!-- Roving focus ring, not focus-visible: the moves that matter here are\n         programmatic (arrow keys), and a ring that only answers\n         focus-visible hides the one thing a grid must never hide — which\n         cell holds focus. -->\n    <!-- tabindex=\"-1\" marks the interactive grid focusable without adding a\n         Tab stop: the cells own the single roving stop, the container is\n         only a target for programmatic/assistive-tech focus. -->\n    <table\n      ref=\"table\"\n      role=\"grid\"\n      tabindex=\"-1\"\n      :data-density=\"density\"\n      class=\"w-full border-collapse text-left text-sm focus:outline-none [&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap [&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground [&[data-density='comfortable']_td]:py-3 [&[data-density='compact']_td]:py-1.5 [&[data-density='compact']_th]:py-1.5 [&_tbody_tr:last-child_td]:border-b-0\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <thead>\n        <!-- Inside role=\"grid\" the native tr→row mapping does not apply; the\n             plugin cannot see the ancestor role, so the explicit role is load-bearing. -->\n        <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n        <tr role=\"row\">\n          <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n          <th\n            v-if=\"selectable\"\n            scope=\"col\"\n            role=\"columnheader\"\n            data-r=\"-1\"\n            :data-c=\"0\"\n            :tabindex=\"isCellActive(-1, 0) ? 0 : -1\"\n            class=\"focus:outline-2 focus:-outline-offset-2 focus:outline-ring\"\n          >\n            <Checkbox\n              :model-value=\"selectAllState\"\n              :aria-label=\"text.selectAll\"\n              tabindex=\"-1\"\n              @update:model-value=\"toggleAll()\"\n            />\n          </th>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n          <th\n            v-for=\"(col, i) in columns\"\n            :key=\"col.key\"\n            scope=\"col\"\n            role=\"columnheader\"\n            :aria-sort=\"ariaSortOf(col)\"\n            :data-r=\"-1\"\n            :data-c=\"bodyColumnIndex(i)\"\n            :tabindex=\"isCellActive(-1, bodyColumnIndex(i)) ? 0 : -1\"\n            :style=\"col.width ? { width: col.width } : undefined\"\n            :class=\"\n              cn(\n                headAlignClass(col.align),\n                'focus:outline-2 focus:-outline-offset-2 focus:outline-ring',\n              )\n            \"\n          >\n            <!-- The sort button is reachable only through its header cell:\n                 a second Tab stop inside the matrix would break the\n                 enter-once contract. Enter on the cell sorts instead. -->\n            <button\n              v-if=\"col.sortable\"\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n              @click=\"toggleSort(col)\"\n            >\n              <span class=\"inline-flex items-center gap-1 font-semibold\">{{ col.header }}</span>\n              <component\n                :is=\"sortIconOf(col)\"\n                class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n                aria-hidden=\"true\"\n              />\n              <span class=\"sr-only\">{{ sortWordsOf(col) }}</span>\n            </button>\n            <template v-else>{{ col.header }}</template>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n        <tr\n          v-for=\"(row, r) in rows\"\n          :key=\"String(keyOf(row))\"\n          role=\"row\"\n          :aria-selected=\"selectable ? isSelected(row) : undefined\"\n          :class=\"\n            cn(\n              tableRowVariants({\n                state: selectable ? (isSelected(row) ? 'selected' : 'interactive') : 'none',\n              }),\n            )\n          \"\n          @dblclick=\"emit('rowActivate', row)\"\n        >\n          <td\n            v-if=\"selectable\"\n            role=\"gridcell\"\n            :data-r=\"r\"\n            :data-c=\"0\"\n            :tabindex=\"isCellActive(r, 0) ? 0 : -1\"\n            class=\"focus:outline-2 focus:-outline-offset-2 focus:outline-ring\"\n          >\n            <Checkbox\n              :model-value=\"isSelected(row)\"\n              :aria-label=\"text.selectRow\"\n              tabindex=\"-1\"\n              @update:model-value=\"toggleRow(row)\"\n            />\n          </td>\n          <td\n            v-for=\"(col, i) in columns\"\n            :key=\"col.key\"\n            role=\"gridcell\"\n            :data-r=\"r\"\n            :data-c=\"bodyColumnIndex(i)\"\n            :tabindex=\"isCellActive(r, bodyColumnIndex(i)) ? 0 : -1\"\n            :class=\"\n              cn(\n                headAlignClass(col.align),\n                'focus:outline-2 focus:-outline-offset-2 focus:outline-ring',\n              )\n            \"\n          >\n            <!-- @slot One cell's content — a Badge, a RowActions cluster —\n                 with `row`, `column` and `value` scoped in. -->\n            <slot name=\"cell\" :row=\"row\" :column=\"col\" :value=\"row[col.key]\">\n              {{ row[col.key] ?? \"\" }}\n            </slot>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/data-grid/src/index.d.ts

@@ -0,0 +1,4 @@
+export { DATA_GRID_LABELS, default } from "./DataGrid.vue";
+export type { DataGridColumn, DataGridSort, DataGridSortState } from "./DataGrid.vue";
+export type { DataGridLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/data-grid/src/index.js

@@ -0,0 +1,3 @@
+import { DATA_GRID_LABELS } from "./DataGrid.vue_vue_type_script_setup_true_lang.js";
+import DataGrid_default from "./DataGrid.js";
+export { DATA_GRID_LABELS, DataGrid_default as default };