1 viewer
Back to Components
Component · Navigation

Accordion

Collapsible sections with controlled expansion.

Category
Navigation
Slots
6
States
4
Writer
Shared
cre8.primitive.accordion

Preview

Live renderShared SSR + WASM writers
Byzantine-fault-tolerant ledger with deterministic state transition proofs.
<Accordion
  items={[
    {
      children: [
        "Byzantine-fault-tolerant ledger with deterministic state transition proofs."
      ],
      id: "acc-1",
      open: true,
      title: "C8TX Consensus Engine"
    },
    {
      children: [
        "Zero-knowledge RISC-V interpreter executing untrusted guest code hermetically."
      ],
      id: "acc-2",
      title: "Sandboxed CRE8VM"
    },
    {
      children: ["N-ary hyperedge graph preserving causal provenance and audit receipts."],
      id: "acc-3",
      title: "HyperDB Knowledge Graph"
    }
  ]}
/>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-accordion
item.primitive-accordion__item
trigger.primitive-accordion__trigger
title.primitive-accordion__title
chevron.primitive-accordion__chevron
panel.primitive-accordion__panel
6 rows
Modifier
primitive-accordion--{multiple}
State attribute
data-statefrom the openState prop
Role
trigger is <button> with aria-expanded; panel is role=region with aria-labelledby
Hydration markers
data-cre8-accordion, data-cre8-accordion-trigger

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
opencloseddisabledmultiple
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Accordion renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-navigationready
terminalterminal-textplanned
nativenative-adapterexperimental
5 rows

Accessibility

Disclosure buttons are linked to expandable regions.

  • Each trigger exposes aria-expanded and aria-controls.