PanelControl configuration

Setting options

JavaScript options

PanelControl.init({ activation: 'auto' });

const control = new PanelControl('#my-tabs', { activation: 'manual' });

Data attributes

<div role="tablist" data-panelcontrol data-activation="auto">
	<!-- tab buttons with aria-controls-->
</div>

Precedence runs from least to most specific: defaults -> JS options -> element attribute. A per-element data attribute overrides a global init() option, so one control can opt into auto while others initialised by the same call stay manual.

Web component configuration uses plain attributes on <ps-panelcontrol>, no data- prefix. See the Web Component integration page.

Markup that drives behaviour

Two things in the markup decide what PanelControl does. They are contracts, not JS options:

• data-panelcontrol marks the container whose [aria-controls] triggers it manages. It is also the default init() selector.
• role="tablist" on that container turns on keyboard navigation (arrow keys, Home / End, roving tabindex). Add aria-orientation="vertical" for up/down arrows. Without role="tablist", PanelControl only listens to clicks.

PanelControl finds its PanelSet automatically, through the panels its triggers point at. Usually there is no target to set. The lookup is lazy and cached on first use, so a PanelSet added to the page after init is still found on the first interaction.

Explicit target (optional). When discovery cannot reach the set (a remote control whose panels are not in the DOM yet, or a case where the right set is unclear), give data-panelcontrol a CSS selector value and PanelControl binds to that instead:

<div role="tablist" data-panelcontrol="#my-tabs">
	<button role="tab" aria-controls="t-1">One</button>
	<button role="tab" aria-controls="t-2">Two</button>
</div>
<!-- … elsewhere in the DOM …-->
<div id="my-tabs" data-panelset>
	<div class="panel-wrapper"></div>
</div>

Available options