@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/data-grid.json

@@ -0,0 +1,1577 @@
+{
+  "family": "data-grid",
+  "ui": "data-grid",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Table that sorts, filters and selects records."
+  },
+  "axes": {
+    "variant": [
+      "plain",
+      "ruled",
+      "framed"
+    ],
+    "striped": [
+      true,
+      false
+    ],
+    "stickyHeader": [
+      true,
+      false
+    ],
+    "stickyTo": [
+      "scroll",
+      "page"
+    ],
+    "selectionMode": [
+      "none",
+      "single",
+      "multiple",
+      "range"
+    ],
+    "editMode": [
+      "cell",
+      "row"
+    ],
+    "mode": [
+      "client",
+      "server"
+    ],
+    "filterRow": [
+      true,
+      false
+    ],
+    "virtualize": [
+      "auto",
+      true,
+      false
+    ],
+    "columnOverflow": [
+      "auto",
+      "popin",
+      "scroll"
+    ],
+    "activatable": [
+      true,
+      false
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "numeric": [
+      true,
+      false
+    ],
+    "text": [
+      "wrap",
+      "truncate",
+      "nowrap"
+    ],
+    "density": [
+      "comfortable",
+      "compact",
+      "dense"
+    ]
+  },
+  "members": {
+    "data-grid": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "ruled",
+        "striped": false,
+        "stickyHeader": true,
+        "stickyTo": "scroll",
+        "selectionMode": "none",
+        "editMode": "cell",
+        "filterRow": false,
+        "virtualize": "auto",
+        "columnOverflow": "auto",
+        "activatable": false,
+        "align": "start",
+        "numeric": false,
+        "text": "truncate",
+        "loading": false,
+        "overscan": 6,
+        "skeletonRows": 8,
+        "filterDebounce": 300,
+        "loadMoreThreshold": 20,
+        "pageSizes": [
+          25,
+          50,
+          100
+        ]
+      },
+      "capabilities": [
+        "sort",
+        "filter",
+        "columns",
+        "selection",
+        "current",
+        "open",
+        "virtualization",
+        "overflow",
+        "appearance",
+        "arrangement",
+        "content",
+        "loading",
+        "live",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "current",
+        "expanded",
+        "disabled",
+        "loading",
+        "invalid",
+        "readonly",
+        "dragging",
+        "drop-target",
+        "open"
+      ],
+      "parts": [
+        "root",
+        "scroll",
+        "head",
+        "header-row",
+        "column-group",
+        "column-header",
+        "sort",
+        "column-description",
+        "column-actions",
+        "column-help",
+        "column-menu",
+        "column-menu-description",
+        "resizer",
+        "drop-indicator",
+        "filter-row",
+        "filter-cell",
+        "filter",
+        "filter-panel",
+        "filter-condition",
+        "filter-operator",
+        "filter-operand",
+        "filter-join",
+        "filter-actions",
+        "body",
+        "pinned-rows",
+        "row",
+        "row-header",
+        "cell",
+        "editor",
+        "selection",
+        "expander",
+        "detail",
+        "popin-header",
+        "popin",
+        "popin-field",
+        "popin-label",
+        "popin-value",
+        "group-row",
+        "group-toggle",
+        "tree-toggle",
+        "row-handle",
+        "summary",
+        "summary-cell",
+        "empty",
+        "loader",
+        "footer",
+        "actions"
+      ]
+    }
+  },
+  "docs": {
+    "dataGrid": {
+      "imports": {
+        "source": "import {\n  SlDataGrid,\n  SlDataGridCellTemplate,\n  SlDataGridColumnHelp,\n  SlDataGridDetailTemplate,\n  SlDataGridEditorTemplate,\n  SlDataGridFooter,\n  provideDataGridDefaults,\n} from '@slotted/angular/data-grid';\nimport type { GridColumn, GridQuery, GridColumnState } from '@slotted/core/grid';\nimport { applyQuery, emptyQuery, toGridParams, fromGridParams } from '@slotted/core/grid';",
+        "selector": "sl-data-grid",
+        "exportAs": "slDataGrid"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "sl-data-grid[role=\"grid\"], exportAs=\"slDataGrid\"",
+          "required": true,
+          "purpose": "The host, and the widget: data-ui=\"data-grid\", every axis, aria-rowcount, aria-colcount, aria-multiselectable, aria-busy, and the column template as --slotted-data-grid-template. It is the form control the selection is written to."
+        },
+        {
+          "part": "scroll",
+          "element": "div",
+          "required": true,
+          "purpose": "The scroller on both axes, and the window the virtualiser measures. Carries data-overflowing, data-at-start and data-at-end while the columns overflow."
+        },
+        {
+          "part": "head",
+          "element": "div[role=\"rowgroup\"]",
+          "required": true,
+          "purpose": "The header rows, sticky to the top of the scroller by default."
+        },
+        {
+          "part": "header-row",
+          "element": "div[role=\"row\"]",
+          "required": true,
+          "purpose": "One row of the header: the column groups, or the column names."
+        },
+        {
+          "part": "column-group",
+          "element": "div[role=\"columnheader\"]",
+          "required": false,
+          "purpose": "A heading spanning the columns a group names, drawn from columnGroups."
+        },
+        {
+          "part": "column-header",
+          "element": "div[role=\"columnheader\"]",
+          "required": true,
+          "purpose": "A column’s name and its controls. Carries aria-sort on the first sort key, data-sorted, data-filtered, data-pinned, data-dragging, data-drop-target and data-resizing. An ng-template[slDataGridHeader] replaces the name. The name truncates, and a name its box cuts opens a hint with the whole of it — shown rather than read, because the header already states the words."
+        },
+        {
+          "part": "sort",
+          "element": "span",
+          "required": false,
+          "purpose": "The direction mark on a sorted column, with data-index when the order holds more than one key."
+        },
+        {
+          "part": "column-description",
+          "element": "span",
+          "required": false,
+          "purpose": "The column’s description, visually hidden, referenced by the header’s aria-describedby and by the column menu’s; present whenever the column has a description."
+        },
+        {
+          "part": "column-actions",
+          "element": "span",
+          "required": true,
+          "purpose": "The slot at the trailing edge holding the column help, the filter trigger and the column menu. F2 on the header enters it, Tab cycles it, Escape leaves it."
+        },
+        {
+          "part": "column-help",
+          "element": "button[slPopoverTrigger]",
+          "required": false,
+          "purpose": "The circled question mark on a column with a description or an slDataGridColumnHelp template, always shown. Opens a popover by click, Enter or Space — never by hover — holding both."
+        },
+        {
+          "part": "column-menu",
+          "element": "button[slMenuTriggerFor]",
+          "required": true,
+          "purpose": "Opens the column’s sl-menu: sort, filter, pin, fit, fit all, hide, manage."
+        },
+        {
+          "part": "column-menu-description",
+          "element": "div[aria-hidden]",
+          "required": false,
+          "purpose": "The description again, as a muted caption atop the column menu; hidden from the reader, who hears it once through the menu’s aria-describedby."
+        },
+        {
+          "part": "resizer",
+          "element": "div[aria-hidden]",
+          "required": false,
+          "purpose": "The pointer’s handle on the trailing edge; a double press fits the column."
+        },
+        {
+          "part": "drop-indicator",
+          "element": "div",
+          "required": false,
+          "purpose": "The line between two columns while one is dragged."
+        },
+        {
+          "part": "filter-row",
+          "element": "div[role=\"row\"]",
+          "required": false,
+          "purpose": "The row under the header, with filterRow, holding one operand per filterable column."
+        },
+        {
+          "part": "filter-cell",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "One cell of the filter row; data-filtered while its column has a rule."
+        },
+        {
+          "part": "filter",
+          "element": "button",
+          "required": false,
+          "purpose": "The funnel on a filtered column, and the shortest way back to its panel."
+        },
+        {
+          "part": "filter-panel",
+          "element": "div, drawn by sl-data-grid-filter-panel",
+          "required": false,
+          "purpose": "The compact panel in a popover, carrying data-ui itself because it is rendered outside the root."
+        },
+        {
+          "part": "filter-condition",
+          "element": "div",
+          "required": false,
+          "purpose": "One line of the panel: the operator and its operand(s); data-operands says how many."
+        },
+        {
+          "part": "filter-operator",
+          "element": "div",
+          "required": false,
+          "purpose": "The operator chooser: a select in the panel, a symbol button in the row."
+        },
+        {
+          "part": "filter-operand",
+          "element": "div",
+          "required": false,
+          "purpose": "The operand control(s), with data-kind and data-range for a between. An ng-template[slDataGridFilter] replaces the control."
+        },
+        {
+          "part": "filter-join",
+          "element": "div",
+          "required": false,
+          "purpose": "And / Or between the two conditions of the panel."
+        },
+        {
+          "part": "filter-actions",
+          "element": "div",
+          "required": false,
+          "purpose": "Clear and Apply at the end of the panel."
+        },
+        {
+          "part": "body",
+          "element": "div[role=\"rowgroup\"]",
+          "required": true,
+          "purpose": "The rows; carries the virtual window’s total height and start offset."
+        },
+        {
+          "part": "pinned-rows",
+          "element": "div[role=\"rowgroup\"]",
+          "required": false,
+          "purpose": "Rows held under the head or over the summary, out of the query."
+        },
+        {
+          "part": "row",
+          "element": "div[role=\"row\"]",
+          "required": true,
+          "purpose": "One record: aria-rowindex, aria-selected, data-selected, data-current, data-expanded, data-editing, data-disabled."
+        },
+        {
+          "part": "row-header",
+          "element": "div[role=\"rowheader\"]",
+          "required": false,
+          "purpose": "The cell of the column marked rowHeader, which a screen reader repeats for the record."
+        },
+        {
+          "part": "cell",
+          "element": "div[role=\"gridcell\"]",
+          "required": true,
+          "purpose": "One value: aria-colindex, data-align, data-numeric, data-text, data-pinned, data-current, data-in-range, data-range-edge, data-editing, data-invalid, data-loading, data-readonly. An ng-template[slDataGridCell] replaces the value."
+        },
+        {
+          "part": "editor",
+          "element": "div",
+          "required": false,
+          "purpose": "The control editing a cell, plain and sm, filling it. An ng-template[slDataGridEditor] replaces the control."
+        },
+        {
+          "part": "selection",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "The checkbox column, always pinned to the start; in the header it selects every row the query left."
+        },
+        {
+          "part": "expander",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens a row’s detail; aria-expanded and aria-controls."
+        },
+        {
+          "part": "detail",
+          "element": "div[role=\"row\"]",
+          "required": false,
+          "purpose": "The open detail from ng-template[slDataGridDetail]: one cell spanning every column, held to the frame’s width."
+        },
+        {
+          "part": "popin-header",
+          "element": "div[role=\"columnheader\"]",
+          "required": false,
+          "purpose": "The pop-in’s column, last in the header row while columns are out of space: messages.popinHeader, visually hidden, with no track."
+        },
+        {
+          "part": "popin",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "The last cell of a record’s row and of the summary while columns are out of space: the row’s second line, every track, held to the frame’s width; aria-colindex is the last."
+        },
+        {
+          "part": "popin-field",
+          "element": "div",
+          "required": false,
+          "purpose": "One column in the pop-in, in the order of the columns: its label over its value."
+        },
+        {
+          "part": "popin-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The column’s label, in the small muted type; left out for a column with none."
+        },
+        {
+          "part": "popin-value",
+          "element": "div",
+          "required": false,
+          "purpose": "The value, drawn by the column’s slDataGridCell template with the cell’s own context; an editable column is read only here."
+        },
+        {
+          "part": "group-row",
+          "element": "div[role=\"row\"]",
+          "required": false,
+          "purpose": "A group heading: aria-level, aria-expanded, the value, the count, the aggregates."
+        },
+        {
+          "part": "group-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens and closes a group."
+        },
+        {
+          "part": "tree-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens and closes a tree row’s children; a leaf keeps its room empty."
+        },
+        {
+          "part": "row-handle",
+          "element": "button",
+          "required": false,
+          "purpose": "The grip a row is dragged by; disabled while the query is not at rest."
+        },
+        {
+          "part": "summary",
+          "element": "div[role=\"rowgroup\"]",
+          "required": false,
+          "purpose": "The aggregates of the whole query, pinned to the end."
+        },
+        {
+          "part": "summary-cell",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "One aggregate."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "The result-state for no rows, no results or an error, held to the frame’s width. An ng-template[slDataGridEmpty] replaces it."
+        },
+        {
+          "part": "loader",
+          "element": "div[role=\"rowgroup\"]",
+          "required": false,
+          "purpose": "Skeleton rows on a first load."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The bar under the grid: the range, what the consumer projects with [slDataGridFooter], load more."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "Row actions inside a cell of kind actions, revealed by hover and by the cursor."
+        }
+      ],
+      "api": [
+        {
+          "name": "rows",
+          "type": "readonly Row[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The records; the grid never mutates them. Left out when a dataSource answers for them."
+        },
+        {
+          "name": "rowKey",
+          "type": "keyof Row | (row) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "A field name or a function: the key every state model names a row by."
+        },
+        {
+          "name": "columns",
+          "type": "GridColumn<Row>[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The column model: id, label, description, kind, accessor, format, compare, width, minWidth, maxWidth, flex, priority, sortable, filterable, searchable, editable, resizable, reorderable, hideable, rowHeader, options, aggregate, validate, parse."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "GridColumn",
+          "description": "What the column is: the header’s accessible description, the caption atop its menu and the first line of its help popover."
+        },
+        {
+          "name": "priority",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "GridColumn",
+          "description": "The lower, the longer the column stays when the frame is too narrow. A column without one leaves before every numbered one; the identity column and an actions column never leave."
+        },
+        {
+          "name": "popin",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "GridColumn",
+          "description": "Whether a column with no room moves into the row’s pop-in; false hides it instead."
+        },
+        {
+          "name": "density",
+          "type": "'comfortable' | 'compact' | 'dense' | null",
+          "defaultValue": "the page’s",
+          "appliesTo": "sl-data-grid",
+          "description": "This grid’s own density, written as data-slotted-density on the root; absent or null, the page’s."
+        },
+        {
+          "name": "outOfSpace",
+          "type": "Signal<GridOutOfSpace>",
+          "defaultValue": "{ popin: [], hidden: [] }",
+          "appliesTo": "sl-data-grid",
+          "description": "The columns a narrow frame took out by priority — those in the pop-in and those hidden — read through exportAs. Never part of columnState."
+        },
+        {
+          "name": "columnGroups",
+          "type": "GridColumnGroup[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Headings spanning columns, drawn as a row above the names."
+        },
+        {
+          "name": "mode",
+          "type": "'client' | 'server'",
+          "defaultValue": "inferred",
+          "appliesTo": "sl-data-grid",
+          "description": "client applies the query to rows; server draws rows as given. server when totalCount or hasMore is present."
+        },
+        {
+          "name": "totalCount",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The whole set’s size in server mode; aria-rowcount and the range read it."
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Whether a page past this one exists when the total is unknown; the footer offers Load more."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "Skeleton rows with no rows to keep; aria-busy and a dimmed body over rows already shown."
+        },
+        {
+          "name": "error",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The message of a failed load; draws the error state with Try again, which emits retry."
+        },
+        {
+          "name": "disabledKeys",
+          "type": "string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows that are neither selectable nor editable, drawn with data-disabled."
+        },
+        {
+          "name": "query",
+          "type": "model<GridQuery>",
+          "defaultValue": "emptyQuery()",
+          "appliesTo": "sl-data-grid",
+          "description": "sort, filter, search, page and group in one object, two-way. An unbound grid starts from the model’s own initial value."
+        },
+        {
+          "name": "columnState",
+          "type": "model<Partial<GridColumnState> | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "order, widths, hidden and pinned, two-way; normalised against columns on every read."
+        },
+        {
+          "name": "selectionMode",
+          "type": "'none' | 'single' | 'multiple' | 'range'",
+          "defaultValue": "none",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows, one or many, with the checkbox column in multiple; or a rectangle of cells."
+        },
+        {
+          "name": "value",
+          "type": "model<string | readonly string[] | null>",
+          "defaultValue": "null",
+          "appliesTo": "sl-data-grid",
+          "description": "The selected row (single) or rows (multiple), two-way, and the value a form control holds through ControlValueAccessor."
+        },
+        {
+          "name": "range",
+          "type": "model<GridRange | null>",
+          "defaultValue": "null",
+          "appliesTo": "sl-data-grid",
+          "description": "The cell rectangle as anchor and focus, in range mode, two-way."
+        },
+        {
+          "name": "current",
+          "type": "model<GridCell | null>",
+          "defaultValue": "null",
+          "appliesTo": "sl-data-grid",
+          "description": "Where the cursor stands: a row key (or header, filter, summary, group:<key>) and a column id, two-way."
+        },
+        {
+          "name": "expanded",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "sl-data-grid",
+          "description": "The rows whose detail is open, two-way."
+        },
+        {
+          "name": "expandedGroups",
+          "type": "model<readonly string[] | 'all'>",
+          "defaultValue": "all",
+          "appliesTo": "sl-data-grid",
+          "description": "The open groups, or all, two-way."
+        },
+        {
+          "name": "expandable",
+          "type": "boolean | (row) => boolean",
+          "defaultValue": "true with slDataGridDetail",
+          "appliesTo": "sl-data-grid",
+          "description": "Which rows have a detail."
+        },
+        {
+          "name": "editMode",
+          "type": "'cell' | 'row'",
+          "defaultValue": "cell",
+          "appliesTo": "sl-data-grid",
+          "description": "One cell at a time, or every editable cell of the row."
+        },
+        {
+          "name": "activatable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "A double press or Enter on a text cell emits activate with the row."
+        },
+        {
+          "name": "filterRow",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "The row of operands under the header."
+        },
+        {
+          "name": "manageable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "Draws Manage columns in the column menu, for an application that answers manageColumns with its column-manager."
+        },
+        {
+          "name": "filterDebounce",
+          "type": "number",
+          "defaultValue": "300",
+          "appliesTo": "sl-data-grid",
+          "description": "Milliseconds a text or number operand in the filter row waits before it applies."
+        },
+        {
+          "name": "virtualize",
+          "type": "'auto' | boolean",
+          "defaultValue": "auto",
+          "appliesTo": "sl-data-grid",
+          "description": "auto windows rows above a hundred and middle columns above twenty."
+        },
+        {
+          "name": "rowHeight",
+          "type": "number | 'auto'",
+          "defaultValue": "density",
+          "appliesTo": "sl-data-grid",
+          "description": "Pixels per row, read once from the first row when unstated; auto measures every row, capped by --slotted-data-grid-row-max-block-size. While a pop-in is drawn every row is measured, as under auto."
+        },
+        {
+          "name": "columnOverflow",
+          "type": "'auto' | 'popin' | 'scroll'",
+          "defaultValue": "auto",
+          "appliesTo": "sl-data-grid",
+          "description": "What a frame too narrow for the template does: popin moves columns into each row’s pop-in by priority; scroll keeps them and scrolls sideways; auto pops in on a frame under 600px, or under 1024px when the main pointer is coarse — a phone, a small tablet — and scrolls elsewhere, where a mouse or a trackpad scrolls and the columns keep their layout."
+        },
+        {
+          "name": "overscan",
+          "type": "number",
+          "defaultValue": "6",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows mounted past each edge of the window."
+        },
+        {
+          "name": "tree",
+          "type": "{ parentKey, column?, hasChildren? }",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows as a tree, each naming its parent by key; the open branches are expanded and the root is a treegrid."
+        },
+        {
+          "name": "loadChildren",
+          "type": "{ key, row }",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Emitted when a branch hasChildren says has children opens and none are in rows."
+        },
+        {
+          "name": "dataSource",
+          "type": "{ getRows(query, { signal }), cacheSize? }",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The grid asks for its own rows per query, aborting the request before, keeping answers by query; server mode with its own loading and error."
+        },
+        {
+          "name": "pinnedRows",
+          "type": "{ top?: string[], bottom?: string[] }",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows held at the top or the bottom of the body, out of the query and always on screen."
+        },
+        {
+          "name": "rowsReorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "A grip per row; the pointer drags it and Alt with the vertical arrows moves it. Only while the query is at rest and without a tree."
+        },
+        {
+          "name": "rowsReorder",
+          "type": "{ key, from, to, reason, event }",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Where a row goes in rows: from, and the index it takes once moved. The consumer moves it."
+        },
+        {
+          "name": "highlightChanges",
+          "type": "boolean | number",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "Marks a mounted cell whose value changed between two rows, for the stated milliseconds (true is 1200)."
+        },
+        {
+          "name": "loadMoreThreshold",
+          "type": "number",
+          "defaultValue": "20",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows left below the window before loadMore is emitted."
+        },
+        {
+          "name": "skeletonRows",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "sl-data-grid",
+          "description": "Rows the first load draws."
+        },
+        {
+          "name": "pageSizes",
+          "type": "number[]",
+          "defaultValue": "25,50,100",
+          "appliesTo": "sl-data-grid",
+          "description": "The sizes a page-size control in the footer offers, read through injectDataGridDefaults."
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'ruled' | 'framed'",
+          "defaultValue": "ruled",
+          "appliesTo": "sl-data-grid",
+          "description": "No rules, rules between rows, or the border and the radius."
+        },
+        {
+          "name": "striped",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "Every second row tinted."
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-data-grid",
+          "description": "The header, the filter row and the summary stay while the rows scroll."
+        },
+        {
+          "name": "stickyTo",
+          "type": "'scroll' | 'page'",
+          "defaultValue": "scroll",
+          "appliesTo": "sl-data-grid",
+          "description": "What the header sticks inside: the grid’s own scroller, or the page — which gives up the grid’s own scrolling and windowing."
+        },
+        {
+          "name": "height",
+          "type": "string | number",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The frame’s height; without one the grid grows to its rows."
+        },
+        {
+          "name": "labelledBy",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The id of the element that names the grid; a static aria-label names it directly, and with neither the grid is named by messages.grid."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DataGridMessages>",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Words laid over the language in force, key by key: every control, state and announcement, the grid’s name (grid), and filterYes and filterNo for a boolean cell. The operator names and symbols are the groups filterOperators and filterSymbols."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the language in force",
+          "appliesTo": "sl-data-grid",
+          "description": "BCP 47, for the collator, the number and the date formats."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The zone a timestamp is read in."
+        },
+        {
+          "name": "showRange",
+          "type": "boolean",
+          "defaultValue": "when paged",
+          "appliesTo": "sl-data-grid",
+          "description": "Whether the footer states the range."
+        },
+        {
+          "name": "slDataGridCell",
+          "type": "ng-template, string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridCell]",
+          "description": "What a cell draws, for the column named or for every column when unnamed. The context carries row, key, column, value, text, current and selected."
+        },
+        {
+          "name": "slDataGridEditor",
+          "type": "ng-template, string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridEditor]",
+          "description": "What a cell edits with. The context adds draft, setDraft, commit, cancel, invalid and message."
+        },
+        {
+          "name": "slDataGridHeader",
+          "type": "ng-template, string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridHeader]",
+          "description": "What a header draws in place of the label; the context carries the column, sorted, sortIndex and filtered."
+        },
+        {
+          "name": "slDataGridFilter",
+          "type": "ng-template, string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridFilter]",
+          "description": "The operand control in the panel and the row, for a kind the grid has no field for."
+        },
+        {
+          "name": "slDataGridDetail",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridDetail]",
+          "description": "A row’s detail, handed the row; its presence draws the expander column."
+        },
+        {
+          "name": "slDataGridGroup",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridGroup]",
+          "description": "What a group row draws beside its toggle; the context carries the node, its column and toggle()."
+        },
+        {
+          "name": "slDataGridEmpty",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slDataGridEmpty]",
+          "description": "The empty, no-results or error state in place of the grid’s result state, handed the status."
+        },
+        {
+          "name": "slDataGridFooter",
+          "type": "attribute",
+          "defaultValue": "—",
+          "appliesTo": "[slDataGridFooter]",
+          "description": "What stands in the bar under the grid, after the range: pagination, a page-size select, a count."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "GridColumn",
+          "description": "Where the value sits; a number column sits at the end unless told otherwise."
+        },
+        {
+          "name": "numeric",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "GridColumn",
+          "description": "Tabular figures and end alignment; true for kind number."
+        },
+        {
+          "name": "text",
+          "type": "'wrap' | 'truncate' | 'nowrap'",
+          "defaultValue": "truncate",
+          "appliesTo": "GridColumn",
+          "description": "What a long value does."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideDataGridDefaults",
+          "type": "provider",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold and skeletonRows once for an injector. A grid that states one itself still wins. Its words and its locale come from the language in force (provideSlotted)."
+        },
+        {
+          "name": "@slotted/core/grid",
+          "type": "module",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "applyQuery, emptyQuery, withSortPress, withColumnFilter, withSearch, withPageIndex, withGroup, toGridParams, fromGridParams, normalizeColumnState, serializeColumnState, parseColumnState: the engine the grid runs on, for a server mock, a URL and a saved view."
+        },
+        {
+          "name": "slDataGridCell, slDataGridEditor, slDataGridHeader, slDataGridFilter, slDataGridColumnHelp, slDataGridDetail, slDataGridGroup, slDataGridEmpty",
+          "type": "ng-template directives",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Every surface a consumer replaces, projected as content; the four column-scoped ones name a column or serve every column, and slDataGridColumnHelp names one column and draws its help button. row, cell, head and body are fixed: the layout and the roles are theirs."
+        },
+        {
+          "name": "slDataGridFooter",
+          "type": "attribute",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "Pagination, a page-size select, a count: the consumer’s own controls projected into the bar the grid draws."
+        },
+        {
+          "name": "exportAs=\"slDataGrid\"",
+          "type": "template reference",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "The imperative surface for what cannot be said declaratively: focusCell, scrollToRow, scrollToColumn, scrollToCell, startEdit, stopEdit, autofit (reason programmatic), hide, outOfSpace, getVisibleRows, toCsv, exportCsv, reload, selectAll, clearSelection, announce."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "forms",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "formControlName or ngModel on the host reads and writes the row selection; a disabled control neither selects nor edits."
+        },
+        {
+          "name": "native attributes",
+          "type": "attributes",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-grid",
+          "description": "id, class and any attribute written on the host stay on the root; a consumer’s (keydown) on the host runs before the grid’s and preventDefault stops it."
+        },
+        {
+          "name": "slFilterBar, slPagination, column-manager",
+          "type": "families",
+          "defaultValue": "—",
+          "appliesTo": "Beside the grid",
+          "description": "The bar edits query.filter; pagination moves query.page in the footer; column-manager edits columnState."
+        }
+      ],
+      "events": [
+        {
+          "name": "queryChange",
+          "payload": "GridQuery",
+          "when": "The two-way half of the model: the query after a sort press, a filter applied, a search, a page or a group."
+        },
+        {
+          "name": "queryChangeRequest",
+          "payload": "DataGridQueryRequest",
+          "when": "Before the query moves. change says which part: sort | filter | search | page | group; the reason is pointer, keyboard, clear or programmatic; cancel() refuses it."
+        },
+        {
+          "name": "columnStateChange",
+          "payload": "GridColumnState",
+          "when": "The arrangement after a column is resized, moved, hidden or pinned."
+        },
+        {
+          "name": "columnStateChangeRequest",
+          "payload": "DataGridColumnStateRequest",
+          "when": "Before the arrangement moves. change says which: order | width | hidden | pinned; the reason is pointer, keyboard or programmatic. A hide is announced; the columns in value.hidden and not in previous.hidden are what an undo shows again."
+        },
+        {
+          "name": "outOfSpaceChange",
+          "payload": "GridOutOfSpace",
+          "when": "After the frame is measured, whenever the columns in the pop-in or the columns hidden for room change."
+        },
+        {
+          "name": "valueChange",
+          "payload": "string | readonly string[] | null",
+          "when": "The selected rows after a checkbox press, Shift+Space, Ctrl+A or the header checkbox."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<string | readonly string[] | null>",
+          "when": "Before the row selection moves, with pointer, keyboard, select (the header checkbox, Ctrl+A), clear or programmatic."
+        },
+        {
+          "name": "rangeChange",
+          "payload": "GridRange | null",
+          "when": "The cell rectangle after the keyboard or a drag moved it, or null after Escape."
+        },
+        {
+          "name": "rangeChangeRequest",
+          "payload": "ChangeRequest<GridRange | null>",
+          "when": "Before the rectangle moves, with pointer, keyboard, clear or programmatic."
+        },
+        {
+          "name": "currentChange",
+          "payload": "GridCell | null",
+          "when": "The cursor after an arrow key, a press, or the grid settling it after its row left."
+        },
+        {
+          "name": "currentChangeRequest",
+          "payload": "ChangeRequest<GridCell | null>",
+          "when": "Before the cursor moves, with pointer, keyboard or programmatic."
+        },
+        {
+          "name": "expandedChange",
+          "payload": "readonly string[]",
+          "when": "The rows whose detail is open, after one opened or closed."
+        },
+        {
+          "name": "expandedChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "Before a detail opens or closes."
+        },
+        {
+          "name": "expandedGroupsChange",
+          "payload": "readonly string[] | 'all'",
+          "when": "The open groups, after one opened or closed."
+        },
+        {
+          "name": "expandedGroupsChangeRequest",
+          "payload": "ChangeRequest<readonly string[] | 'all'>",
+          "when": "Before a group opens or closes."
+        },
+        {
+          "name": "editStart / editCommit / editCancel",
+          "payload": "GridCell / DataGridEditCommit / GridCell",
+          "when": "When an editor opens; when a draft is committed by Enter, Tab, F2, a press elsewhere or blur — the commit carries key, column, value, previous, row, reason, every change of the row and wait(promise); when Escape cancels it."
+        },
+        {
+          "name": "activate",
+          "payload": "DataGridActivateEvent",
+          "when": "A double press or Enter on a text cell, or one touch or pen press, while activatable is true."
+        },
+        {
+          "name": "loadMore / retry / manageColumns",
+          "payload": "void",
+          "when": "The window nears the end with hasMore; the error state’s Try again; the column menu’s Manage columns."
+        }
+      ],
+      "accessibility": [
+        "The host is role=\"grid\": a composite widget with one tab stop. The current cell — or the single simple widget inside it, a link, a button or a checkbox — is the only element with tabindex=\"0\"; Tab enters there and leaves the grid to the next control of the page, which is what the APG requires of a grid and what a table cannot give.",
+        "Every row carries aria-rowindex against aria-rowcount on the root, and every cell aria-colindex against aria-colcount, always: the grid windows its rows and columns, so the DOM is never the whole set, and the counts are what let a screen reader say “row 4,812 of 9,000”.",
+        "aria-sort is written on the first sort key’s header only — the practice says more than one is ambiguous — and the whole order is announced through the live announcer: “Sorted by Carrier ascending, Weight descending”. A resize announces the column and its width; a filter announces its sentence through describeFilter; a copy announces the count.",
+        "A cell that does not edit while others do carries aria-readonly=\"true\"; a draft that fails carries aria-invalid and its message in the title. A selected row carries aria-selected; a cell in a range carries it too, and the root aria-multiselectable in multiple and range.",
+        "A column with a description is described by it: the header carries aria-describedby to a visually hidden span, and the column menu points at the same span while showing the text aria-hidden, so the words are heard once. The column help is a button with a name — “About Weight” — reached by F2 on the header; Tab cycles the header’s widgets and Escape returns to the cell. Hiding a column is announced as “Carrier hidden”.",
+        "The header checkbox names what it covers — “Select all 3,412 rows”, or the page in server mode — because a selection over a whole result set is a decision only the query can make. Every control the grid draws has a name: the column menu, the filter trigger, the expander, the group toggle, the operator symbol."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-data-grid-band-surface",
+    "--slotted-data-grid-block-size",
+    "--slotted-data-grid-border-color",
+    "--slotted-data-grid-border-color-strong",
+    "--slotted-data-grid-border-width",
+    "--slotted-data-grid-cell-padding-block",
+    "--slotted-data-grid-cell-padding-inline",
+    "--slotted-data-grid-changed-surface",
+    "--slotted-data-grid-color",
+    "--slotted-data-grid-color-muted",
+    "--slotted-data-grid-control-radius",
+    "--slotted-data-grid-cursor-color",
+    "--slotted-data-grid-filter-operator-size",
+    "--slotted-data-grid-filter-panel-size",
+    "--slotted-data-grid-filter-panel-size-date",
+    "--slotted-data-grid-filter-panel-size-datetime",
+    "--slotted-data-grid-font-family",
+    "--slotted-data-grid-font-size",
+    "--slotted-data-grid-gap",
+    "--slotted-data-grid-head-block-size",
+    "--slotted-data-grid-header-surface",
+    "--slotted-data-grid-header-surface-hover",
+    "--slotted-data-grid-icon-size",
+    "--slotted-data-grid-indent",
+    "--slotted-data-grid-pin-shadow-color",
+    "--slotted-data-grid-pin-shadow-size",
+    "--slotted-data-grid-radius",
+    "--slotted-data-grid-range-surface",
+    "--slotted-data-grid-row-block-size",
+    "--slotted-data-grid-row-color-selected",
+    "--slotted-data-grid-row-max-block-size",
+    "--slotted-data-grid-row-surface-hover",
+    "--slotted-data-grid-row-surface-selected",
+    "--slotted-data-grid-row-surface-selected-hover",
+    "--slotted-data-grid-row-surface-stripe",
+    "--slotted-data-grid-shadow",
+    "--slotted-data-grid-sticky-offset",
+    "--slotted-data-grid-sticky-offset-end",
+    "--slotted-data-grid-surface",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-long",
+    "--slotted-duration-loop",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-ground",
+    "--slotted-line-height-md",
+    "--slotted-popover-gap",
+    "--slotted-popover-padding-block-sm",
+    "--slotted-popover-padding-inline-sm",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-scrim",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-sticky"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Every capability on one listing of shipments: sort with a press and Shift, filter from the funnel or the row, select with the checkboxes, edit a cell with Enter, pin and resize from the header. The toolbar switches scheme, density and direction.",
+      "language": "html",
+      "source": "<sl-data-grid\n  aria-label=\"Shipments\"\n  rowKey=\"id\"\n  height=\"100%\"\n  selectionMode=\"multiple\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "columns",
+      "title": "Columns",
+      "note": "Each column declares its kind, and the kind decides the comparator, the operators, the editor and the alignment: a number column sits its digits at the end in tabular figures, a date column formats the ISO day in the reader’s locale, a set column names its values.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(8);\n\n@Component({\n  selector: 'app-data-grid-columns',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"22rem\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridColumns {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "column-groups",
+      "title": "Column groups",
+      "note": "A second header row above the columns: each group spans the columns it names, wherever the reader has laid them out, and a column no group names spans itself.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn, GridColumnGroup } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst GROUPS: GridColumnGroup[] = [\n  { id: 'shipment', label: 'Shipment', columns: ['id', 'customer', 'destination'] },\n  { id: 'transport', label: 'Transport', columns: ['carrier', 'status', 'shipped'] },\n  { id: 'charges', label: 'Charges', columns: ['weight', 'cost'] },\n];\n\nconst ROWS = shipments(8);\n\n@Component({\n  selector: 'app-data-grid-column-groups',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"22rem\"\n      [columnGroups]=\"groups\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridColumnGroups {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly groups = GROUPS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sorting",
+      "title": "Sorting",
+      "note": "A press on a header sorts ascending, a second descending, a third removes the key; Shift with the press appends the column to the order instead, and the second and third keys carry their index beside the mark. Enter on the header does the same from the keyboard.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\n@Component({\n  selector: 'app-data-grid-sorting',\n  imports: [SlDataGrid, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"3\">\n      <span slText size=\"sm\" tone=\"muted\">Sorted by: {{ order() }}</span>\n      <sl-data-grid\n        aria-label=\"Shipments\"\n        rowKey=\"id\"\n        height=\"22rem\"\n        [(query)]=\"query\"\n        [columns]=\"columns\"\n        [rows]=\"rows\"\n      ></sl-data-grid>\n    </div>\n  `,\n})\nexport class DataGridSorting {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly query = signal<GridQuery>({\n    ...emptyQuery(),\n    sort: [\n      { column: 'carrier', direction: 'ascending' },\n      { column: 'cost', direction: 'descending' },\n    ],\n  });\n  readonly order = computed(\n    () =>\n      this.query()\n        .sort.map((key) => `${key.column} ${key.direction}`)\n        .join(', ') || 'none',\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-panel",
+      "title": "The filter panel",
+      "note": "Ctrl+Enter on a header or its menu opens the panel: one line per condition — operator and operand in sm — the join as two words on the second line once the first is complete, Clear and Apply at the end. Nothing reaches the query until Apply.",
+      "language": "ts",
+      "source": "const query = signal(\n  withColumnFilter(emptyQuery(), 'customer', {\n    kind: 'text',\n    join: 'or',\n    conditions: [\n      { operator: 'contains', value: 'nord' },\n      { operator: 'startsWith', value: 'B' },\n    ],\n  }).query,\n);\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-row",
+      "title": "The filter row",
+      "note": "With filterRow the row under the header holds one operand per column, plain, with the operator as a symbol at its start — press it for the names in full. Text and number apply after the debounce and on Enter; a set, a boolean and a date apply on change. The cursor walks the row.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { emptyQuery, withColumnFilter, type GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst INITIAL_QUERY = withColumnFilter(emptyQuery(), 'status', {\n  kind: 'set',\n  join: 'and',\n  conditions: [{ operator: 'anyOf', value: ['Delayed', 'Customs'] }],\n}).query;\n\nconst ROWS = shipments(24);\n\n@Component({\n  selector: 'app-data-grid-filter-row',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      filterRow\n      height=\"24rem\"\n      [query]=\"initialQuery\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridFilterRow {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly initialQuery = INITIAL_QUERY;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-bar",
+      "title": "With a filter bar",
+      "note": "One descriptor, two families: the bar above edits query.filter and the grid evaluates it, nested groups included. A rule written in a column header appears as a chip in the bar, and a chip removed in the bar clears the header’s funnel.",
+      "language": "html",
+      "source": "<div\n  slFilterBar\n  [fields]=\"fields\"\n  [value]=\"query().filter\"\n  (valueChange)=\"query.set(withFilter(query(), $event).query)\"\n></div>\n<sl-data-grid rowKey=\"id\" [rows]=\"shipments()\" [columns]=\"columns\" [(query)]=\"query\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "search",
+      "title": "Search",
+      "note": "One condition that belongs to no column: query.search is matched against the text of every searchable column through the locale collator, so \"agua\" finds \"Água\". The field that writes it is the consumer’s own text-field.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(24);\n\n@Component({\n  selector: 'app-data-grid-search',\n  imports: [SlDataGrid, SlStack, SlTextField, SlTextFieldInput],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slTextField clearable>\n        <input\n          slTextFieldInput\n          aria-label=\"Search shipments\"\n          placeholder=\"Search shipments\"\n          [value]=\"query().search\"\n          (valueChange)=\"search($event.value)\"\n        />\n      </div>\n      <sl-data-grid\n        aria-label=\"Shipments\"\n        rowKey=\"id\"\n        height=\"22rem\"\n        [(query)]=\"query\"\n        [columns]=\"columns\"\n        [rows]=\"rows\"\n      ></sl-data-grid>\n    </div>\n  `,\n})\nexport class DataGridSearch {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly query = signal<GridQuery>({ ...emptyQuery(), search: 'graz' });\n\n  search(text: string): void {\n    this.query.update((current) => withSearch(current, text).query);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "selection",
+      "title": "Row selection",
+      "note": "single chooses one row with a press; multiple draws the checkbox column, pinned to the start: Shift extends from the anchor, Shift+Space toggles the row from any cell, Ctrl+A and the header checkbox cover every row the query left and say so in their name.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid, SlDataGridFooter } from '@slotted/angular/data-grid';\nimport { SlText } from '@slotted/angular/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\n@Component({\n  selector: 'app-data-grid-selection',\n  imports: [SlDataGrid, SlDataGridFooter, SlText],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"24rem\"\n      selectionMode=\"multiple\"\n      [disabledKeys]=\"disabled\"\n      [(value)]=\"value\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    >\n      <span slDataGridFooter slText size=\"sm\" tone=\"muted\">{{ count() }} selected</span>\n    </sl-data-grid>\n  `,\n})\nexport class DataGridSelection {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly disabled = ['SH-3305'];\n  readonly value = signal<string | readonly string[] | null>(['SH-3302', 'SH-3303']);\n  readonly count = computed(() => {\n    const value = this.value();\n    return Array.isArray(value) ? value.length : value === null ? 0 : 1;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "range",
+      "title": "Cell range",
+      "note": "range selects a rectangle of cells: Shift with the arrows extends it from the anchor, Shift with a press sets it, a drag paints it, Ctrl+Space takes the column and Shift+Space the row. Ctrl+C copies it as tab-separated text; Escape clears it.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\n@Component({\n  selector: 'app-data-grid-range',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"24rem\"\n      selectionMode=\"range\"\n      [current]=\"start\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridRange {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly start = { row: 'SH-3303', column: 'weight' };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "editing",
+      "title": "Editing a cell",
+      "note": "Enter, F2, a double press or a typed key open the cell’s editor — the field family of its kind, plain, filling the cell. Enter commits and moves one row down, Tab commits and moves to the next editable cell, Escape cancels. The commit may hand back a promise through wait(); the cell dims until it settles.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid, type DataGridEditCommit } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst EDIT_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>\n  column.id === 'weight'\n    ? {\n        ...column,\n        editable: true,\n        validate: (value: unknown) =>\n          typeof value === 'number' && value <= 0 ? 'Enter a weight above zero.' : null,\n      }\n    : ['customer', 'destination', 'carrier'].includes(column.id)\n      ? { ...column, editable: true }\n      : column,\n);\n\nconst ROWS = shipments(8);\n\n@Component({\n  selector: 'app-data-grid-editing',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      editMode=\"cell\"\n      height=\"22rem\"\n      (editCommit)=\"commit($event)\"\n      [columns]=\"columns\"\n      [rows]=\"edited()\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridEditing {\n  readonly rows = ROWS;\n  readonly columns = EDIT_COLUMNS;\n  readonly edited = signal(ROWS);\n\n  commit({ key, changes }: DataGridEditCommit<Shipment>): void {\n    this.edited.update((current) =>\n      current.map((row) => (row.id === key ? { ...row, ...changes } : row)),\n    );\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "editing-row",
+      "title": "Editing a row",
+      "note": "editMode=\"row\" opens every editable cell of the row at once: Tab moves between them, Enter commits the row with every change in one request, Escape cancels them all.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid, type DataGridEditCommit } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst EDIT_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>\n  column.id === 'weight'\n    ? {\n        ...column,\n        editable: true,\n        validate: (value: unknown) =>\n          typeof value === 'number' && value <= 0 ? 'Enter a weight above zero.' : null,\n      }\n    : ['customer', 'destination', 'carrier'].includes(column.id)\n      ? { ...column, editable: true }\n      : column,\n);\n\nconst ROWS = shipments(8);\n\n@Component({\n  selector: 'app-data-grid-editing-row',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      editMode=\"row\"\n      height=\"22rem\"\n      (editCommit)=\"commit($event)\"\n      [columns]=\"columns\"\n      [rows]=\"edited()\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridEditingRow {\n  readonly rows = ROWS;\n  readonly columns = EDIT_COLUMNS;\n  readonly edited = signal(ROWS);\n\n  commit({ key, changes }: DataGridEditCommit<Shipment>): void {\n    this.edited.update((current) =>\n      current.map((row) => (row.id === key ? { ...row, ...changes } : row)),\n    );\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "validation",
+      "title": "Validation, failure and conflict",
+      "note": "A column’s validate refuses a draft with a message: the cell turns invalid and keeps what was typed. A commit whose promise rejects reopens the editor with the draft and the error. A row that changes under an open editor is a conflict, said in the same place.",
+      "language": "ts",
+      "source": "const columns: GridColumn<Shipment>[] = [\n  {\n    id: 'weight',\n    label: 'Weight',\n    kind: 'number',\n    editable: true,\n    validate: (value) =>\n      typeof value === 'number' && value < 0 ? 'A weight is not negative' : null,\n  },\n];\nclass ShipmentsPage {\n  onCommit(commit: DataGridEditCommit<Shipment>) {\n    commit.wait(Promise.reject(new Error('Offline')));\n  }\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activation",
+      "title": "Row activation",
+      "note": "activatable turns a double press or Enter on a text cell into activate with the row’s key — opening the record is a different act from choosing it, and the two never share a key. An editable cell keeps Enter for its editor. On a touch screen or with a pen one press activates, except on a widget in the cell or a cell in edit, and the double press that follows within 500ms is ignored.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\n@Component({\n  selector: 'app-data-grid-activation',\n  imports: [SlDataGrid, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"3\">\n      <span slText size=\"sm\" tone=\"muted\">{{\n        opened() ? 'Opened ' + opened() : 'Double-click a row, or press Enter on its shipment cell.'\n      }}</span>\n      <sl-data-grid\n        aria-label=\"Shipments\"\n        rowKey=\"id\"\n        activatable\n        height=\"22rem\"\n        (activate)=\"opened.set($event.key)\"\n        [columns]=\"columns\"\n        [rows]=\"rows\"\n      ></sl-data-grid>\n    </div>\n  `,\n})\nexport class DataGridActivation {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly opened = signal<string | null>(null);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pinning",
+      "title": "Pinned columns",
+      "note": "A column pinned to the start or the end stays while the others scroll; the checkbox column is always pinned. Pin from the column menu or the state; the last column of each zone draws the edge, darker while something is hidden under it.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  [columnState]=\"{ pinned: { start: ['id'], end: ['actions'] } }\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "resize",
+      "title": "Resizing",
+      "note": "Drag the handle on a column’s trailing edge; Escape during the drag restores the width. From the keyboard, Ctrl+Shift+ArrowRight widens by eight pixels and announces the width; Ctrl+Shift+Enter and a double press on the handle fit the column to its mounted cells.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  [(columnState)]=\"state\"\n  (columnStateChangeRequest)=\"$event.change === 'width' && log($event.value.widths)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reorder",
+      "title": "Reordering",
+      "note": "Drag a header along the row: the drop indicator shows the boundary it lands on, and a column never leaves its pin zone. Alt+ArrowLeft and Alt+ArrowRight move the column one place from the keyboard. Every move is announced.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  [columnState]=\"{ order: ['customer', 'id', 'carrier'] }\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "column-menu",
+      "title": "The column menu",
+      "note": "Revealed by the pointer and by the cursor, opened with Ctrl+Enter, a secondary press on the header (at the press; Shift keeps the browser’s menu) or Shift+F10 and the Menu key (on the header cell): sort ascending, descending or remove; filter; pin to either edge or unpin; fit to content, and fit all columns in one request; hide; and manage columns, which hands over to the application’s column-manager. A fit chosen by pointer carries reason pointer, by keyboard reason keyboard; Shift with a double press on the resizer fits every column.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  manageable\n  (manageColumns)=\"manager.set(true)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "column-help",
+      "title": "A column that explains itself",
+      "note": "Weight and Cost carry a description; Status carries an slDataGridColumnHelp template. The circled question mark stays shown, because a coarse pointer has no hover; it opens a popover on a press, Enter or Space, and never sorts. The description is also the header’s accessible description and the caption atop its menu. F2 on a header reaches the button without a pointer.",
+      "language": "html",
+      "source": "<sl-data-grid rowKey=\"id\" [rows]=\"shipments()\" [columns]=\"columns\">\n  <ng-template slDataGridColumnHelp=\"status\">\n    <p>Customs means the shipment is held at a border for inspection.</p>\n  </ng-template>\n</sl-data-grid>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "undo-hide",
+      "title": "Undoing a hidden column",
+      "note": "Hide column announces “Carrier hidden” and asks with change: hidden. The application answers with a toast whose Undo shows that column again through withColumnHidden: a hide moves no order, width or pin, so the column returns to its place and its width, and whatever the reader changed after the hide stays. Writing back request.previous would undo those changes too.",
+      "language": "ts",
+      "source": "export class ShipmentsPage {\n  // <ng-template #undo let-message>\n  //   <button slButton size=\"sm\" (click)=\"restore(message.id)\">Undo</button>\n  // </ng-template>\n  private readonly undo = viewChild.required<TemplateRef<unknown>>('undo');\n  /** The columns each toast's Undo shows again, by the toast. */\n  private readonly hidden = new Map<string, readonly string[]>();\n\n  onRequest(request: DataGridColumnStateRequest) {\n    if (request.change !== 'hidden') return;\n    const shown = request.value.hidden.filter((id) => !request.previous.hidden.includes(id));\n    const toast = this.toasts.show({ title: 'Column hidden', actions: this.undo() });\n    this.hidden.set(toast, shown);\n  }\n\n  restore(id: string) {\n    const shown = this.hidden.get(id) ?? [];\n    this.hidden.delete(id);\n    this.columnState.update((state) =>\n      shown.reduce((next, column) => withColumnHidden(next, column, false), state),\n    );\n    this.toasts.dismiss(id, 'pointer');\n  }\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "column-state",
+      "title": "Saving a view",
+      "note": "A view is the column state, the query and the density as one line of text: serializeGridView writes it, parseGridView reads it back and drops a column the model no longer has. persistedGridView keeps that line under a key in localStorage (or any store with getItem, setItem and removeItem; null keeps it in memory), reads it once, writes it after every change through an effect, and resets to the defaults by removing the entry. query and columnState take the two-way bindings and density the density input. Selection, cursor and expansion are session state and are not kept.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn, GridColumnState } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\n@Component({\n  selector: 'app-data-grid-column-state',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"24rem\"\n      selectionMode=\"multiple\"\n      [columnState]=\"state\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridColumnState {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly state: Partial<GridColumnState> = {\n    pinned: { start: ['id'], end: ['cost'] },\n    widths: { customer: 240 },\n  };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "grouping",
+      "title": "Grouping",
+      "note": "query.group names the columns the rows are grouped by, outermost first. A group row carries its level, its count and the aggregates of its rows; ArrowLeft closes it and ArrowRight opens it. expandedGroups is the set of open groups, all by default.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst INITIAL_QUERY: GridQuery = {\n  ...emptyQuery(),\n  group: ['carrier'],\n  sort: [{ column: 'id', direction: 'ascending' }],\n};\n\nconst ROWS = shipments(20);\n\n@Component({\n  selector: 'app-data-grid-grouping',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"26rem\"\n      [query]=\"initialQuery\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridGrouping {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly initialQuery = INITIAL_QUERY;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "summary",
+      "title": "Aggregates",
+      "note": "A column with aggregate — sum, avg, min, max, count or a function — draws the summary row, pinned to the end of the scroller, over every row the query kept; a grouped grid draws the same aggregate on each group row.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst SUM_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>\n  column.id === 'weight' || column.id === 'cost'\n    ? { ...column, aggregate: 'sum' as const }\n    : column,\n);\n\nconst ROWS = shipments(10);\n\n@Component({\n  selector: 'app-data-grid-summary',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"24rem\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridSummary {\n  readonly rows = ROWS;\n  readonly columns = SUM_COLUMNS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "detail",
+      "title": "Row detail",
+      "note": "An ng-template with slDataGridDetail gives a row a detail: the expander column appears, ArrowRight on it opens the detail under the row as one cell spanning every column and held to the frame, ArrowLeft closes it. expanded is the set of open rows.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid, SlDataGridDetailTemplate } from '@slotted/angular/data-grid';\nimport { SlText } from '@slotted/angular/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(8);\n\n@Component({\n  selector: 'app-data-grid-detail',\n  imports: [SlDataGrid, SlDataGridDetailTemplate, SlText],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"26rem\"\n      [expanded]=\"expanded\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    >\n      <ng-template slDataGridDetail let-row>\n        <p slText size=\"sm\">\n          {{ row.carrier }} picked up {{ row.weight.toFixed(1) }} kg on {{ row.shipped }} for\n          {{ row.destination }}. Charged {{ money(row.cost) }}.\n        </p>\n      </ng-template>\n    </sl-data-grid>\n  `,\n})\nexport class DataGridDetail {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly expanded = ['SH-3301'];\n  readonly money = money;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "virtualization",
+      "title": "Ten thousand rows",
+      "note": "Above a hundred rows the grid windows them: the body is as tall as every row and only the ones in view, plus the overscan, are in the DOM. Scroll, or jump with Ctrl+End — the last row is mounted and focused. Above twenty middle columns the same happens sideways.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(10_000);\n\n@Component({\n  selector: 'app-data-grid-virtualization',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments, 10,000 rows\"\n      rowKey=\"id\"\n      height=\"26rem\"\n      selectionMode=\"multiple\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridVirtualization {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "server",
+      "title": "Server mode",
+      "note": "With totalCount or hasMore the grid draws the rows it is given and reports the query instead of applying it: sorting, filtering, searching and paging all arrive as one request saying what changed, and a server answers with the page.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"page().rows\"\n  [columns]=\"columns\"\n  [totalCount]=\"page().total\"\n  [loading]=\"pending()\"\n  [(query)]=\"query\"\n  (queryChangeRequest)=\"fetchPage($event.value, $event.change)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "data-source",
+      "title": "A data source",
+      "note": "dataSource hands the grid its own fetching: getRows is called with the query on every change and an AbortSignal, the request before it aborted; the answer — rows, total or hasMore — is kept by the query’s text (cacheSize, default 20), so a page the reader comes back to is on screen at once. The grid is in server mode with the loading and the error states of its own: a rejection is the error state with the message thrown, Try again asks the same query, reload() drops the cache. rows, totalCount, loading, error and retry are the source’s and are not read.",
+      "language": "html",
+      "source": "<sl-data-grid rowKey=\"id\" [columns]=\"columns\" [dataSource]=\"shipments\" [(query)]=\"query\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "pagination",
+      "title": "Pagination",
+      "note": "query.page carries the index and the size; the pagination family projected with slDataGridFooter moves both, in the bar a table carries: a page size, the range and the two triggers, at the inline end. The status states the range, so showRange is off. A change of filter, search or group puts the page back at the start in the same request.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  [(query)]=\"query\"\n  [showRange]=\"false\"\n>\n  <nav\n    slDataGridFooter\n    slPagination\n    [count]=\"total()\"\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"[25, 50, 100]\"\n    [page]=\"pageIndex() + 1\"\n    (pageChange)=\"query.set(withPageIndex(query(), $event.value - 1).query)\"\n    (pageSizeChange)=\"query.set(withPageSize(query(), $event.value).query)\"\n  >\n    <sl-pagination-page-size></sl-pagination-page-size>\n    <p slPaginationStatus></p>\n    <button slPaginationPrevious></button>\n    <button slPaginationNext></button>\n  </nav>\n</sl-data-grid>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "load-more",
+      "title": "Load more",
+      "note": "With an unknown total the footer states the range without one and offers Load more; when the grid windows its rows, loadMore is emitted on its own as the window nears the end.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"rows()\"\n  [columns]=\"columns\"\n  [hasMore]=\"hasMore()\"\n  [query]=\"{ ...emptyQuery(), page: { cursor: cursor(), size: 50 } }\"\n  (loadMore)=\"fetchMore()\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty-and-loading",
+      "title": "Empty, no results, error, loading",
+      "note": "Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"rows()\"\n  [columns]=\"columns\"\n  [loading]=\"loading()\"\n  [error]=\"error()\"\n  (retry)=\"reload()\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "Variants",
+      "note": "plain draws no rules and no band; ruled draws a rule between rows; framed adds the border, the radius and the footer inside. striped tints every second row under every state.",
+      "language": "html",
+      "source": "<sl-data-grid rowKey=\"id\" variant=\"framed\" striped [rows]=\"shipments()\" [columns]=\"columns\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "text",
+      "title": "Long values",
+      "note": "truncate is the default — a column has a width — and keeps the whole value in the cell’s title; wrap breaks an unbroken token rather than widening the column; nowrap keeps a code on one line. A value keeps its own direction in a right-to-left grid.",
+      "language": "ts",
+      "source": "const columns: GridColumn<Shipment>[] = [\n  { id: 'customer', label: 'Customer', text: 'wrap' },\n  { id: 'hash', label: 'Hash', text: 'nowrap' },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "density",
+      "title": "Density",
+      "note": "The row reads the theme’s control scale: 34 pixels at comfortable, 28 at compact, 26 at dense, with the type and the inset stepping with it. Without density the grid takes the page’s, which the toolbar switches; with density it writes data-slotted-density on its own root and holds that one whatever the page says. The menu and the popovers it opens are portals and stay at the page’s density.",
+      "language": "html",
+      "source": "<sl-data-grid density=\"dense\" rowKey=\"id\" [rows]=\"shipments()\" [columns]=\"columns\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "responsive-priority",
+      "title": "Columns that yield to a phone",
+      "note": "The same grid in a phone-wide room. When the frame is too narrow for the template, columns leave the row: first those without a priority, the last first, then the highest priority; the identity column — the first rowHeader — and an actions column never leave. A column that leaves moves into the row’s pop-in, its label over its value drawn by the same cell template; one with popin: false is hidden instead. The root states the pop-in’s count as data-popin, rows grow to their fields, and outOfSpaceChange reports both sets — but the column state is untouched, so nothing is persisted and a wider frame brings them back. That is columnOverflow=\"auto\", the default, under 600px, or under 1024px with a coarse pointer; wider, with a mouse, it scrolls. columnOverflow=\"popin\" pops in at every width, and \"scroll\" keeps every column and scrolls.",
+      "language": "html",
+      "source": "<!-- columns: tracking rowHeader; status priority 1, eta 2, carrier 3; cost popin: false -->\n<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  (outOfSpaceChange)=\"out.set($event)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the grid did not choose",
+      "note": "A hundred-character customer name, an unbroken identifier, a right-to-left name, a disabled row, an empty cell in a numeric column and a value with a dash: each holds where the family says it holds.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlAvatar } from '@slotted/angular/avatar';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlDataGrid, SlDataGridCellTemplate } from '@slotted/angular/data-grid';\nimport { SlInline } from '@slotted/angular/inline';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst TONE: Record<string, 'secondary' | 'success' | 'danger' | 'warning'> = {\n  'In transit': 'secondary',\n  Delivered: 'success',\n  Delayed: 'danger',\n  Customs: 'warning',\n};\n\nconst ROWS = shipments(10);\n\n@Component({\n  selector: 'app-data-grid-content',\n  imports: [SlAvatar, SlBadge, SlDataGrid, SlDataGridCellTemplate, SlInline],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"24rem\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    >\n      <ng-template slDataGridCell=\"customer\" let-row=\"row\">\n        <div slInline align=\"center\" [gap]=\"2\">\n          <span slAvatar size=\"sm\" [name]=\"row.customer\"></span>\n          {{ row.customer }}\n        </div>\n      </ng-template>\n      <ng-template slDataGridCell=\"status\" let-value=\"value\">\n        <span slBadge variant=\"soft\" [tone]=\"tone[value]\">{{ value }}</span>\n      </ng-template>\n    </sl-data-grid>\n  `,\n})\nexport class DataGridContent {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly tone = TONE;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "media",
+      "title": "Pictures in cells",
+      "note": "A cell template draws anything: an avatar beside the name, a thumbnail in a custom column. A stated rowHeight is the drawn row as well as the windowed one, so ten thousand rows of 56 pixels scroll to the right place. A cell with a picture and a name is one flex row of the template’s own; the grid lays out the template’s first element as the value.",
+      "language": "html",
+      "source": "<sl-data-grid rowKey=\"id\" [rows]=\"shipments()\" [columns]=\"columns\" [rowHeight]=\"56\">\n  <ng-template slDataGridCell=\"customer\" let-row=\"row\">\n    <span class=\"customer\">\n      <span slAvatar [name]=\"row.customer\" size=\"sm\"></span>\n      <span>{{ row.customer }}</span>\n    </span>\n  </ng-template>\n  <ng-template slDataGridCell=\"photo\" let-row=\"row\">\n    <div slImage alt=\"\" radius=\"sm\" ratio=\"landscape\" [src]=\"row.photo\"></div>\n  </ng-template>\n</sl-data-grid>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "realtime",
+      "title": "Realtime",
+      "note": "rows is compared with the rows before it, by key, on the mounted rows only: a cell whose value changed is marked for the time highlightChanges states (true is 1200 ms) and fades on the accent’s subtle ground; under reduced motion the ground stays flat and leaves with the mark. A row that arrived is not a change. Selection, cursor, expansion and scroll survive every tick because the key is the identity.",
+      "language": "html",
+      "source": "<sl-data-grid rowKey=\"id\" [rows]=\"feed()\" [columns]=\"columns\" highlightChanges />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tree",
+      "title": "Tree data",
+      "note": "tree names each row’s parent by key; a row whose parent is not in rows is a root. The root is a treegrid, every row carries aria-level and a branch aria-expanded. The open branches are expanded — the same state the detail uses; a branch opens its children, a leaf its detail. Filter and search keep a row that matches or has a descendant that matches, with its ancestors; sorting is among siblings; the page is a slice of the open rows; query.group is ignored. In the tree column, ArrowRight opens a closed branch, ArrowLeft closes an open one and climbs to the parent from a leaf. A row hasChildren says has children not yet in rows emits loadChildren when opened, and shows the wait until they arrive.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn, GridTree } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Location {\n  id: string;\n  parent: string | null;\n  name: string;\n  kind: string;\n  units: number;\n}\n\nconst LOCATIONS: Location[] = [\n  { id: 'reno', parent: null, name: 'Reno, NV', kind: 'Warehouse', units: 4210 },\n  { id: 'reno-a', parent: 'reno', name: 'Zone A — dry goods', kind: 'Zone', units: 2630 },\n  { id: 'reno-a-01', parent: 'reno-a', name: 'Aisle 01', kind: 'Aisle', units: 1410 },\n  { id: 'reno-a-02', parent: 'reno-a', name: 'Aisle 02', kind: 'Aisle', units: 1220 },\n  { id: 'reno-b', parent: 'reno', name: 'Zone B — chilled', kind: 'Zone', units: 1580 },\n  { id: 'columbus', parent: null, name: 'Columbus, OH', kind: 'Warehouse', units: 3075 },\n  { id: 'columbus-a', parent: 'columbus', name: 'Zone A — dry goods', kind: 'Zone', units: 3075 },\n  { id: 'savannah', parent: null, name: 'Savannah, GA', kind: 'Warehouse', units: 1890 },\n  { id: 'savannah-a', parent: 'savannah', name: 'Zone A — bonded', kind: 'Zone', units: 1890 },\n];\n\nconst COLUMNS: GridColumn<Location>[] = [\n  { id: 'name', label: 'Location', accessor: 'name', rowHeader: true, flex: 1, minWidth: 220 },\n  { id: 'kind', label: 'Type', accessor: 'kind', width: 130 },\n  { id: 'units', label: 'Units on hand', accessor: 'units', kind: 'number', width: 150 },\n];\n\nconst TREE: GridTree<Location> = { parentKey: (row) => row.parent };\n\n@Component({\n  selector: 'app-data-grid-tree',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Stock by location\"\n      height=\"22rem\"\n      rowKey=\"id\"\n      [columns]=\"columns\"\n      [expanded]=\"expanded\"\n      [rows]=\"locations\"\n      [tree]=\"tree\"\n    />\n  `,\n})\nexport class DataGridTree {\n  readonly locations = LOCATIONS;\n  readonly columns = COLUMNS;\n  readonly tree = TREE;\n  readonly expanded = ['reno', 'reno-a'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pinned-rows",
+      "title": "Pinned rows",
+      "note": "pinnedRows holds rows at the top or the bottom of the body, by key, in the stated order. A held row leaves the query — never sorted, filtered or paged — and stays on screen, under the head and over the summary, at the heights the grid measures for each. It is a row like any other: the cursor walks through it, it selects, edits and exports with the rest, and it counts in aria-rowcount.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"rows()\"\n  [columns]=\"columns\"\n  [pinnedRows]=\"{ top: ['SHP-20487'], bottom: ['SHP-20481'] }\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reorder-rows",
+      "title": "Reordering rows",
+      "note": "rowsReorderable draws a grip per row in a reserved column. The pointer drags from the grip and drops in a gap, with the same guide a column shows; Alt with the vertical arrows moves the row from any of its cells, and the move is announced. The grid keeps no order of its own: rowsReorder says where the row goes in rows (from and to, the index it takes once moved) and the consumer moves it. Only while the query is at rest — no sort, filter, search or group — and without a tree, because elsewhere the position on screen is not the position in rows; the grip is disabled otherwise.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"rows()\"\n  [columns]=\"columns\"\n  rowsReorderable\n  (rowsReorder)=\"move($event)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "export",
+      "title": "Export and print",
+      "note": "exportCsv() on the grid (exportAs slDataGrid) builds the file by toCsv — RFC 4180, each cell as the grid draws it — from the rows the query left (every page in client mode) and the columns not hidden in the reader’s order, or the selected rows and every column on request, and hands it to the browser as a download; toCsv() returns the text for a consumer who sends it elsewhere. In print, the frame grows to its rows, nothing scrolls or sticks, and the pointer’s controls are not on paper; a windowed grid prints the rows it has mounted, so a consumer who prints ten thousand turns the window off first. Excel is the consumer’s: SheetJS reads the same text.",
+      "language": "html",
+      "source": "<sl-data-grid #grid=\"slDataGrid\" rowKey=\"id\" [rows]=\"shipments()\" [columns]=\"columns\" />\n<button slButton (click)=\"grid.exportCsv({ filename: 'shipments.csv' })\">CSV</button>\n<button slButton (click)=\"grid.exportCsv({ rows: 'selected', bom: true })\">\n  Selected, for Excel\n</button>\n<button slButton (click)=\"print()\">Print</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab enters on the current cell and leaves the grid. The arrows move one cell, Home and End along the row, Ctrl+Home and Ctrl+End to the corners, PageUp and PageDown a view. Enter and F2 enter a cell, Escape leaves it. On a header: Enter sorts, Shift+Enter appends, Ctrl+Enter, Shift+F10 and the Menu key open the menu, Ctrl+Shift+arrows resize, Alt+arrows move. The pop-in is the last cell of a row.",
+      "language": "html",
+      "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"shipments()\"\n  [columns]=\"columns\"\n  [(current)]=\"cell\"\n  (currentChangeRequest)=\"log($event.value, $event.reason)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "A grid named by aria-label; every row with its index in the whole set and every cell with its column index; aria-sort on the first key and the rest announced; the selection’s size in the header checkbox’s name; a resize as a width; a filter as its sentence. Inspect the tree with a screen reader.",
+      "language": "ts",
+      "source": "@Component({\n  template: `<sl-data-grid aria-label=\"Shipments\" [messages]=\"messages\" />`,\n})\nclass Shipments {\n  readonly messages: PartialMessages<DataGridMessages> = {\n    selectAllFiltered:\n      '{count, plural, one {Select the # shipment} other {Select all # shipments}}',\n  };\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlDataGrid, SlDataGridCellTemplate } from '@slotted/angular/data-grid';\n\ninterface Order {\n  id: string;\n  customer: string;\n  warehouse: string;\n  status: string;\n  placed: string;\n  total: number;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];\nconst STATUSES = ['Processing', 'Shipped', 'On hold', 'Delivered'];\n\nconst ORDERS: Order[] = Array.from({ length: 24 }, (_, index) => ({\n  id: `SO-${10421 + index}`,\n  customer: CUSTOMERS[(index * 5) % CUSTOMERS.length]!,\n  warehouse: WAREHOUSES[index % WAREHOUSES.length]!,\n  status: STATUSES[(index * 3) % STATUSES.length]!,\n  placed: `2026-09-${String(1 + (index % 28)).padStart(2, '0')}`,\n  total: 140 + ((index * 733) % 4100),\n}));\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst TONE: Record<string, 'accent' | 'secondary' | 'success' | 'warning'> = {\n  Delivered: 'success',\n  'On hold': 'warning',\n  Processing: 'accent',\n  Shipped: 'secondary',\n};\n\nconst COLUMNS: GridColumn<Order>[] = [\n  { id: 'id', label: 'Order', accessor: 'id', rowHeader: true, width: 120, sortable: true },\n  {\n    id: 'customer',\n    label: 'Customer',\n    accessor: 'customer',\n    flex: 1,\n    minWidth: 180,\n    sortable: true,\n  },\n  { id: 'warehouse', label: 'Warehouse', accessor: 'warehouse', width: 130, sortable: true },\n  { id: 'status', label: 'Status', accessor: 'status', width: 130, sortable: true },\n  { id: 'placed', label: 'Placed', accessor: 'placed', kind: 'date', width: 130, sortable: true },\n  {\n    id: 'total',\n    label: 'Total',\n    accessor: 'total',\n    numeric: true,\n    width: 130,\n    sortable: true,\n    format: (value) => USD.format(value as number),\n  },\n];\n\n@Component({\n  selector: 'app-data-grid-basic',\n  imports: [SlBadge, SlDataGrid, SlDataGridCellTemplate],\n  template: `\n    <sl-data-grid\n      aria-label=\"Orders\"\n      height=\"24rem\"\n      rowKey=\"id\"\n      selectionMode=\"multiple\"\n      [columns]=\"columns\"\n      [rows]=\"orders\"\n    >\n      <ng-template slDataGridCell=\"status\" let-value=\"value\">\n        <span slBadge variant=\"soft\" [tone]=\"tone[value]\">{{ value }}</span>\n      </ng-template>\n    </sl-data-grid>\n  `,\n})\nexport class DataGridBasic {\n  readonly orders = ORDERS;\n  readonly columns = COLUMNS;\n  readonly tone = TONE;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "empty",
+      "title": "empty.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = [] as Shipment[];\n\n@Component({\n  selector: 'app-data-grid-empty',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"18rem\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridEmpty {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "error",
+      "title": "error.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = [] as Shipment[];\n\n@Component({\n  selector: 'app-data-grid-error',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      error=\"The shipments service did not answer within 30 seconds.\"\n      height=\"18rem\"\n      (retry)=\"attempts.set(attempts() + 1)\"\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridError {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly attempts = signal(0);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { SlDataGrid } from '@slotted/angular/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = [] as Shipment[];\n\n@Component({\n  selector: 'app-data-grid-loading',\n  imports: [SlDataGrid],\n  template: `\n    <sl-data-grid\n      aria-label=\"Shipments\"\n      rowKey=\"id\"\n      height=\"18rem\"\n      loading\n      [columns]=\"columns\"\n      [rows]=\"rows\"\n    ></sl-data-grid>\n  `,\n})\nexport class DataGridLoading {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "shipments-workspace",
+      "title": "shipments-workspace.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDataGrid, SlDataGridFooter } from '@slotted/angular/data-grid';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(60);\n\n@Component({\n  selector: 'app-data-grid-shipments-workspace',\n  imports: [\n    SlButton,\n    SlDataGrid,\n    SlDataGridFooter,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slTextField clearable>\n        <input\n          slTextFieldInput\n          aria-label=\"Search shipments\"\n          placeholder=\"Search by shipment, customer or destination\"\n          [value]=\"query().search\"\n          (valueChange)=\"search($event.value)\"\n        />\n      </div>\n      <sl-data-grid\n        aria-label=\"Shipments\"\n        rowKey=\"id\"\n        height=\"26rem\"\n        selectionMode=\"multiple\"\n        [(query)]=\"query\"\n        [(value)]=\"value\"\n        [columns]=\"columns\"\n        [rows]=\"rows\"\n      >\n        <div slDataGridFooter slInline align=\"center\" [gap]=\"3\">\n          <span slText size=\"sm\" tone=\"muted\">{{ count() }} selected</span>\n          <button slButton type=\"button\" size=\"sm\" variant=\"outline\" [disabled]=\"count() === 0\">\n            Print labels\n          </button>\n        </div>\n      </sl-data-grid>\n    </div>\n  `,\n})\nexport class DataGridShipmentsWorkspace {\n  readonly rows = ROWS;\n  readonly columns = COLUMNS;\n  readonly query = signal<GridQuery>(emptyQuery());\n  readonly value = signal<string | readonly string[] | null>([]);\n  readonly count = computed(() => {\n    const value = this.value();\n    return Array.isArray(value) ? value.length : 0;\n  });\n\n  search(text: string): void {\n    this.query.update((current) => withSearch(current, text).query);\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}