🚧 Please kindly note that this project is a work in progress. Collaborators welcome. To understand where we're going, please check the Roadmap 🚧
Mosaic enables UI behaviour to be described using a combination of functional programming and declarative configuration, separating behaviour from presentation to ensure maximum reusability.
Get a head start on UI development by leveraging UI behaviour that is highly performant, accessible, and fully tested straight out of the box, letting you focus on your project presentation.
The following configuration implements the Accordion pattern:
let counter = 0
export const Accordion = () => {
const id = counter++
return {
state: {
openPanel: 0,
},
actions: {
togglePanel: (state, i) => ({
...state,
openPanel: state.openPanel === i ? -1 : i,
}),
},
elements: [
{
selectAll: "button[accordion-toggle]",
attribute: (state, i) => ({
id: `trigger_${id}_${i}`,
ariaControls: `panel_${id}_${i}`,
ariaExpanded: state.openPanel === i,
}),
on: {
click: "togglePanel",
},
},
{
selectAll: "[accordion-panel]",
attribute: (state, i) => ({
id: `panel_${id}_${i}`,
ariaLabelledby: `trigger_${id}_${i}`,
hidden: state.openPanel !== i,
role: "region",
}),
},
],
}
}import { define } from "https://unpkg.com/mosaic"> npm i mosaicThe current plan is that the Mosaic project will broadly consist of two parts:
- The core library, which can be used to configure and define Mosaics behavioural components
- A suite of behavioural components implementing the most common Web UI patterns