argus-table 0.0.1 → 0.2.0

package/dist/custom-elements.json

@@ -2,13 +2,357 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/announce.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "announce",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "doc",
+              "type": {
+                "text": "Document"
+              }
+            },
+            {
+              "name": "message",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Says something to screen readers through a polite live region. The region\nlives in the document body, not in the table: a grid may only own rows, so a\nstatus element inside it would break the grid's structure. One region serves\nevery table on the page. It is visually hidden with inline styles, so page\nCSS can't reveal it."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "announce",
+          "declaration": {
+            "name": "announce",
+            "module": "src/announce.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/argus-column.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "watchColumns",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "onChange",
+              "type": {
+                "text": "() => void"
+              }
+            }
+          ],
+          "description": "Calls `onChange` whenever an `<argus-column>` child of `host` is added, removed, moved or changed."
+        },
+        {
+          "kind": "function",
+          "name": "unwatchColumns",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "Element"
+              }
+            }
+          ]
+        },
+        {
+          "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.",
+          "name": "ArgusColumn",
+          "members": [
+            {
+              "kind": "field",
+              "name": "columnId",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Stable key, used in state objects, events and persistence. Must be unique within the table.",
+              "attribute": "column-id"
+            },
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "CellContent | (() => CellContent) | undefined"
+              },
+              "description": "Header content: text as an attribute; a Lit template, a node or a function as a property.",
+              "attribute": "header"
+            },
+            {
+              "kind": "field",
+              "name": "accessor",
+              "type": {
+                "text": "string | ((row: T, index: number) => unknown) | undefined"
+              },
+              "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": "cell",
+              "type": {
+                "text": "(row: T, context: CellContext<T>) => CellContent | undefined"
+              },
+              "description": "Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child."
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "ColumnWidth | undefined"
+              },
+              "description": "Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "minWidth",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Lower bound for resizing and for flex columns, in px. Default: 40.",
+              "attribute": "min-width"
+            },
+            {
+              "kind": "field",
+              "name": "maxWidth",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Upper bound for resizing, in px. Default: no limit.",
+              "attribute": "max-width"
+            },
+            {
+              "kind": "field",
+              "name": "pin",
+              "type": {
+                "text": "ColumnPin | undefined"
+              },
+              "description": "Pins the column to the `start` or `end` side.",
+              "attribute": "pin"
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "ColumnAlign | undefined"
+              },
+              "description": "Text alignment: `start`, `center` or `end`. Default: `start`.",
+              "attribute": "align"
+            },
+            {
+              "kind": "field",
+              "name": "sortable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the header can be clicked to sort. Default: `false`.",
+              "attribute": "sortable"
+            },
+            {
+              "kind": "field",
+              "name": "resizable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off.",
+              "attribute": "resizable"
+            },
+            {
+              "kind": "field",
+              "name": "reorderable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off.",
+              "attribute": "reorderable"
+            },
+            {
+              "kind": "method",
+              "name": "toColumnDef",
+              "return": {
+                "type": {
+                  "text": "ColumnDef<T>"
+                }
+              },
+              "description": "The column as the table reads it. Unset fields stay `undefined`, which the\ntable reads as its defaults. An unknown `pin` is ignored and an unknown\n`align` falls back to `start`."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "column-id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Stable key, used in state objects, events and persistence. Must be unique within the table.",
+              "fieldName": "columnId"
+            },
+            {
+              "name": "header",
+              "type": {
+                "text": "CellContent | (() => CellContent) | undefined"
+              },
+              "description": "Header content: text as an attribute; a Lit template, a node or a function as a property.",
+              "fieldName": "header"
+            },
+            {
+              "name": "accessor",
+              "type": {
+                "text": "string | ((row: T, index: number) => unknown) | undefined"
+              },
+              "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": "width",
+              "type": {
+                "text": "ColumnWidth | undefined"
+              },
+              "description": "Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px.",
+              "fieldName": "width"
+            },
+            {
+              "name": "min-width",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Lower bound for resizing and for flex columns, in px. Default: 40.",
+              "fieldName": "minWidth"
+            },
+            {
+              "name": "max-width",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Upper bound for resizing, in px. Default: no limit.",
+              "fieldName": "maxWidth"
+            },
+            {
+              "name": "pin",
+              "type": {
+                "text": "ColumnPin | undefined"
+              },
+              "description": "Pins the column to the `start` or `end` side.",
+              "fieldName": "pin"
+            },
+            {
+              "name": "align",
+              "type": {
+                "text": "ColumnAlign | undefined"
+              },
+              "description": "Text alignment: `start`, `center` or `end`. Default: `start`.",
+              "fieldName": "align"
+            },
+            {
+              "name": "sortable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the header can be clicked to sort. Default: `false`.",
+              "fieldName": "sortable"
+            },
+            {
+              "name": "resizable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off.",
+              "fieldName": "resizable"
+            },
+            {
+              "name": "reorderable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off.",
+              "fieldName": "reorderable"
+            }
+          ],
+          "superclass": {
+            "name": "ReactiveElement",
+            "package": "lit"
+          },
+          "summary": "Declarative column of an `<argus-table>`.",
+          "tagName": "argus-column",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "watchColumns",
+          "declaration": {
+            "name": "watchColumns",
+            "module": "src/argus-column.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "unwatchColumns",
+          "declaration": {
+            "name": "unwatchColumns",
+            "module": "src/argus-column.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ArgusColumn",
+          "declaration": {
+            "name": "ArgusColumn",
+            "module": "src/argus-column.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "argus-column",
+          "declaration": {
+            "name": "ArgusColumn",
+            "module": "src/argus-column.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/argus-table.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A virtualized data table.\n\nSet `columns` and `data` as properties. Header and cell content is rendered\ninto the element's light DOM and slotted into the cells, so page CSS and the\npage's own components work inside cells.",
+          "description": "A virtualized data table.\n\nSet `columns`, and `data` or `dataSource`, as properties. Columns can also be\nwritten as `<argus-column>` children; a non-empty `columns` wins over them.\nHeader and cell content is rendered into the element's light DOM and slotted\ninto the cells, so page CSS and the page's own components work inside cells.\n\nAny number of rows scrolls to the end. Browsers limit an element's height\n(about 800k rows of 40 px in Chromium and Safari, 400k in Firefox), so a taller\nbody renders shorter and its scroll position is scaled onto the rows: the\nscrollbar still spans every row, and a wheel step covers a few more of them.\nUse `scrollToRow()` rather than setting the scroll container's `scrollTop`.",
           "name": "ArgusTable",
           "cssProperties": [
             {
@@ -44,6 +388,16 @@
               "name": "--argus-border-width",
               "default": "1px"
             },
+            {
+              "description": "Border around the whole table, as a `border` shorthand (`1px solid …`). Inside the element's size.",
+              "name": "--argus-outline",
+              "default": "none"
+            },
+            {
+              "description": "Corner radius of the table. Header, rows and pinned columns are clipped to it.",
+              "name": "--argus-radius",
+              "default": "0"
+            },
             {
               "description": "Height of a row. Default per density: 32px, 40px, 52px.",
               "name": "--argus-row-height"
@@ -69,10 +423,24 @@
               "name": "--argus-focus-ring",
               "default": "2px solid Highlight"
             },
+            {
+              "description": "Colour of the line that marks where a dragged column would land.",
+              "name": "--argus-drop-indicator-color",
+              "default": "Highlight"
+            },
             {
               "description": "Background of the hovered row. Default: no change.",
               "name": "--argus-row-hover-bg"
             },
+            {
+              "description": "Background of the pinned rows, pinned columns included.",
+              "name": "--argus-pinned-row-bg",
+              "default": "var(--argus-bg)"
+            },
+            {
+              "description": "Colour of the skeleton bars in rows still loading. Default: the text colour at low opacity.",
+              "name": "--argus-skeleton-bg"
+            },
             {
               "description": "Reserved for row selection, which comes after v0.1. The table doesn't read it yet.",
               "name": "--argus-row-selected-bg"
@@ -100,7 +468,15 @@
               "name": "header-cell-sorted"
             },
             {
-              "description": "The drag handle on the inline-end edge of a resizable column's header.",
+              "description": "Added to `header-cell` on the header being dragged to a new position.",
+              "name": "header-cell-dragging"
+            },
+            {
+              "description": "The line on the edge of the header where a dragged column would land.",
+              "name": "drop-indicator"
+            },
+            {
+              "description": "The drag handle on the inline-end edge of a resizable column's header. A double-click fits the column to its content.",
               "name": "resize-handle"
             },
             {
@@ -119,6 +495,26 @@
               "description": "Body rows with an odd index.",
               "name": "row-odd"
             },
+            {
+              "description": "Body rows whose `dataSource` page hasn't loaded yet, or failed.",
+              "name": "row-loading"
+            },
+            {
+              "description": "Every row from `pinnedRows`, on either side. Also has `row`, but no `row-even`/`row-odd`.",
+              "name": "row-pinned"
+            },
+            {
+              "description": "The rows pinned below the header.",
+              "name": "row-pinned-top"
+            },
+            {
+              "description": "The rows pinned to the bottom.",
+              "name": "row-pinned-bottom"
+            },
+            {
+              "description": "Every cell of a pinned row (next to `cell`).",
+              "name": "cell-pinned-row"
+            },
             {
               "description": "Every body cell.",
               "name": "cell"
@@ -135,6 +531,18 @@
               "description": "The pinned body cell next to the scrolling columns (one per pinned side).",
               "name": "cell-pinned-edge"
             },
+            {
+              "description": "The placeholder bar in each cell of a row that is still loading.",
+              "name": "skeleton"
+            },
+            {
+              "description": "Added to `skeleton` in a row whose page failed to load.",
+              "name": "skeleton-error"
+            },
+            {
+              "description": "The Retry button in the first cell of a failed page's first visible row.",
+              "name": "retry"
+            },
             {
               "description": "The empty-state container.",
               "name": "empty"
@@ -153,8 +561,7 @@
               "type": {
                 "text": "readonly ColumnDef<T>[]"
               },
-              "default": "[]",
-              "description": "Column definitions. Property only: functions can't be attributes."
+              "description": "Column definitions. Property only: functions can't be attributes. While empty,\nthe table reads its `<argus-column>` children instead. `null` or `undefined`\nmeans `[]`."
             },
             {
               "kind": "field",
@@ -162,25 +569,40 @@
               "type": {
                 "text": "readonly T[]"
               },
-              "default": "[]",
-              "description": "The rows to show. Replace the array to update; changes inside it aren't detected."
+              "description": "The rows to show. Replace the array to update; changes inside it aren't\ndetected. `null` or `undefined` means `[]`."
             },
             {
               "kind": "field",
-              "name": "getRowId",
+              "name": "dataSource",
               "type": {
-                "text": "(row: T, index: number) => string | undefined"
+                "text": "DataSource<T> | undefined"
               },
-              "description": "Returns a stable id for a row. Default: the row's index in `data`."
+              "description": "Loads rows page by page as they scroll into view, instead of `data`:\n`{ getRows({ start, end, sorting, signal }), pageSize? }`, where `end` is\nexclusive and `getRows` resolves to `{ rows, total? }`. Without a `total`,\nthe table grows as pages arrive and a short page marks the end. Sorting\nhappens on the server: a new order reloads from the top. While set, it wins\nover `data`. Replace the object to change `getRows` or `pageSize`."
             },
             {
               "kind": "field",
-              "name": "rowHeight",
+              "name": "pinnedRows",
               "type": {
-                "text": "number | undefined"
+                "text": "PinnedRows<T> | undefined"
               },
-              "description": "Row height in px. Unset: the density (or the `--argus-row-height` token) decides.",
-              "attribute": "row-height"
+              "description": "Rows fixed below the header (`top`) and at the bottom of the view (`bottom`),\nsuch as a totals row: `{ top?: T[], bottom?: T[] }`. They are separate\nobjects, not rows of `data`: columns read them the same way, but they are\nnever sorted and work the same with a `dataSource`. A `cell` function gets\n`pinned: 'top' | 'bottom'` in its context. Replace the object to update."
+            },
+            {
+              "kind": "field",
+              "name": "getRowId",
+              "type": {
+                "text": "(row: T, index: number) => string | undefined"
+              },
+              "description": "Returns a stable id for a row. Default: the row's index (in `data`, or among all `dataSource` rows)."
+            },
+            {
+              "kind": "field",
+              "name": "rowHeight",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Row height in px. Unset: the density (or the `--argus-row-height` token) decides.",
+              "attribute": "row-height"
             },
             {
               "kind": "field",
@@ -199,8 +621,7 @@
               "type": {
                 "text": "number"
               },
-              "default": "6",
-              "description": "Rows rendered above and below the visible ones.",
+              "description": "Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6.",
               "attribute": "overscan"
             },
             {
@@ -219,6 +640,43 @@
               },
               "description": "Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column\nbecomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only\nfires `argus-column-resize` with the proposed widths. `undefined` hands it back."
             },
+            {
+              "kind": "field",
+              "name": "columnOrder",
+              "type": {
+                "text": "ColumnOrderState"
+              },
+              "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": "method",
+              "name": "refresh",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "With a `dataSource`, drops every loaded page and loads the rows in view\nagain, keeping the scroll position. With `data`, re-renders the cells (after\nchanging row objects in place). Resolves once the table has re-rendered;\nreloaded rows arrive as their pages load."
+            },
+            {
+              "kind": "method",
+              "name": "autosizeColumns",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ids",
+                  "optional": true,
+                  "type": {
+                    "text": "readonly string[]"
+                  }
+                }
+              ],
+              "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."
+            },
             {
               "kind": "method",
               "name": "scrollToRow",
@@ -240,24 +698,53 @@
           ],
           "events": [
             {
+              "type": {
+                "text": "CustomEvent<SortChangeDetail>"
+              },
               "description": "A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled.",
               "name": "argus-sort-change"
             },
             {
-              "description": "A column was resized by dragging its handle or with Alt+Arrow on its header. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag.",
+              "type": {
+                "text": "CustomEvent<ColumnResizeDetail>"
+              },
+              "description": "A column was resized: by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag, and once per column that `autosizeColumns()` changes.",
               "name": "argus-column-resize"
             },
             {
-              "description": "A body cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value }`. Fires before `argus-row-click`.",
+              "type": {
+                "text": "CustomEvent<ColumnReorderDetail>"
+              },
+              "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<CellClickDetail<T>>"
+              },
+              "description": "A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row. Fires before `argus-row-click`.",
               "name": "argus-cell-click"
             },
             {
-              "description": "A body row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index }`.",
+              "type": {
+                "text": "CustomEvent<RowClickDetail<T>>"
+              },
+              "description": "A body or pinned row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index, pinned? }`; for a pinned row, `index` is its index in its list.",
               "name": "argus-row-click"
             },
             {
+              "type": {
+                "text": "CustomEvent<RangeChangeDetail>"
+              },
               "description": "The visible rows changed. `detail: { start, end }` (row indices, inclusive).",
               "name": "argus-range-change"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<LoadErrorDetail>"
+              },
+              "description": "A `dataSource` page failed to load: `getRows()` rejected or threw. `detail: { error, start, end }` (`end` exclusive). The rows show a Retry button.",
+              "name": "argus-load-error"
             }
           ],
           "attributes": [
@@ -283,8 +770,7 @@
               "type": {
                 "text": "number"
               },
-              "default": "6",
-              "description": "Rows rendered above and below the visible ones.",
+              "description": "Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6.",
               "fieldName": "overscan"
             }
           ],
