Grid List

A stable id per item: selection, focus and drag key on it.

Group name per item (items arrive sorted by it): each group gets a sticky, collapsible title row with its count.

The rows' data, in order (sorted by group when `groupOf` is set).

Accessible name of the grid. Without one, a framed list's card heading names it.

Strings the list writes into its markup (and, under `pagination`, the footer `<Pagination>`'s).

The row's name, for its checkbox's label ("Select {name}", from `labels.selectRowNamed`), so each checkbox says which row it selects. Without it every checkbox reads `labels.selectRow`.

Server paging: the row count across every page. `items` is then the current page already (it is not sliced) and this total drives the page count.

The row whose detail is open (`aria-current`).

The selected ids an uncontrolled list starts with.

Inert rows, in any list: the row is `aria-disabled`, shows no hover, and its primary link doesn't open (no click, no Enter). In a selectable list their checkbox is disabled too, and clicks, keys, Shift ranges, select-all and Esc leave them as `value` has them (a disabled row can be shown selected). They stay focusable, and the controls rendered in their cells keep working — disable those yourself when they shouldn't.

The page shown, zero-based. Clamped into range — when the items shrink past it, the list moves to the last page and reports it through `onPageChange`.

Unread / new: the row reads bolder.

The selected row ids. Ids stay selected across pages.

Render the list inside its own Card: a heading, header actions and a footer around the rows, which pad to line up with the card's header text. The rounded looks (`plain`, `cards`, `inset`) keep their fills a gutter inside the card's edge; `divided` rows run edge to edge like a table's. Unset or `false`: the bare list.

Row height: compact 36px, default 44px, relaxed 48px.

The fill of a group's title band, on Panel's surface ladder, in every look. Unset, the band keeps the look's own: a base fill in the plain and divided looks, none in the cards and inset looks.

The inset look's rules start at this column (past a leading icon).

Row look: rules between rows, rounded tiles, bare rows, or `inset` (a grouped settings list: each group a rounded card, its title above it, rules from `insetStart` on). The grid layout's tiles take `plain` and `cards`; the others draw as `plain`.

The resting fill of a row in the `cards` and `inset` looks, on Panel's surface ladder. Hover, the current row, selection and strong rows still paint over it. The other looks have no resting fill.

The selection's colour: the selected rows' fill (a joined block's too), the check badge and the checkboxes. `danger` for a destructive pick ("select what to delete").

The wide column template, declared once: every row is a `subgrid` of it, so cells line up like a Table while each row stays free-form markup.

Line a group title's trailing content up with the list's columns: it starts at this column and takes the list's tracks from there on, so each of its children lands in a column of its own (a date under the rows' dates, a size under their sizes). The title's name ends where it starts. Rows layout only; folded, the content trails the name.

Draw the sticky column header row (hidden when folded).

`rows`: every item a row of the column template. `grid`: items are tiles that wrap, as many per line as fit `tileSize` (no column template, header or fold — the row snippet renders the tile's content); ↑/↓ move between visual rows.

The folded layout, used while the list is narrower than 640px of its own width: a second template plus each cell's narrow place. Omit to never fold.

Padding around the list, on Panel's spacing scale. With `scroll` it sits outside the scroll area, so rows never scroll through it. Unset: no padding (the container's).

Inline (left / right) padding, over `padding` on that axis: `paddingX="md"` alone pads the sides only.

Block (top / bottom) padding, over `padding` on that axis.

The list scrolls itself: it fills its flex column (`flex: 1`, `min-height: 0`) and its rows scroll under a header stuck to the top of the scroll area, with the pager under it. Padding around the list is its container's (a Panel's `padding`), outside the scroll area. Pure CSS, the same on the server. `--gl-scroll-gap` (`xs`, only while it scrolls) keeps the rows off the scrollbar; `--gl-scroll-end-inset` adds scrolled room under the last row (a floating bulk bar). A `virtual` list scrolls the same area. Padding around it: `padding`, or the container's.

The grid layout's smallest tile width (any CSS length): tiles stretch to fill the line, never narrower than this.

