Props

Name	Type	Default	Description
trigger	string	-	Plain-text label for the trigger. Use the trigger slot instead when the label needs a heading, an icon, or extra controls; the slot replaces this prop.
v-model:isOpen	boolean	-	Controlled open state. While bound, the component renders exactly this value and a click only requests an update; leave it unbound to let the component manage its own state.
defaultIsOpen	boolean	true	Whether the content starts expanded while isOpen is unbound.
isDisabled	boolean	false	Dims the trigger, marks it aria-disabled, and takes it out of the tab order. Clicks no longer toggle the content, and content that is already open stays open.
chevronPosition	CollapsibleChevronPosition	'end'	Logical position of the disclosure chevron. end (default) follows the label, pointing down while collapsed and up while expanded; start leads the label, pointing into the content while collapsed (mirrored under RTL) and down while expanded.

Slots

Name	Description
default	The content hidden while collapsed and revealed while expanded.
trigger	The trigger label. Accepts headings, icons, and other markup, and replaces the trigger prop.

Events and template ref

Name	Signature	Description
openChange	(isOpen: boolean) => void	Emitted when the trigger asks for a new open state. In uncontrolled usage it reports the change; in controlled usage it is the request to update the bound value.
update:isOpen	(isOpen: boolean) => void	Listened to automatically by v-model:isOpen; you rarely handle it yourself.
element	HTMLDivElement | null	The root element, exposed through a template ref.

Theming

.my-collapsible {
  --astryx-collapsible-trigger-foreground: #171717;
  --astryx-collapsible-content-foreground: #525252;
}

• --astryx-collapsible-trigger-foreground: trigger label color.
• --astryx-collapsible-content-foreground: content text color.
• --astryx-collapsible-pressed-overlay: overlay painted on the trigger while it is held down, and only then.
• --astryx-collapsible-focus: keyboard focus outline color.
• --astryx-spacing-1, --astryx-text-large-size, --astryx-text-body-size: the padding and both type sizes reuse the global tokens.

The neutral theme adapts to light and dark mode on its own.

Native attributes

The root element is a <div>.

The following go to the root element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

The trigger is a <button type="button"> inside the root element; its aria-expanded, aria-controls, aria-disabled, and tabindex are maintained by the component. Disabling never sets the native disabled attribute, so assistive technology keeps perceiving the trigger.