Props

Name	Type	Default	Description
items	OutlineItem[]	—	Ordered headings. Each item is { id, label, level }. level is 1–6.
activeId	string	—	Controlled active heading. When set, built-in scroll-spy stays off. Bind with v-model:active-id.
label	string	Table of contents	Accessible name of the nav landmark. The default is localized.
density	'default' | 'compact'	'default'	Item padding. compact is for dense sidebars.
offset	number	0	Pixels of a fixed header covering the scroll root. Shifts the activation line and the scroll landing together.
scrollContainer	HTMLElement | null	—	Scroll container to track. Omit it to use the nearest scrollable ancestor, or the viewport.
hasScrollOnClick	boolean	true	Whether activating an item smooth-scrolls to it.

Events

Name	Payload	Description
update:activeId	string	The active id changed, from scroll-spy or from activating an item.
navigateStart	string	A click started a scroll to this id.
navigateEnd	string	That navigation finished, was interrupted, or hit the 1.2 second limit. Fires once per start.

Theme

The root class is astryx-outline. The indicator reads --astryx-outline-indicator-top and --astryx-outline-indicator-height, which the component measures from the active link.

Indent is a 2px track plus padding-inline-start: spacing 3 at the first indent, spacing 7, spacing 11, then spacing 12. compact changes block padding from spacing 2 to spacing 1.