# #125 Blend — HTML Functional Class

## Class
`bf-blend`

This is the single normal-use HTML entry point. Public API count does not create additional HTML classes.

## Minimal HTML
```html
<div class="bf-blend">Blend target</div>
```
Result: `Normal` → `mix-blend-mode: normal`.

## Configured HTML
```html
<div class="bf-blend" data-blend-mode="Multiply">Blend target</div>
```
Result: `mix-blend-mode: multiply`.

```html
<div class="bf-blend" data-blend-mode="Add">Blend target</div>
```
Result: `mix-blend-mode: plus-lighter`. Bone Flow formal name remains `Add`.

## JavaScript
```js
const target = document.querySelector('.bf-blend');
BoneBlendFunctionalClass.setMode(target, 'Screen');
console.log(BoneBlendFunctionalClass.getCssBlendMode(target)); // screen
```