argus-table 0.2.1 → 0.3.0

package/dist/custom-elements.json

@@ -89,7 +89,7 @@
         },
         {
           "kind": "class",
-          "description": "One column of the parent `<argus-table>`, written as markup instead of an entry in\nits `columns` property. It is data only and renders nothing.\n\nOnly direct children of the table count, in document order. A non-empty `columns`\nproperty wins over the children. Adding, removing, moving or changing a column\nupdates the table; sizes, order and sorting are kept by `column-id`.\n\nA `<template>` child is the content of every cell in the column (static: the same\nfor each row). Set the `cell` property for content that depends on the row.",
+          "description": "One column of the parent `<argus-table>`, written as markup instead of an entry in\nits `columns` property. It is data only and renders nothing.\n\nOnly direct children of the table count, in document order. A non-empty `columns`\nproperty wins over the children. Adding, removing, moving or changing a column\nupdates the table; sizes, order and sorting are kept by `column-id`.\n\nA `<template>` child is the content of every cell in the column (static: the same\nfor each row). Set the `cell` property for content that depends on the row.\n\nThe standard `hidden` attribute (or property) hides the column, like `hidden` in\n`columns`; the table's `columnVisibility` overrides it.",
           "name": "ArgusColumn",
           "members": [
             {
@@ -120,6 +120,15 @@
               "description": "How to read the cell value: a property path such as `customer.name`, or (as a\nproperty) a function of the row and its index.",
               "attribute": "accessor"
             },
+            {
+              "kind": "field",
+              "name": "formula",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A spreadsheet formula computed per row from other columns, such as\n`[price] * [quantity]`. Needs the `formulas()` plugin from `@argus-table/formulas`.",
+              "attribute": "formula"
+            },
             {
               "kind": "field",
               "name": "cell",
@@ -161,9 +170,27 @@
               "type": {
                 "text": "ColumnPin | undefined"
               },
-              "description": "Pins the column to the `start` or `end` side.",
+              "description": "Pins the column to the `start` or `end` side. The table's `columnPinning` overrides it.",
               "attribute": "pin"
             },
+            {
+              "kind": "field",
+              "name": "pinnable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can pin or unpin the column. Default: `true`; `pinnable=\"false\"` turns it off.",
+              "attribute": "pinnable"
+            },
+            {
+              "kind": "field",
+              "name": "hideable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can hide the column. Default: `true`; `hideable=\"false\"` turns it off.",
+              "attribute": "hideable"
+            },
             {
               "kind": "field",
               "name": "align",
@@ -173,6 +200,15 @@
               "description": "Text alignment: `start`, `center` or `end`. Default: `start`.",
               "attribute": "align"
             },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Wraps the cell text onto more lines instead of cutting it off. Default:\n`false`. With a fixed row height, text that doesn't fit is clipped.",
+              "attribute": "wrap"
+            },
             {
               "kind": "field",
               "name": "sortable",
@@ -200,6 +236,31 @@
               "description": "Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off.",
               "attribute": "reorderable"
             },
+            {
+              "kind": "field",
+              "name": "filter",
+              "type": {
+                "text": "FilterKind | undefined"
+              },
+              "description": "The kind of filter users can set, e.g. from the column menu: `text`, `number`,\n`date` or `set`. Unset: users can't filter the column.",
+              "attribute": "filter"
+            },
+            {
+              "kind": "field",
+              "name": "filterFn",
+              "type": {
+                "text": "ColumnDef<T>['filterFn'] | undefined"
+              },
+              "description": "Replaces the built-in matching for this column's filter. Property only."
+            },
+            {
+              "kind": "field",
+              "name": "filterOptions",
+              "type": {
+                "text": "readonly FilterValue[] | undefined"
+              },
+              "description": "The values a `set` filter offers; needed with a `dataSource`. Property only."
+            },
             {
               "kind": "method",
               "name": "toColumnDef",
@@ -212,6 +273,9 @@
             }
           ],
           "attributes": [
+            {
+              "name": "hidden"
+            },
             {
               "name": "column-id",
               "type": {
@@ -237,6 +301,14 @@
               "description": "How to read the cell value: a property path such as `customer.name`, or (as a\nproperty) a function of the row and its index.",
               "fieldName": "accessor"
             },
+            {
+              "name": "formula",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A spreadsheet formula computed per row from other columns, such as\n`[price] * [quantity]`. Needs the `formulas()` plugin from `@argus-table/formulas`.",
+              "fieldName": "formula"
+            },
             {
               "name": "width",
               "type": {
@@ -266,9 +338,25 @@
               "type": {
                 "text": "ColumnPin | undefined"
               },
-              "description": "Pins the column to the `start` or `end` side.",
+              "description": "Pins the column to the `start` or `end` side. The table's `columnPinning` overrides it.",
               "fieldName": "pin"
             },
+            {
+              "name": "pinnable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can pin or unpin the column. Default: `true`; `pinnable=\"false\"` turns it off.",
+              "fieldName": "pinnable"
+            },
+            {
+              "name": "hideable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can hide the column. Default: `true`; `hideable=\"false\"` turns it off.",
+              "fieldName": "hideable"
+            },
             {
               "name": "align",
               "type": {
@@ -277,6 +365,14 @@
               "description": "Text alignment: `start`, `center` or `end`. Default: `start`.",
               "fieldName": "align"
             },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Wraps the cell text onto more lines instead of cutting it off. Default:\n`false`. With a fixed row height, text that doesn't fit is clipped.",
+              "fieldName": "wrap"
+            },
             {
               "name": "sortable",
               "type": {
@@ -300,6 +396,14 @@
               },
               "description": "Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off.",
               "fieldName": "reorderable"
+            },
+            {
+              "name": "filter",
+              "type": {
+                "text": "FilterKind | undefined"
+              },
+              "description": "The kind of filter users can set, e.g. from the column menu: `text`, `number`,\n`date` or `set`. Unset: users can't filter the column.",
+              "fieldName": "filter"
             }
           ],
           "superclass": {
@@ -399,13 +503,17 @@
               "default": "0"
             },
             {
-              "description": "Height of a row. Default per density: 32px, 40px, 52px.",
+              "description": "Height of a row. Default per density: 32px, 40px, 52px. With `rowHeight: 'auto'`: the header's height and the least a body or pinned row is.",
               "name": "--argus-row-height"
             },
             {
               "description": "Inline padding of cells. Default per density: 8px, 12px, 16px.",
               "name": "--argus-cell-padding-inline"
             },
+            {
+              "description": "Block padding of body and pinned-row cells with `rowHeight: 'auto'`, where content sits at the top of the cell. Default: what centres one line of text in `--argus-row-height`.",
+              "name": "--argus-cell-padding-block"
+            },
             {
               "description": "Background of odd rows. Default: no stripes.",
               "name": "--argus-row-stripe-bg"
@@ -423,6 +531,11 @@
               "name": "--argus-focus-ring",
               "default": "2px solid Highlight"
             },
+            {
+              "description": "Colour of the mark in the header of a filtered column.",
+              "name": "--argus-filter-indicator-color",
+              "default": "currentColor"
+            },
             {
               "description": "Colour of the line that marks where a dragged column would land.",
               "name": "--argus-drop-indicator-color",
@@ -442,7 +555,7 @@
               "name": "--argus-skeleton-bg"
             },
             {
-              "description": "Reserved for row selection, which comes after v0.1. The table doesn't read it yet.",
+              "description": "Background of selected rows, pinned columns included. Default: the system highlight colour, mixed into `--argus-bg`. It wins over `--argus-row-hover-bg`.",
               "name": "--argus-row-selected-bg"
             }
           ],
@@ -467,6 +580,14 @@
               "description": "The header of the sorted column. The direction is in `aria-sort`.",
               "name": "header-cell-sorted"
             },
+            {
+              "description": "Added to `header-cell` on the headers of filtered columns.",
+              "name": "header-cell-filtered"
+            },
+            {
+              "description": "The mark in the header of a filtered column, after the sort indicator.",
+              "name": "filter-indicator"
+            },
             {
               "description": "Added to `header-cell` on the header being dragged to a new position.",
               "name": "header-cell-dragging"
@@ -499,6 +620,22 @@
               "description": "Body rows whose `dataSource` page hasn't loaded yet, or failed.",
               "name": "row-loading"
             },
+            {
+              "description": "Body rows whose id is in `selection`.",
+              "name": "row-selected"
+            },
+            {
+              "description": "Added to `cell` in the checkbox column (`selectionCheckboxes`), pinned rows included.",
+              "name": "cell-selection"
+            },
+            {
+              "description": "Added to `header-cell` on the checkbox column's header.",
+              "name": "header-cell-selection"
+            },
+            {
+              "description": "The checkboxes of the checkbox column: one per selectable row, and the select-all one in the header (`multi` mode).",
+              "name": "selection-checkbox"
+            },
             {
               "description": "Every row from `pinnedRows`, on either side. Also has `row`, but no `row-even`/`row-odd`.",
               "name": "row-pinned"
@@ -599,9 +736,9 @@
               "kind": "field",
               "name": "rowHeight",
               "type": {
-                "text": "number | undefined"
+                "text": "number | 'auto' | undefined"
               },
-              "description": "Row height in px. Unset: the density (or the `--argus-row-height` token) decides.",
+              "description": "Row height in px, or `'auto'` to fit each row to its content (`row-height=\"auto\"`).\nUnset: the density (or the `--argus-row-height` token) decides. With\n`'auto'`, that height is the header's and the least a body or pinned row is;\nrows grow to fit wrapped text (`wrap` columns) and taller content, and cell\ncontent sits at the top. Rows are measured as they render: a row's height\ncounts the columns rendered (see `virtualizeColumns`), and rows not seen yet\ncount as one line. Give images a size, so rows don't move when they load.",
               "attribute": "row-height"
             },
             {
@@ -624,6 +761,16 @@
               "description": "Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6.",
               "attribute": "overscan"
             },
