AccordionTrigger

Source: client/lib/theme/vueda-tailwind/shell/index.js

The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open.

Vue component: AccordionTrigger

Slot	Default classes	Description
root	4 classes	The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open.
header	flex	The text wrapper inside the trigger. It stays minimal so custom trigger content can define its own stacking or inline layout.
icon	2 classes	The disclosure icon beside the trigger text. It is optically nudged down to align with the first text line and uses muted color until inherited state changes it.

root

The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open.

Default classes:

flex flex-1 items-start justify-between gap-4
rounded-md py-4 text-left text-body font-medium
transition-all hover:underline focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50
[&[data-state=open]>svg]:rotate-180

Source: client/lib/theme/vueda-tailwind/shell/AccordionTrigger.theme.js:18

header

The text wrapper inside the trigger. It stays minimal so custom trigger content can define its own stacking or inline layout.

Default classes:

flex

Source: client/lib/theme/vueda-tailwind/shell/AccordionTrigger.theme.js:36

icon

The disclosure icon beside the trigger text. It is optically nudged down to align with the first text line and uses muted color until inherited state changes it.

Default classes:

text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5
transition-transform duration-200

Source: client/lib/theme/vueda-tailwind/shell/AccordionTrigger.theme.js:42