Data display

Accordion & timeline

Disclose detail and show ordered history.

Accordion

WAI-ARIA disclosure groups with Fluxon 2.3.1's accordion/1 + accordion_item/1 composition API. Arrow keys move between headers; Enter and Space toggle the focused item.

Required open item

Single-open mode with prevent_all_closed keeps one answer available at all times.

Who owns async search?

The LiveView owns querying, authorization, and ordering; the component owns interaction.

Does state survive LiveView patches?

Which keys are supported?

<.accordion id="faq" prevent_all_closed>
  <.accordion_item id="faq-search" expanded>
    <:header>Who owns async search?</:header>
    <:panel>The LiveView owns querying and authorization.</:panel>
  </.accordion_item>
  <.accordion_item id="faq-state">
    <:header>Does state survive patches?</:header>
    <:panel>Yes. Hook-owned state is restored after LiveView patches.</:panel>
  </.accordion_item>
</.accordion>

Multiple open

multiple allows independent disclosure panels; icon={false} supports a custom visual treatment.

Public API

Fluxon-compatible container and item functions.

Implementation

Independent, clean-room Lantern behavior.

<.accordion id="details" multiple>
  <.accordion_item id="details-api" expanded>
    <:header>Public API</:header>
    <:panel>Fluxon-compatible container and item functions.</:panel>
  </.accordion_item>
  <.accordion_item id="details-license" expanded icon={false}>
    <:header>Implementation</:header>
    <:panel>Independent, clean-room Lantern behavior.</:panel>
  </.accordion_item>
</.accordion>

API reference

Props and slots, introspected from the component.

accordion/1

Prop	Type	Default	Description
`animation_duration`	`integer`	`300`	Expand/collapse indicator transition duration in milliseconds.
`class`	`any`	`nil`	Extra classes merged onto the accordion root.
`controlled`	`boolean`	`false`	Server-driven value: `value` is truth, patches flow into the machine.
`id`	`string`	`—`	Stable accordion id. A unique id is generated when omitted.
`multiple`	`boolean`	`false`	Allow more than one item to be expanded at once.
`on_change`	`string`	`nil`	Server event pushed on toggle (`lantern:accordion:set-value` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on toggle.
`prevent_all_closed`	`boolean`	`false`	Keep at least one enabled item expanded.
`value`	`list`	`nil`	Expanded item ids for `controlled` mode (client mode ignores it).
Slots
`:inner_block`*	One or more `accordion_item/1` components.

accordion_item/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the item root.
`expanded`	`boolean`	`false`	Whether this item starts expanded.
`icon`	`boolean`	`true`	Whether to render the built-in chevron.
`id`	`string`	`—`	Stable item id used to connect its header and panel. A unique id is generated when omitted.
Slots
`:header`*	Always-visible header content.
`:panel`*	Expandable panel content.

Timeline

Vertical event sequence with a marker rail: timeline/1 plus timeline_item/1. Ordered list markup; pure server render, no JS hook.

Basic

Three items with status :done / :active / :pending plus label, at, and title. The state word always renders, so items stay legible in grayscale.

enventory Deployed 2h ago
foodfeed Deploying 40s
skusync Queued just now

<.timeline>
  <.timeline_item status={:done} label="Deployed" at="2h ago" title="enventory" />
  <.timeline_item status={:active} label="Deploying" at="40s" title="foodfeed" />
  <.timeline_item status={:pending} label="Queued" at="just now" title="skusync" />
</.timeline>

Statuses

One item per status, including :danger and :neutral.

done Deployed
active Deploying
pending Queued
danger Failed
neutral Note

<.timeline>
  <.timeline_item status={:done} label="Deployed" title="done" />
  <.timeline_item status={:active} label="Deploying" title="active" />
  <.timeline_item status={:pending} label="Queued" title="pending" />
  <.timeline_item status={:danger} label="Failed" title="danger" />
  <.timeline_item status={:neutral} label="Note" title="neutral" />
</.timeline>

Collapsible detail

Deployment-log shape: title is the summary, :detail is the output. open starts expanded.

enventory Deployed 2h ago

==> Building release
  Compiling 8 files (.ex)
  Generated enventory app
  ==> Deployed to production

foodfeed Deploying 40s

==> Building release
  Compiling 12 files (.ex)
  Generated foodfeed app

<.timeline>
  <.timeline_item status={:done} label="Deployed" at="2h ago" title="enventory">
    <:detail>
      <pre>==> Building release
Compiling 8 files (.ex)
Generated enventory app
==> Deployed to production</pre>
    </:detail>
  </.timeline_item>
  <.timeline_item status={:active} label="Deploying" at="40s" title="foodfeed" open>
    <:detail>
      <pre>==> Building release
Compiling 12 files (.ex)
Generated foodfeed app</pre>
    </:detail>
  </.timeline_item>
</.timeline>

Leading labels

label_position={:leading} on the container places timestamps in their own column; items inherit it.

2h ago
enventory Deployed
40s
foodfeed Deploying
just now
skusync Queued

<.timeline label_position={:leading}>
  <.timeline_item status={:done} label="Deployed" at="2h ago" title="enventory" />
  <.timeline_item status={:active} label="Deploying" at="40s" title="foodfeed" />
  <.timeline_item status={:pending} label="Queued" at="just now" title="skusync" />
</.timeline>

Marker slot

:marker replaces the status dot or icon. Avatars and other custom glyphs are supported.

PR #412 Merged 3h ago
PR #418 Reviewing 12m
PR #421 Queued just now

<.timeline>
  <.timeline_item status={:done} label="Merged" at="3h ago" title="PR #412">
    <:marker>
      <span class="docs-timeline-avatar">GO</span>
    </:marker>
  </.timeline_item>
  <.timeline_item status={:active} label="Reviewing" at="12m" title="PR #418">
    <:marker>
      <span class="docs-timeline-avatar">AL</span>
    </:marker>
  </.timeline_item>
  <.timeline_item status={:pending} label="Queued" at="just now" title="PR #421" />
</.timeline>

API reference

Props and slots, introspected from the component.

timeline/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`label_position`	`inline \| leading`	`:inline`	Where items place `at`: `:inline` (default, inside content) or `:leading` (fixed column left of the marker rail). Inherited by items unless overridden.
Slots
`:inner_block`*	One or more `timeline_item/1` children.

timeline_item/1

Prop	Type	Default	Description
`at`	`string`	`nil`	Preformatted timestamp or relative string; not formatted by the component.
`class`	`any`	`nil`	Extra classes merged onto the item root.
`icon`	`string`	`nil`	Optional lantern icon name rendered inside the marker instead of the plain dot.
`label`	`string`	`nil`	State word (e.g. "Deployed", "Failed"). Set whenever status is meaningful.
`label_position`	`atom`	`nil`	Where to place `at` (`:inline` or `:leading`). Inherits from the parent `timeline/1` when omitted; parent defaults to `:inline`.
`open`	`boolean`	`false`	When `:detail` is present, whether the disclosure starts open.
`status`	`done \| active \| pending \| danger \| neutral`	`:neutral`	Marker status; rendered as data-status for CSS coloring.
`title`	`string`	`nil`	Primary line (e.g. app or event name).
Slots
`:detail`	Collapsible body revealed under a native disclosure. When present, title/label/at become the summary.
`:inner_block`	Optional body/description under the title.
`:marker`	Custom marker content (e.g. an avatar). Replaces the status dot and `icon`. Sized by CSS so rail alignment is preserved.