@@ -347,6 +833,15 @@
           "default": "'argus-column-resize'",
           "description": "Fired when a column was resized (uncontrolled), or with the proposed widths (controlled)."
         },
+        {
+          "kind": "variable",
+          "name": "COLUMN_REORDER",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-column-reorder'",
+          "description": "Fired when a column was moved (uncontrolled), or with the proposed order (controlled)."
+        },
         {
           "kind": "variable",
           "name": "ROW_CLICK",
@@ -365,6 +860,15 @@
           "default": "'argus-cell-click'",
           "description": "Fired when a body cell was clicked, before `argus-row-click`."
         },
+        {
+          "kind": "variable",
+          "name": "LOAD_ERROR",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-load-error'",
+          "description": "Fired after the update when a `dataSource` page failed to load."
+        },
         {
           "kind": "function",
           "name": "fire",
@@ -421,6 +925,14 @@
             "module": "src/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "COLUMN_REORDER",
+          "declaration": {
+            "name": "COLUMN_REORDER",
+            "module": "src/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ROW_CLICK",
@@ -437,6 +949,14 @@
             "module": "src/events.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "LOAD_ERROR",
+          "declaration": {
+            "name": "LOAD_ERROR",
+            "module": "src/events.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "fire",
@@ -452,6 +972,14 @@
       "path": "src/index.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ArgusColumn",
+          "declaration": {
+            "name": "ArgusColumn",
+            "module": "./argus-column.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ArgusTable",
@@ -468,6 +996,14 @@
             "module": "./events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "COLUMN_REORDER",
+          "declaration": {
+            "name": "COLUMN_REORDER",
+            "module": "./events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "COLUMN_RESIZE",
@@ -476,6 +1012,14 @@
             "module": "./events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "LOAD_ERROR",
+          "declaration": {
+            "name": "LOAD_ERROR",
+            "module": "./events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "RANGE_CHANGE",
@@ -510,6 +1054,98 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/max-height.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "bodyCap",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "logical",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "extra",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "The tallest the body may render: the engine's maximum less what scrolls with\nit (`extra`: the header and pinned rows). `Infinity` for a body of `logical`\npx that is far from any limit, without measuring."
+        },
+        {
+          "kind": "function",
+          "name": "watchMaxElementHeight",
+          "return": {
+            "type": {
+              "text": "() => void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "listener",
+              "type": {
+                "text": "() => void"
+              }
+            }
+          ],
+          "description": "Calls `listener` when the maximum may have changed (the page was zoomed). Returns the unsubscribe."
+        },
+        {
+          "kind": "function",
+          "name": "setMaxElementHeightForTests",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "height",
+              "type": {
+                "text": "number | undefined"
+              }
+            }
+          ],
+          "description": "Tests: pretend the engine renders at most `height` px (`undefined` measures again)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "bodyCap",
+          "declaration": {
+            "name": "bodyCap",
+            "module": "src/max-height.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "watchMaxElementHeight",
+          "declaration": {
+            "name": "watchMaxElementHeight",
+            "module": "src/max-height.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "setMaxElementHeightForTests",
+          "declaration": {
+            "name": "setMaxElementHeightForTests",
+            "module": "src/max-height.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/types.ts",
@@ -539,6 +1175,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnOrderState",
+          "declaration": {
+            "name": "ColumnOrderState",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnPin",
@@ -547,6 +1191,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnReorderDetail",
+          "declaration": {
+            "name": "ColumnReorderDetail",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnResizeDetail",
@@ -571,6 +1223,30 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "DataSource",
+          "declaration": {
+            "name": "DataSource",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LoadErrorDetail",
+          "declaration": {
+            "name": "LoadErrorDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PinnedRows",
+          "declaration": {
+            "name": "PinnedRows",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "RangeChangeDetail",
@@ -580,35 +1256,593 @@
           }
         },
         {
-          "kind": "js",
-          "name": "RowClickDetail",
-          "declaration": {
-            "name": "RowClickDetail",
-            "package": "@argus-table/core"
-          }
+          "kind": "js",
+          "name": "RowClickDetail",
+          "declaration": {
+            "name": "RowClickDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RowPin",
+          "declaration": {
+            "name": "RowPin",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RowsRequest",
+          "declaration": {
+            "name": "RowsRequest",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RowsResponse",
+          "declaration": {
+            "name": "RowsResponse",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortChangeDetail",
+          "declaration": {
+            "name": "SortChangeDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortItem",
+          "declaration": {
+            "name": "SortItem",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortState",
+          "declaration": {
+            "name": "SortState",
+            "package": "@argus-table/core"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/auto-width.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "measureColumns",
+          "return": {
+            "type": {
+              "text": "Map<string, number>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "root",
+              "type": {
+                "text": "ParentNode"
+              }
+            },
+            {
+              "name": "ids",
+              "type": {
+                "text": "Iterable<string>"
+              }
+            }
+          ],
+          "description": "The width each column's content needs, in px, from the cells rendered now:\nthe header, the pinned rows and the rendered body rows. Rows that haven't\nloaded are skipped (their skeleton bars say nothing about the content).\n\nEvery cell of the columns gets `data-measure`, which sizes it to its\n`max-content` (base styles), so the browser accounts for padding, the sort\nindicator and whatever the content is. One forced layout, no paint: the\nattribute is gone before the frame ends. A column with nothing laid out\n(the table is hidden) is left out."
+        },
+        {
+          "kind": "class",
+          "description": "Widths of `width: 'auto'` columns. A column measures once its first loaded\nrows render, and before that fits the header and pinned rows. So each column\nis measured at most twice (three times if fonts were still loading), and a\ntable that stays empty doesn't measure on every update. State is keyed by\ncolumn id, so new `columns` arrays with the same ids don't measure again.",
+          "name": "AutoWidths",
+          "members": [
+            {
+              "kind": "field",
+              "name": "widths",
+              "type": {
+                "text": "ColumnSizingState"
+              },
+              "default": "{}",
+              "description": "Measured widths by column id; a new object whenever one changes."
+            },
+            {
+              "kind": "method",
+              "name": "sync",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ids",
+                  "type": {
+                    "text": "Iterable<string>"
+                  }
+                }
+              ],
+              "description": "Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns."
+            },
+            {
+              "kind": "method",
+              "name": "measure",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ParentNode"
+                  }
+                },
+                {
+                  "name": "columns",
+                  "type": {
+                    "text": "readonly { id: string; auto: boolean }[]"
+                  }
+                },
+                {
+                  "name": "hasLoadedRows",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Measures the auto columns that need it. Returns `true` if a width changed;\nthe caller then renders again (the one extra pass of the render cycle)."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "measureColumns",
+          "declaration": {
+            "name": "measureColumns",
+            "module": "src/controllers/auto-width.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AutoWidths",
+          "declaration": {
+            "name": "AutoWidths",
+            "module": "src/controllers/auto-width.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/column-children.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Reads the host's `<argus-column>` children into `ColumnDef`s. The columns tell\nthe host when they change (`watchColumns`); the list is rebuilt only then, so\n`defs` keeps its identity between changes.",
+          "name": "ColumnChildrenController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "present",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the host has any `<argus-column>` child.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "defs",
+              "type": {
+                "text": "readonly ColumnDef<T>[]"
+              },
+              "description": "The children's columns, in document order.",
+              "readonly": true
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColumnChildrenController",
+          "declaration": {
+            "name": "ColumnChildrenController",
+            "module": "src/controllers/column-children.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/data-controller.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_PAGE_SIZE",
+          "type": {
+            "text": "number"
+          },
+          "default": "100",
+          "description": "Rows per request when the data source sets no `pageSize`."
+        },
+        {
+          "kind": "variable",
+          "name": "LOAD_DEBOUNCE_MS",
+          "type": {
+            "text": "number"
+          },
+          "default": "50",
+          "description": "Quiet time after the last range change before pages load, so fast scrolling loads only where it stops."
+        },
+        {
+          "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.",
+          "name": "DataController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "PageCache<T> | undefined"
+              },
+              "description": "The page cache, while a data source is set: the model reads rows from it.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "configure",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "DataConfig<T>"
+                  }
+                }
+              ],
+              "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)."
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Drops every loaded page and loads the rendered ones again. The row count stays until pages answer."
+            },
+            {
+              "kind": "method",
+              "name": "stateAt",
+              "return": {
+                "type": {
+                  "text": "RowState"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "request",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "start",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "end",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The rendered rows, `start` to `end` (exclusive). Loads what's missing once the\nrange has been quiet for a moment. Call after every update."
+            },
+            {
+              "kind": "method",
+              "name": "retry",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Requests the failed page holding row `index` again (the Retry button, or Enter on a failed row)."
+            },
+            {
+              "kind": "method",
+              "name": "takeErrors",
+              "return": {
+                "type": {
+                  "text": "LoadErrorDetail[]"
+                }
+              },
+              "description": "Load errors since the last call, to fire as `argus-load-error` after the update."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_PAGE_SIZE",
+          "declaration": {
+            "name": "DEFAULT_PAGE_SIZE",
+            "module": "src/controllers/data-controller.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LOAD_DEBOUNCE_MS",
+          "declaration": {
+            "name": "LOAD_DEBOUNCE_MS",
+            "module": "src/controllers/data-controller.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DataController",
+          "declaration": {
+            "name": "DataController",
+            "module": "src/controllers/data-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/pin-scroll-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Keeps pinned body cells in place without making them sticky while the table\nonly scrolls up and down.\n\nSafari gives every sticky element a compositing layer of its own and moves\neach one on every scroll frame; with a sticky cell per pinned column per row\nthat is dozens of layers, and vertical scrolling stutters (ADR 0001, \"Pinned\ncolumns in Safari\"). At rest, pinned body cells are plain cells shifted by the\nhorizontal scroll offset (`--_sx`, and `--_max-x` for the end side), which\nonly changes when the table scrolls sideways. While it does, the scroller\ncarries `data-hscroll` and the cells are sticky, so they don't lag behind\nthe scroll; once it settles they go back to the transform, at the same place.\nIt also sizes the pinned edges' shadow overlays (`.pin-shadow`) to the\nscroller's visible area.",
+          "name": "PinScrollController",
+          "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": "method",
+              "name": "measure",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-reads how far the table scrolls sideways: call when column widths change."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PinScrollController",
+          "declaration": {
+            "name": "PinScrollController",
+            "module": "src/controllers/pin-scroll-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/reorder-drag.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "dropTarget",
+          "return": {
+            "type": {
+              "text": "DropTarget | undefined"
+            }
+          },
+          "parameters": [
+            {
+              "name": "slots",
+              "type": {
+                "text": "readonly DropSlot[]"
+              }
+            },
+            {
+              "name": "draggedId",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "x",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "1 | -1"
+              }
+            }
+          ],
+          "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."
+        },
+        {
+          "kind": "function",
+          "name": "canStartReorder",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "down",
+              "type": {
+                "text": "PointerEvent"
+              }
+            },
+            {
+              "name": "cell",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Whether a press on a header may start a reorder drag: the primary button of a\nmouse or pen (a touch pans the table instead), not on a resize handle, and not\nin interactive content slotted into the header."
         },
+        {
+          "kind": "function",
+          "name": "startReorderDrag",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "cell",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "down",
+              "type": {
+                "text": "PointerEvent"
+              }
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "ReorderDragOptions"
+              }
+            }
+          ],
+          "description": "One pointer drag of a column header. It becomes a drag after a few pixels of\nmovement; until then the press is a click. While dragging, the pointer is\ncaptured by the header, the target follows the pointer once per frame, and the\nscroll area scrolls near its edges. Escape cancels. The click that ends a drag\nis swallowed, so it neither sorts nor counts as a cell click."
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "SortChangeDetail",
+          "name": "dropTarget",
           "declaration": {
-            "name": "SortChangeDetail",
-            "package": "@argus-table/core"
+            "name": "dropTarget",
+            "module": "src/controllers/reorder-drag.ts"
           }
         },
         {
           "kind": "js",
-          "name": "SortItem",
+          "name": "canStartReorder",
           "declaration": {
-            "name": "SortItem",
-            "package": "@argus-table/core"
+            "name": "canStartReorder",
+            "module": "src/controllers/reorder-drag.ts"
           }
         },
         {
           "kind": "js",
-          "name": "SortState",
+          "name": "startReorderDrag",
           "declaration": {
-            "name": "SortState",
-            "package": "@argus-table/core"
+            "name": "startReorderDrag",
+            "module": "src/controllers/reorder-drag.ts"
           }
         }
       ]
@@ -708,7 +1942,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.",
+          "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.",
           "name": "VirtualController",
           "members": [
             {
@@ -728,6 +1962,15 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "computeWindow",
@@ -747,6 +1990,15 @@
               "description": "Number of pool slots created so far: bounded by the most rows rendered at once.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "scaled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the body is taller than the cap and scrolls scaled.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "scrollToIndex",
@@ -771,6 +2023,54 @@
                 }
               ],
               "description": "`'start'` puts the row at the top; `'auto'` scrolls only as far as needed to show it."
+            },
+            {
+              "kind": "method",
+              "name": "scrollBy",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "delta",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Scrolls by `delta` px of rows (logical px)."
+            },
+            {
+              "kind": "method",
+              "name": "reveal",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "before",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "after",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Scrolls the least distance that shows row `index` in full, between the\ncontent above the body (`before` px: the header and top pinned rows) and\nbelow it (`after` px). Returns whether the rows are yet to move there (with\nthe update after the scroll event): until then the row's DOM isn't where it\nwill be."
             }
           ]
         }
@@ -786,6 +2086,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 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",
@@ -817,9 +2139,60 @@
               "type": {
                 "text": "ActiveCell | undefined"
               }
+            },
+            {
+              "name": "firstRowIndex",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "loading",
+              "optional": true,
+              "type": {
+                "text": "Loading"
+              }
+            }
+          ],
+          "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."
+        },
+        {
+          "kind": "function",
+          "name": "renderCell",
+          "parameters": [
+            {
+              "name": "c",
+              "type": {
+                "text": "ColumnView<T, CellContent>"
+              }
+            },
+            {
+              "name": "tabStop",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "slot",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "pinnedRow",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "before",
+              "default": "nothing",
+              "type": {
+                "text": "unknown"
+              }
             }
           ],
-          "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` (the header row is 1)."
+          "description": "A body or pinned-row cell. Every cell is focusable (`tabindex=-1`) so clicks\nfocus it; `tabStop` marks the grid's single tab stop. `before` goes ahead of\nthe slot (a loading row's skeleton bar or Retry button)."
         }
       ],
       "exports": [
@@ -830,6 +2203,14 @@
             "name": "renderBody",
             "module": "src/render/body.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "renderCell",
+          "declaration": {
+            "name": "renderCell",
+            "module": "src/render/body.ts"
+          }
         }
       ]
     },
@@ -863,9 +2244,15 @@
               "type": {
                 "text": "readonly WindowRow[]"
               }
+            },
+            {
+              "name": "renderBefore",
+              "type": {
+                "text": "ChildNode"
+              }
             }
           ],
-          "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)."
+          "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."
         }
       ],
       "exports": [
@@ -936,7 +2323,7 @@
               }
             }
           ],
-          "description": "Private slot names (ADR 0001): cells by pool slot and column, headers by column."
+          "description": "Private slot names (ADR 0001): cells by pool slot and column, headers by\ncolumn, pinned rows by side, index and column."
         },
         {
           "kind": "function",
@@ -950,6 +2337,30 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "pinnedSlot",
+          "parameters": [
+            {
+              "name": "side",
+              "type": {
+                "text": "'top' | 'bottom'"
+              }
+            },
+            {
+              "name": "index",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "colIndex",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
         {
           "kind": "function",
           "name": "cellParts",
@@ -964,9 +2375,13 @@
               "type": {
                 "text": "Pinnable & { sorted: 'asc' | 'desc' | false }"
               }
+            },
+            {
+              "name": "pinnedRow",
+              "default": "false"
             }
           ],
-          "description": "Part list of a body cell: state is in the part name (`::part()` can't take attribute selectors)."
+          "description": "Part list of a body or pinned-row cell: state is in the part name (`::part()`\ncan't take attribute selectors)."
         },
         {
           "kind": "function",
@@ -1038,6 +2453,14 @@
             "module": "src/render/content.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "pinnedSlot",
+          "declaration": {
+            "name": "pinnedSlot",
+            "module": "src/render/content.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "cellParts",
@@ -1089,9 +2512,16 @@
               "type": {
                 "text": "string | undefined"
               }
+            },
+            {
+              "name": "drag",
+              "optional": true,
+              "type": {
+                "text": "HeaderDrag"
+              }
             }
           ],
-          "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. It is\nnot focusable: the focused header resizes with Alt+Arrow."
+          "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."
         }
       ],
       "exports": [
@@ -1107,22 +2537,53 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/styles/base.ts",
+      "path": "src/render/pinned-rows.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); --_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 and pinned columns. */ scroll-padding-block-start: 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~='row'] { position: absolute; inset-block-start: 0; inset-inline-start: 0; --_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)); } [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; } [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; /* Visible so the edge shadow isn't clipped; slotted content still clips itself. */ overflow: visible; } [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-pin='end'] { inset-inline-end: var(--_pin-offset); } [part~='cell-pinned'] { background: var(--_row-surface); } /* * The edge shadow. --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. */ [data-pin-edge]::after { content: ''; position: absolute; inset: 0; pointer-events: none; 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)); } [data-pin='end'][data-pin-edge]::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; } [part~='empty'] { display: flex; align-items: center; justify-content: center; min-block-size: calc(100% - 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."
+          "kind": "function",
+          "name": "renderPinnedRows",
+          "parameters": [
+            {
+              "name": "side",
+              "type": {
+                "text": "RowPin"
+              }
+            },
+            {
+              "name": "count",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "columns",
+              "type": {
+                "text": "readonly ColumnView<T, CellContent>[]"
+              }
+            },
+            {
+              "name": "firstRowIndex",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "ActiveCell | undefined"
+              }
+            }
+          ],
+          "description": "The rows pinned to one side: a sticky row group below the header (`top`) or\nat the bottom of the view (`bottom`). They are few and never recycled, so\nthey aren't pooled; content is slotted from the light DOM like body cells.\nCells take part in the grid's roving tabindex (`active.index` is the row's\nindex in its list). `firstRowIndex` is the `aria-rowindex` of the first row."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "baseStyles",
+          "name": "renderPinnedRows",
           "declaration": {
-            "name": "baseStyles",
-            "module": "src/styles/base.ts"
+            "name": "renderPinnedRows",
+            "module": "src/render/pinned-rows.ts"
           }
         }
       ]