Accordion

Overview

Accordion is a four-part composite over the Navius Accordion primitive family. ZitsAccordion renders NaviusAccordion, ZitsAccordionItem renders NaviusAccordionItem, ZitsAccordionTrigger renders NaviusAccordionHeader wrapping NaviusAccordionTrigger (plus a fixed chevron icon), and ZitsAccordionContent renders NaviusAccordionPanel (plus a padded wrapper div). The panel’s open/close animation is driven by the --accordion-panel-height CSS variable the engine publishes, mapped to Tailwind’s animate-accordion-up/-down keyframes.

Install

navius add accordion --to ./src/MyApp --namespace MyApp.Ui

Usage

<ZitsAccordion Type="single" Collapsible="true">
    <ZitsAccordionItem Value="item-1">
        <ZitsAccordionTrigger>Is it accessible?</ZitsAccordionTrigger>
        <ZitsAccordionContent>Yes. ARIA + keyboard from the brain.</ZitsAccordionContent>
    </ZitsAccordionItem>
</ZitsAccordion>

Parts and props

None of the four parts add a prop beyond what the composed Navius primitives already expose. ZitsAccordion forwards Type, Value, Values, ValueChanged, ValuesChanged, DefaultValue, DefaultValues, Collapsible, Disabled, Orientation, and Attributes straight to NaviusAccordion. ZitsAccordionItem forwards Value and Disabled to NaviusAccordionItem. ZitsAccordionTrigger forwards Level to NaviusAccordionHeader and appends a fixed chevron svg after ChildContent. ZitsAccordionContent forwards KeepMounted to NaviusAccordionPanel and wraps ChildContent in a pb-4 pt-0 div.

Styling surface

Every part accepts class/Attributes, merged via Cn.Merge with the caller’s classes applied last. ZitsAccordionItem adds a border-b base; ZitsAccordionTrigger adds the flex/hover trigger surface; ZitsAccordionContent adds the overflow-hidden text-sm animation classes.

Data attribute hooks

Part	Attribute	Description
Trigger `svg`	`data-panel-open` (on the trigger)	Rotates the chevron 180° via `[&[data-panel-open]>svg]:rotate-180`, emitted by `NaviusAccordionTrigger`.
Content	`data-open` / `data-closed`	Selects `animate-accordion-down` / `animate-accordion-up`, emitted by `NaviusAccordionPanel`.