Collapsible sections (advanced settings, FAQ, log groups): kern-accordion-item children in a bordered box. Without multiple opening one closes the others.
Each kern-accordion-item is a collapsible section; open expands it initially. Opening one closes the others. Use the heading slot instead of the heading attribute for richer content, and disabled for a section that cannot be opened.
With multiple sections open independently. flush drops border and background, e.g. inside a kern-card. Each item emits kernToggle when the user opens or closes it.
Reduces power use; the relay reacts a little slower.time.google.comSends logs over WebSocket to 192.168.1.5.
Toggle a section.
<kern-card heading="Advanced settings" style="max-width:480px">
<kern-accordion multiple flush>
<kern-accordion-item heading="Eco mode" open>Reduces power use; the relay reacts a little slower.</kern-accordion-item>
<kern-accordion-item heading="Time server" open><kern-code inline>time.google.com</kern-code></kern-accordion-item>
<kern-accordion-item heading="Debug log">Sends logs over WebSocket to 192.168.1.5.</kern-accordion-item>
</kern-accordion>
<p class="out" style="margin:8px 0 0;font-size:13px;color:var(--text-muted)">Toggle a section.</p>
</kern-card>
root.querySelector('kern-accordion').addEventListener('kernToggle', (e) => {
root.querySelector('.out').textContent = `${e.target.heading}: ${e.detail.open ? 'opened' : 'closed'}`;
});
Keyboard
Each heading is a native <summary>: Tab moves between headings, Enter or Space toggles the section, and screen readers announce it as expanded or collapsed. Disabled sections are skipped.