Default
Let the browser own disclosure behavior
Native Details and Summary provide expanded-state semantics, keyboard activation, focus, and a usable experience without JavaScript.
What does the package include?
Semantic tokens, foundations, accessible components, interaction behaviors, and implementation guidance.
Which browsers are supported?
The latest two stable versions of Chrome, Edge, Firefox, and Safari form the current baseline.
Contained
Create a focused standalone surface
Contained appearance suits a disclosure that sits independently from a list or needs stronger visual separation.
Theme behaviorHow Frost, Mist, and Graphite use the same semantic roles
Components consume stable semantic tokens. Each theme maps those roles to a coordinated surface, text, border, action, and feedback palette.
Multiple open
Keep comparison available
The default Accordion allows any number of sections to remain open. No JavaScript is required.
FoundationsTokens, typography, color, layout, and motion
Shared visual and technical decisions used by every component.
ComponentsControls, content primitives, and interactions
Reusable public APIs with documented semantics, states, and acceptance criteria.
IntegrationsMCP, plain HTML, and future framework adapters
Guidance that connects the system to implementation environments.
Single open
Reduce vertical expansion
The initializer closes direct siblings after a new item opens and emits a change event from the group.
Brand
Logo, typography, voice, and the visual principles that define Nikba.
Product
Accessible controls and patterns for consistent product interfaces.
Engineering
Versioned CSS and JavaScript APIs with reproducible package verification.
Last openedBrand
Nested content
Keep group boundaries explicit
Single-open behavior affects only direct Disclosure children. A nested Disclosure remains independent.
Advanced settings
Settings in this region share one broader context.
Rendering options
Control progressive visual effects without changing content semantics.
Lifecycle
Initialize the region that changed
The public initializer accepts a Document or Element, skips existing groups, and returns cleanup for the listeners it adds.
const cleanup = initAccordions(root)nds:accordion-changecleanup()Usage guidance
Keep essential information visible.
Use Disclosure for supporting detail. Show short content, errors, and information users need to compare without requiring another action.
Next component: Tabs