Gosub interactive elements test

Native interactive widgets: <details>/<summary>, <dialog>, plus CSS-only disclosure patterns (menu via :focus-within, tabs via radio buttons).

details / summary

Click to expand (default marker)

This content is hidden until the disclosure triangle is toggled. The browser provides the marker and the open/closed state.

Open by default

This one has the open attribute, so it renders expanded on load.

Styled accordion (custom ▶ marker)

The default marker is hidden and replaced with a CSS ::before arrow that flips when open.

dialog (modal)

Confirm action
This is a native <dialog> shown with showModal(). The backdrop dims the page behind it.

If the engine lacks <dialog> support, the dialog content may render inline instead of as an overlay.

Dropdown menu (:focus-within, no JS)

Profile Settings Help Sign out

Opens on focus of the button or any item — pure CSS via :focus-within.

Tabs (CSS-only via radio)

Content of the first tab. Switching tabs is driven entirely by :checked sibling selectors.
Second tab content. No JavaScript involved.
Third tab content. The active label is highlighted via :checked ~ label.