Sumi-e gallery
3 icons, 3 ink drawings. Click an icon to expand it; click again to minimize.
Every button, field and modal here speaks NAC. A voice runner, a chat agent or an accessibility tool can drive the page without scraping pixels and without DOM hacks. Hit the button below and watch the page drive itself.
3 icons, 3 ink drawings. Click an icon to expand it; click again to minimize.
Click and watch the lifecycle events fly.
Text, select, checkbox -- all driveable by NAC.fill.
Tablist, tabpanel and accordion-section -- v1.1.
Autocomplete + continuous range -- v1.1.
sort-control, filter-control, pagination-control -- v1.1.
draggable, drop-target, dropzone -- v1.1.
5000 cities, server-fetched. options_source=remote -- v1.2.
First-contact discovery: views, transitions, capabilities -- v1.2.
(empty -- click a button)
Run the runner against this same page. See the system map. Take an AI agent tour.
(empty -- click any button)
Every interaction emits a NAC lifecycle event. Watch.
v1.7 sec 6.2.8 -- nac:step:advanced / :back
v1.7 sec 6.2.9 -- nac:tree:expanded/collapsed/selected
v1.7 sec 6.2.10 -- nac:toast:shown/dismissed
v1.7 sec 6.2.11 -- nac:drawer:opened/closed
v1.7 sec 6.2.12 -- nac:calendar:view_changed/event_selected
View: week, 2 events
v1.7 sec 6.2.13 -- nac:chart:data_loaded/series_toggled
2 series, 6 points each
v1.7 sec 6.2.14 -- nac:map:focused/marker_selected
No marker selected
v1.7 sec 6.2.15 -- nac:richtext:formatted/link_inserted
v1.7 sec 6.2.16 -- nac:breadcrumb:navigated
Showing: Item 42
v1.7 sec 6.2.17 -- nac:carousel:advanced
v1.7 sec 6.2.18 -- nac:timeline:loaded
v1.8 sec 3.1 -- data-nac-validate="skip"
The grey region below mocks a third-party widget the host cannot retrofit with NAC. The validator does NOT raise hard-errors on its contents but DOES warn about the interactives it hides.
v1.8 sec 3.1 -- data-nac-a11y-hint
The button below declares its risk via data-nac-a11y-hint. Voice tools, screen readers and AI agents read this from NAC.describe() and SHOULD interpose a confirmation BEFORE invoking. The inert button next to it has no hint and is just a normal action.
describe() on the delete button: a11y_hint: ["irreversible","requires_confirmation","data_loss"]
v1.8 sec 13.4 -- data-nac-drag-type / -drag-accept
Drag the typed cards into one of the two zones. The "files only" zone accepts only file; the "any" zone accepts everything. A type mismatch fires nac:command:rejected with reason="drag_type_mismatch".