Behavior layer
JavaScript remains small and named.
WebBlocks behavior is split into individual modules and concatenated into one file. The modules expose explicit public APIs on window
and listen for explicit attributes in the DOM.
Core modules
A page can learn what behavior exists just by reading the module names.
The bundle is not a mystery box. These are the main modules currently shipped.
- WBTheme
- WBDropdown
- WBModal
- WBTabs
- WBAccordion
- WBSidebar
- WBNavGroup
- WBDrawer
- WBCommandPalette
- WBToast
- WBPopover
- WBTooltip
- WBDismiss
- WBAjaxToggle
- WBCollapse
Trigger model
Markup and behavior stay close together.
Most interaction starts from a small attribute contract. That keeps intent readable in the HTML and keeps the page easy to debug.
<button data-wb-toggle="modal" data-wb-target="#confirm">
Delete
</button>
<button data-wb-mode-set="dark">Dark</button>
<button data-wb-dismiss="modal">Close</button>Theme API
The clearest example is the theme engine.
Theme changes are simple enough to call directly when you need them, but still visible as DOM state once applied.
WBTheme.setMode('dark')
WBTheme.setAccent('forest')
WBTheme.setRadius('soft')
WBTheme.setDensity('compact')