# @42/blade

Auto-mount the headless controllers from [`@42/core`](../core) onto plain
`data-c42-*` markup — no JavaScript wiring per component.

`@42/core` is a **peer dependency**: install it alongside `@42/blade`.

```bash
npm install @42/blade @42/core
```

## Usage

Render your markup with the documented `data-c42-*` attributes, then call
`mount()` once on page load:

```ts
import { mount } from '@42/blade';

const app = mount();
```

```html
<div data-c42-accordion>
  <div data-c42-accordion-item data-value="a">
    <button data-c42-accordion-trigger>Section A</button>
    <div data-c42-accordion-panel>Content A</div>
  </div>
</div>
```

`mount(root = document)` scans `root` for every registered selector,
instantiates the matching controller, and installs a `MutationObserver` so
markup added later is mounted automatically and removed markup is destroyed.

Mounting is **idempotent**: an element already carrying `data-c42-mounted` is
never wrapped twice, so calling `mount()` more than once is safe.

```ts
const app = mount(document.querySelector('#app')!);

app.refresh();  // re-scan after a manual DOM change
app.unmount();  // disconnect the observer and destroy every controller
```

## What gets mounted

`mount()` walks the `registry` map (selector → controller). It covers the
interactive `@42/core` controllers that enhance existing markup with zero-config
defaults — accordion, modal, tabs, dropdown, drawer, tooltip, carousel, and
many more.

Controllers that **require** runtime options (such as `pagination`, whose
`total` is mandatory) are excluded — they must be wired by hand. Purely
presentational, CSS-only components (badge, card, divider, breadcrumb, button,
input-label) have no controller and are not part of the registry.

## License

MIT © [Laravel42](https://laravel42.com)