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

package/docs/table.json

@@ -0,0 +1,1059 @@
+{
+  "family": "table",
+  "ui": "table",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Semantic table with sorting, filters and selection."
+  },
+  "axes": {
+    "variant": [
+      "plain",
+      "ruled",
+      "framed"
+    ],
+    "striped": [
+      true,
+      false
+    ],
+    "stickyHeader": [
+      true,
+      false
+    ],
+    "stickyFooter": [
+      true,
+      false
+    ],
+    "stickyTo": [
+      "scroll",
+      "page"
+    ],
+    "layout": [
+      "auto",
+      "fixed"
+    ],
+    "cellAlign": [
+      "start",
+      "center",
+      "end"
+    ],
+    "selectionMode": [
+      "none",
+      "single",
+      "multiple"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "numeric": [
+      true,
+      false
+    ],
+    "text": [
+      "wrap",
+      "truncate",
+      "nowrap"
+    ],
+    "sticky": [
+      "start",
+      "end"
+    ],
+    "blockAlign": [
+      "start",
+      "center",
+      "end"
+    ]
+  },
+  "members": {
+    "table": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "ruled",
+        "striped": false,
+        "stickyHeader": false,
+        "stickyTo": "scroll",
+        "layout": "auto",
+        "selectionMode": "none",
+        "align": "start",
+        "numeric": false,
+        "text": "wrap",
+        "sticky": "start",
+        "loading": false,
+        "columns": 1,
+        "skeletonRows": 5,
+        "cellAlign": "center",
+        "blockAlign": "center",
+        "stickyFooter": false,
+        "searchThreshold": 8
+      },
+      "capabilities": [
+        "sort",
+        "filter",
+        "selection",
+        "open",
+        "overflow",
+        "appearance",
+        "arrangement",
+        "content",
+        "loading",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "expanded",
+        "disabled",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "scroll",
+        "table",
+        "caption",
+        "head",
+        "body",
+        "summary",
+        "row",
+        "column-header",
+        "row-header",
+        "cell",
+        "sort",
+        "column-actions",
+        "filter",
+        "filter-panel",
+        "filter-condition",
+        "filter-operator",
+        "filter-operand",
+        "filter-join",
+        "filter-search",
+        "filter-list",
+        "filter-option",
+        "filter-empty",
+        "filter-actions",
+        "selection",
+        "expander",
+        "detail",
+        "empty",
+        "loader",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "table": {
+      "imports": {
+        "source": "import {\n  SlTable,\n  SlTableBody,\n  SlTableCaption,\n  SlTableCell,\n  SlTableColumnActions,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableDetail,\n  SlTableEmpty,\n  SlTableExpander,\n  SlTableFooter,\n  SlTableHead,\n  SlTableLoader,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSelect,\n  SlTableSelectAll,\n  SlTableSort,\n  SlTableSummary,\n  provideTableDefaults,\n} from '@slotted/angular/table';",
+        "selector": "div[slTable]",
+        "exportAs": "slTable"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div[slTable], exportAs=\"slTable\"",
+          "required": true,
+          "purpose": "The frame, and your own div. It carries every axis and holds what must not move when the table is scrolled sideways: the border, the radius and the footer bar."
+        },
+        {
+          "part": "scroll",
+          "element": "div[slTableContent], exportAs=\"slTableContent\"",
+          "required": true,
+          "purpose": "The scroller, and the element a sticky header resolves against. It becomes a named region with a tab stop only while the table overflows."
+        },
+        {
+          "part": "table",
+          "element": "table, drawn by slTableContent",
+          "required": true,
+          "purpose": "The tabular structure itself. Angular pays one element for the host and draws the other in its template, which is why one directive owns both."
+        },
+        {
+          "part": "caption",
+          "element": "caption[slTableCaption]",
+          "required": false,
+          "purpose": "The table name, and the accessible name whether it is read or hidden. The family writes no aria-labelledby restating what the browser already states."
+        },
+        {
+          "part": "head",
+          "element": "thead[slTableHead]",
+          "required": false,
+          "purpose": "The header row group. It sticks to the scroller when stickyHeader is on."
+        },
+        {
+          "part": "body",
+          "element": "tbody[slTableBody]",
+          "required": true,
+          "purpose": "The rows. A table may hold more than one, which is how a set is grouped by section."
+        },
+        {
+          "part": "summary",
+          "element": "tfoot[slTableSummary]",
+          "required": false,
+          "purpose": "The column summaries, which is the HTML Standard own word for a tfoot: a total, a count, a unit. It is not the footer bar."
+        },
+        {
+          "part": "footer",
+          "element": "div[slTableFooter]",
+          "required": false,
+          "purpose": "The bar under the table and inside the frame, where a paged listing puts its control. It is a sibling of the scroller, so a table scrolled sideways does not take its pagination with it."
+        },
+        {
+          "part": "row",
+          "element": "tr[slTableRow], exportAs=\"slTableRow\"",
+          "required": true,
+          "purpose": "One record. It carries data-selected and data-expanded for the stylesheet and data-value for the range and the select-all."
+        },
+        {
+          "part": "column-header",
+          "element": "th[slTableColumnHeader]",
+          "required": false,
+          "purpose": "A column name, scoped to its column. It carries aria-sort when it is the sorted one, and on no other header. A name its box cuts — text=\"truncate\" on a column with no room — opens a hint with the whole of it, shown rather than read, because the header already states the words."
+        },
+        {
+          "part": "row-header",
+          "element": "th[slTableRowHeader]",
+          "required": false,
+          "purpose": "The cell that identifies the record, scoped to its row, which a screen reader repeats in each cell beside it."
+        },
+        {
+          "part": "cell",
+          "element": "td[slTableCell]",
+          "required": true,
+          "purpose": "One value, and the four axes a cell answers: align, numeric, text and sticky."
+        },
+        {
+          "part": "sort",
+          "element": "button[slTableSort]",
+          "required": false,
+          "purpose": "The column name wrapped in a button, which is what the APG sortable example does. The whole header is the target."
+        },
+        {
+          "part": "column-actions",
+          "element": "span[slTableColumnActions]",
+          "required": false,
+          "purpose": "The slot beside a column name for the controls it carries: a filter trigger, a column menu, a help hint. The family holds the place; the query is yours."
+        },
+        {
+          "part": "filter",
+          "element": "button, inside span[slTableSetFilter] and its four siblings",
+          "required": false,
+          "purpose": "The trigger the table draws in that slot, and everything behind it. It marks itself while the column is filtered and states what is applied in its own name."
+        },
+        {
+          "part": "filter-panel",
+          "element": "div",
+          "required": false,
+          "purpose": "The surface the trigger opens: the conditions, the join between them and the two actions. It edits a draft — nothing reaches you until Apply."
+        },
+        {
+          "part": "filter-condition",
+          "element": "div",
+          "required": false,
+          "purpose": "One condition: an operator and the operands that operator takes. Two of them at most, and the second appears once the first is complete."
+        },
+        {
+          "part": "filter-operator",
+          "element": "div",
+          "required": false,
+          "purpose": "The chooser, which is sl-select. What it offers is the kind own list, narrowed by operators."
+        },
+        {
+          "part": "filter-operand",
+          "element": "div",
+          "required": false,
+          "purpose": "The field the operator asks for: none for is empty, one for a comparison, two for between. The kind own ng-template draws it, once per condition."
+        },
+        {
+          "part": "filter-join",
+          "element": "div",
+          "required": false,
+          "purpose": "And or Or between two conditions, which is also the word between the ends of a range."
+        },
+        {
+          "part": "filter-search",
+          "element": "div",
+          "required": false,
+          "purpose": "The field that narrows a set filter values, through the same locale collator Combobox filters with. It appears once there are searchThreshold values."
+        },
+        {
+          "part": "filter-list",
+          "element": "div",
+          "required": false,
+          "purpose": "The values, scrolling inside the panel rather than making the panel taller than the screen."
+        },
+        {
+          "part": "filter-option",
+          "element": "div",
+          "required": false,
+          "purpose": "One value, its checkbox and its count. The first is the covering checkbox, which answers for exactly what the search left."
+        },
+        {
+          "part": "filter-empty",
+          "element": "p",
+          "required": false,
+          "purpose": "The word shown when the search matches nothing, so the panel is never a blank box."
+        },
+        {
+          "part": "filter-actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The footer: Clear at the leading edge and Apply at the trailing one."
+        },
+        {
+          "part": "selection",
+          "element": "td[slTableSelect] and th[slTableSelectAll]",
+          "required": false,
+          "purpose": "The cell holding the checkbox, in the header and in every row. The cell is this family and the chooser is slCheckbox, named by a visually hidden label."
+        },
+        {
+          "part": "expander",
+          "element": "button[slTableExpander]",
+          "required": false,
+          "purpose": "Opens and closes one row detail. It carries aria-expanded, and aria-controls naming the detail row while that row is open. It is the APG Disclosure pattern, borrowed whole."
+        },
+        {
+          "part": "detail",
+          "element": "tr[slTableDetail]",
+          "required": false,
+          "purpose": "The open row detail, one cell spanning every column. Control flow in the template keeps a closed one out of the DOM, which a host element cannot do for itself."
+        },
+        {
+          "part": "empty",
+          "element": "td[slTableEmpty]",
+          "required": false,
+          "purpose": "What is shown when there is nothing, spanning every column. It takes an slResultState, which already separates an empty set from a set a filter emptied."
+        },
+        {
+          "part": "loader",
+          "element": "tbody[slTableLoader]",
+          "required": false,
+          "purpose": "The skeleton rows of a first load: the table shape before its content. A refresh over rows already read is the other state and dims the body instead."
+        }
+      ],
+      "api": [
+        {
+          "name": "sort",
+          "type": "model<TableSortDescriptor | null>",
+          "defaultValue": "null",
+          "appliesTo": "slTable",
+          "description": "The column the rows are ordered by, two-way"
+        },
+        {
+          "name": "defaultSort",
+          "type": "model initial value",
+          "defaultValue": "null",
+          "appliesTo": "slTable",
+          "description": "The order an unbound table starts in: the model own initial value"
+        },
+        {
+          "name": "value",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "slTable",
+          "description": "The chosen rows, two-way, and the value a form control holds"
+        },
+        {
+          "name": "defaultValue",
+          "type": "model initial value",
+          "defaultValue": "[]",
+          "appliesTo": "slTable",
+          "description": "The rows an unbound table starts with"
+        },
+        {
+          "name": "expanded",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "slTable",
+          "description": "The rows whose detail is open, two-way"
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "model initial value",
+          "defaultValue": "[]",
+          "appliesTo": "slTable",
+          "description": "The details an unbound table starts with"
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'ruled' | 'framed'",
+          "defaultValue": "ruled",
+          "appliesTo": "slTable",
+          "description": "How much of a frame the set is given"
+        },
+        {
+          "name": "striped",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTable",
+          "description": "A tinted ground on every second record"
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTable",
+          "description": "Whether the header stays while the body scrolls"
+        },
+        {
+          "name": "stickyFooter",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTable",
+          "description": "Whether the summary rows stay while the body scrolls. It pins the tfoot and not the footer bar, which never scrolls."
+        },
+        {
+          "name": "stickyTo",
+          "type": "'scroll' | 'page'",
+          "defaultValue": "scroll",
+          "appliesTo": "slTable",
+          "description": "What the header stays inside: this table own scroller, or whatever scrolls outside it. page releases the scroller, so the table stops scrolling sideways in its frame."
+        },
+        {
+          "name": "options",
+          "type": "readonly TableFilterOption[]",
+          "defaultValue": "[]",
+          "appliesTo": "slTableSetFilter",
+          "description": "The values the column can be filtered to, each with an optional count of its own. With operand tags they are a datalist and the set a typed value must belong to; without them any value is admitted."
+        },
+        {
+          "name": "operand",
+          "type": "'list' | 'tags'",
+          "defaultValue": "list",
+          "appliesTo": "slTableSetFilter",
+          "description": "How the values are chosen: the search, the covering checkbox and the list, or sl-tags-input holding the chosen values as chips. The descriptor is the same list either way."
+        },
+        {
+          "name": "presets",
+          "type": "TemplateRef",
+          "defaultValue": "—",
+          "appliesTo": "slTableDateFilter, slTableTimeFilter, slTableDateTimeFilter",
+          "description": "A template of slDateRangePickerPreset, slTimeRangePickerPreset or slDateTimeRangePickerPreset buttons offered inside the range picker between draws. The descriptor still receives two ISO values."
+        },
+        {
+          "name": "granularity",
+          "type": "'hour' | 'minute' | 'second'",
+          "defaultValue": "minute",
+          "appliesTo": "slTableTimeFilter, slTableDateTimeFilter",
+          "description": "The last unit the picker writes, and the precision the engine compares at: a minute-precision operand matches every second of its minute."
+        },
+        {
+          "name": "value",
+          "type": "TextFilter | NumberFilter | DateFilter | TimeFilter | DateTimeFilter | BooleanFilter | SetFilter | null",
+          "defaultValue": "null",
+          "appliesTo": "slTable*Filter",
+          "description": "The descriptor the column is filtered by, typed as its own kind. Two-way through [(value)], and valueChangeRequest carries the reason; both fire once, on Apply."
+        },
+        {
+          "name": "operators",
+          "type": "readonly string[]",
+          "defaultValue": "the kind own list",
+          "appliesTo": "slTable*Filter",
+          "description": "Narrows what the chooser offers, in the order given. defaultOperator picks the one the panel opens on."
+        },
+        {
+          "name": "conditions",
+          "type": "number",
+          "defaultValue": "2",
+          "appliesTo": "slTable*Filter",
+          "description": "How many conditions the panel offers. The second appears once the first is complete."
+        },
+        {
+          "name": "searchThreshold",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "slTableSetFilter",
+          "description": "How many values bring a search with them. searchable states it outright."
+        },
+        {
+          "name": "cellAlign",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "center",
+          "appliesTo": "slTable",
+          "description": "Where every cell content sits in a row as tall as its tallest cell. A cell states blockAlign to answer differently."
+        },
+        {
+          "name": "layout",
+          "type": "'auto' | 'fixed'",
+          "defaultValue": "auto",
+          "appliesTo": "slTable",
+          "description": "Whether the browser sizes the columns from their content or from what you state"
+        },
+        {
+          "name": "selectionMode",
+          "type": "'none' | 'single' | 'multiple'",
+          "defaultValue": "none",
+          "appliesTo": "slTable",
+          "description": "How many records may be chosen at once"
+        },
+        {
+          "name": "columns",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "slTable",
+          "description": "How many columns the spanning parts span"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTable",
+          "description": "A refresh over rows already shown: aria-busy, and nothing moves"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TableMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slTable",
+          "description": "Words laid over the language in force, key by key: selection, expansion, sort and every word of the column filters"
+        },
+        {
+          "name": "skeletonRows",
+          "type": "number",
+          "defaultValue": "5",
+          "appliesTo": "slTableLoader",
+          "description": "How many skeleton rows a first load draws"
+        },
+        {
+          "name": "totalRowCount",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "slTableContent",
+          "description": "The size of the set behind a page, written as aria-rowcount"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTableContent",
+          "description": "The table’s name when it has no caption, written on the table element"
+        },
+        {
+          "name": "scrollLabel",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTableContent",
+          "description": "The name the scrolling region takes while it overflows, over the catalog’s"
+        },
+        {
+          "name": "scrollLabelledBy",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTableContent",
+          "description": "The element that names the region instead, usually the caption"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTableRow",
+          "description": "The record key the selection and the expansion are held by"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTableRow",
+          "description": "A record the reader may not choose; it leaves the set the header covers"
+        },
+        {
+          "name": "rowIndex",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "slTableRow",
+          "description": "The record position in the whole set, written as aria-rowindex"
+        },
+        {
+          "name": "column",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTableColumnHeader, slTableSort",
+          "description": "The column key the sort descriptor names"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "the three cell parts",
+          "description": "Which edge the value stands on, resolved logically"
+        },
+        {
+          "name": "numeric",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "the three cell parts",
+          "description": "Tabular figures, and the end edge unless align says otherwise"
+        },
+        {
+          "name": "blockAlign",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "center",
+          "appliesTo": "the three cell parts and both selection cells",
+          "description": "Where this cell content sits in its row, overriding the table own cellAlign"
+        },
+        {
+          "name": "text",
+          "type": "'wrap' | 'truncate' | 'nowrap'",
+          "defaultValue": "wrap",
+          "appliesTo": "the three cell parts",
+          "description": "What a value longer than its column does"
+        },
+        {
+          "name": "sticky",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "the three cell parts and both selection cells",
+          "description": "Which edge the column is pinned to while the table scrolls past it"
+        },
+        {
+          "name": "stickyOffset",
+          "type": "string",
+          "defaultValue": "0",
+          "appliesTo": "the three cell parts and both selection cells",
+          "description": "Where the pinned column stops, as a CSS length. Two columns pinned to the same edge need the second to state how wide the first is — beside a selection column that is --slotted-table-selection-size, which is 3rem."
+        },
+        {
+          "name": "colSpan",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "slTableDetail, slTableEmpty",
+          "description": "How many columns the part spans, defaulting to the table own count"
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs",
+          "type": "slTable, slTableRow, slTableContent",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Reaches the instance from the template: row.expanded(), table.rows(), content.scrollToRow()"
+        },
+        {
+          "name": "provideTableDefaults()",
+          "type": "Partial<TableDefaults>",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets the frame, the layout and the selection once; an input on the table still wins"
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "slTable",
+          "description": "The selection as a form value: [formControl] or [(ngModel)] on the table itself"
+        },
+        {
+          "name": "ng-content",
+          "type": "projected",
+          "defaultValue": "—",
+          "appliesTo": "slTableContent",
+          "description": "Your caption, header, body, summary and footer are projected into the table the directive draws"
+        },
+        {
+          "name": "SL_TABLE_PARTS",
+          "type": "readonly Type[]",
+          "defaultValue": "—",
+          "appliesTo": "a standalone component",
+          "description": "Every part in one import, for a template that uses most of them"
+        }
+      ],
+      "events": [
+        {
+          "name": "sortChange",
+          "payload": "TableSortDescriptor | null",
+          "when": "The two-way half of the model: the column and the direction, or null when the third press clears it."
+        },
+        {
+          "name": "sortChangeRequest",
+          "payload": "ChangeRequest<TableSortDescriptor | null>",
+          "when": "The same transition with the reason — pointer, keyboard, clear or programmatic — the value it replaces and cancel()."
+        },
+        {
+          "name": "valueChange",
+          "payload": "readonly string[]",
+          "when": "The chosen rows, in the collection order rather than the order they were pressed."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "The selection with its reason: select for a range or a select-all, clear when the set is emptied, pointer otherwise."
+        },
+        {
+          "name": "expandedChange",
+          "payload": "readonly string[]",
+          "when": "The rows whose detail is open, after the press that opened or closed one."
+        },
+        {
+          "name": "expandedChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "The same transition, with the reason and the originating event."
+        }
+      ],
+      "accessibility": [
+        "The role is table and not grid, and the difference is the whole boundary with data-grid. The APG says a table \"is not an interactive widget. Thus, its cells are not focusable or selectable\", so every control inside is its own tab stop and the family binds no key. Column resizing, virtualisation, multi-column sort and row activation all need the grid pattern and are deferred to the family that has it.",
+        "Every role comes from the platform: table, thead, tbody, tfoot, tr, th and td already carry table, rowgroup, row, columnheader, rowheader and cell. The family writes none of them, and it writes no aria-labelledby either — a caption is the accessible name by the browser own rule, whether it is visible or visually hidden.",
+        "scope=\"col\" on a column header and scope=\"row\" on a row header are what make a screen reader repeat the column name and the record name in each cell. They are the two attributes §12 of the feature guide asks for by name.",
+        "aria-sort is written on the sorted header and removed from every other, because ARIA has no way to state a sort level and a second sorted column would be silent or a lie. The change is also announced politely with the column and the direction: a property that changes silently is a change no reader hears.",
+        "A row is not selectable under this role, so it carries no aria-selected. The state is painted with data-selected and announced by the checkbox that owns it, whose name is a visually hidden label rather than an aria-label on the wrapper — the wrapper is not the control.",
+        "aria-rowcount and aria-rowindex are written exactly when you state a total larger than the DOM, which is what the Grid and Table Properties practice requires. The practice warns that writing aria-rowindex on some rows and not others has devastating effects, so the family writes neither unless you state both.",
+        "The scroller becomes a region with a tab stop and a name only while the table overflows, measured after the first render rather than assumed. A wide table with no tab stop is unreachable without a pointer — a WCAG 2.2 level A failure — and a tab stop on a table that fits is one a reader presses for nothing.",
+        "The expander is the Disclosure pattern: a button with aria-expanded, and with aria-controls naming the detail row while it is open. Your own @if keeps a closed detail out of the DOM, because a component whose host is the tr cannot remove that tr from inside itself and an empty row is a row a screen reader still counts.",
+        "A selected row is said by its ground and its ink together, and by the checkbox mark. R1 of this repository forbids the rail two families reached for, and in the high-contrast scheme every tone ground is the page own white — so the mark is what survives."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-md",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--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-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-shadow-xs",
+    "--slotted-space-2",
+    "--slotted-space-5",
+    "--slotted-space-9",
+    "--slotted-surface",
+    "--slotted-table-border-color",
+    "--slotted-table-border-color-strong",
+    "--slotted-table-border-width",
+    "--slotted-table-cell-padding-block",
+    "--slotted-table-cell-padding-inline",
+    "--slotted-table-color",
+    "--slotted-table-color-muted",
+    "--slotted-table-column-actions-size",
+    "--slotted-table-control-radius",
+    "--slotted-table-font-family",
+    "--slotted-table-font-size",
+    "--slotted-table-gap",
+    "--slotted-table-header-surface",
+    "--slotted-table-header-surface-hover",
+    "--slotted-table-icon-size",
+    "--slotted-table-radius",
+    "--slotted-table-row-color-selected",
+    "--slotted-table-row-min-block-size",
+    "--slotted-table-row-surface-hover",
+    "--slotted-table-row-surface-selected",
+    "--slotted-table-row-surface-selected-hover",
+    "--slotted-table-row-surface-stripe",
+    "--slotted-table-selection-size",
+    "--slotted-table-shadow",
+    "--slotted-table-sticky-inset",
+    "--slotted-table-sticky-offset",
+    "--slotted-table-sticky-offset-end",
+    "--slotted-table-surface",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-sticky"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Every axis on one table, driven by the controls below the canvas. Change the variant, turn the stripes on, then narrow the window: the table scrolls inside its own frame rather than pushing the page over.",
+      "language": "html",
+      "source": "<div slTable [columns]=\"3\">\n  <div slTableContent>\n    <caption slTableCaption>\n      Invoices\n    </caption>\n    <thead slTableHead>\n      <tr slTableRow>\n        <th slTableColumnHeader>Invoice</th>\n        <th slTableColumnHeader>Client</th>\n        <th slTableColumnHeader numeric>Amount</th>\n      </tr>\n    </thead>\n    <tbody slTableBody>\n      @for (invoice of invoices(); track invoice.id) {\n        <tr slTableRow [value]=\"invoice.id\">\n          <th slTableRowHeader>{{ invoice.id }}</th>\n          <td slTableCell>{{ invoice.client }}</td>\n          <td slTableCell numeric>{{ invoice.amount }}</td>\n        </tr>\n      }\n    </tbody>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "Nothing, a rule, or a frame",
+      "note": "Plain is the form that belongs inside a card, where the card already draws the box. Ruled puts a hairline between records. Framed is the listing screen: the set reads as one object, and the footer bar sits inside it.",
+      "language": "html",
+      "source": "<div slTable variant=\"plain\"></div>\n<div slTable variant=\"ruled\"></div>\n<div slTable variant=\"framed\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "striped",
+      "title": "A stripe to carry the eye across",
+      "note": "Off by default, because a stripe costs a row its own state colours. It is mixed from the ink at five per cent, one step under the header band, and every state is painted over it: a striped row that is selected reads as selected.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst STOCK = [\n  { sku: 'PRD-0412', product: 'Chai', warehouse: 'Reno', onHand: 390, reserved: 42 },\n  { sku: 'PRD-0413', product: 'Chang', warehouse: 'Reno', onHand: 170, reserved: 12 },\n  { sku: 'PRD-0414', product: 'Aniseed Syrup', warehouse: 'Columbus', onHand: 130, reserved: 70 },\n  {\n    sku: 'PRD-0415',\n    product: \"Chef Anton's Cajun Seasoning\",\n    warehouse: 'Savannah',\n    onHand: 530,\n    reserved: 0,\n  },\n  {\n    sku: 'PRD-0416',\n    product: \"Grandma's Boysenberry Spread\",\n    warehouse: 'Columbus',\n    onHand: 120,\n    reserved: 25,\n  },\n  {\n    sku: 'PRD-0417',\n    product: 'Northwoods Cranberry Sauce',\n    warehouse: 'Reno',\n    onHand: 60,\n    reserved: 60,\n  },\n];\n\n@Component({\n  selector: 'app-table-striped',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"5\" striped>\n      <div slTableContent aria-label=\"Stock on hand\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>SKU</th>\n            <th slTableColumnHeader>Product</th>\n            <th slTableColumnHeader>Warehouse</th>\n            <th slTableColumnHeader numeric>On hand</th>\n            <th slTableColumnHeader numeric>Reserved</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (item of stock; track item.sku) {\n            <tr slTableRow [value]=\"item.sku\">\n              <th slTableRowHeader text=\"nowrap\">{{ item.sku }}</th>\n              <td slTableCell>{{ item.product }}</td>\n              <td slTableCell>{{ item.warehouse }}</td>\n              <td slTableCell numeric>{{ item.onHand }}</td>\n              <td slTableCell numeric>{{ item.reserved }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableStriped {\n  readonly stock = STOCK;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sorting",
+      "title": "Ordered by one column, and said out loud",
+      "note": "Press a header: ascending, then descending, then none. The family holds the descriptor and reorders nothing — the rows are yours — so apply it to your own array or send it to your query. The change is announced, because aria-sort alone is silent.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSort,\n  type TableSortDescriptor,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst ORDERS = [\n  { id: 'SO-10421', customer: 'Alfreds Futterkiste', placed: '2026-09-28', total: 1240 },\n  { id: 'SO-10422', customer: \"Bon app'\", placed: '2026-09-29', total: 860.5 },\n  { id: 'SO-10423', customer: 'Ernst Handel', placed: '2026-09-27', total: 3410.25 },\n  { id: 'SO-10424', customer: 'Folk och fä HB', placed: '2026-09-30', total: 512 },\n];\n\ntype Order = (typeof ORDERS)[number];\n\nfunction sortOrders(rows: readonly Order[], sort: TableSortDescriptor | null): readonly Order[] {\n  if (sort === null) return rows;\n  const key = sort.column as keyof Order;\n  const sign = sort.direction === 'ascending' ? 1 : -1;\n  return [...rows].sort((a, b) =>\n    typeof a[key] === 'number'\n      ? ((a[key] as number) - (b[key] as number)) * sign\n      : String(a[key]).localeCompare(String(b[key])) * sign,\n  );\n}\n\n@Component({\n  selector: 'app-table-sorting',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSort,\n  ],\n  template: `\n    <div slTable [columns]=\"4\" [(sort)]=\"sort\">\n      <div slTableContent aria-label=\"Recent orders\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader column=\"id\"><button slTableSort>Order</button></th>\n            <th slTableColumnHeader column=\"customer\"><button slTableSort>Customer</button></th>\n            <th slTableColumnHeader column=\"placed\"><button slTableSort>Placed</button></th>\n            <th slTableColumnHeader column=\"total\" numeric><button slTableSort>Total</button></th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of rows(); track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell text=\"nowrap\">{{ order.placed }}</td>\n              <td slTableCell numeric>{{ usd.format(order.total) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableSorting {\n  readonly sort = signal<TableSortDescriptor | null>({ column: 'placed', direction: 'descending' });\n  readonly rows = computed(() => sortOrders(ORDERS, this.sort()));\n  readonly usd = USD;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "column-controls",
+      "title": "A filter, beside the name it filters",
+      "note": "The family draws the filter: a trigger on the column boundary and a panel that searches, covers what the search left, counts what you counted, and edits a draft. Nothing reaches you until Apply — Escape and a press outside put back the set the panel opened with. What the set means is still your query.",
+      "language": "html",
+      "source": "<th slTableColumnHeader column=\"client\">\n  <button slTableSort>Client</button>\n  <span slTableColumnActions>\n    <span slTableTextFilter columnLabel=\"client\" [(value)]=\"client\"></span>\n  </span>\n</th>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter",
+      "title": "A column filtered to the values you named",
+      "note": "The set filter: a list, a search past eight values through the same locale collator Combobox uses, and a checkbox that covers exactly what the search left. Counts are yours to supply. Nothing reaches you until Apply — Escape and a press outside put back the descriptor the panel opened with — and a filtered column says what is applied in the trigger own name.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { createFilterPredicate, type SetFilter } from '@slotted/core/filter';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnActions,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSetFilter,\n} from '@slotted/angular/table';\n\nconst ORDERS = [\n  { id: 'SO-10421', customer: 'Alfreds Futterkiste', warehouse: 'Reno', status: 'Shipped' },\n  { id: 'SO-10422', customer: \"Bon app'\", warehouse: 'Columbus', status: 'Processing' },\n  { id: 'SO-10423', customer: 'Ernst Handel', warehouse: 'Savannah', status: 'On hold' },\n  { id: 'SO-10424', customer: 'Folk och fä HB', warehouse: 'Reno', status: 'Delivered' },\n  { id: 'SO-10425', customer: 'QUICK-Stop', warehouse: 'Columbus', status: 'Shipped' },\n  { id: 'SO-10426', customer: 'Hanari Carnes', warehouse: 'Savannah', status: 'Processing' },\n];\n\nconst STATUSES = ['Processing', 'On hold', 'Shipped', 'Delivered'].map((value) => ({\n  value,\n  count: ORDERS.filter((order) => order.status === value).length,\n}));\n\n@Component({\n  selector: 'app-table-filter',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnActions,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSetFilter,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Open orders\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Warehouse</th>\n            <th slTableColumnHeader>\n              Status\n              <span slTableColumnActions>\n                <span\n                  slTableSetFilter\n                  columnLabel=\"status\"\n                  [options]=\"statuses\"\n                  [(value)]=\"status\"\n                ></span>\n              </span>\n            </th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of rows(); track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>{{ order.warehouse }}</td>\n              <td slTableCell>{{ order.status }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableFilter {\n  readonly statuses = STATUSES;\n  readonly status = signal<SetFilter | null>(null);\n  readonly rows = computed(() => {\n    const keep = createFilterPredicate(this.status());\n    return ORDERS.filter((order) => keep(order.status));\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-types",
+      "title": "Four columns, four kinds, one predicate",
+      "note": "Text, number, date and boolean, each with the operators its type has and each typed as itself — a slTableTextFilter value is a TextFilter model, and you never unwrap a union to read it. createRowPredicate joins the four, so the screen filters without a switch of its own.",
+      "language": "html",
+      "source": "<span slTableTextFilter columnLabel=\"client\" [(value)]=\"client\"></span>\n<span slTableNumberFilter columnLabel=\"amount\" [(value)]=\"total\"></span>\n<span slTableDateFilter columnLabel=\"due\" [(value)]=\"dueAt\"></span>\n<span slTableBooleanFilter columnLabel=\"overdue\" [(value)]=\"overdue\"></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-conditions",
+      "title": "Two conditions, and the shapes an operator makes",
+      "note": "Between takes two operands and is empty takes none, so the panel grows a field or loses both — and says so, because a form that changes shape under a reader who cannot see it says nothing otherwise. The second condition appears once the first is complete, joined by And or Or; past two, a rule set is Filter Bar work.",
+      "language": "html",
+      "source": "<span slTableNumberFilter columnLabel=\"amount\" [(value)]=\"amount\"></span>\n<span slTableTextFilter columnLabel=\"client\" [conditions]=\"1\" [(value)]=\"client\"></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-time",
+      "title": "A time column, and a window that crosses midnight",
+      "note": "slTableTimeFilter draws the time picker, and one time range picker for between, and holds ISO text at the column granularity — 22:00 at a minute, 22:00:00 at a second — which is the precision the engine compares at. A between whose start is later than its end is the overnight window, not an empty set: 22:00 to 02:00 keeps 23:30 and 01:15. The range picker marks that pair out of order until its wrap capability lands; the filter applies it as the window either way. Your shifts go in through presets.",
+      "language": "html",
+      "source": "<ng-template #shifts>\n  <button slTimeRangePickerPreset [range]=\"morning\">Morning</button>\n</ng-template>\n<span\n  slTableTimeFilter\n  columnLabel=\"cut-off\"\n  granularity=\"minute\"\n  [presets]=\"shifts\"\n  [(value)]=\"cutoff\"\n></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-datetime",
+      "title": "A date-time column, at the precision you wrote",
+      "note": "slTableDateTimeFilter draws the date-time picker, and one date-time range picker for between, and holds 2026-09-14T09:00 as text. Compared at the operand own precision, so after 2026-09-14T09 starts at ten o clock and is 2026-09-14 matches the whole day. A condition with one half missing is inactive until both halves exist, and Apply reports nothing for it. Your windows go in through presets.",
+      "language": "html",
+      "source": "<ng-template #windows>\n  <button slDateTimeRangePickerPreset [range]=\"earlyOctober\">Early October</button>\n</ng-template>\n<span\n  slTableDateTimeFilter\n  columnLabel=\"scheduled\"\n  timeZone=\"Europe/Lisbon\"\n  [presets]=\"windows\"\n  [(value)]=\"scheduled\"\n></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-range",
+      "title": "Between two dates, as one range picker",
+      "note": "The between of a date column is one date-range-picker rather than two pickers: it says the run length while it is drawn, takes the ends in either order and carries your presets as a template of slDateRangePickerPreset buttons. The descriptor is unchanged — between, an ISO day and another — so a saved view written with two pickers opens in the range picker.",
+      "language": "html",
+      "source": "<ng-template #presets>\n  <button slDateRangePickerPreset [range]=\"september\">September</button>\n  <button slDateRangePickerPreset [range]=\"quarter\">Q4</button>\n</ng-template>\n<span slTableDateFilter columnLabel=\"due\" [presets]=\"presets\" [(value)]=\"dueAt\"></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-tags",
+      "title": "A set typed as chips",
+      "note": "operand of tags draws tags-input where the checkbox list stood, for a list too long to tick. With options, they are a native datalist of suggestions and a typed value outside them is refused; without options any value is admitted. The chips hold the same readonly string[] the list held, so the operator stays anyOf or noneOf and a saved view is read by either operand.",
+      "language": "html",
+      "source": "<span\n  slTableSetFilter\n  columnLabel=\"client\"\n  operand=\"tags\"\n  [options]=\"clients\"\n  [(value)]=\"client\"\n></span>\n<span slTableSetFilter columnLabel=\"invoice\" operand=\"tags\" [(value)]=\"invoice\"></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "editing",
+      "title": "A plain control in a cell",
+      "note": "A cell whose child is a plain control gives up its inset: padding goes to zero and the control reads the cell padding and the row height through the control tokens, so the edited value stands where the read value stood and the row does not grow. The rule names the fourteen plain field families and nothing else. The control width is its own, as in a form.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst BINS = ['A-04', 'A-07', 'B-12', 'C-01'];\n\nconst STOCK = [\n  { sku: 'PRD-0412', product: 'Chai', counted: 390, bin: 'A-04' },\n  { sku: 'PRD-0413', product: 'Chang', counted: 170, bin: 'A-04' },\n  { sku: 'PRD-0414', product: 'Aniseed Syrup', counted: 130, bin: 'B-12' },\n  { sku: 'PRD-0415', product: \"Chef Anton's Cajun Seasoning\", counted: 53, bin: 'C-01' },\n];\n\ntype Line = (typeof STOCK)[number];\n\n@Component({\n  selector: 'app-table-editing',\n  imports: [\n    SlNumberField,\n    SlNumberFieldInput,\n    SlSelect,\n    SlSelectItem,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Stock take, Reno\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>SKU</th>\n            <th slTableColumnHeader>Product</th>\n            <th slTableColumnHeader numeric>Counted</th>\n            <th slTableColumnHeader>Bin</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (line of lines(); track line.sku) {\n            <tr slTableRow [value]=\"line.sku\">\n              <th slTableRowHeader text=\"nowrap\">{{ line.sku }}</th>\n              <td slTableCell>{{ line.product }}</td>\n              <td slTableCell numeric>\n                <div slNumberField size=\"sm\" stepper=\"none\" variant=\"plain\">\n                  <input\n                    slNumberFieldInput\n                    min=\"0\"\n                    [attr.aria-label]=\"'Counted for ' + line.sku\"\n                    [value]=\"line.counted\"\n                    (valueChange)=\"update(line.sku, { counted: $event.value ?? 0 })\"\n                  />\n                </div>\n              </td>\n              <td slTableCell>\n                <sl-select\n                  size=\"sm\"\n                  variant=\"plain\"\n                  [aria-label]=\"'Bin of ' + line.sku\"\n                  [value]=\"line.bin\"\n                  (valueChange)=\"setBin(line.sku, $event)\"\n                >\n                  @for (bin of bins; track bin) {\n                    <sl-select-item [value]=\"bin\">{{ bin }}</sl-select-item>\n                  }\n                </sl-select>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableEditing {\n  readonly bins = BINS;\n  readonly lines = signal<readonly Line[]>(STOCK);\n\n  setBin(sku: string, bin: SelectSelection): void {\n    if (typeof bin === 'string') this.update(sku, { bin });\n  }\n\n  update(sku: string, change: Partial<Line>): void {\n    this.lines.update((current) =>\n      current.map((line) => (line.sku === sku ? { ...line, ...change } : line)),\n    );\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "selection",
+      "title": "Choosing records, and what all means",
+      "note": "Hold Shift and press a second checkbox to take everything between. The header checkbox covers the rows in the DOM and says how many in its own name — a selection over a whole result set is a decision only your query can make.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableFooter,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSelect,\n  SlTableSelectAll,\n} from '@slotted/angular/table';\nimport { SlText } from '@slotted/angular/typography';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst INVOICES = [\n  { id: 'INV-2041', customer: 'Alfreds Futterkiste', status: 'Overdue', amount: 1240 },\n  { id: 'INV-2042', customer: 'Great Lakes Food Market', status: 'Overdue', amount: 18402.75 },\n  { id: 'INV-2043', customer: 'Hanari Carnes', status: 'Draft', amount: 86.4 },\n  { id: 'INV-2044', customer: 'Island Trading', status: 'Sent', amount: 2310 },\n  { id: 'INV-2045', customer: 'Lonesome Pine Restaurant', status: 'Sent', amount: 645.2 },\n];\n\n@Component({\n  selector: 'app-table-selection',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableFooter,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSelect,\n    SlTableSelectAll,\n    SlText,\n  ],\n  template: `\n    <div slTable [columns]=\"5\" selectionMode=\"multiple\" [(value)]=\"chosen\">\n      <div slTableContent aria-label=\"Invoices to send reminders for\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableSelectAll></th>\n            <th slTableColumnHeader>Invoice</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Status</th>\n            <th slTableColumnHeader numeric>Amount</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (invoice of invoices; track invoice.id) {\n            <tr slTableRow [value]=\"invoice.id\" [disabled]=\"invoice.status === 'Draft'\">\n              <td slTableSelect></td>\n              <th slTableRowHeader text=\"nowrap\">{{ invoice.id }}</th>\n              <td slTableCell>{{ invoice.customer }}</td>\n              <td slTableCell>{{ invoice.status }}</td>\n              <td slTableCell numeric>{{ usd.format(invoice.amount) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n      <div slTableFooter>\n        <span slText size=\"sm\" tone=\"muted\"\n          >{{ chosen().length }} selected · {{ usd.format(total()) }}</span\n        >\n      </div>\n    </div>\n  `,\n})\nexport class TableSelection {\n  readonly invoices = INVOICES;\n  readonly usd = USD;\n  readonly chosen = signal<readonly string[]>(['INV-2041']);\n  readonly total = computed(() =>\n    INVOICES.filter((invoice) => this.chosen().includes(invoice.id)).reduce(\n      (sum, invoice) => sum + invoice.amount,\n      0,\n    ),\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "expansion",
+      "title": "A record with more to say",
+      "note": "The expander is the Disclosure pattern: a button carrying aria-expanded and naming the row it opens. Control flow in the template keeps a closed detail out of the DOM, which is the one asymmetry with React and belongs to the frameworks rather than the family.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableDetail,\n  SlTableExpander,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst RETURNS = [\n  {\n    id: 'RMA-0811',\n    order: 'SO-10398',\n    customer: 'Ernst Handel',\n    refund: 214.5,\n    detail:\n      'Two cases of Chang arrived crushed. Carrier claim filed with UPS on Sep 24; refund issued to the original card.',\n  },\n  {\n    id: 'RMA-0812',\n    order: 'SO-10402',\n    customer: 'QUICK-Stop',\n    refund: 58,\n    detail:\n      'Wrong flavour shipped. Replacement sent from Columbus; the returned jar goes back to stock after inspection.',\n  },\n  {\n    id: 'RMA-0813',\n    order: 'SO-10407',\n    customer: 'Hanari Carnes',\n    refund: 1120,\n    detail:\n      'Order cancelled after dispatch. Pallet returned to Savannah unopened; restocking fee waived by account manager.',\n  },\n];\n\n@Component({\n  selector: 'app-table-expansion',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableDetail,\n    SlTableExpander,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"5\" [(expanded)]=\"expanded\">\n      <div slTableContent aria-label=\"Returns\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader></th>\n            <th slTableColumnHeader>Return</th>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Refund</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (item of returns; track item.id) {\n            <tr slTableRow [value]=\"item.id\" #row=\"slTableRow\">\n              <td slTableCell><button slTableExpander></button></td>\n              <th slTableRowHeader text=\"nowrap\">{{ item.id }}</th>\n              <td slTableCell>{{ item.order }}</td>\n              <td slTableCell>{{ item.customer }}</td>\n              <td slTableCell numeric>{{ usd.format(item.refund) }}</td>\n            </tr>\n            @if (row.expanded()) {\n              <tr slTableDetail [value]=\"item.id\">\n                {{\n                  item.detail\n                }}\n              </tr>\n            }\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableExpansion {\n  readonly returns = RETURNS;\n  readonly usd = USD;\n  readonly expanded = signal<readonly string[]>(['RMA-0811']);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sticky",
+      "title": "A header, a summary and a column that stay",
+      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSummary,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\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'];\n\nconst ORDERS = Array.from({ length: 30 }, (_, index) => ({\n  id: `SO-${10400 + index}`,\n  customer: CUSTOMERS[index % CUSTOMERS.length],\n  warehouse: WAREHOUSES[index % WAREHOUSES.length],\n  total: 180 + ((index * 397) % 2400),\n}));\n\n@Component({\n  selector: 'app-table-sticky',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSummary,\n  ],\n  template: `\n    <div slTable [columns]=\"4\" stickyFooter stickyHeader>\n      <div slTableContent aria-label=\"September orders\" style=\"max-block-size: 20rem\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Warehouse</th>\n            <th slTableColumnHeader numeric>Total</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders; track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>{{ order.warehouse }}</td>\n              <td slTableCell numeric>{{ usd.format(order.total) }}</td>\n            </tr>\n          }\n        </tbody>\n        <tfoot slTableSummary>\n          <tr slTableRow>\n            <td slTableCell [attr.colspan]=\"3\">{{ orders.length }} orders</td>\n            <td slTableCell numeric>{{ usd.format(total) }}</td>\n          </tr>\n        </tfoot>\n      </div>\n    </div>\n  `,\n})\nexport class TableSticky {\n  readonly orders = ORDERS;\n  readonly total = ORDERS.reduce((sum, order) => sum + order.total, 0);\n  readonly usd = USD;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scroll",
+      "title": "Wider than the space it has",
+      "note": "The scroller takes a tab stop, a role and a name only while it overflows, so a table that fits costs a keyboard reader nothing. Tab to it and the arrow keys, Page keys, Home and End all scroll it.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst SHIPMENTS = [\n  {\n    id: 'SH-3301',\n    order: 'SO-10421',\n    customer: 'Alfreds Futterkiste',\n    origin: 'Reno, NV',\n    destination: 'Berlin, DE',\n    carrier: 'UPS Worldwide',\n    shipped: 'Sep 28, 2026',\n    cost: 412.8,\n  },\n  {\n    id: 'SH-3302',\n    order: 'SO-10422',\n    customer: \"Bon app'\",\n    origin: 'Columbus, OH',\n    destination: 'Marseille, FR',\n    carrier: 'FedEx International',\n    shipped: 'Sep 29, 2026',\n    cost: 288.15,\n  },\n  {\n    id: 'SH-3303',\n    order: 'SO-10423',\n    customer: 'Ernst Handel',\n    origin: 'Savannah, GA',\n    destination: 'Graz, AT',\n    carrier: 'DHL Express',\n    shipped: 'Sep 29, 2026',\n    cost: 506.4,\n  },\n  {\n    id: 'SH-3304',\n    order: 'SO-10425',\n    customer: 'QUICK-Stop',\n    origin: 'Columbus, OH',\n    destination: 'Cunewalde, DE',\n    carrier: 'UPS Worldwide',\n    shipped: 'Sep 30, 2026',\n    cost: 347.9,\n  },\n];\n\n@Component({\n  selector: 'app-table-scroll',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"8\">\n      <div slTableContent aria-label=\"International shipments\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader sticky=\"start\" text=\"nowrap\">Shipment</th>\n            <th slTableColumnHeader text=\"nowrap\">Order</th>\n            <th slTableColumnHeader text=\"nowrap\">Customer</th>\n            <th slTableColumnHeader text=\"nowrap\">Origin</th>\n            <th slTableColumnHeader text=\"nowrap\">Destination</th>\n            <th slTableColumnHeader text=\"nowrap\">Carrier</th>\n            <th slTableColumnHeader text=\"nowrap\">Shipped</th>\n            <th slTableColumnHeader numeric text=\"nowrap\">Cost</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (shipment of shipments; track shipment.id) {\n            <tr slTableRow [value]=\"shipment.id\">\n              <th slTableRowHeader sticky=\"start\" text=\"nowrap\">{{ shipment.id }}</th>\n              <td slTableCell text=\"nowrap\">{{ shipment.order }}</td>\n              <td slTableCell text=\"nowrap\">{{ shipment.customer }}</td>\n              <td slTableCell text=\"nowrap\">{{ shipment.origin }}</td>\n              <td slTableCell text=\"nowrap\">{{ shipment.destination }}</td>\n              <td slTableCell text=\"nowrap\">{{ shipment.carrier }}</td>\n              <td slTableCell text=\"nowrap\">{{ shipment.shipped }}</td>\n              <td slTableCell numeric>{{ usd.format(shipment.cost) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableScroll {\n  readonly shipments = SHIPMENTS;\n  readonly usd = USD;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "alignment",
+      "title": "Where a value stands, and how its digits line up",
+      "note": "Alignment is logical, so a column aligned to the end is on the right in English and on the left in Arabic. Numeric is a separate fact: it sets tabular figures, and aligns to the end unless you say otherwise.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst INVOICES = [\n  { id: 'INV-2041', customer: 'Alfreds Futterkiste', region: 'EU', due: 'Oct 4', amount: 1240 },\n  {\n    id: 'INV-2042',\n    customer: 'Great Lakes Food Market',\n    region: 'NA',\n    due: 'Oct 9',\n    amount: 18402.75,\n  },\n  { id: 'INV-2043', customer: 'Hanari Carnes', region: 'SA', due: 'Oct 12', amount: 86.4 },\n];\n\n@Component({\n  selector: 'app-table-alignment',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Invoices due\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader align=\"center\">Region</th>\n            <th slTableColumnHeader align=\"end\">Due</th>\n            <th slTableColumnHeader numeric>Amount</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (invoice of invoices; track invoice.id) {\n            <tr slTableRow [value]=\"invoice.id\">\n              <th slTableRowHeader>{{ invoice.customer }}</th>\n              <td slTableCell align=\"center\">{{ invoice.region }}</td>\n              <td slTableCell align=\"end\">{{ invoice.due }}</td>\n              <td slTableCell numeric>{{ usd.format(invoice.amount) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableAlignment {\n  readonly invoices = INVOICES;\n  readonly usd = USD;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "text",
+      "title": "A value longer than its column",
+      "note": "Wrap breaks an unbroken token — a hash, a URL, an identifier — rather than letting it set the column width. Truncate keeps one line with the whole value still in the DOM. Nowrap never breaks. None of the three removes anything.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst NOTES = [\n  {\n    id: 'SO-10421',\n    note: 'Leave at the loading dock behind the warehouse; the front office closes at noon on Fridays.',\n    tracking: '1Z999AA10123456784',\n  },\n  {\n    id: 'SO-10422',\n    note: 'Customer asked for the invoice to be emailed to accounts payable rather than printed.',\n    tracking: '1Z999AA10123456785',\n  },\n];\n\n@Component({\n  selector: 'app-table-text',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"3\" layout=\"fixed\">\n      <div slTableContent aria-label=\"Delivery notes\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Note</th>\n            <th slTableColumnHeader>Tracking</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (row of notes; track row.id) {\n            <tr slTableRow [value]=\"row.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ row.id }}</th>\n              <td slTableCell text=\"truncate\">{{ row.note }}</td>\n              <td slTableCell text=\"wrap\">{{ row.tracking }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableText {\n  readonly notes = NOTES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "footer",
+      "title": "The totals, and the page",
+      "note": "Two different feet. The summary is a tfoot inside the table, where a total belongs beside the column it totals. The footer is a bar outside it and inside the frame, which is where the paging control goes and where it does not scroll sideways.",
+      "language": "html",
+      "source": "<div slTable>\n  <div slTableContent [totalRowCount]=\"128\">\n    <tfoot slTableSummary>\n      <tr slTableRow>\n        <td slTableCell numeric>11,061.25</td>\n      </tr>\n    </tfoot>\n  </div>\n  <div slTableFooter>\n    <span>3 of 128 invoices</span>\n    <nav slPagination [count]=\"128\" [pageSize]=\"3\"></nav>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty-and-loading",
+      "title": "Nothing yet, nothing at all, and something arriving",
+      "note": "A first load draws skeleton rows, so the shape is visible before the content. A refresh over rows already read writes aria-busy and dims them without moving anything — a reader looking at row forty stays there.",
+      "language": "html",
+      "source": "@if (loading() && rows().length === 0) {\n  <tbody slTableLoader [skeletonRows]=\"5\"></tbody>\n} @else if (rows().length === 0) {\n  <tbody slTableBody>\n    <tr slTableRow>\n      <td slTableEmpty>\n        <section slResultState status=\"no-results\"></section>\n      </td>\n    </tr>\n  </tbody>\n} @else {\n  <tbody slTableBody></tbody>\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "density",
+      "title": "The same table, three sizes",
+      "note": "The row reads the control height, the cell reads the control inset and the type reads the control step, so one theme decision retunes the rows, the buttons and the fields together. Density changes the size and never the meaning.",
+      "language": "html",
+      "source": "<div data-slotted-density=\"dense\">\n  <div slTable></div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the table did not choose",
+      "note": "A forty-character identifier, a translated header twice as long as its English, a cell holding a tag and a link. The table is a grid of your own content, so the parts hold whatever a record needs rather than a string.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlAvatar } from '@slotted/angular/avatar';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlLink } from '@slotted/angular/link';\nimport { SlStatusIndicator } from '@slotted/angular/status-indicator';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst ACCOUNTS = [\n  {\n    id: 'ALFKI',\n    name: 'Alfreds Futterkiste',\n    manager: 'Nancy Davolio',\n    sync: 'success',\n    syncLabel: 'In sync',\n    balance: 1240,\n  },\n  {\n    id: 'ERNSH',\n    name: 'Ernst Handel',\n    manager: 'Andrew Fuller',\n    sync: 'warning',\n    syncLabel: 'Delayed',\n    balance: 3410.25,\n  },\n  {\n    id: 'QUICK',\n    name: 'QUICK-Stop',\n    manager: 'Janet Leverling',\n    sync: 'danger',\n    syncLabel: 'Failed',\n    balance: 2088.9,\n  },\n] as const;\n\n@Component({\n  selector: 'app-table-content',\n  imports: [\n    SlAvatar,\n    SlInline,\n    SlLink,\n    SlStatusIndicator,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Key accounts\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Account</th>\n            <th slTableColumnHeader>Account manager</th>\n            <th slTableColumnHeader>ERP sync</th>\n            <th slTableColumnHeader numeric>Balance</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (account of accounts; track account.id) {\n            <tr slTableRow [value]=\"account.id\">\n              <th slTableRowHeader text=\"nowrap\">\n                <a slLink [href]=\"'#' + account.id\">{{ account.name }}</a>\n              </th>\n              <td slTableCell text=\"nowrap\">\n                <div slInline align=\"center\" [gap]=\"2\">\n                  <span slAvatar size=\"sm\" [name]=\"account.manager\"></span>\n                  {{ account.manager }}\n                </div>\n              </td>\n              <td slTableCell text=\"nowrap\">\n                <span slStatusIndicator [status]=\"account.sync\">{{ account.syncLabel }}</span>\n              </td>\n              <td slTableCell numeric>{{ usd.format(account.balance) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableContentExample {\n  readonly accounts = ACCOUNTS;\n  readonly usd = USD;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "listing",
+      "title": "The screen this is reached for",
+      "note": "Sorting, selection with a bulk action, a filter in a header, an identifier pinned at the start and actions pinned at the end, a paging control in the footer. Every piece beside the table is another family, composed rather than built in.",
+      "language": "html",
+      "source": "<div\n  slTable\n  variant=\"framed\"\n  stickyHeader\n  selectionMode=\"multiple\"\n  [columns]=\"5\"\n  [(value)]=\"chosen\"\n  [(sort)]=\"sort\"\n>\n  <div slTableContent [totalRowCount]=\"128\"></div>\n  <div slTableFooter>\n    <nav slPagination [count]=\"128\"></nav>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting the table once, and reaching past it",
+      "note": "provideTableDefaults sets the frame and the layout for everything under that injector, provideSlotted the language, and a table that states an axis itself still wins. Every part is a directive on your own element, so nothing is wrapped that you did not write.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [\n    provideTableDefaults({\n      variant: 'framed',\n      stickyHeader: true,\n    }),\n  ],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Every control is its own tab stop",
+      "note": "A table is not a composite widget, so the table binds no key: Tab reaches the scroller, then each sort button, checkbox and expander in DOM order. Shift with Space on a checkbox takes the range, which is the one gesture the family adds.",
+      "language": "html",
+      "source": "<!-- Enter and Space activate the buttons the table renders. -->\n<!-- Shift + Space on a row checkbox selects from the anchor. -->\n<!-- The scroller answers the arrow, Page, Home and End keys. -->\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "The caption names the table, scope ties every value to its column and its record, aria-sort says the order and the announcer says it changed. A paged table states aria-rowcount so row three of twenty is row three of four hundred.",
+      "language": "html",
+      "source": "<div slTableContent [totalRowCount]=\"412\">\n  <tbody slTableBody>\n    <tr slTableRow value=\"INV-1042\" [rowIndex]=\"41\">\n      <th slTableRowHeader>INV-1042</th>\n    </tr>\n  </tbody>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCaption,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlTag, SlTagBody } from '@slotted/angular/tag';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst TONE = {\n  Delivered: 'success',\n  'On hold': 'warning',\n  Processing: 'accent',\n  Shipped: 'secondary',\n} as const;\n\nconst ORDERS = [\n  {\n    id: 'SO-10421',\n    customer: 'Alfreds Futterkiste',\n    warehouse: 'Reno',\n    status: 'Shipped',\n    total: 1240,\n  },\n  {\n    id: 'SO-10422',\n    customer: \"Bon app'\",\n    warehouse: 'Columbus',\n    status: 'Processing',\n    total: 860.5,\n  },\n  {\n    id: 'SO-10423',\n    customer: 'Ernst Handel',\n    warehouse: 'Savannah',\n    status: 'On hold',\n    total: 3410.25,\n  },\n  {\n    id: 'SO-10424',\n    customer: 'Folk och fä HB',\n    warehouse: 'Reno',\n    status: 'Delivered',\n    total: 512,\n  },\n  {\n    id: 'SO-10425',\n    customer: 'QUICK-Stop',\n    warehouse: 'Columbus',\n    status: 'Shipped',\n    total: 2088.9,\n  },\n] as const;\n\n@Component({\n  selector: 'app-table-basic',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCaption,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTag,\n    SlTagBody,\n  ],\n  template: `\n    <div slTable [columns]=\"5\">\n      <div slTableContent>\n        <caption slTableCaption>\n          Orders placed today\n        </caption>\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Warehouse</th>\n            <th slTableColumnHeader>Status</th>\n            <th slTableColumnHeader numeric>Total</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders; track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>{{ order.warehouse }}</td>\n              <td slTableCell>\n                <span slTag [tone]=\"tone[order.status]\"\n                  ><span slTagBody>{{ order.status }}</span></span\n                >\n              </td>\n              <td slTableCell numeric>{{ usd.format(order.total) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableBasic {\n  readonly orders = ORDERS;\n  readonly tone = TONE;\n  readonly usd = USD;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "empty",
+      "title": "empty.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlResultState,\n  SlResultStateContent,\n  SlResultStateDescription,\n  SlResultStateTitle,\n} from '@slotted/angular/result-state';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableEmpty,\n  SlTableHead,\n  SlTableRow,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-table-empty',\n  imports: [\n    SlResultState,\n    SlResultStateContent,\n    SlResultStateDescription,\n    SlResultStateTitle,\n    SlTable,\n    SlTableBody,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableEmpty,\n    SlTableHead,\n    SlTableRow,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Returns this week\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Return</th>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Refund</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          <tr slTableRow>\n            <td slTableEmpty>\n              <section slResultState status=\"empty\">\n                <div slResultStateContent>\n                  <h3 slResultStateTitle>No returns this week</h3>\n                  <p slResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </p>\n                </div>\n              </section>\n            </td>\n          </tr>\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableEmptyExample {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableLoader,\n  SlTableRow,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-table-loading',\n  imports: [SlTable, SlTableColumnHeader, SlTableContent, SlTableHead, SlTableLoader, SlTableRow],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Purchase orders\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Purchase order</th>\n            <th slTableColumnHeader>Supplier</th>\n            <th slTableColumnHeader>Expected</th>\n            <th slTableColumnHeader numeric>Value</th>\n          </tr>\n        </thead>\n        <tbody slTableLoader [skeletonRows]=\"4\"></tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableLoading {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "orders-list",
+      "title": "orders-list.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { createFilterPredicate, type SetFilter } from '@slotted/core/filter';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPagination,\n  SlPaginationItems,\n  SlPaginationNext,\n  SlPaginationPrevious,\n} from '@slotted/angular/pagination';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnActions,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableFooter,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSelect,\n  SlTableSelectAll,\n  SlTableSetFilter,\n  SlTableSort,\n  type TableSortDescriptor,\n} from '@slotted/angular/table';\nimport { SlText } from '@slotted/angular/typography';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\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];\nconst STATUS_CYCLE = ['Processing', 'Shipped', 'On hold', 'Delivered', 'Processing'];\n\nconst ORDERS = Array.from({ length: 20 }, (_, index) => ({\n  id: `SO-${10421 + index}`,\n  customer: CUSTOMERS[index % CUSTOMERS.length],\n  status: STATUS_CYCLE[index % STATUS_CYCLE.length],\n  total: 140 + ((index * 733) % 4100),\n}));\n\ntype Order = (typeof ORDERS)[number];\n\nconst STATUSES = ['Processing', 'On hold', 'Shipped', 'Delivered'].map((value) => ({\n  value,\n  count: ORDERS.filter((order) => order.status === value).length,\n}));\n\nconst PAGE_SIZE = 6;\n\nfunction sortOrders(rows: readonly Order[], sort: TableSortDescriptor | null): readonly Order[] {\n  if (sort === null) return rows;\n  const key = sort.column as keyof Order;\n  const sign = sort.direction === 'ascending' ? 1 : -1;\n  return [...rows].sort((a, b) =>\n    typeof a[key] === 'number'\n      ? ((a[key] as number) - (b[key] as number)) * sign\n      : String(a[key]).localeCompare(String(b[key])) * sign,\n  );\n}\n\n@Component({\n  selector: 'app-table-orders-list',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPagination,\n    SlPaginationItems,\n    SlPaginationNext,\n    SlPaginationPrevious,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnActions,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableFooter,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSelect,\n    SlTableSelectAll,\n    SlTableSetFilter,\n    SlTableSort,\n    SlText,\n  ],\n  template: `\n    <div slTable [columns]=\"5\" selectionMode=\"multiple\" [(sort)]=\"sort\" [(value)]=\"chosen\">\n      <div slTableContent aria-label=\"Orders\" [totalRowCount]=\"matching().length\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableSelectAll></th>\n            <th slTableColumnHeader column=\"id\"><button slTableSort>Order</button></th>\n            <th slTableColumnHeader column=\"customer\"><button slTableSort>Customer</button></th>\n            <th slTableColumnHeader>\n              Status\n              <span slTableColumnActions>\n                <span\n                  slTableSetFilter\n                  columnLabel=\"status\"\n                  [options]=\"statuses\"\n                  [value]=\"status()\"\n                  (valueChange)=\"filter($event)\"\n                ></span>\n              </span>\n            </th>\n            <th slTableColumnHeader column=\"total\" numeric><button slTableSort>Total</button></th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of rows(); track order.id; let index = $index) {\n            <tr slTableRow [value]=\"order.id\" [rowIndex]=\"first() + index + 1\">\n              <td slTableSelect></td>\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>{{ order.status }}</td>\n              <td slTableCell numeric>{{ usd.format(order.total) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n      <div slTableFooter>\n        <div slInline align=\"center\" [gap]=\"3\">\n          <span slText size=\"sm\" tone=\"muted\">{{ chosen().length }} selected</span>\n          <button\n            slButton\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            [disabled]=\"chosen().length === 0\"\n          >\n            Print packing slips\n          </button>\n        </div>\n        <nav\n          slPagination\n          [count]=\"matching().length\"\n          [page]=\"page()\"\n          [pageSize]=\"pageSize\"\n          (pageChange)=\"page.set($event.value)\"\n        >\n          <button slPaginationPrevious type=\"button\"></button>\n          <sl-pagination-items></sl-pagination-items>\n          <button slPaginationNext type=\"button\"></button>\n        </nav>\n      </div>\n    </div>\n  `,\n})\nexport class TableOrdersList {\n  readonly statuses = STATUSES;\n  readonly pageSize = PAGE_SIZE;\n  readonly usd = USD;\n  readonly sort = signal<TableSortDescriptor | null>({ column: 'id', direction: 'descending' });\n  readonly status = signal<SetFilter | null>(null);\n  readonly chosen = signal<readonly string[]>([]);\n  readonly page = signal(1);\n\n  readonly matching = computed(() => {\n    const keep = createFilterPredicate(this.status());\n    return sortOrders(\n      ORDERS.filter((order) => keep(order.status)),\n      this.sort(),\n    );\n  });\n  readonly first = computed(() => (this.page() - 1) * PAGE_SIZE);\n  readonly rows = computed(() => this.matching().slice(this.first(), this.first() + PAGE_SIZE));\n\n  filter(next: SetFilter | null): void {\n    this.status.set(next);\n    this.page.set(1);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pagination",
+      "title": "pagination.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport {\n  SlPagination,\n  SlPaginationItems,\n  SlPaginationNext,\n  SlPaginationPrevious,\n} from '@slotted/angular/pagination';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableFooter,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlText } from '@slotted/angular/typography';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\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];\n\nconst INVOICES = Array.from({ length: 23 }, (_, index) => ({\n  id: `INV-${2041 + index}`,\n  customer: CUSTOMERS[index % CUSTOMERS.length],\n  amount: 120 + ((index * 613) % 3900),\n}));\n\nconst PAGE_SIZE = 5;\n\n@Component({\n  selector: 'app-table-pagination',\n  imports: [\n    SlPagination,\n    SlPaginationItems,\n    SlPaginationNext,\n    SlPaginationPrevious,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableFooter,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlText,\n  ],\n  template: `\n    <div slTable [columns]=\"3\">\n      <div slTableContent aria-label=\"Invoices\" [totalRowCount]=\"invoices.length\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Invoice</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Amount</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (invoice of rows(); track invoice.id; let index = $index) {\n            <tr slTableRow [value]=\"invoice.id\" [rowIndex]=\"first() + index + 1\">\n              <th slTableRowHeader text=\"nowrap\">{{ invoice.id }}</th>\n              <td slTableCell>{{ invoice.customer }}</td>\n              <td slTableCell numeric>{{ usd.format(invoice.amount) }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n      <div slTableFooter>\n        <span slText size=\"sm\" tone=\"muted\"\n          >{{ first() + 1 }}–{{ first() + rows().length }} of {{ invoices.length }}</span\n        >\n        <nav\n          slPagination\n          [count]=\"invoices.length\"\n          [page]=\"page()\"\n          [pageSize]=\"pageSize\"\n          (pageChange)=\"page.set($event.value)\"\n        >\n          <button slPaginationPrevious type=\"button\"></button>\n          <sl-pagination-items></sl-pagination-items>\n          <button slPaginationNext type=\"button\"></button>\n        </nav>\n      </div>\n    </div>\n  `,\n})\nexport class TablePagination {\n  readonly invoices = INVOICES;\n  readonly pageSize = PAGE_SIZE;\n  readonly usd = USD;\n  readonly page = signal(1);\n  readonly first = computed(() => (this.page() - 1) * PAGE_SIZE);\n  readonly rows = computed(() => INVOICES.slice(this.first(), this.first() + PAGE_SIZE));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "refreshing",
+      "title": "refreshing.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, DestroyRef, inject, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst PURCHASE_ORDERS = [\n  { id: 'PO-7710', supplier: 'Exotic Liquids', expected: 'Oct 3', value: 4120 },\n  { id: 'PO-7711', supplier: 'Tokyo Traders', expected: 'Oct 6', value: 2875.5 },\n  { id: 'PO-7712', supplier: 'Pavlova, Ltd.', expected: 'Oct 8', value: 9310 },\n];\n\n@Component({\n  selector: 'app-table-refreshing',\n  imports: [\n    SlButton,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slStack align=\"start\" [gap]=\"3\">\n      <button\n        slButton\n        type=\"button\"\n        size=\"sm\"\n        variant=\"outline\"\n        [loading]=\"loading()\"\n        (click)=\"refresh()\"\n      >\n        Refresh\n      </button>\n      <div slTable [columns]=\"4\" [loading]=\"loading()\">\n        <div slTableContent aria-label=\"Purchase orders\">\n          <thead slTableHead>\n            <tr slTableRow>\n              <th slTableColumnHeader>Purchase order</th>\n              <th slTableColumnHeader>Supplier</th>\n              <th slTableColumnHeader>Expected</th>\n              <th slTableColumnHeader numeric>Value</th>\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (order of orders; track order.id) {\n              <tr slTableRow [value]=\"order.id\">\n                <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n                <td slTableCell>{{ order.supplier }}</td>\n                <td slTableCell>{{ order.expected }}</td>\n                <td slTableCell numeric>{{ usd.format(order.value) }}</td>\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TableRefreshing {\n  readonly orders = PURCHASE_ORDERS;\n  readonly usd = USD;\n  readonly loading = signal(false);\n  private timer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n  }\n\n  refresh(): void {\n    this.loading.set(true);\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => this.loading.set(false), 1500);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "single-selection",
+      "title": "single-selection.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSelect,\n} from '@slotted/angular/table';\n\nconst RATES = [\n  { id: 'ups-ground', carrier: 'UPS Ground', days: '3–5 days', price: '$18.40' },\n  { id: 'fedex-2day', carrier: 'FedEx 2Day', days: '2 days', price: '$31.15' },\n  { id: 'usps-priority', carrier: 'USPS Priority', days: '1–3 days', price: '$24.90' },\n];\n\n@Component({\n  selector: 'app-table-single-selection',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSelect,\n  ],\n  template: `\n    <div slTable [columns]=\"4\" selectionMode=\"single\" [(value)]=\"rate\">\n      <div slTableContent aria-label=\"Shipping rates for SO-10423\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader></th>\n            <th slTableColumnHeader>Carrier</th>\n            <th slTableColumnHeader>Transit</th>\n            <th slTableColumnHeader numeric>Price</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (option of rates; track option.id) {\n            <tr slTableRow [value]=\"option.id\">\n              <td slTableSelect></td>\n              <th slTableRowHeader>{{ option.carrier }}</th>\n              <td slTableCell>{{ option.days }}</td>\n              <td slTableCell numeric>{{ option.price }}</td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableSingleSelection {\n  readonly rates = RATES;\n  readonly rate = signal<readonly string[]>(['ups-ground']);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "variants.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCaption,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\nconst SHIPMENTS = [\n  { id: 'SH-3301', carrier: 'UPS Ground', cartons: 12 },\n  { id: 'SH-3302', carrier: 'FedEx Express', cartons: 3 },\n  { id: 'SH-3303', carrier: 'USPS Priority', cartons: 1 },\n];\n\nconst VARIANTS = [\n  { variant: 'plain', caption: 'Plain: inside a card that already draws the box' },\n  { variant: 'ruled', caption: 'Ruled: the default, a rule between rows' },\n  { variant: 'framed', caption: 'Framed: the table is its own panel' },\n] as const;\n\n@Component({\n  selector: 'app-table-variants',\n  imports: [\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCaption,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slStack [gap]=\"6\">\n      @for (item of variants; track item.variant) {\n        <div slTable [columns]=\"3\" [variant]=\"item.variant\">\n          <div slTableContent>\n            <caption slTableCaption>\n              {{\n                item.caption\n              }}\n            </caption>\n            <thead slTableHead>\n              <tr slTableRow>\n                <th slTableColumnHeader>Shipment</th>\n                <th slTableColumnHeader>Carrier</th>\n                <th slTableColumnHeader numeric>Cartons</th>\n              </tr>\n            </thead>\n            <tbody slTableBody>\n              @for (shipment of shipments; track shipment.id) {\n                <tr slTableRow [value]=\"shipment.id\">\n                  <th slTableRowHeader>{{ shipment.id }}</th>\n                  <td slTableCell>{{ shipment.carrier }}</td>\n                  <td slTableCell numeric>{{ shipment.cartons }}</td>\n                </tr>\n              }\n            </tbody>\n          </div>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TableVariants {\n  readonly shipments = SHIPMENTS;\n  readonly variants = VARIANTS;\n}\n",
+      "verdict": "example"
+    }
+  ]
+}