# mosaic

> A JavaScript library for progressive enhancing HTML

Latest version **1.1.0** (published 2023-06-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install mosaic
pnpm add mosaic
yarn add mosaic
bun add mosaic
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-06-20 |
| First published | 2013-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | defx |

## Links

- npm: https://www.npmjs.com/package/mosaic
- npm.io page: https://npm.io/package/mosaic

## Recent versions

- 1.1.0 (latest) — 2023-06-20
- 1.0.20 — 2023-01-06
- 1.0.19 — 2023-01-06
- 1.0.18 — 2023-01-06
- 1.0.17 — 2023-01-06
- 1.0.16 — 2023-01-06
- 1.0.15 — 2023-01-06
- 1.0.14 — 2023-01-06
- 1.0.13 — 2023-01-06
- 1.0.12 — 2022-06-30
- 1.0.11 — 2022-06-30
- 1.0.10 — 2022-04-11
- 1.0.9 — 2022-04-11
- 1.0.8 — 2022-04-01
- 1.0.7 — 2022-04-01
- … 28 more at https://npm.io/package/mosaic/versions

## README

# Mosaic

## Codify UI behaviour with declarative configuration

🚧 Please kindly note that this project is a work in progress 🚧

[![npm](https://shields.io/npm/v/mosaic)](https://www.npmjs.com/package/mosaic)
[![gzip size](https://img.badgesize.io/https://unpkg.com/mosaic/dist/mosaic.min.js?compression=gzip&label=gzip)](https://unpkg.com/mosaic/dist/mosaic.min.js)

Mosaic's declarative configuration enables common UI behaviours to be reused effectively between different projects, ensuring a high level of performance and accessibility, whilst allowing developers to concentrate on the things that are particular to their specific business and project requirements: the markup and styles.

## Example

The following configuration implements the Accordion pattern:

```js
let counter = 0

export const Accordion = () => {
  const id = counter++
  return {
    state: {
      openPanel: 0,
    },
    action: {
      togglePanel: (state, { index }) => ({
        ...state,
        openPanel: state.openPanel === index ? -1 : index,
      }),
    },
    elements: [
      {
        select: "button[accordion-toggle]",
        attribute: (state, i) => ({
          id: `trigger_${id}_${i}`,
          ariaControls: `panel_${id}_${i}`,
          ariaExpanded: state.openPanel === i,
        }),
        on: {
          click: "togglePanel",
        },
      },
      {
        select: "[accordion-panel]",
        attribute: (state, i) => ({
          id: `panel_${id}_${i}`,
          ariaLabelledby: `trigger_${id}_${i}`,
          hidden: state.openPanel !== i,
        }),
      },
    ],
  }
}
```

## Install

### cdn

```js
import { define } from "https://unpkg.com/mosaic"
```

### npm

```sh
> npm i mosaic
```

## Usage

---
_Source: https://npm.io/package/mosaic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._