ChannelList

<caos-channel-list>

the conversations somebody can open, gathered into sections, with what is unread

May be placed on a record page, an app’s home page and a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
current	current, markup only	Which conversation is open, by id. Set it AFTER the conversation opens — this component does not set it on click, so that a failed open does not leave the list claiming otherwise.	text	none declared	Optional
searchable	searchable, markup only	Offer a box that narrows the list by name, here, over the labels it was given. Worth offering past about a dozen conversations and not before.	boolean	false	Optional
searchPlaceholder	search-placeholder, markup only	The grey line in the search box, which is also its accessible name.	text	Find a conversation	Optional
newLabel	new-label, markup only	Offer a control at the foot for starting a conversation, with these words on it. Absent ⇒ no control. It reports through the new event and creates nothing.	text	none declared	Optional
emptyLabel	empty-label, markup only	What is said when there are no conversations at all. A search that matches none says something different and says it automatically — the two are opposite problems and a list that says the same for both reads as one that failed to load.	text	No conversations yet.	Optional

Events

Name	When it fires	What it carries
select	Somebody chose a conversation. Nothing has changed yet: opening it, and then setting current, is the surface’s.	{ id: string }
new	Somebody pressed the control named by new-label. Nothing has been created.	nothing

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
--caos-color-text	A conversation with something waiting in it, and a row under the pointer.
--caos-color-text-muted	A conversation with nothing waiting, and the empty line.
--caos-color-text-subtle	A section heading.
--caos-color-border	The search box’s edge and the new control’s dashed edge.
--caos-color-surface-2	Inside the search box, and behind a row under the pointer.
--caos-color-accent-fill	The open conversation, and the unread count on every other one.
--caos-color-accent-contrast	The text drawn on that fill.
--caos-font	The typeface of the list.
--caos-text-row	The size of a conversation’s name.
--caos-text-label	The size of a section heading and of an unread count.
--caos-font-weight-label	The weight of a section heading, and of a conversation with something waiting.
--caos-space-1	The space under a section heading.
--caos-space-2	The inset of the search box and the new control.
--caos-space-3	The inset of a row from the edge of the list.
--caos-radius-sm	The roundness of the search box and the new control.
--caos-radius-pill	The roundness of an unread count.
--caos-focus-ring	The ring on the search box, each row and the new control.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(list)	the scrolling list	Always
::part(search)	the box that narrows it	Always
::part(section)	a section heading	Always
::part(channel)	one conversation	Always
::part(unread)	a conversation with something waiting — the same row, additionally named	Always
::part(new)	the control that starts a conversation	Always
::part(empty)	the line shown when nothing is listed	Always

When to use it

A set of named conversations where the reader’s question is which of them is waiting. Without unread there is nothing here a tree does not do better.

What to use instead

• Tree — The rows nest more than one level deep, or the shape that matters is the hierarchy rather than what is waiting. This list gathers into flat sections and no further, on purpose.
• NavGadget — The rows are the workspace’s own navigation, which the shell already owns.
• DataTable — The conversations are being administered rather than opened — compared, sorted, selected in bulk. That is a list of records that happen to be conversations.

Accessibility

The element is a role="navigation" and the rows are a named list, so a reader can find it and skip it. The open conversation carries aria-current, which is what says “this one” rather than a colour. An unread count is NAMED — “12 unread” — rather than being read out as a bare number beside a name: the difference between one message and forty is what decides which conversation somebody opens, and a decoration a screen reader skips takes that decision away. Left to the author: aria-label on the element saying which set of conversations this is, when a screen has more than one.

Examples

Conversations in sections, one of them waiting

The current conversation is marked, and one other has unread messages.

Cannot be shown as a page placement: is given aria-label, which is set on the element rather than declared as an input. A stored placement carries only a component’s own inputs, so a page copying this would place the piece without it.

<caos-channel-list current="deploys" aria-label="Conversations"></caos-channel-list>

With a search and a way to start one

Both are opt-in: a search is noise under about a dozen conversations.

Cannot be shown as a page placement: is given aria-label, which is set on the element rather than declared as an input. A stored placement carries only a component’s own inputs, so a page copying this would place the piece without it.

<caos-channel-list searchable search-placeholder="Find a conversation" new-label="+ New conversation" aria-label="Conversations"></caos-channel-list>