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

package/dist/docs/table.json

@@ -0,0 +1,1042 @@
+{
+  "family": "table",
+  "ui": "table",
+  "binding": "react",
+  "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  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableDefaultsProvider,\n  TableDetail,\n  TableEmpty,\n  TableExpander,\n  TableFooter,\n  TableHead,\n  TableLoader,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n  TableSort,\n  TableSummary,\n} from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The frame. It carries every axis, and it holds what must not move when the table is scrolled sideways: the border, the radius and the footer bar."
+        },
+        {
+          "part": "scroll",
+          "element": "div",
+          "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",
+          "required": true,
+          "purpose": "The tabular structure itself, and the element the platform gives the role to. It carries aria-rowcount when the DOM holds a page of a larger set."
+        },
+        {
+          "part": "caption",
+          "element": "caption",
+          "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",
+          "required": false,
+          "purpose": "The header row group. It sticks to the scroller when stickyHeader is on."
+        },
+        {
+          "part": "body",
+          "element": "tbody",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "required": true,
+          "purpose": "One value, and the four axes a cell answers: align, numeric, text and sticky."
+        },
+        {
+          "part": "sort",
+          "element": "button",
+          "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",
+          "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",
+          "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 the Select family. 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. renderOperand replaces it and keeps everything else."
+        },
+        {
+          "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": "th or td",
+          "required": false,
+          "purpose": "The cell holding the checkbox, in the header and in every row. The cell is this family and the chooser is Checkbox."
+        },
+        {
+          "part": "expander",
+          "element": "button",
+          "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",
+          "required": false,
+          "purpose": "The open row detail, one cell spanning every column. It is not rendered while it is closed."
+        },
+        {
+          "part": "empty",
+          "element": "td",
+          "required": false,
+          "purpose": "What is shown when there is nothing, spanning every column. It takes a ResultState, which already separates an empty set from a set a filter emptied."
+        },
+        {
+          "part": "loader",
+          "element": "tbody",
+          "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": "TableSortDescriptor | null",
+          "defaultValue": "—",
+          "appliesTo": "Table",
+          "description": "The column the rows are ordered by. Present means you own it."
+        },
+        {
+          "name": "defaultSort",
+          "type": "TableSortDescriptor | null",
+          "defaultValue": "null",
+          "appliesTo": "Table",
+          "description": "The order an uncontrolled table starts in, read once"
+        },
+        {
+          "name": "value",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Table",
+          "description": "The chosen rows. Present means you own the selection."
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "Table",
+          "description": "The rows an uncontrolled table starts with"
+        },
+        {
+          "name": "expanded",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Table",
+          "description": "The rows whose detail is open. Present means you own it."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "Table",
+          "description": "The details an uncontrolled table starts with"
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'ruled' | 'framed'",
+          "defaultValue": "ruled",
+          "appliesTo": "Table",
+          "description": "How much of a frame the set is given"
+        },
+        {
+          "name": "striped",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Table",
+          "description": "A tinted ground on every second record"
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Table",
+          "description": "Whether the header stays while the body scrolls"
+        },
+        {
+          "name": "stickyFooter",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Table",
+          "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": "Table",
+          "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": "TableSetFilter",
+          "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": "TableSetFilter",
+          "description": "How the values are chosen: the search, the covering checkbox and the list, or tags-input holding the chosen values as chips. The descriptor is the same list either way."
+        },
+        {
+          "name": "presets",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TableDateFilter, TableTimeFilter, TableDateTimeFilter",
+          "description": "DateRangePickerPreset, TimeRangePickerPreset or DateTimeRangePickerPreset buttons offered inside the range picker between draws. The descriptor still receives two ISO values."
+        },
+        {
+          "name": "granularity",
+          "type": "'hour' | 'minute' | 'second'",
+          "defaultValue": "minute",
+          "appliesTo": "TableTimeFilter, TableDateTimeFilter",
+          "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": "Table*Filter",
+          "description": "The descriptor the column is filtered by, typed as its own kind. Controlled when stated; defaultValue is the uncontrolled form, and onValueChange fires once, on Apply."
+        },
+        {
+          "name": "operators",
+          "type": "readonly FilterOperator[]",
+          "defaultValue": "the kind own list",
+          "appliesTo": "Table*Filter",
+          "description": "Narrows what the chooser offers, in the order given. defaultOperator picks the one the panel opens on."
+        },
+        {
+          "name": "conditions",
+          "type": "1 | 2",
+          "defaultValue": "2",
+          "appliesTo": "Table*Filter",
+          "description": "How many conditions the panel offers. The second appears once the first is complete."
+        },
+        {
+          "name": "renderOperand",
+          "type": "(props: TableFilterOperandProps) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Table*Filter",
+          "description": "Replaces the field the table would have drawn, and keeps the draft, the chooser, the join, the actions and the announcements."
+        },
+        {
+          "name": "searchThreshold",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "TableSetFilter",
+          "description": "How many values bring a search with them. searchable states it outright."
+        },
+        {
+          "name": "cellAlign",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "center",
+          "appliesTo": "Table",
+          "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": "Table",
+          "description": "Whether the browser sizes the columns from their content or from what you state"
+        },
+        {
+          "name": "selectionMode",
+          "type": "'none' | 'single' | 'multiple'",
+          "defaultValue": "none",
+          "appliesTo": "Table",
+          "description": "How many records may be chosen at once"
+        },
+        {
+          "name": "columns",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "Table",
+          "description": "How many columns the spanning parts span"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Table",
+          "description": "A refresh over rows already shown: aria-busy, and nothing moves"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TableMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Table",
+          "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": "TableLoader",
+          "description": "How many skeleton rows a first load draws"
+        },
+        {
+          "name": "totalRowCount",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "TableContent",
+          "description": "The size of the set behind a page, written as aria-rowcount"
+        },
+        {
+          "name": "scrollLabelledBy",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "TableContent",
+          "description": "The element that names the region instead, usually the caption"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "TableRow",
+          "description": "The record key the selection and the expansion are held by"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TableRow",
+          "description": "A record the reader may not choose; it leaves the set the header covers"
+        },
+        {
+          "name": "rowIndex",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "TableRow",
+          "description": "The record position in the whole set, written as aria-rowindex"
+        },
+        {
+          "name": "column",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "TableColumnHeader, TableSort",
+          "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": "TableDetail, TableEmpty",
+          "description": "How many columns the part spans, defaulting to the table own count"
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Table, TableRow, TableSort",
+          "description": "Substitutes the rendered element, keeping every data attribute"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Reaches the element, and focus() with it"
+        },
+        {
+          "name": "handleRef",
+          "type": "RefObject<TableHandle>",
+          "defaultValue": "—",
+          "appliesTo": "TableContent",
+          "description": "scrollToRow(), overflowing() and refresh(): the three a prop cannot express"
+        },
+        {
+          "name": "useTable()",
+          "type": "() => TableContextValue",
+          "defaultValue": "—",
+          "appliesTo": "inside a Table",
+          "description": "The sort, the selection and the words, for a part of your own"
+        },
+        {
+          "name": "TableDefaultsProvider",
+          "type": "variant | striped | stickyHeader | stickyFooter | stickyTo | layout | selectionMode | columns",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets those once for everything below it; a prop on the table still wins"
+        },
+        {
+          "name": "scrollProps",
+          "type": "ComponentPropsWithRef<'div'>",
+          "defaultValue": "—",
+          "appliesTo": "TableContent",
+          "description": "Reaches the scroller: a height, a ref, a scroll listener of your own"
+        }
+      ],
+      "events": [
+        {
+          "name": "onSortChange",
+          "payload": "(value: TableSortDescriptor | null, request)",
+          "when": "The column and the direction the reader asked for, or null when the third press clears it. The request carries the reason — pointer, keyboard, clear or programmatic — and cancel()."
+        },
+        {
+          "name": "onValueChange",
+          "payload": "(value: readonly string[], request)",
+          "when": "The chosen rows, in the collection order rather than the order they were pressed. The reason is select for a range or a select-all, clear when the set is emptied, pointer otherwise."
+        },
+        {
+          "name": "onExpandedChange",
+          "payload": "(value: readonly string[], request)",
+          "when": "The rows whose detail is open, after the press that opened or closed one."
+        }
+      ],
+      "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, and none of the six surveyed implementations says it.",
+        "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 — the division list-item recorded — and the header checkbox states in its own name how many rows it covers.",
+        "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 pair exists to say the DOM is not the whole set. 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 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. A closed detail is not rendered at all, so nothing is announced that a reader cannot reach.",
+        "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, which is where WCAG 2.2 SC 1.4.1 puts the requirement."
+      ]
+    }
+  },
+  "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": "tsx",
+      "source": "<Table columns={3}>\n  <TableContent>\n    <TableCaption>Invoices</TableCaption>\n    <TableHead>\n      <TableRow>\n        <TableColumnHeader>Invoice</TableColumnHeader>\n        <TableColumnHeader>Client</TableColumnHeader>\n        <TableColumnHeader numeric>Amount</TableColumnHeader>\n      </TableRow>\n    </TableHead>\n    <TableBody>\n      {invoices.map((invoice) => (\n        <TableRow key={invoice.id} value={invoice.id}>\n          <TableRowHeader>{invoice.id}</TableRowHeader>\n          <TableCell>{invoice.client}</TableCell>\n          <TableCell numeric>{invoice.amount}</TableCell>\n        </TableRow>\n      ))}\n    </TableBody>\n  </TableContent>\n</Table>;\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": "tsx",
+      "source": "<Table variant=\"plain\" />;\n<Table variant=\"ruled\" />;\n<Table variant=\"framed\" />;\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": "tsx",
+      "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableStriped() {\n  return (\n    <Table columns={5} striped>\n      <TableContent aria-label=\"Stock on hand\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>SKU</TableColumnHeader>\n            <TableColumnHeader>Product</TableColumnHeader>\n            <TableColumnHeader>Warehouse</TableColumnHeader>\n            <TableColumnHeader numeric>On hand</TableColumnHeader>\n            <TableColumnHeader numeric>Reserved</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {STOCK.map((item) => (\n            <TableRow key={item.sku} value={item.sku}>\n              <TableRowHeader text=\"nowrap\">{item.sku}</TableRowHeader>\n              <TableCell>{item.product}</TableCell>\n              <TableCell>{item.warehouse}</TableCell>\n              <TableCell numeric>{item.onHand}</TableCell>\n              <TableCell numeric>{item.reserved}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "import { useMemo, useState } from 'react';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSort,\n  type TableSortDescriptor,\n} from '@slotted/react/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\nexport default function TableSorting() {\n  const [sort, setSort] = useState<TableSortDescriptor | null>({\n    column: 'placed',\n    direction: 'descending',\n  });\n  const rows = useMemo(() => sortOrders(ORDERS, sort), [sort]);\n\n  return (\n    <Table columns={4} onSortChange={setSort} sort={sort}>\n      <TableContent aria-label=\"Recent orders\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader column=\"id\">\n              <TableSort>Order</TableSort>\n            </TableColumnHeader>\n            <TableColumnHeader column=\"customer\">\n              <TableSort>Customer</TableSort>\n            </TableColumnHeader>\n            <TableColumnHeader column=\"placed\">\n              <TableSort>Placed</TableSort>\n            </TableColumnHeader>\n            <TableColumnHeader column=\"total\" numeric>\n              <TableSort>Total</TableSort>\n            </TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {rows.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell text=\"nowrap\">{order.placed}</TableCell>\n              <TableCell numeric>{USD.format(order.total)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "<TableColumnHeader column=\"client\">\n  <TableSort>Client</TableSort>\n  <TableColumnActions>\n    <TableTextFilter columnLabel=\"client\" onValueChange={setClient} value={client} />\n  </TableColumnActions>\n</TableColumnHeader>;\n\n// The descriptor is yours to apply, and the query is where it belongs.\nconst keep = createFilterPredicate(client);\nconst rows = invoices.filter((row) => keep(row.client));\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": "tsx",
+      "source": "import { useMemo, useState } from 'react';\nimport { createFilterPredicate, type SetFilter } from '@slotted/core/filter';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSetFilter,\n} from '@slotted/react/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\nexport default function TableFilter() {\n  const [status, setStatus] = useState<SetFilter | null>(null);\n  const rows = useMemo(() => {\n    const keep = createFilterPredicate(status);\n    return ORDERS.filter((order) => keep(order.status));\n  }, [status]);\n\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Open orders\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Warehouse</TableColumnHeader>\n            <TableColumnHeader>\n              Status\n              <TableColumnActions>\n                <TableSetFilter\n                  columnLabel=\"status\"\n                  onValueChange={setStatus}\n                  options={STATUSES}\n                  value={status}\n                />\n              </TableColumnActions>\n            </TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {rows.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>{order.warehouse}</TableCell>\n              <TableCell>{order.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\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 text filter value is a TextFilter, in React types and in Angular signals alike, and you never unwrap a union to read it. createRowPredicate joins the four, so the screen filters without a switch of its own.",
+      "language": "tsx",
+      "source": "const [filters, setFilters] = useState<Record<string, FilterDescriptor | null>>({});\nconst set = (column: string) => (value: FilterDescriptor | null) =>\n  setFilters((held) => ({ ...held, [column]: value }));\n\nconst keep = useMemo(\n  () => createRowPredicate(filters, (row, column) => row[column as keyof Invoice]),\n  [filters],\n);\nconst rows = useMemo(() => invoices.filter(keep), [invoices, keep]);\n\n<TableTextFilter columnLabel=\"client\" onValueChange={set('client')} />;\n<TableNumberFilter columnLabel=\"amount\" onValueChange={set('amount')} />;\n<TableDateFilter columnLabel=\"due\" onValueChange={set('due')} />;\n<TableBooleanFilter columnLabel=\"paid\" onValueChange={set('paid')} />;\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": "tsx",
+      "source": "// between 100 and 2500, or nothing recorded at all\nconst amount: NumberFilter = {\n  conditions: [{ end: 2500, operator: 'between', value: 100 }, { operator: 'empty' }],\n  join: 'or',\n  kind: 'number',\n};\n\n<TableNumberFilter columnLabel=\"amount\" onValueChange={setAmount} value={amount} />;\n\n// One condition only, which is AG Grid maxNumConditions\n<TableTextFilter columnLabel=\"client\" conditions={1} onValueChange={setClient} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-time",
+      "title": "A time column, and a window that crosses midnight",
+      "note": "TableTimeFilter 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": "tsx",
+      "source": "const [cutoff, setCutoff] = useState<TimeFilter | null>({\n  conditions: [{ end: '02:00', operator: 'between', value: '22:00' }],\n  join: 'and',\n  kind: 'time',\n});\nconst keep = useMemo(() => createFilterPredicate(cutoff), [cutoff]);\nconst rows = deliveries.filter((row) => keep(row.cutoff));\n\n<TableTimeFilter\n  columnLabel=\"cut-off\"\n  granularity=\"minute\"\n  onValueChange={setCutoff}\n  presets={<TimeRangePickerPreset value={MORNING_SHIFT}>Morning</TimeRangePickerPreset>}\n  value={cutoff}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-datetime",
+      "title": "A date-time column, at the precision you wrote",
+      "note": "TableDateTimeFilter 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": "tsx",
+      "source": "const [scheduled, setScheduled] = useState<DateTimeFilter | null>(null);\nconst keep = useMemo(\n  () => createFilterPredicate(scheduled, { timeZone: 'Europe/Lisbon' }),\n  [scheduled],\n);\n\n<TableDateTimeFilter\n  columnLabel=\"scheduled\"\n  onValueChange={setScheduled}\n  presets={\n    <DateTimeRangePickerPreset value={EARLY_OCTOBER}>Early October</DateTimeRangePickerPreset>\n  }\n  value={scheduled}\n/>;\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 through the presets prop. The descriptor is unchanged — between, an ISO day and another — so a saved view written with two pickers opens in the range picker.",
+      "language": "tsx",
+      "source": "<TableDateFilter\n  columnLabel=\"due\"\n  onValueChange={setDue}\n  presets={\n    <>\n      <DateRangePickerPreset value={september}>September</DateRangePickerPreset>\n      <DateRangePickerPreset value={quarter}>Q4</DateRangePickerPreset>\n    </>\n  }\n  value={due}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-tags",
+      "title": "A set typed as chips",
+      "note": "operand 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": "tsx",
+      "source": "<TableSetFilter columnLabel=\"client\" onValueChange={setClient} operand=\"tags\" options={clients} />;\n<TableSetFilter columnLabel=\"invoice\" onValueChange={setInvoice} operand=\"tags\" />;\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": "tsx",
+      "source": "import { useState } from 'react';\nimport { NumberField } from '@slotted/react/number-field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableEditing() {\n  const [lines, setLines] = useState<readonly Line[]>(STOCK);\n  const update = (sku: string, change: Partial<Line>) =>\n    setLines((current) =>\n      current.map((line) => (line.sku === sku ? { ...line, ...change } : line)),\n    );\n\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Stock take, Reno\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>SKU</TableColumnHeader>\n            <TableColumnHeader>Product</TableColumnHeader>\n            <TableColumnHeader numeric>Counted</TableColumnHeader>\n            <TableColumnHeader>Bin</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {lines.map((line) => (\n            <TableRow key={line.sku} value={line.sku}>\n              <TableRowHeader text=\"nowrap\">{line.sku}</TableRowHeader>\n              <TableCell>{line.product}</TableCell>\n              <TableCell numeric>\n                <NumberField\n                  aria-label={`Counted for ${line.sku}`}\n                  min={0}\n                  onValueChange={(value) => update(line.sku, { counted: value ?? 0 })}\n                  size=\"sm\"\n                  stepper=\"none\"\n                  value={line.counted}\n                  variant=\"plain\"\n                />\n              </TableCell>\n              <TableCell>\n                <Select\n                  onValueChange={(value) => update(line.sku, { bin: value as string })}\n                  size=\"sm\"\n                  value={line.bin}\n                  variant=\"plain\"\n                >\n                  <SelectTrigger aria-label={`Bin of ${line.sku}`}>\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {BINS.map((bin) => (\n                      <SelectItem key={bin} value={bin}>\n                        {bin}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\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": "tsx",
+      "source": "import { useState } from 'react';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n} from '@slotted/react/table';\nimport { Text } from '@slotted/react/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\nexport default function TableSelection() {\n  const [chosen, setChosen] = useState<readonly string[]>(['INV-2041']);\n  const total = INVOICES.filter((invoice) => chosen.includes(invoice.id)).reduce(\n    (sum, invoice) => sum + invoice.amount,\n    0,\n  );\n\n  return (\n    <Table columns={5} onValueChange={setChosen} selectionMode=\"multiple\" value={chosen}>\n      <TableContent aria-label=\"Invoices to send reminders for\">\n        <TableHead>\n          <TableRow>\n            <TableSelectAll />\n            <TableColumnHeader>Invoice</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Status</TableColumnHeader>\n            <TableColumnHeader numeric>Amount</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {INVOICES.map((invoice) => (\n            <TableRow disabled={invoice.status === 'Draft'} key={invoice.id} value={invoice.id}>\n              <TableSelect />\n              <TableRowHeader text=\"nowrap\">{invoice.id}</TableRowHeader>\n              <TableCell>{invoice.customer}</TableCell>\n              <TableCell>{invoice.status}</TableCell>\n              <TableCell numeric>{USD.format(invoice.amount)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n      <TableFooter>\n        <Text size=\"sm\" tone=\"muted\">\n          {chosen.length} selected · {USD.format(total)}\n        </Text>\n      </TableFooter>\n    </Table>\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. A closed detail is not in the DOM at all, so nothing is announced that a reader cannot reach.",
+      "language": "tsx",
+      "source": "import { Fragment } from 'react';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableDetail,\n  TableExpander,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableExpansion() {\n  return (\n    <Table columns={5} defaultExpanded={['RMA-0811']}>\n      <TableContent aria-label=\"Returns\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader />\n            <TableColumnHeader>Return</TableColumnHeader>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Refund</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {RETURNS.map((item) => (\n            <Fragment key={item.id}>\n              <TableRow value={item.id}>\n                <TableCell>\n                  <TableExpander />\n                </TableCell>\n                <TableRowHeader text=\"nowrap\">{item.id}</TableRowHeader>\n                <TableCell>{item.order}</TableCell>\n                <TableCell>{item.customer}</TableCell>\n                <TableCell numeric>{USD.format(item.refund)}</TableCell>\n              </TableRow>\n              <TableDetail value={item.id}>{item.detail}</TableDetail>\n            </Fragment>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSummary,\n} from '@slotted/react/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\nconst TOTAL = ORDERS.reduce((sum, order) => sum + order.total, 0);\n\nexport default function TableSticky() {\n  return (\n    <Table columns={4} stickyFooter stickyHeader>\n      <TableContent\n        aria-label=\"September orders\"\n        scrollProps={{ style: { maxBlockSize: '20rem' } }}\n      >\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Warehouse</TableColumnHeader>\n            <TableColumnHeader numeric>Total</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {ORDERS.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>{order.warehouse}</TableCell>\n              <TableCell numeric>{USD.format(order.total)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableSummary>\n          <TableRow>\n            <TableCell colSpan={3}>{ORDERS.length} orders</TableCell>\n            <TableCell numeric>{USD.format(TOTAL)}</TableCell>\n          </TableRow>\n        </TableSummary>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableScroll() {\n  return (\n    <Table columns={8}>\n      <TableContent aria-label=\"International shipments\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader sticky=\"start\" text=\"nowrap\">\n              Shipment\n            </TableColumnHeader>\n            <TableColumnHeader text=\"nowrap\">Order</TableColumnHeader>\n            <TableColumnHeader text=\"nowrap\">Customer</TableColumnHeader>\n            <TableColumnHeader text=\"nowrap\">Origin</TableColumnHeader>\n            <TableColumnHeader text=\"nowrap\">Destination</TableColumnHeader>\n            <TableColumnHeader text=\"nowrap\">Carrier</TableColumnHeader>\n            <TableColumnHeader text=\"nowrap\">Shipped</TableColumnHeader>\n            <TableColumnHeader numeric text=\"nowrap\">\n              Cost\n            </TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {SHIPMENTS.map((shipment) => (\n            <TableRow key={shipment.id} value={shipment.id}>\n              <TableRowHeader sticky=\"start\" text=\"nowrap\">\n                {shipment.id}\n              </TableRowHeader>\n              <TableCell text=\"nowrap\">{shipment.order}</TableCell>\n              <TableCell text=\"nowrap\">{shipment.customer}</TableCell>\n              <TableCell text=\"nowrap\">{shipment.origin}</TableCell>\n              <TableCell text=\"nowrap\">{shipment.destination}</TableCell>\n              <TableCell text=\"nowrap\">{shipment.carrier}</TableCell>\n              <TableCell text=\"nowrap\">{shipment.shipped}</TableCell>\n              <TableCell numeric>{USD.format(shipment.cost)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableAlignment() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Invoices due\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader align=\"center\">Region</TableColumnHeader>\n            <TableColumnHeader align=\"end\">Due</TableColumnHeader>\n            <TableColumnHeader numeric>Amount</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {INVOICES.map((invoice) => (\n            <TableRow key={invoice.id} value={invoice.id}>\n              <TableRowHeader>{invoice.customer}</TableRowHeader>\n              <TableCell align=\"center\">{invoice.region}</TableCell>\n              <TableCell align=\"end\">{invoice.due}</TableCell>\n              <TableCell numeric>{USD.format(invoice.amount)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableText() {\n  return (\n    <Table columns={3} layout=\"fixed\">\n      <TableContent aria-label=\"Delivery notes\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Note</TableColumnHeader>\n            <TableColumnHeader>Tracking</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {NOTES.map((row) => (\n            <TableRow key={row.id} value={row.id}>\n              <TableRowHeader text=\"nowrap\">{row.id}</TableRowHeader>\n              <TableCell text=\"truncate\">{row.note}</TableCell>\n              <TableCell text=\"wrap\">{row.tracking}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "<Table>\n  <TableContent totalRowCount={128}>\n    <TableSummary>\n      <TableRow>\n        <TableCell numeric>11,061.25</TableCell>\n      </TableRow>\n    </TableSummary>\n  </TableContent>\n  <TableFooter>\n    <span>3 of 128 invoices</span>\n    <Pagination page={page} onPageChange={setPage} total={128} />\n  </TableFooter>\n</Table>;\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": "tsx",
+      "source": "{\n  loading && rows.length === 0 ? (\n    <TableLoader skeletonRows={5} />\n  ) : rows.length === 0 ? (\n    <TableBody>\n      <TableRow>\n        <TableEmpty>\n          <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n        </TableEmpty>\n      </TableRow>\n    </TableBody>\n  ) : (\n    <TableBody>{rows}</TableBody>\n  );\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": "tsx",
+      "source": "<div data-slotted-density=\"dense\">\n  <Table>{rows}</Table>\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": "tsx",
+      "source": "import { Avatar } from '@slotted/react/avatar';\nimport { Inline } from '@slotted/react/inline';\nimport { Link } from '@slotted/react/link';\nimport { StatusIndicator } from '@slotted/react/status-indicator';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableContentExample() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Key accounts\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Account</TableColumnHeader>\n            <TableColumnHeader>Account manager</TableColumnHeader>\n            <TableColumnHeader>ERP sync</TableColumnHeader>\n            <TableColumnHeader numeric>Balance</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {ACCOUNTS.map((account) => (\n            <TableRow key={account.id} value={account.id}>\n              <TableRowHeader text=\"nowrap\">\n                <Link href={`#${account.id}`}>{account.name}</Link>\n              </TableRowHeader>\n              <TableCell text=\"nowrap\">\n                <Inline align=\"center\" gap={2}>\n                  <Avatar name={account.manager} size=\"sm\" />\n                  {account.manager}\n                </Inline>\n              </TableCell>\n              <TableCell text=\"nowrap\">\n                <StatusIndicator status={account.sync}>{account.syncLabel}</StatusIndicator>\n              </TableCell>\n              <TableCell numeric>{USD.format(account.balance)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\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": "tsx",
+      "source": "<Table columns={5} selectionMode=\"multiple\" stickyHeader variant=\"framed\">\n  <TableContent>{/* header, rows, actions column */}</TableContent>\n  <TableFooter>\n    <Pagination page={page} onPageChange={setPage} total={total} />\n  </TableFooter>\n</Table>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting the table once, and reaching past it",
+      "note": "The provider sets the frame and the layout for everything below it, SlottedProvider the language, and a table that states an axis itself still wins. Every part takes render, a ref and native props, so a part can become your own element without losing a data attribute.",
+      "language": "tsx",
+      "source": "<TableDefaultsProvider variant=\"framed\" stickyHeader>\n  <App />\n</TableDefaultsProvider>;\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": "tsx",
+      "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": "tsx",
+      "source": "<TableContent totalRowCount={412}>\n  <TableBody>\n    <TableRow rowIndex={41} value=\"INV-1042\">\n      <TableRowHeader>INV-1042</TableRowHeader>\n    </TableRow>\n  </TableBody>\n</TableContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { Tag } from '@slotted/react/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\nexport default function TableBasic() {\n  return (\n    <Table columns={5}>\n      <TableContent>\n        <TableCaption>Orders placed today</TableCaption>\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Warehouse</TableColumnHeader>\n            <TableColumnHeader>Status</TableColumnHeader>\n            <TableColumnHeader numeric>Total</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {ORDERS.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>{order.warehouse}</TableCell>\n              <TableCell>\n                <Tag tone={TONE[order.status]}>{order.status}</Tag>\n              </TableCell>\n              <TableCell numeric>{USD.format(order.total)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "empty",
+      "title": "empty.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  ResultState,\n  ResultStateContent,\n  ResultStateDescription,\n  ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n  Table,\n  TableBody,\n  TableColumnHeader,\n  TableContent,\n  TableEmpty,\n  TableHead,\n  TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Returns this week\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Return</TableColumnHeader>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Refund</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          <TableRow>\n            <TableEmpty>\n              <ResultState status=\"empty\">\n                <ResultStateContent>\n                  <ResultStateTitle>No returns this week</ResultStateTitle>\n                  <ResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </ResultStateDescription>\n                </ResultStateContent>\n              </ResultState>\n            </TableEmpty>\n          </TableRow>\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  Table,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableLoader,\n  TableRow,\n} from '@slotted/react/table';\n\nexport default function TableLoading() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Purchase orders\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Purchase order</TableColumnHeader>\n            <TableColumnHeader>Supplier</TableColumnHeader>\n            <TableColumnHeader>Expected</TableColumnHeader>\n            <TableColumnHeader numeric>Value</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableLoader skeletonRows={4} />\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "orders-list",
+      "title": "orders-list.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useMemo, useState } from 'react';\nimport { createFilterPredicate, type SetFilter } from '@slotted/core/filter';\nimport { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Pagination,\n  PaginationItems,\n  PaginationNext,\n  PaginationPrevious,\n} from '@slotted/react/pagination';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n  TableSetFilter,\n  TableSort,\n  type TableSortDescriptor,\n} from '@slotted/react/table';\nimport { Text } from '@slotted/react/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\nexport default function TableOrdersList() {\n  const [sort, setSort] = useState<TableSortDescriptor | null>({\n    column: 'id',\n    direction: 'descending',\n  });\n  const [status, setStatus] = useState<SetFilter | null>(null);\n  const [chosen, setChosen] = useState<readonly string[]>([]);\n  const [page, setPage] = useState(1);\n\n  const matching = useMemo(() => {\n    const keep = createFilterPredicate(status);\n    return sortOrders(\n      ORDERS.filter((order) => keep(order.status)),\n      sort,\n    );\n  }, [sort, status]);\n  const first = (page - 1) * PAGE_SIZE;\n  const rows = matching.slice(first, first + PAGE_SIZE);\n\n  return (\n    <Table\n      columns={5}\n      onSortChange={setSort}\n      onValueChange={setChosen}\n      selectionMode=\"multiple\"\n      sort={sort}\n      value={chosen}\n    >\n      <TableContent aria-label=\"Orders\" totalRowCount={matching.length}>\n        <TableHead>\n          <TableRow>\n            <TableSelectAll />\n            <TableColumnHeader column=\"id\">\n              <TableSort>Order</TableSort>\n            </TableColumnHeader>\n            <TableColumnHeader column=\"customer\">\n              <TableSort>Customer</TableSort>\n            </TableColumnHeader>\n            <TableColumnHeader>\n              Status\n              <TableColumnActions>\n                <TableSetFilter\n                  columnLabel=\"status\"\n                  onValueChange={(next) => {\n                    setStatus(next);\n                    setPage(1);\n                  }}\n                  options={STATUSES}\n                  value={status}\n                />\n              </TableColumnActions>\n            </TableColumnHeader>\n            <TableColumnHeader column=\"total\" numeric>\n              <TableSort>Total</TableSort>\n            </TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {rows.map((order, index) => (\n            <TableRow key={order.id} rowIndex={first + index + 1} value={order.id}>\n              <TableSelect />\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>{order.status}</TableCell>\n              <TableCell numeric>{USD.format(order.total)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n      <TableFooter>\n        <Inline align=\"center\" gap={3}>\n          <Text size=\"sm\" tone=\"muted\">\n            {chosen.length} selected\n          </Text>\n          <Button disabled={chosen.length === 0} size=\"sm\" variant=\"outline\">\n            Print packing slips\n          </Button>\n        </Inline>\n        <Pagination count={matching.length} onPageChange={setPage} page={page} pageSize={PAGE_SIZE}>\n          <PaginationPrevious />\n          <PaginationItems />\n          <PaginationNext />\n        </Pagination>\n      </TableFooter>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pagination",
+      "title": "pagination.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport {\n  Pagination,\n  PaginationItems,\n  PaginationNext,\n  PaginationPrevious,\n} from '@slotted/react/pagination';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { Text } from '@slotted/react/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\nexport default function TablePagination() {\n  const [page, setPage] = useState(1);\n  const first = (page - 1) * PAGE_SIZE;\n  const rows = INVOICES.slice(first, first + PAGE_SIZE);\n\n  return (\n    <Table columns={3}>\n      <TableContent aria-label=\"Invoices\" totalRowCount={INVOICES.length}>\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Invoice</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Amount</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {rows.map((invoice, index) => (\n            <TableRow key={invoice.id} rowIndex={first + index + 1} value={invoice.id}>\n              <TableRowHeader text=\"nowrap\">{invoice.id}</TableRowHeader>\n              <TableCell>{invoice.customer}</TableCell>\n              <TableCell numeric>{USD.format(invoice.amount)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n      <TableFooter>\n        <Text size=\"sm\" tone=\"muted\">\n          {first + 1}–{first + rows.length} of {INVOICES.length}\n        </Text>\n        <Pagination count={INVOICES.length} onPageChange={setPage} page={page} pageSize={PAGE_SIZE}>\n          <PaginationPrevious />\n          <PaginationItems />\n          <PaginationNext />\n        </Pagination>\n      </TableFooter>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "refreshing",
+      "title": "refreshing.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useEffect, useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableRefreshing() {\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (!loading) return;\n    const timer = setTimeout(() => setLoading(false), 1500);\n    return () => clearTimeout(timer);\n  }, [loading]);\n\n  return (\n    <Stack align=\"start\" gap={3}>\n      <Button loading={loading} onClick={() => setLoading(true)} size=\"sm\" variant=\"outline\">\n        Refresh\n      </Button>\n      <Table columns={4} loading={loading}>\n        <TableContent aria-label=\"Purchase orders\">\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Purchase order</TableColumnHeader>\n              <TableColumnHeader>Supplier</TableColumnHeader>\n              <TableColumnHeader>Expected</TableColumnHeader>\n              <TableColumnHeader numeric>Value</TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {PURCHASE_ORDERS.map((order) => (\n              <TableRow key={order.id} value={order.id}>\n                <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n                <TableCell>{order.supplier}</TableCell>\n                <TableCell>{order.expected}</TableCell>\n                <TableCell numeric>{USD.format(order.value)}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "single-selection",
+      "title": "single-selection.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n} from '@slotted/react/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\nexport default function TableSingleSelection() {\n  const [rate, setRate] = useState<readonly string[]>(['ups-ground']);\n\n  return (\n    <Table columns={4} onValueChange={setRate} selectionMode=\"single\" value={rate}>\n      <TableContent aria-label=\"Shipping rates for SO-10423\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader />\n            <TableColumnHeader>Carrier</TableColumnHeader>\n            <TableColumnHeader>Transit</TableColumnHeader>\n            <TableColumnHeader numeric>Price</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {RATES.map((option) => (\n            <TableRow key={option.id} value={option.id}>\n              <TableSelect />\n              <TableRowHeader>{option.carrier}</TableRowHeader>\n              <TableCell>{option.days}</TableCell>\n              <TableCell numeric>{option.price}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "variants.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/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\nexport default function TableVariants() {\n  return (\n    <Stack gap={6}>\n      {VARIANTS.map(({ variant, caption }) => (\n        <Table columns={3} key={variant} variant={variant}>\n          <TableContent>\n            <TableCaption>{caption}</TableCaption>\n            <TableHead>\n              <TableRow>\n                <TableColumnHeader>Shipment</TableColumnHeader>\n                <TableColumnHeader>Carrier</TableColumnHeader>\n                <TableColumnHeader numeric>Cartons</TableColumnHeader>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {SHIPMENTS.map((shipment) => (\n                <TableRow key={shipment.id} value={shipment.id}>\n                  <TableRowHeader>{shipment.id}</TableRowHeader>\n                  <TableCell>{shipment.carrier}</TableCell>\n                  <TableCell numeric>{shipment.cartons}</TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </TableContent>\n        </Table>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}