KanbanBoard
<caos-kanban-board>
the BOARD body of a list surface
May be placed on an app’s home page and a page inside an app.
Inputs
Section titled “Inputs”| Name | Attribute | Description | Type | Default | Required |
|---|---|---|---|---|---|
columns |
property only | The stages, in the order they should read, each with the stored value it stands for, the label the value set gives it, optionally an intent that colours the column’s marker, and the cards sitting at it. The app supplies the whole vocabulary — the board never derives the columns from the records, which is what keeps an empty stage visible. Set as a property; an attribute cannot hold a list. | json | none declared | Required |
Events
Section titled “Events”| Name | When it fires | What it carries |
|---|---|---|
caos-card-open |
A card is activated, by click or by keyboard — each card is a real button. | { id } — the record the card stands for. The host routes it; the board does not navigate. |
Nothing goes inside this piece.
Styling hooks
Section titled “Styling hooks”| Design token | What it controls |
|---|---|
--caos-font |
The typeface of the board. |
--caos-color-border |
The border of a column and of a card at rest. |
--caos-radius |
The corners of a column. |
--caos-radius-sm |
The corners of a card. |
--caos-color-surface |
The ground of a column. |
--caos-color-bg |
The ground of a card, so it reads as sitting ON the column. |
--caos-color-text-muted |
The column name, its tally, a card sub-line, and the default marker. |
--caos-color-accent |
The card title, the border a card takes on hover, and the info marker. |
--caos-color-success |
The marker of a column whose intent is success. |
--caos-color-warning |
The marker of a column whose intent is warning. |
--caos-color-danger |
The marker of a column whose intent is danger. |
--caos-focus-ring |
The ring on a focused card. |
--caos-space-4 |
The gap between columns. |
--caos-space-3 |
The padding inside a column and inside a card. |
--caos-space-2 |
The gap between the cards in a column, between a column’s marker and its name, and the room below the board for its scrollbar. |
--caos-space-1 |
The gap above a card’s sub-line. |
Methods
Section titled “Methods”Nothing else drives this piece by calling it.
Readable state
Section titled “Readable state”Nothing on this piece can be read back.
Styling parts
Section titled “Styling parts”| Part | Which piece of it | When it is there |
|---|---|---|
::part(board) |
the row of columns | Always |
::part(column) |
one column | Always |
::part(card) |
one card | Always |
When to use it
Section titled “When to use it”A record set that moves through named stages, when the question is how the work is distributed rather than what any one record contains — a pipeline, an approval queue, a build sequence.
What to use instead
Section titled “What to use instead”- DataTable — The stage is just one more field to read, and what matters is comparing values across records — or selecting, sorting or totalling rows, none of which a board can do.
- CardGrid — The records do not move through stages at all, and a plain grid of cards with a couple of rollups is the whole story.
- SplitView — Somebody reads records one after another and wants the selected one open beside the list.
Accessibility
Section titled “Accessibility”Each card is a real button, so it is in the tab order, is activated by Enter and Space, and draws a focus ring. A name too long for its column is truncated with the full text kept as its title. The column marker carries colour ONLY — the stage is named in words beside it, so nothing depends on telling the colours apart. Left to the author: the board has no landmark or accessible name of its own, so the surface around it has to say what list this is; and the column labels come from the value set, so they read to a screen-reader user exactly as they are worded there.
Examples
Section titled “Examples”The orders list
Section titled “The orders list”The same three orders the other three list bodies draw, stood up by stage — including one stage nothing is sitting in, which is kept rather than dropped.
{ "id": "example", "section": "The orders list", "columns": 1, "items": [ { "id": "kanban_board_1", "type": "component", "key": "kanban_board", "inputs": { "columns": [ { "value": "draft", "label": "Draft", "cards": [ { "id": "o1", "title": "ORD-4471", "subtitle": "Meridian Supply" } ] }, { "value": "review", "label": "In review", "intent": "info", "cards": [ { "id": "o3", "title": "ORD-4473", "subtitle": "Brightwater Group" } ] }, { "value": "blocked", "label": "Blocked", "intent": "warning", "cards": [] }, { "value": "approved", "label": "Approved", "intent": "success", "cards": [ { "id": "o2", "title": "ORD-4472", "subtitle": "Calder & Finch" } ] } ] } } ]}<caos-kanban-board id="kanbanBoard1"></caos-kanban-board>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const kanbanBoard1 = document.getElementById('kanbanBoard1');kanbanBoard1.columns = [ { "value": "draft", "label": "Draft", "cards": [ { "id": "o1", "title": "ORD-4471", "subtitle": "Meridian Supply" } ] }, { "value": "review", "label": "In review", "intent": "info", "cards": [ { "id": "o3", "title": "ORD-4473", "subtitle": "Brightwater Group" } ] }, { "value": "blocked", "label": "Blocked", "intent": "warning", "cards": [] }, { "value": "approved", "label": "Approved", "intent": "success", "cards": [ { "id": "o2", "title": "ORD-4472", "subtitle": "Calder & Finch" } ] }];A record with no stage
Section titled “A record with no stage”A fourth order whose stage has never been set: it collects in a leading column standing for the blank value, because a record missing from a board it belongs on is the worst outcome here.
{ "id": "example", "section": "A record with no stage", "columns": 1, "items": [ { "id": "kanban_board_1", "type": "component", "key": "kanban_board", "inputs": { "columns": [ { "value": "", "label": "Unset", "cards": [ { "id": "o9", "title": "ORD-4479", "subtitle": "Halstead Holdings" } ] }, { "value": "draft", "label": "Draft", "cards": [ { "id": "o1", "title": "ORD-4471", "subtitle": "Meridian Supply" } ] }, { "value": "review", "label": "In review", "intent": "info", "cards": [ { "id": "o3", "title": "ORD-4473", "subtitle": "Brightwater Group" } ] }, { "value": "cancelled", "label": "Cancelled", "intent": "danger", "cards": [] } ] } } ]}<caos-kanban-board id="kanbanBoard1"></caos-kanban-board>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const kanbanBoard1 = document.getElementById('kanbanBoard1');kanbanBoard1.columns = [ { "value": "", "label": "Unset", "cards": [ { "id": "o9", "title": "ORD-4479", "subtitle": "Halstead Holdings" } ] }, { "value": "draft", "label": "Draft", "cards": [ { "id": "o1", "title": "ORD-4471", "subtitle": "Meridian Supply" } ] }, { "value": "review", "label": "In review", "intent": "info", "cards": [ { "id": "o3", "title": "ORD-4473", "subtitle": "Brightwater Group" } ] }, { "value": "cancelled", "label": "Cancelled", "intent": "danger", "cards": [] }];