+            {
+              "kind": "field",
+              "name": "virtualizeColumns",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders only the scrolling columns in view (plus two on each side), for\nwide tables: a few dozen columns and more. Pinned columns, the checkbox\ncolumn and the focused cell's column always render. Off by default: then\nevery column renders, as before. Cells are placed in their grid column\nexplicitly, so page CSS that relies on their order in the DOM (`:nth-child`\non cells) doesn't apply. `autosizeColumns()` and `width: 'auto'` columns\nstill measure columns out of view: they render for the measurement.",
+              "attribute": "virtualize-columns"
+            },
             {
               "kind": "field",
               "name": "sorting",
@@ -648,6 +795,83 @@
               },
               "description": "The column order: column ids as the table shows them, e.g.\n`['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`.\nEach pin group (start-pinned, scrolling, end-pinned) takes its columns in this\norder; unknown ids are ignored and columns it doesn't list follow the listed\nones of their group. After a move it holds every column id. Uncontrolled\nuntil set, like `sorting`: once set, a move only fires `argus-column-reorder`\nwith the proposed order. `undefined` hands it back."
             },
+            {
+              "kind": "field",
+              "name": "columnPinning",
+              "type": {
+                "text": "ColumnPinningState"
+              },
+              "description": "Pins by column id, over the columns' own `pin`: `'start'` or `'end'` pins a\ncolumn, `false` unpins one whose definition pins it, e.g.\n`{ total: 'end', id: false }`. Columns it doesn't list keep their `pin`. A pinned\ncolumn joins the edge of its group nearest its place in `columnOrder`, and stops\nflexing. Uncontrolled until set, like `sorting`: once set, pinning from a plugin\nonly fires `argus-column-pin` with the proposed pins. `undefined` hands it back."
+            },
+            {
+              "kind": "field",
+              "name": "columnVisibility",
+              "type": {
+                "text": "ColumnVisibilityState"
+              },
+              "description": "Visibility by column id, over the columns' own `hidden`: `false` hides a column,\n`true` shows one defined as `hidden`, e.g. `{ email: false }`. Columns it\ndoesn't list keep their `hidden`. A hidden column isn't rendered, but sorting by\nit still works and it keeps its place in `columnOrder`. Uncontrolled until set,\nlike `sorting`: once set, hiding or showing from a plugin only fires\n`argus-column-hide` with the proposed visibility. `undefined` hands it back."
+            },
+            {
+              "kind": "field",
+              "name": "columnFilters",
+              "type": {
+                "text": "ColumnFilterState"
+              },
+              "description": "Filters by column id, e.g. `{ city: { kind: 'set', values: ['Berlin'] } }` or\n`{ total: { kind: 'number', op: 'gt', value: 100 } }`. A row shows when it passes\nevery filter and `quickFilter`. Filters on hidden columns still apply; unknown ids\nare ignored. A column's `filterFn` replaces the built-in matching. With a\n`dataSource`, the filters go to `getRows()` and the server filters. Users set\nfilters through plugins (the column menu) on columns with a `filter` kind.\nUncontrolled until set, like `sorting`: once set, a change from a plugin only\nfires `argus-column-filter` with the proposed filters. `undefined` hands it back."
+            },
+            {
+              "kind": "field",
+              "name": "quickFilter",
+              "type": {
+                "text": "string"
+              },
+              "description": "Shows only rows that contain each word of this text in one of their shown\ncolumns, ignoring case, e.g. from a search box. Values are matched as text\n(dates as `2026-11-10`); objects aren't searched. With a `dataSource`, it goes\nto `getRows()` and the server filters. `''` (the default) shows every row.",
+              "attribute": "quick-filter"
+            },
+            {
+              "kind": "field",
+              "name": "selectionMode",
+              "type": {
+                "text": "SelectionMode"
+              },
+              "default": "'none'",
+              "description": "How rows can be selected: `none` (the default), `single` or `multi`. A click\non a body row selects it; in `multi` mode Ctrl/Cmd+click toggles a row,\nShift+click selects the range from the last clicked row, and Ctrl/Cmd+A\nselects every row. Space toggles the focused row. Clicks on buttons, links\nand inputs inside cells don't select. Pinned rows, and `dataSource` rows not\nloaded yet, can't be selected.",
+              "attribute": "selection-mode"
+            },
+            {
+              "kind": "field",
+              "name": "selectionCheckboxes",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a checkbox column, pinned first at the start, while `selectionMode` is\n`single` or `multi`. A row's checkbox toggles it (Shift+click adds the range\nfrom the last row clicked); in `multi` mode the header's checkbox selects\nevery row, or clears the selection when all are selected. Space on a\nfocused checkbox cell does the same. The column isn't part of `columns`,\n`columnOrder` or `columnSizing`, and it fires no `argus-cell-click`.",
+              "attribute": "selection-checkboxes"
+            },
+            {
+              "kind": "field",
+              "name": "selection",
+              "type": {
+                "text": "SelectionState"
+              },
+              "description": "The selected rows, as row ids (from `getRowId`, or the row's index as a\nstring), e.g. `['p4', 'p7']`. Uncontrolled until set, like `sorting`: once\nset, a click only fires `argus-row-select` with the proposed ids.\n`undefined` hands it back. The table never drops ids on its own: they stay\nthrough sorting, a new `data` or reloaded pages. With a `dataSource`,\nCtrl/Cmd+A selects the loaded rows only."
+            },
+            {
+              "kind": "field",
+              "name": "contentRenderer",
+              "type": {
+                "text": "ContentRenderer | undefined"
+              },
+              "description": "Renders header and cell content the table can't render itself, such as React\nelements, Vue VNodes or Angular templates: `{ render(target, content),\nrelease(target), flush?() }`. A `header` or `cell` that returns anything other\nthan a string, a number, a DOM node or a Lit template hands it to the renderer,\nwith a target element the table keeps while the cell is reused for other rows.\nThe framework wrappers set it; set it yourself only for another framework."
+            },
+            {
+              "kind": "field",
+              "name": "plugins",
+              "type": {
+                "text": "readonly ArgusPlugin<T>[]"
+              },
+              "description": "Add-ons, such as `headerMenu()` from `@argus-table/header-menu`. Each one can\nchange the column definitions, handle keys on a focused header or cell, and\nuse the table through a small API. They run in array order. Replace the\narray to change them; an array with the same plugins in the same order\nchanges nothing. `null` or `undefined` means `[]`."
+            },
             {
               "kind": "method",
               "name": "refresh",
@@ -675,7 +899,7 @@
                   }
                 }
               ],
-              "description": "Fits columns to their content: the header, the pinned rows and the body rows\nrendered now (rows out of view aren't measured). It resizes them like a drag\nwould, so `argus-column-resize` fires for each column that changes, and with a\ncontrolled `columnSizing` nothing changes until you set it. Without `ids`, fits\nevery resizable column; columns with `resizable: false` keep their width.\nResolves once the table has re-rendered."
+              "description": "Fits columns to their content: the header, the pinned rows and the body rows\nrendered now (rows out of view aren't measured). It resizes them like a drag\nwould, so `argus-column-resize` fires for each column that changes, and with a\ncontrolled `columnSizing` nothing changes until you set it. Without `ids`, fits\nevery resizable column; columns with `resizable: false` keep their width.\nWith `virtualizeColumns`, columns out of view render for the measurement.\nResolves once the table has re-rendered."
             },
             {
               "kind": "method",
@@ -694,6 +918,34 @@
                 }
               ],
               "description": "Scrolls so that the row at `index` (in the current row order) is at the top."
+            },
+            {
+              "kind": "method",
+              "name": "getState",
+              "return": {
+                "type": {
+                  "text": "Required<TableState>"
+                }
+              },
+              "description": "The state users change, as one object of plain JSON for saving a user's\nlayout: `sorting`, `columnSizing`, `columnOrder`, `columnPinning`,\n`columnVisibility`, `columnFilters`, `selection`, `quickFilter`, and `scroll`\n(the row at the top and the horizontal offset). Controlled properties are\nincluded with the values you set. The object is a copy: changing it changes\nnothing in the table."
+            },
+            {
+              "kind": "method",
+              "name": "setState",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "TableState"
+                  }
+                }
+              ],
+              "description": "Restores state from `getState()`, for example a layout saved in\n`localStorage`. Only the keys given change; ids of columns that no longer\nexist are ignored. Properties you control are left alone (set them\nyourself), and the others stay uncontrolled. No change events fire.\n`quickFilter` is set like the property: a search box of yours shows it only\nif you read it back. `scroll` is applied after the rest, so with a\n`dataSource` the restored rows load where it points. Resolves once the table\nhas re-rendered there."
             }
           ],
           "events": [
@@ -718,6 +970,27 @@
               "description": "A column was moved: by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their own group (start-pinned, scrolling, end-pinned). `detail: { columnId, order }`: the new order, or the proposed one when `columnOrder` is controlled. Fires once per move, on drop.",
               "name": "argus-column-reorder"
             },