Row actions (archive, delete…): a list for every row, or a function of the row's item. The first `actionsInline` enabled ones show as icon buttons while the row is hovered or focused; every action is in the row's menu — the ⋯ button (shown at rest on touch, which has no hover), a right-click, Shift+F10 or the ContextMenu key. A `shortcut` runs its action on the focused row. While anything is selected the row actions are off (a bulk bar acts on the selection). Rows in `disabledIds` keep theirs. The list adds a trailing actions column unless `actionsOver` lays them over a cell; on tiles the ⋯ sits in the corner opposite the checkbox, with no icon buttons.

How many enabled actions show as icon buttons (the rest only in the menu, behind ⋯). `0`: menu only.

Lay the row actions over this column's cell instead of a column of their own: the cell (a date, a status) gives way to the buttons on hover and focus, so no empty track waits at the row's end. On touch the cell stays and ⋯ sits beside it. Folded, the actions follow the cell unless `narrow.cells.actions` places them.

Groups start collapsed: each title shows, its rows wait for the chevron. Read once, as the list mounts; groups that arrive later start collapsed too.

Reorderable rows: a row drags by pointer or touch from anywhere on it and moves by keyboard with Alt+arrows; it joins `list` in the shared drag context, so rows move within this list and between lists of the same context.

Rows reorder by pointer / touch and by Alt+arrows: the grid becomes a drop zone and rows advertise the keyboard moves.

A grouped selectable list puts a select-all checkbox in each group's title: it selects or clears the group's rows (collapsed ones too, `disabledIds` left alone) and shows the group's state, indeterminate when some are selected. Checkbox lists only (`selectionBehavior: "toggle"`).

Show one page at a time, this many rows per page, with a `<Pagination>` under the list. Unset: every row shows (no paging).

The rows-per-page choices of the footer's size select. Unset: no size select. Picking a size goes back to the first page.

Rows carry a checkbox and answer x / Space / Shift ranges / ⌘A / Esc. The list adds its own select column (and its narrow place) unless `selectOver` lays the checkbox over a cell.

Where a selectable list offers its select-all checkbox: in the column header's select column, or over the `selectOver` column's header (`header` and row checkboxes needed), `footer` — a labelled checkbox in the row under the list, so a list without a header (or a grid of tiles) still has one — or `false` for none. Its scope is the header's: every item on every page, only the loaded page with server paging (`itemsTotal`). ⌘A works either way.

`toggle`: a checkbox per item, a click on it adds or removes the item. `replace` (a photo library): a click selects only that item, ⌘/Ctrl-click toggles, Shift-click ranges, arrows move the selection with the focus, and a selected tile shows a check badge instead of a checkbox. On touch (a tap, or a 500ms long press) it switches to toggling until the selection empties.

Put the selection checkbox over this column's cell instead of in a column of its own: the cell (an avatar, a status or file-type icon) gives way to the checkbox on hover, focus or selection, so no empty track waits at the row's start. A disabled row (`disabledIds`) keeps its cell: it tells why the row can't be selected. The header's select-all takes the column's header.

Render only the rows in view (plus a few past each end), for long lists: rows are measured as they render, so they can differ in height. `true` scrolls the list's own grid (give it a height); pass `scrollElement` to scroll with an element around the list. With `pageSize`, the window runs over the page. Rows layout only (the grid layout and draggable lists render every row).

A row action ran (its button, its menu item or its shortcut): the action's id and the row's item. The vanilla / Astro runtime dispatches `grid-list:action` (`detail: { action, id }`) instead. A swipe (a tile's tap, a full swipe) adds `{ via: "swipe" }`: offer an undo there.

Enter on a row: called after its primary link is clicked.

The page changed (the footer, a size change, or a clamp after the items shrank), zero-based.

The footer's size select picked a new page size.

The selection changed (a checkbox, a click, a key, select-all): the selected ids.

Content after the chevron, before the group name (an icon, a badge).

Actions at the end of the group's title row.

No description yet.

One row's content: cells spread `cell(id)`, the primary link spreads `primaryProps`.

Bound reference to the root element (`bind:this`).

Per-slot style and HTML-attribute overrides.