+            {
+              "type": {
+                "text": "CustomEvent<ColumnPinDetail>"
+              },
+              "description": "A column was pinned to a side or unpinned, through a plugin such as the column menu. `detail: { columnId, pin, pinning }`: `pin` is `'start'`, `'end'` or `false`; `pinning` is the new state, or the proposed one when `columnPinning` is controlled.",
+              "name": "argus-column-pin"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<ColumnHideDetail>"
+              },
+              "description": "A column was hidden or shown, through a plugin such as the column menu. `detail: { columnId, hidden, visibility }`: `hidden` is `true` when it was hidden; `visibility` is the new state, or the proposed one when `columnVisibility` is controlled.",
+              "name": "argus-column-hide"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<ColumnFilterDetail>"
+              },
+              "description": "A column's filter was set, changed or cleared, through a plugin such as the column menu. `detail: { columnId, filter, filters }`: `filter` is the column's new filter, or `undefined` when it was cleared; `filters` is the new state, or the proposed one when `columnFilters` is controlled.",
+              "name": "argus-column-filter"
+            },
             {
               "type": {
                 "text": "CustomEvent<CellClickDetail<T>>"
@@ -739,6 +1012,13 @@
               "description": "The visible rows changed. `detail: { start, end }` (row indices, inclusive).",
               "name": "argus-range-change"
             },
+            {
+              "type": {
+                "text": "CustomEvent<RowSelectDetail>"
+              },
+              "description": "The selected rows changed: by a click on a row (Ctrl/Cmd toggles, Shift selects a range), with Space, Shift+Arrow or Shift+PageUp/PageDown on a body cell, or with Ctrl/Cmd+A. Only with a `selectionMode`. `detail: { selection }`: the new row ids, or the proposed ones when `selection` is controlled.",
+              "name": "argus-row-select"
+            },
             {
               "type": {
                 "text": "CustomEvent<LoadErrorDetail>"
@@ -751,9 +1031,9 @@
             {
               "name": "row-height",
               "type": {
-                "text": "number | undefined"
+                "text": "number | 'auto' | undefined"
               },
-              "description": "Row height in px. Unset: the density (or the `--argus-row-height` token) decides.",
+              "description": "Row height in px, or `'auto'` to fit each row to its content (`row-height=\"auto\"`).\nUnset: the density (or the `--argus-row-height` token) decides. With\n`'auto'`, that height is the header's and the least a body or pinned row is;\nrows grow to fit wrapped text (`wrap` columns) and taller content, and cell\ncontent sits at the top. Rows are measured as they render: a row's height\ncounts the columns rendered (see `virtualizeColumns`), and rows not seen yet\ncount as one line. Give images a size, so rows don't move when they load.",
               "fieldName": "rowHeight"
             },
             {
@@ -772,6 +1052,41 @@
               },
               "description": "Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6.",
               "fieldName": "overscan"
+            },
+            {
+              "name": "virtualize-columns",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders only the scrolling columns in view (plus two on each side), for\nwide tables: a few dozen columns and more. Pinned columns, the checkbox\ncolumn and the focused cell's column always render. Off by default: then\nevery column renders, as before. Cells are placed in their grid column\nexplicitly, so page CSS that relies on their order in the DOM (`:nth-child`\non cells) doesn't apply. `autosizeColumns()` and `width: 'auto'` columns\nstill measure columns out of view: they render for the measurement.",
+              "fieldName": "virtualizeColumns"
+            },
+            {
+              "name": "quick-filter",
+              "type": {
+                "text": "string"
+              },
+              "description": "Shows only rows that contain each word of this text in one of their shown\ncolumns, ignoring case, e.g. from a search box. Values are matched as text\n(dates as `2026-11-10`); objects aren't searched. With a `dataSource`, it goes\nto `getRows()` and the server filters. `''` (the default) shows every row.",
+              "fieldName": "quickFilter"
+            },
+            {
+              "name": "selection-mode",
+              "type": {
+                "text": "SelectionMode"
+              },
+              "default": "'none'",
+              "description": "How rows can be selected: `none` (the default), `single` or `multi`. A click\non a body row selects it; in `multi` mode Ctrl/Cmd+click toggles a row,\nShift+click selects the range from the last clicked row, and Ctrl/Cmd+A\nselects every row. Space toggles the focused row. Clicks on buttons, links\nand inputs inside cells don't select. Pinned rows, and `dataSource` rows not\nloaded yet, can't be selected.",
+              "fieldName": "selectionMode"
+            },
+            {
+              "name": "selection-checkboxes",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a checkbox column, pinned first at the start, while `selectionMode` is\n`single` or `multi`. A row's checkbox toggles it (Shift+click adds the range\nfrom the last row clicked); in `multi` mode the header's checkbox selects\nevery row, or clears the selection when all are selected. Space on a\nfocused checkbox cell does the same. The column isn't part of `columns`,\n`columnOrder` or `columnSizing`, and it fires no `argus-cell-click`.",
+              "fieldName": "selectionCheckboxes"
             }
           ],
           "superclass": {
@@ -842,6 +1157,33 @@
           "default": "'argus-column-reorder'",
           "description": "Fired when a column was moved (uncontrolled), or with the proposed order (controlled)."
         },
+        {
+          "kind": "variable",
+          "name": "COLUMN_PIN",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-column-pin'",
+          "description": "Fired when a column was pinned or unpinned (uncontrolled), or with the proposed pins (controlled)."
+        },
+        {
+          "kind": "variable",
+          "name": "COLUMN_HIDE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-column-hide'",
+          "description": "Fired when a column was hidden or shown (uncontrolled), or with the proposed visibility (controlled)."
+        },
+        {
+          "kind": "variable",
+          "name": "COLUMN_FILTER",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-column-filter'",
+          "description": "Fired when a column's filter was set, changed or cleared (uncontrolled), or with the proposed filters (controlled)."
+        },
         {
           "kind": "variable",
           "name": "ROW_CLICK",
@@ -860,6 +1202,15 @@
           "default": "'argus-cell-click'",
           "description": "Fired when a body cell was clicked, before `argus-row-click`."
         },
+        {
+          "kind": "variable",
+          "name": "ROW_SELECT",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-row-select'",
+          "description": "Fired when the selected rows changed (uncontrolled), or with the proposed ids (controlled)."
+        },
         {
           "kind": "variable",
           "name": "LOAD_ERROR",
@@ -933,6 +1284,30 @@
             "module": "src/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "COLUMN_PIN",
+          "declaration": {
+            "name": "COLUMN_PIN",
+            "module": "src/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_HIDE",
+          "declaration": {
+            "name": "COLUMN_HIDE",
+            "module": "src/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_FILTER",
+          "declaration": {
+            "name": "COLUMN_FILTER",
+            "module": "src/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ROW_CLICK",
@@ -949,6 +1324,14 @@
             "module": "src/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "ROW_SELECT",
+          "declaration": {
+            "name": "ROW_SELECT",
+            "module": "src/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "LOAD_ERROR",
@@ -988,6 +1371,14 @@
             "module": "./argus-table.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "content",
+          "declaration": {
+            "name": "content",
+            "module": "./render/content-directive.js"
+          }
+        },
         {
           "kind": "js",
           "name": "CELL_CLICK",
@@ -998,44 +1389,76 @@
         },
         {
           "kind": "js",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_FILTER",
           "declaration": {
-            "name": "COLUMN_REORDER",
+            "name": "COLUMN_FILTER",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_RESIZE",
+          "name": "COLUMN_HIDE",
           "declaration": {
-            "name": "COLUMN_RESIZE",
+            "name": "COLUMN_HIDE",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "LOAD_ERROR",
+          "name": "COLUMN_PIN",
           "declaration": {
-            "name": "LOAD_ERROR",
+            "name": "COLUMN_PIN",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "RANGE_CHANGE",
+          "name": "COLUMN_REORDER",
           "declaration": {
-            "name": "RANGE_CHANGE",
+            "name": "COLUMN_REORDER",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "ROW_CLICK",
+          "name": "COLUMN_RESIZE",
+          "declaration": {
+            "name": "COLUMN_RESIZE",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LOAD_ERROR",
+          "declaration": {
+            "name": "LOAD_ERROR",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RANGE_CHANGE",
+          "declaration": {
+            "name": "RANGE_CHANGE",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ROW_CLICK",
           "declaration": {
             "name": "ROW_CLICK",
             "module": "./events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ROW_SELECT",
+          "declaration": {
+            "name": "ROW_SELECT",
+            "module": "./events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "SORT_CHANGE",
@@ -1054,6 +1477,63 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/interactive.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "INTERACTIVE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'button,input,select,textarea,a[href],label,[contenteditable],[popover],dialog'",
+          "description": "Interactive content a page may put in a header or cell. A press on it belongs\nto that content: it doesn't sort, start a column drag or select a row. A\npopover or a dialog (a menu or an editor a plugin opens from a header) counts\nas a whole, padding included."
+        },
+        {
+          "kind": "function",
+          "name": "fromInteractive",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "path",
+              "type": {
+                "text": "readonly EventTarget[]"
+              }
+            },
+            {
+              "name": "stop",
+              "type": {
+                "text": "Element"
+              }
+            }
+          ],
+          "description": "Whether an event path reaches interactive content before `stop` (the cell or\nrow the table handles the event for)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "INTERACTIVE",
+          "declaration": {
+            "name": "INTERACTIVE",
+            "module": "src/interactive.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fromInteractive",
+          "declaration": {
+            "name": "fromInteractive",
+            "module": "src/interactive.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/max-height.ts",
@@ -1146,11 +1626,57 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/plugins.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/types.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ArgusPlugin",
+          "declaration": {
+            "name": "ArgusPlugin",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CellTarget",
+          "declaration": {
+            "name": "CellTarget",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnInfo",
+          "declaration": {
+            "name": "ColumnInfo",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PluginHost",
+          "declaration": {
+            "name": "PluginHost",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ContentRenderer",
+          "declaration": {
+            "name": "ContentRenderer",
+            "module": "./render/content-directive.js"
+          }
+        },
         {
           "kind": "js",
           "name": "CellClickDetail",
@@ -1175,6 +1701,38 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnFilter",
+          "declaration": {
+            "name": "ColumnFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnFilterDetail",
+          "declaration": {
+            "name": "ColumnFilterDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnFilterState",
+          "declaration": {
+            "name": "ColumnFilterState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnHideDetail",
+          "declaration": {
+            "name": "ColumnHideDetail",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnOrderState",
@@ -1191,6 +1749,22 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnPinDetail",
+          "declaration": {
+            "name": "ColumnPinDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnPinningState",
+          "declaration": {
+            "name": "ColumnPinningState",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnReorderDetail",
@@ -1215,6 +1789,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnVisibilityState",
+          "declaration": {
+            "name": "ColumnVisibilityState",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnWidth",
@@ -1231,6 +1813,30 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "DateFilter",
+          "declaration": {
+            "name": "DateFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FilterKind",
+          "declaration": {
+            "name": "FilterKind",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FilterValue",
+          "declaration": {
+            "name": "FilterValue",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "LoadErrorDetail",
@@ -1239,6 +1845,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "NumberFilter",
+          "declaration": {
+            "name": "NumberFilter",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "PinnedRows",
@@ -1255,6 +1869,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "RangeFilterOp",
+          "declaration": {
+            "name": "RangeFilterOp",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "RowClickDetail",
@@ -1287,6 +1909,46 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "RowSelectDetail",
+          "declaration": {
+            "name": "RowSelectDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ScrollState",
+          "declaration": {
+            "name": "ScrollState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectionMode",
+          "declaration": {
+            "name": "SelectionMode",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectionState",
+          "declaration": {
+            "name": "SelectionState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SetFilter",
+          "declaration": {
+            "name": "SetFilter",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "SortChangeDetail",
@@ -1310,6 +1972,30 @@
             "name": "SortState",
             "package": "@argus-table/core"
           }
+        },
+        {
+          "kind": "js",
+          "name": "TableState",
+          "declaration": {
+            "name": "TableState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextFilter",
+          "declaration": {
+            "name": "TextFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextFilterOp",
+          "declaration": {
+            "name": "TextFilterOp",
+            "package": "@argus-table/core"
+          }
         }
       ]
     },
@@ -1373,6 +2059,24 @@
               ],
               "description": "Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns."
             },
+            {
+              "kind": "method",
+              "name": "pending",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "columns",
+                  "type": {
+                    "text": "readonly { id: string; auto: boolean }[]"
+                  }
+                }
+              ],
+              "description": "The auto columns still to be measured: never, or without loaded rows yet.\nWith `virtualizeColumns` they render out of view until they are."
+            },
             {
               "kind": "method",
               "name": "measure",
@@ -1484,6 +2188,112 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/column-window.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "COLUMN_OVERSCAN",
+          "type": {
+            "text": "number"
+          },
+          "default": "2",
+          "description": "Scrolling columns rendered beyond each side of the visible ones."
+        },
+        {
+          "kind": "class",
+          "description": "Column virtualization (`virtualizeColumns`): which columns render, and which\npool slot's DOM each one uses.\n\nOff, every column renders in visual order, its slot is its `colIndex` and\nits cells are keyed by column id: the DOM is what it always was.\n\nOn, the scrolling columns in view render, plus `COLUMN_OVERSCAN` on each\nside, and the pinned columns, the checkbox column and the columns the table\nkeeps (the active one, one being dragged, auto widths still to measure)\nwhatever the scroll position. They are pooled like rows (ADR 0001): a column\nentering the view reuses the cells, slots and content of one that left, so\nthe DOM is updated in place, and the window has one size, so the pool fills\non the first render and scrolling only reuses it (in WebKit, new slots\nwhile scrolling cut a wheel scroll short; see `steadyWindow`). DOM order is\nthen pool order: each cell is placed in its grid column explicitly, and\n`aria-colindex` carries the position, as `aria-rowindex` does for rows.",
+          "name": "ColumnWindowController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "poolSize",
+              "type": {
+                "text": "number"
+              },
+              "description": "Number of column pool slots created so far.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "compute",
+              "return": {
+                "type": {
+                  "text": "RenderedColumn<T>[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "columns",
+                  "type": {
+                    "text": "readonly Column<T>[]"
+                  }
+                },
+                {
+                  "name": "enabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "keep",
+                  "type": {
+                    "text": "Iterable<string | undefined>"
+                  }
+                }
+              ],
+              "description": "The columns to render, given the model's columns in visual order. With\n`enabled`, `keep` names columns to render wherever they are. Call once per\nrender."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "COLUMN_OVERSCAN",
+          "declaration": {
+            "name": "COLUMN_OVERSCAN",
+            "module": "src/controllers/column-window.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnWindowController",
+          "declaration": {
+            "name": "ColumnWindowController",
+            "module": "src/controllers/column-window.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/controllers/data-controller.ts",
@@ -1508,7 +2318,7 @@
         },
         {
           "kind": "class",
-          "description": "Loads `dataSource` pages for the rendered rows (infinite loading). It owns the\npage cache: a new source, sort order or row id function starts a fresh one, and\nanswers for an old cache are dropped. Requests wait until the range has been\nquiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.",
+          "description": "Loads `dataSource` pages for the rendered rows (infinite loading). It owns the\npage cache: a new source, sort order, filter or row id function starts a fresh one, and\nanswers for an old cache are dropped. Requests wait until the range has been\nquiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.",
           "name": "DataController",
           "members": [
             {
@@ -1554,7 +2364,7 @@
                   }
                 }
               ],
-              "description": "Takes the source, sort order and row id function. Any change starts a fresh\ncache; a sort or row id change keeps the row count (the rows are the same)."
+              "description": "Takes the source, sort order, filters and row id function. Any change starts a\nfresh cache; a sort or row id change keeps the row count (the rows are the same),\na new source or filter doesn't (the rows aren't)."
             },
             {
               "kind": "method",
@@ -1725,6 +2535,149 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/plugins.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Runs the table's plugins: connects them while the table is connected (in\narray order, cleaning up in reverse), chains their column transforms, and\noffers keys to them before the table handles them. A hook that throws is\nreported and skipped, so a broken plugin can't break the update.",
+          "name": "PluginController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "set",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "plugins",
+                  "type": {
+                    "text": "readonly ArgusPlugin<T>[]"
+                  }
+                }
+              ],
+              "description": "Takes a new plugin list; connects and cleans up to match it if the host is connected."
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "transform",
+              "return": {
+                "type": {
+                  "text": "readonly ColumnDef<T>[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "readonly ColumnDef<T>[]"
+                  }
+                }
+              ],
+              "description": "The plugins' `columns` transforms applied in order; the same array while nothing changed."
+            },
+            {
+              "kind": "method",
+              "name": "invalidate",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Runs the transforms again on the next `transform()`."
+            },
+            {
+              "kind": "method",
+              "name": "keydown",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "CellTarget"
+                  }
+                }
+              ],
+              "description": "Offers a key to the plugins in order; `true` once one claims it."
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "sameItems",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "readonly V[]"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "readonly V[]"
+              }
+            }
+          ],
+          "description": "Whether two lists hold the same items in the same order."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PluginController",
+          "declaration": {
+            "name": "PluginController",
+            "module": "src/controllers/plugins.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "sameItems",
+          "declaration": {
+            "name": "sameItems",
+            "module": "src/controllers/plugins.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/controllers/reorder-drag.ts",
@@ -1763,7 +2716,7 @@
               }
             }
           ],
-          "description": "The drop target for a pointer at `x`: the gap between headers nearest to it,\ndecided by each header's midpoint. `undefined` where the column would stay\nput. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left."
+          "description": "The drop target for a pointer at `x`: the gap between headers nearest to it,\ndecided by each header's midpoint. `undefined` where the column would stay\nput. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left.\nThe slots needn't be next to each other in the order: with\n`virtualizeColumns`, headers out of view aren't rendered."
         },
         {
           "kind": "function",
@@ -1879,28 +2832,98 @@
               }
             },
             {
-              "name": "direction",
-              "type": {
-                "text": "1 | -1"
-              }
+              "name": "direction",
+              "type": {
+                "text": "1 | -1"
+              }
+            },
+            {
+              "name": "onWidth",
+              "type": {
+                "text": "(width: number) => void"
+              }
+            }
+          ],
+          "description": "One pointer drag on a resize handle. The pointer is captured, so the drag keeps\nworking outside the handle, and moves are batched to one `onWidth` call per\nanimation frame (TanStack's `onChange` mode: the width updates while dragging).\n\n`direction` is 1 in LTR and -1 in RTL: the handle sits on the inline-end edge,\nso moving toward the inline end always grows the column."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "startResizeDrag",
+          "declaration": {
+            "name": "startResizeDrag",
+            "module": "src/controllers/resize-drag.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/row-measure.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Rows of different heights (`rowHeight: 'auto'`): reads the heights of the\nrendered body rows and of the pinned row groups once their content has\nrendered, and watches them for changes the table doesn't render (an image\nloading, a web font, a framework component updating), which request an\nupdate that reads them again. Pooled rows show other rows as the body\nscrolls, so every update reads every rendered row: one that now shows a row\nof the same height doesn't resize, and the observer wouldn't report it.",
+          "name": "RowMeasure",
+          "members": [
+            {
+              "kind": "field",
+              "name": "pinned",
+              "type": {
+                "text": "PinnedHeights"
+              },
+              "description": "The pinned groups' heights from the last `read()`.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "invalidate",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The next `read()` reads every row: their content may have changed size\n(new data or columns, a resize, content that grew)."
+            },
+            {
+              "kind": "method",
+              "name": "read",
+              "return": {
+                "type": {
+                  "text": "{ rows: [number, number][]; pinnedChanged: boolean }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ParentNode"
+                  }
+                }
+              ],
+              "description": "Reads the rows in `root` (the shadow root): the body rows' heights as\n`[index, px]`, and whether the pinned groups changed height. Scrolling,\nonly the pooled rows that now show another row are read."
             },
             {
-              "name": "onWidth",
-              "type": {
-                "text": "(width: number) => void"
-              }
+              "kind": "method",
+              "name": "stop",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Stops watching (fixed row heights again, or the table left the page)."
             }
-          ],
-          "description": "One pointer drag on a resize handle. The pointer is captured, so the drag keeps\nworking outside the handle, and moves are batched to one `onWidth` call per\nanimation frame (TanStack's `onChange` mode: the width updates while dragging).\n\n`direction` is 1 in LTR and -1 in RTL: the handle sits on the inline-end edge,\nso moving toward the inline end always grows the column."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "startResizeDrag",
+          "name": "RowMeasure",
           "declaration": {
-            "name": "startResizeDrag",
-            "module": "src/controllers/resize-drag.ts"
+            "name": "RowMeasure",
+            "module": "src/controllers/row-measure.ts"
           }
         }
       ]
@@ -1942,7 +2965,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Row virtualization (TanStack Virtual) plus the row pool: which rows render,\nwhere, and which pool slot's DOM each one uses. The virtualizer registers itself\nwith the host and requests updates on scroll.\n\nScroll scaling: engines limit an element's height, so a body taller than the\ncap renders at the cap and its scroll position maps linearly onto the rows\n(`ScrollScale`). The virtualizer works in logical offsets: it gets a stand-in\nfor the scroller whose `scrollTop`, `scrollHeight` and `scrollTo()` are\nlogical, and everything else passes through. Rows render relative to the\nscroll position (`start` minus the difference between the logical and the\nphysical offset). Scroll through this controller (`scrollBy`, `reveal`,\n`scrollToIndex`): physical px no longer match rows once the body is scaled.",
+          "description": "Row virtualization (TanStack Virtual) plus the row pool: which rows render,\nwhere, and which pool slot's DOM each one uses. The virtualizer registers itself\nwith the host and requests updates on scroll.\n\nScroll scaling: engines limit an element's height, so a body taller than the\ncap renders at the cap and its scroll position maps linearly onto the rows\n(`ScrollScale`). The virtualizer works in logical offsets: it gets a stand-in\nfor the scroller whose `scrollTop`, `scrollHeight` and `scrollTo()` are\nlogical, and everything else passes through. Rows render relative to the\nscroll position (`start` minus the difference between the logical and the\nphysical offset). Scroll through this controller (`scrollBy`, `reveal`,\n`scrollToIndex`): physical px no longer match rows once the body is scaled.\n\nRows of different heights (`auto`): TanStack's own measuring recomputes every\nrow below a measured one, too slow for a million rows, so in this mode the\nvirtualizer sits idle (no rows) and the controller does its part: the window\nfrom `RowSizes` (heights by index, O(log n) offsets), a scroll listener that\nre-renders when the window moves, and anchoring. Heights follow row ids, so\na sort or filter keeps them. A measured row above the top row would move\nthe rows in view: unscaled, the rows render shifted by the difference until\nscrolling stops (`#hold`); scaled, the mapping pivots at the current offset.\nNeither writes the scroll position while the user scrolls.",
           "name": "VirtualController",
           "members": [
             {
@@ -1971,6 +2994,15 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "computeWindow",
@@ -1981,6 +3013,90 @@
               },
               "description": "Computes the rendered window and updates the pool. Call once per render."
             },
+            {
+              "kind": "method",
+              "name": "measureRows",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "measured",
+                  "type": {
+                    "text": "Iterable<readonly [number, number]>"
+                  }
+                }
+              ],
+              "description": "Auto mode: records the heights of rendered body rows (`[index, px]`), read\nonce their content has rendered. Heights under the row height count as it.\nReturns whether any changed; the controller then requests the update that\nplaces the rows. Rows above the top row keep the rows in view in place."
+            },
+            {
+              "kind": "method",
+              "name": "sizeOf",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The height of the row at `index` (auto mode: measured, or the row height)."
+            },
+            {
+              "kind": "method",
+              "name": "startOf",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The logical offset of the row at `index` in the body."
+            },
+            {
+              "kind": "method",
+              "name": "pageRows",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "down",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "view",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Auto mode: how many rows a page moves from row `from`, the rows that fit in\n`view` px below it (`down`) or above it. At least one."
+            },
             {
               "kind": "field",
               "name": "poolSize",
@@ -1999,6 +3115,15 @@
               "description": "Whether the body is taller than the cap and scrolls scaled.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "topRow",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the row at the top of the body (0 before the first layout).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "scrollToIndex",
@@ -2042,6 +3167,24 @@
               ],
               "description": "Scrolls by `delta` px of rows (logical px)."
             },
+            {
+              "kind": "method",
+              "name": "scrollToEdge",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "edge",
+                  "type": {
+                    "text": "'start' | 'end'"
+                  }
+                }
+              ],
+              "description": "Scrolls to the start or the end of the body."
+            },
             {
               "kind": "method",
               "name": "reveal",
@@ -2086,28 +3229,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/base.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "baseStyles",
-          "default": "css` @layer argus-base { :host { display: block; /* A table that virtualizes needs a bounded height; set your own on the element. */ block-size: 400px; box-sizing: border-box; contain: content; color-scheme: light dark; color: var(--argus-fg, CanvasText); background: var(--argus-bg, Canvas); font: var(--argus-font, inherit); /* contain: content clips the header, rows and pinned shadows to the rounded corners. */ border: var(--argus-outline, none); border-radius: var(--argus-radius, 0); --_row-height: var(--argus-row-height, 40px); --_pad: var(--argus-cell-padding-inline, 12px); --_border: var(--argus-border-width, 1px) solid var(--argus-border-color, light-dark(#e5e7eb, #374151)); /* 1 in LTR, -1 in RTL: mirrors the pinned-edge shadow. */ --_dir: 1; } :host(:dir(rtl)) { --_dir: -1; } :host([density='compact']) { --_row-height: var(--argus-row-height, 32px); --_pad: var(--argus-cell-padding-inline, 8px); } :host([density='spacious']) { --_row-height: var(--argus-row-height, 52px); --_pad: var(--argus-cell-padding-inline, 16px); } :host([hidden]) { display: none; } [part~='table'] { position: relative; block-size: 100%; overflow: auto; overscroll-behavior: contain; /* * A cell moved to by keyboard scrolls clear of the sticky header, the pinned * rows and the pinned columns. */ scroll-padding-block-start: calc((1 + var(--_pin-top-rows, 0)) * var(--_row-height)); scroll-padding-block-end: calc(var(--_pin-bottom-rows, 0) * var(--_row-height)); scroll-padding-inline: var(--_pin-start, 0) var(--_pin-end, 0); } .row { display: grid; grid-template-columns: var(--_cols); inline-size: var(--_width); min-inline-size: 100%; block-size: var(--_row-height); box-sizing: border-box; } [part~='header'] { position: sticky; inset-block-start: 0; z-index: 2; } [part~='body'] { position: relative; contain: layout; } [part~='body'] > .row { position: absolute; inset-block-start: 0; inset-inline-start: 0; } [part~='row'] { --_row-bg: var(--argus-bg, Canvas); --_row-surface: var(--_row-bg); background: var(--_row-surface); } [part~='row-odd'] { --_row-bg: var(--argus-row-stripe-bg, var(--argus-bg, Canvas)); } [part~='row']:hover { --_row-surface: var(--argus-row-hover-bg, var(--_row-bg)); } /* * Pinned rows: a sticky row group below the header and one at the bottom of * the view. The header is one row tall. They keep their place in the flow, * so body row i still starts i rows below the top group. */ .pinned { position: sticky; z-index: 2; } .pinned[data-side='top'] { inset-block-start: var(--_row-height); } .pinned[data-side='bottom'] { inset-block-end: 0; } [part~='row-pinned'] { --_row-bg: var(--argus-pinned-row-bg, var(--argus-bg, Canvas)); } [part~='cell'], [part~='header-cell'] { display: flex; align-items: center; min-inline-size: 0; box-sizing: border-box; padding-inline: var(--_pad); overflow: hidden; white-space: nowrap; border-block-end: var(--_border); } [part~='header-cell'] { background: var(--argus-header-bg, light-dark(#f9fafb, #111827)); color: var(--argus-header-fg, inherit); font-weight: 600; } [part~='header-cell'] { position: relative; } [part~='resize-handle'] { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 8px; z-index: 1; cursor: col-resize; touch-action: none; } [part~='resize-handle']::after { content: ''; position: absolute; inset-block: 25%; inset-inline-end: 0; inline-size: 2px; background: var(--argus-resize-handle-color, light-dark(#9ca3af, #6b7280)); opacity: 0; } [part~='header-cell']:hover [part~='resize-handle']::after, [part~='header-cell']:focus-visible [part~='resize-handle']::after, [part~='resize-handle'][data-active]::after { opacity: 1; } [data-sort-col] { cursor: pointer; user-select: none; } /* A drag on a reorderable header moves the column, so its text isn't selectable. */ [data-move-col] { user-select: none; } [data-dragging], [data-dragging] [part~='header-cell'] { cursor: grabbing; } [part~='header-cell-dragging'] { opacity: 0.5; } /* The line where a dragged column would land, on the target header's logical edge. */ [part~='drop-indicator'] { position: absolute; inset-block: 0; inline-size: 2px; z-index: 2; background: var(--argus-drop-indicator-color, Highlight); pointer-events: none; } [part~='drop-indicator'][data-edge='start'] { inset-inline-start: 0; } [part~='drop-indicator'][data-edge='end'] { inset-inline-end: 0; } [part~='header-cell']:focus-visible, [part~='cell']:focus-visible { outline: var(--argus-focus-ring, 2px solid Highlight); outline-offset: -2px; } /* A small chevron after the header content; only the sorted column shows it. */ .sort-indicator { flex: none; inline-size: 0.35em; block-size: 0.35em; margin-inline-start: 0.4em; /* Physical sides on purpose: the chevron is rotated, so it must not mirror in RTL. */ border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; visibility: hidden; } [aria-sort] .sort-indicator { visibility: visible; } [aria-sort='ascending'] .sort-indicator { transform: translateY(0.1em) rotate(-135deg); } [aria-sort='descending'] .sort-indicator { transform: translateY(-0.1em) rotate(45deg); } [data-align='end'] .sort-indicator { order: -1; margin-inline: 0 0.4em; } /* * Pinned columns: sticky inside the scroll container, with offsets from the * table model. Logical insets make RTL work without extra rules. */ [data-pin] { position: sticky; z-index: 1; } [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-pin='end'] { inset-inline-end: var(--_pin-offset); } /* * Pinned body cells are sticky only while the table scrolls sideways * (data-hscroll on the scroller). At rest they are plain cells shifted by the * horizontal scroll offset, which vertical scrolling never changes: a sticky * cell per row is a compositing layer each, and Safari stutters moving them * (PinScrollController). Both place the cells at the same spot. */ [part~='row'] > [data-pin] { position: relative; inset-inline: auto; } [part~='row'] > [data-pin='start'] { transform: translateX(var(--_sx, 0px)); } [part~='row'] > [data-pin='end'] { transform: translateX(calc(var(--_sx, 0px) - var(--_dir) * var(--_max-x, 0px))); } [data-hscroll] [part~='row'] > [data-pin] { position: sticky; transform: none; } [data-hscroll] [part~='row'] > [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-hscroll] [part~='row'] > [data-pin='end'] { inset-inline-end: var(--_pin-offset); } [part~='cell-pinned'] { background: var(--_row-surface); } /* * The edge shadow, once per pinned side (.pin-shadow, beside the scroller). * --argus-pinned-shadow is written for a shadow falling toward the end side; * the start edge in RTL and the end edge in LTR mirror it. */ .pin-shadow { position: absolute; inset-block-start: 0; block-size: min(var(--_view-h, 100%), var(--_content-h, 100%)); z-index: 3; pointer-events: none; } .pin-shadow[data-side='start'] { inset-inline-start: 0; } .pin-shadow[data-side='end'] { inset-inline-end: var(--_sb-x, 0px); } .pin-shadow::after { content: ''; position: absolute; inset: 0; box-shadow: var( --argus-pinned-shadow, 4px 0 6px -4px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6)) ); transform: scaleX(var(--_dir)); } .pin-shadow[data-side='end']::after { transform: scaleX(calc(-1 * var(--_dir))); } [data-align='center'] { justify-content: center; text-align: center; } [data-align='end'] { justify-content: flex-end; text-align: end; } ::slotted(*) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } /* Fitting a column to its content: set for one synchronous measurement, never painted. */ [data-measure] { inline-size: max-content; } /* Rows of a data source that haven't loaded: a bar per cell, pulsing gently. */ [part~='skeleton'] { flex: none; inline-size: min(60%, 8em); block-size: 0.6em; border-radius: 0.3em; background: var(--argus-skeleton-bg, color-mix(in srgb, currentColor 12%, transparent)); animation: argus-skeleton-pulse 1.6s ease-in-out infinite; } [part~='skeleton-error'] { animation: none; opacity: 0.5; } @keyframes argus-skeleton-pulse { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { [part~='skeleton'] { animation: none; } } [part~='retry'] { font: inherit; color: inherit; cursor: pointer; } [part~='empty'] { display: flex; align-items: center; justify-content: center; min-block-size: calc( 100% - (1 + var(--_pin-top-rows, 0) + var(--_pin-bottom-rows, 0)) * var(--_row-height) ); padding: var(--_pad); box-sizing: border-box; } /* Measures the resolved row height in px for the virtualizer. */ .probe { position: absolute; inset-block-start: 0; inline-size: 0; block-size: var(--_row-height); visibility: hidden; pointer-events: none; } } `",
-          "description": "Base styles. Everything sits in `@layer argus-base`, and every value reads a\npublic token with a neutral fallback, so themes and page CSS always win.\n`--_*` properties are private."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "baseStyles",
-          "declaration": {
-            "name": "baseStyles",
-            "module": "src/styles/base.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/render/body.ts",
@@ -2152,9 +3273,27 @@
               "type": {
                 "text": "Loading"
               }
+            },
+            {
+              "name": "selectedAt",
+              "optional": true,
+              "type": {
+                "text": "SelectedAt"
+              }
+            },
+            {
+              "name": "checkboxes",
+              "optional": true,
+              "type": {
+                "text": "CheckboxHandlers"
+              }
+            },
+            {
+              "name": "inset",
+              "default": "false"
             }
           ],
-          "description": "The virtualized body. Rows are keyed by pool slot, so a row entering the window\nreuses the DOM of one that left (ADR 0001), and they stay in pool order: screen\nreaders get the position from `aria-rowindex`. `firstRowIndex` is the\n`aria-rowindex` of row 0: after the header and the rows pinned to the top."
+          "description": "The virtualized body. Rows are keyed by pool slot, so a row entering the window\nreuses the DOM of one that left (ADR 0001), and they stay in pool order: screen\nreaders get the position from `aria-rowindex`. `firstRowIndex` is the\n`aria-rowindex` of row 0: after the header and the rows pinned to the top.\n`inset`: rows of different heights (`rowHeight: 'auto'`) are placed with\n`inset-block-start` and render at least their measured `size`, which is on\nthe controller's px grid, so they stay flush however far down they are."
         },
         {
           "kind": "function",
@@ -2163,7 +3302,7 @@
             {
               "name": "c",
               "type": {
-                "text": "ColumnView<T, CellContent>"
+                "text": "RenderedColumn<T>"
               }
             },
             {
@@ -2223,7 +3362,7 @@
           "name": "renderLightDom",
           "return": {
             "type": {
-              "text": "void"
+              "text": "RootPart"
             }
           },
           "parameters": [
@@ -2245,6 +3384,12 @@
                 "text": "readonly WindowRow[]"
               }
             },
+            {
+              "name": "rendered",
+              "type": {
+                "text": "readonly RenderedColumn<T>[]"
+              }
+            },
             {
               "name": "renderBefore",
               "type": {
@@ -2252,7 +3397,7 @@
               }
             }
           ],
-          "description": "Renders header and cell content into the host's light DOM, as direct children\n(a slot only takes the host's own children). Keyed and ordered by pool slot,\nso recycled content updates in place instead of moving (ADR 0001). The part\nends at `renderBefore`, so the host's other children (`<argus-column>`) stay\noutside it, wherever they are added."
+          "description": "Renders header and cell content into the host's light DOM, as direct children\n(a slot only takes the host's own children). Keyed and ordered by pool slot,\nso recycled content updates in place instead of moving (ADR 0001). The part\nends at `renderBefore`, so the host's other children (`<argus-column>`) stay\noutside it, wherever they are added. `rendered` are the columns the shadow\nroot renders, with their slots and keys. What `header` and `cell` return goes\nthrough `content()`, so foreign content reaches the table's `contentRenderer`.\nReturns the part, which the table disconnects when it is disconnected."
         }
       ],
       "exports": [
@@ -2266,6 +3411,78 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/render/content-directive.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "flushContent",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "object"
+              }
+            }
+          ],
+          "description": "Calls `flush()` on the renderers that rendered or released for `host` since the last call."
+        },
+        {
+          "kind": "function",
+          "name": "isForeign",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "unknown"
+              }
+            }
+          ],
+          "description": "Whether the table renders `value` itself: strings, numbers, Lit templates and\ndirective results, DOM nodes, `nothing` and empty values, and arrays of those.\nAnything else is foreign: it goes to the `contentRenderer`."
+        },
+        {
+          "kind": "variable",
+          "name": "content"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "flushContent",
+          "declaration": {
+            "name": "flushContent",
+            "module": "src/render/content-directive.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isForeign",
+          "declaration": {
+            "name": "isForeign",
+            "module": "src/render/content-directive.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "content",
+          "declaration": {
+            "name": "content",
+            "module": "src/render/content-directive.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/render/content.ts",
@@ -2317,20 +3534,20 @@
               }
             },
             {
-              "name": "colIndex",
+              "name": "colSlot",
               "type": {
                 "text": "number"
               }
             }
           ],
-          "description": "Private slot names (ADR 0001): cells by pool slot and column, headers by\ncolumn, pinned rows by side, index and column."
+          "description": "Private slot names (ADR 0001): cells by row pool slot and column slot,\nheaders by column slot, pinned rows by side, index and column slot. A\ncolumn's slot is its `colIndex`, or its pool slot with `virtualizeColumns`."
         },
         {
           "kind": "function",
           "name": "headerSlot",
           "parameters": [
             {
-              "name": "colIndex",
+              "name": "colSlot",
               "type": {
                 "text": "number"
               }
@@ -2354,7 +3571,7 @@
               }
             },
             {
-              "name": "colIndex",
+              "name": "colSlot",
               "type": {
                 "text": "number"
               }
@@ -2373,7 +3590,7 @@
             {
               "name": "column",
               "type": {
-                "text": "Pinnable & { sorted: 'asc' | 'desc' | false }"
+                "text": "Pinnable & { sorted: 'asc' | 'desc' | false; kind: 'data' | 'selection' }"
               }
             },
             {
@@ -2403,7 +3620,7 @@
         },
         {
           "kind": "function",
-          "name": "pinStyle",
+          "name": "cellStyle",
           "return": {
             "type": {
               "text": "string | undefined"
@@ -2413,11 +3630,11 @@
             {
               "name": "column",
               "type": {
-                "text": "Pinnable & { offset: number }"
+                "text": "Pinnable & { offset: number; place: number | undefined }"
               }
             }
           ],
-          "description": "Inline style of a pinned cell: its sticky inset, from the start or the end edge."
+          "description": "Inline style of a cell or header: a pinned one's sticky inset, from the\nstart or the end edge, and with `virtualizeColumns` the grid cell it is\nplaced in. Cells are in pool order there, not in column order, so the row is\nexplicit too: auto-placement would wrap a cell that comes after one of a\nlater column into a new grid row."
         }
       ],
       "exports": [
@@ -2479,9 +3696,9 @@
         },
         {
           "kind": "js",
-          "name": "pinStyle",
+          "name": "cellStyle",
           "declaration": {
-            "name": "pinStyle",
+            "name": "cellStyle",
             "module": "src/render/content.ts"
           }
         }
@@ -2498,7 +3715,7 @@
             {
               "name": "columns",
               "type": {
-                "text": "readonly ColumnView<T, CellContent>[]"
+                "text": "readonly RenderedColumn<T>[]"
               }
             },
             {
@@ -2519,6 +3736,13 @@
               "type": {
                 "text": "HeaderDrag"
               }
+            },
+            {
+              "name": "checkAll",
+              "optional": true,
+              "type": {
+                "text": "CheckAll"
+              }
             }
           ],
           "description": "The sticky header row. Header content is slotted from the light DOM. Pinned\nheader cells use the same private `data-pin` hooks as body cells, but no parts.\nEvery header carries `data-col` (its column id) and sortable ones also\n`data-sort-col`; the element's delegated handlers read them. Headers take part\nin the grid's roving tabindex: the active one is the tab stop (`activeCol`).\nResizable columns get a `resize-handle` on the header's inline-end edge; a\ndouble-click on it fits the column to its content. It is not focusable: the\nfocused header resizes with Alt+Arrow.\n\nReorderable columns carry `data-move-col`: a drag on the header moves the\ncolumn. While one is dragged (`drag`), its header adds `header-cell-dragging`\nand the target header shows a `drop-indicator` on the edge it would land at."
@@ -2558,7 +3782,7 @@
             {
               "name": "columns",
               "type": {
-                "text": "readonly ColumnView<T, CellContent>[]"
+                "text": "readonly RenderedColumn<T>[]"
               }
             },
             {
@@ -2587,6 +3811,28 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/base.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "baseStyles",
+          "default": "css` @layer argus-base { :host { display: block; /* A table that virtualizes needs a bounded height; set your own on the element. */ block-size: 400px; box-sizing: border-box; contain: content; color-scheme: light dark; color: var(--argus-fg, CanvasText); background: var(--argus-bg, Canvas); font: var(--argus-font, inherit); /* contain: content clips the header, rows and pinned shadows to the rounded corners. */ border: var(--argus-outline, none); border-radius: var(--argus-radius, 0); --_row-height: var(--argus-row-height, 40px); --_pad: var(--argus-cell-padding-inline, 12px); --_border: var(--argus-border-width, 1px) solid var(--argus-border-color, light-dark(#e5e7eb, #374151)); /* 1 in LTR, -1 in RTL: mirrors the pinned-edge shadow. */ --_dir: 1; } :host(:dir(rtl)) { --_dir: -1; } :host([density='compact']) { --_row-height: var(--argus-row-height, 32px); --_pad: var(--argus-cell-padding-inline, 8px); } :host([density='spacious']) { --_row-height: var(--argus-row-height, 52px); --_pad: var(--argus-cell-padding-inline, 16px); } :host([hidden]) { display: none; } [part~='table'] { position: relative; block-size: 100%; overflow: auto; overscroll-behavior: contain; } /* * A cell focused or moved to by keyboard scrolls clear of the sticky header, the * pinned rows and the pinned columns: scroll margins on the cells that scroll. * Not scroll padding on the scroller: Chromium and WebKit measure the sticky * header and pinned rows against it too, so focusing one of them (a click, Tab, * an arrow key) scrolled the body. */ [part~='body'] > .row > [role='gridcell'] { scroll-margin-block: calc((1 + var(--_pin-top-rows, 0)) * var(--_row-height)) calc(var(--_pin-bottom-rows, 0) * var(--_row-height)); } [role='gridcell']:not([data-pin]), [role='columnheader']:not([data-pin]) { scroll-margin-inline: var(--_pin-start, 0) var(--_pin-end, 0); } .row { display: grid; grid-template-columns: var(--_cols); inline-size: var(--_width); min-inline-size: 100%; block-size: var(--_row-height); box-sizing: border-box; } [part~='header'] { position: sticky; inset-block-start: 0; z-index: 2; } [part~='body'] { position: relative; contain: layout; } [part~='body'] > .row { position: absolute; inset-block-start: 0; inset-inline-start: 0; } [part~='row'] { --_row-bg: var(--argus-bg, Canvas); --_row-surface: var(--_row-bg); background: var(--_row-surface); } [part~='row-odd'] { --_row-bg: var(--argus-row-stripe-bg, var(--argus-bg, Canvas)); } [part~='row']:hover { --_row-surface: var(--argus-row-hover-bg, var(--_row-bg)); } /* Selected wins over stripes and hover. */ [part~='row-selected'], [part~='row-selected']:hover { --_row-bg: var( --argus-row-selected-bg, color-mix(in srgb, Highlight 22%, var(--argus-bg, Canvas)) ); --_row-surface: var(--_row-bg); } @media (forced-colors: active) { [part~='row-selected'] { forced-color-adjust: none; --_row-bg: Highlight; color: HighlightText; } } /* * Pinned rows: a sticky row group below the header and one at the bottom of * the view. The header is one row tall. They keep their place in the flow, * so body row i still starts i rows below the top group. */ .pinned { position: sticky; z-index: 2; } .pinned[data-side='top'] { inset-block-start: var(--_row-height); } .pinned[data-side='bottom'] { inset-block-end: 0; } [part~='row-pinned'] { --_row-bg: var(--argus-pinned-row-bg, var(--argus-bg, Canvas)); } [part~='cell'], [part~='header-cell'] { display: flex; align-items: center; min-inline-size: 0; box-sizing: border-box; padding-inline: var(--_pad); overflow: hidden; white-space: nowrap; border-block-end: var(--_border); } /* The checkbox column: the checkbox centred, no padding to squeeze it. */ [part~='cell-selection'], [part~='header-cell-selection'] { justify-content: center; padding-inline: 0; } [part~='selection-checkbox'] { margin: 0; cursor: pointer; } [part~='header-cell'] { background: var(--argus-header-bg, light-dark(#f9fafb, #111827)); color: var(--argus-header-fg, inherit); font-weight: 600; } [part~='header-cell'] { position: relative; } [part~='resize-handle'] { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 8px; z-index: 1; cursor: col-resize; touch-action: none; } [part~='resize-handle']::after { content: ''; position: absolute; inset-block: 25%; inset-inline-end: 0; inline-size: 2px; background: var(--argus-resize-handle-color, light-dark(#9ca3af, #6b7280)); opacity: 0; } [part~='header-cell']:hover [part~='resize-handle']::after, [part~='header-cell']:focus-visible [part~='resize-handle']::after, [part~='resize-handle'][data-active]::after { opacity: 1; } [data-sort-col] { cursor: pointer; user-select: none; } /* A drag on a reorderable header moves the column, so its text isn't selectable. */ [data-move-col] { user-select: none; } [data-dragging], [data-dragging] [part~='header-cell'] { cursor: grabbing; } [part~='header-cell-dragging'] { opacity: 0.5; } /* The line where a dragged column would land, on the target header's logical edge. */ [part~='drop-indicator'] { position: absolute; inset-block: 0; inline-size: 2px; z-index: 2; background: var(--argus-drop-indicator-color, Highlight); pointer-events: none; } [part~='drop-indicator'][data-edge='start'] { inset-inline-start: 0; } [part~='drop-indicator'][data-edge='end'] { inset-inline-end: 0; } [part~='header-cell']:focus-visible, [part~='cell']:focus-visible { outline: var(--argus-focus-ring, 2px solid Highlight); outline-offset: -2px; } /* A small chevron after the header content; only the sorted column shows it. */ .sort-indicator { flex: none; inline-size: 0.35em; block-size: 0.35em; margin-inline-start: 0.4em; /* Physical sides on purpose: the chevron is rotated, so it must not mirror in RTL. */ border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; visibility: hidden; } [aria-sort] .sort-indicator { visibility: visible; } [aria-sort='ascending'] .sort-indicator { transform: translateY(0.1em) rotate(-135deg); } [aria-sort='descending'] .sort-indicator { transform: translateY(-0.1em) rotate(45deg); } [data-align='end'] .sort-indicator { order: -1; margin-inline: 0 0.4em; } /* A funnel: the column is filtered. */ [part~='filter-indicator'] { flex: none; inline-size: 0.7em; block-size: 0.7em; margin-inline-start: 0.35em; background: var(--argus-filter-indicator-color, currentColor); clip-path: polygon(0 0, 100% 0, 62% 48%, 62% 100%, 38% 82%, 38% 48%); } [data-align='end'] [part~='filter-indicator'] { order: -2; margin-inline: 0 0.35em; } @media (forced-colors: active) { /* Backgrounds are forced to Canvas there, which would hide the funnel. */ [part~='filter-indicator'] { forced-color-adjust: none; background: CanvasText; } } /* * Pinned columns: sticky inside the scroll container, with offsets from the * table model. Logical insets make RTL work without extra rules. */ [data-pin] { position: sticky; z-index: 1; } [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-pin='end'] { inset-inline-end: var(--_pin-offset); } /* * Pinned body cells are sticky only while the table scrolls sideways * (data-hscroll on the scroller). At rest they are plain cells shifted by the * horizontal scroll offset, which vertical scrolling never changes: a sticky * cell per row is a compositing layer each, and Safari stutters moving them * (PinScrollController). Both place the cells at the same spot. */ [part~='row'] > [data-pin] { position: relative; inset-inline: auto; } [part~='row'] > [data-pin='start'] { transform: translateX(var(--_sx, 0px)); } [part~='row'] > [data-pin='end'] { transform: translateX(calc(var(--_sx, 0px) - var(--_dir) * var(--_max-x, 0px))); } [data-hscroll] [part~='row'] > [data-pin] { position: sticky; transform: none; } [data-hscroll] [part~='row'] > [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-hscroll] [part~='row'] > [data-pin='end'] { inset-inline-end: var(--_pin-offset); } [part~='cell-pinned'] { background: var(--_row-surface); } /* * The edge shadow, once per pinned side (.pin-shadow, beside the scroller). * --argus-pinned-shadow is written for a shadow falling toward the end side; * the start edge in RTL and the end edge in LTR mirror it. */ .pin-shadow { position: absolute; inset-block-start: 0; block-size: min(var(--_view-h, 100%), var(--_content-h, 100%)); z-index: 3; pointer-events: none; } .pin-shadow[data-side='start'] { inset-inline-start: 0; } .pin-shadow[data-side='end'] { inset-inline-end: var(--_sb-x, 0px); } .pin-shadow::after { content: ''; position: absolute; inset: 0; box-shadow: var( --argus-pinned-shadow, 4px 0 6px -4px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6)) ); transform: scaleX(var(--_dir)); } .pin-shadow[data-side='end']::after { transform: scaleX(calc(-1 * var(--_dir))); } [data-align='center'] { justify-content: center; text-align: center; } [data-align='end'] { justify-content: flex-end; text-align: end; } /* * Wrapped text (ColumnDef.wrap). In a fixed-height row, text taller than the row * starts at the top (safe) and is clipped below. */ [part~='cell'][data-wrap] { white-space: normal; overflow-wrap: anywhere; align-items: center; align-items: safe center; } /* * rowHeight: 'auto'. Body and pinned rows fit their content, at least one row * tall; the header keeps its height. Content sits at the top of the cell, with * the block padding that centres one line in a one-row cell, so one-line rows * look as they do with a fixed height. The rows' heights are measured and * placed by the table: the browser's scroll anchoring would fight it. */ [data-auto-rows] { overflow-anchor: none; } [data-auto-rows] > [part~='body'] > .row, [data-auto-rows] > .pinned > .row { block-size: auto; min-block-size: var(--_row-height); grid-template-rows: minmax(var(--_row-height), auto); } /* Reading the rows' own heights: without the height each row renders at. */ [data-auto-rows] > [part~='body'] > .row[data-measure-row] { min-block-size: var(--_row-height) !important; } [data-auto-rows] [part~='cell'] { align-items: start; padding-block: var( --argus-cell-padding-block, max(0px, (var(--_row-height) - 1lh - var(--argus-border-width, 1px)) / 2) ); } /* Skeleton bars and the Retry button, centred in a one-row row as before. */ [data-auto-rows] [part~='row-loading'] > [part~='cell'] { align-items: center; padding-block: 0; } [data-auto-rows] > [part~='body'] > .row > [role='gridcell'] { scroll-margin-block: calc(var(--_row-height) + var(--_pin-top-h, 0px)) var(--_pin-bottom-h, 0px); } [data-auto-rows] > [part~='empty'] { min-block-size: calc( 100% - var(--_row-height) - var(--_pin-top-h, 0px) - var(--_pin-bottom-h, 0px) ); } ::slotted(*) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } /* Fitting a column to its content: set for one synchronous measurement, never painted. */ [data-measure] { inline-size: max-content; } /* Rows of a data source that haven't loaded: a bar per cell, pulsing gently. */ [part~='skeleton'] { flex: none; inline-size: min(60%, 8em); block-size: 0.6em; border-radius: 0.3em; background: var(--argus-skeleton-bg, color-mix(in srgb, currentColor 12%, transparent)); animation: argus-skeleton-pulse 1.6s ease-in-out infinite; } [part~='skeleton-error'] { animation: none; opacity: 0.5; } @keyframes argus-skeleton-pulse { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { [part~='skeleton'] { animation: none; } } [part~='retry'] { font: inherit; color: inherit; cursor: pointer; } [part~='empty'] { display: flex; align-items: center; justify-content: center; min-block-size: calc( 100% - (1 + var(--_pin-top-rows, 0) + var(--_pin-bottom-rows, 0)) * var(--_row-height) ); padding: var(--_pad); box-sizing: border-box; } /* Measures the resolved row height in px for the virtualizer. */ .probe { position: absolute; inset-block-start: 0; inline-size: 0; block-size: var(--_row-height); visibility: hidden; pointer-events: none; } } `",
+          "description": "Base styles. Everything sits in `@layer argus-base`, and every value reads a\npublic token with a neutral fallback, so themes and page CSS always win.\n`--_*` properties are private."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "baseStyles",
+          "declaration": {
+            "name": "baseStyles",
+            "module": "src/styles/base.ts"
+          }
+        }
+      ]
     }
   ]
 }