@mlola-ui/behavior 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/package.json +1 -1
- package/src/index.js +5 -5
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Framework-free interaction behavior for Mlola UI markup. Standard DOM only: no
|
|
4
4
|
framework, no build step, no runtime peers, and no renderer of its own. Mark a
|
|
5
|
-
root with `data-ml="<
|
|
5
|
+
root with `data-ml="<behavior>"` and enhance it, or call `observe()` once and
|
|
6
6
|
let new markup enhance itself.
|
|
7
7
|
|
|
8
8
|
The decisions themselves — which index a key moves to, where focus goes, what a
|
|
@@ -33,7 +33,7 @@ npm install @mlola-ui/behavior
|
|
|
33
33
|
It is idempotent, so it is safe to call after a framework re-render, a turbo
|
|
34
34
|
navigation, or an htmx swap.
|
|
35
35
|
|
|
36
|
-
## Implemented
|
|
36
|
+
## Implemented behaviors
|
|
37
37
|
|
|
38
38
|
`accordion`, `tabs`, `dropdown-menu`, `select`, `modal`, `sheet`, `tooltip`,
|
|
39
39
|
`toast`, `switch`, `slider` — the same list the engine's `behavior-spec.mjs`
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Mlola
|
|
2
|
+
* Mlola behavior: the library's interactions without a framework.
|
|
3
3
|
*
|
|
4
4
|
* Built to still work in ten years, which drove every choice here:
|
|
5
5
|
*
|
|
6
6
|
* - Standard DOM only. No framework, no bundler, no transpiler. This file is
|
|
7
7
|
* a plain ES module and runs from a <script type="module"> as it is.
|
|
8
8
|
* - Progressive enhancement over ownership. Markup comes first, from React,
|
|
9
|
-
* Svelte, Rails, a Go template or a static file, and
|
|
9
|
+
* Svelte, Rails, a Go template or a static file, and behavior attaches to
|
|
10
10
|
* it. Nothing here renders HTML, so nothing here can disagree with it.
|
|
11
11
|
* - Attribute driven, matching the contract the stylesheet already reads.
|
|
12
|
-
*
|
|
12
|
+
* Behavior sets the same data-* and aria-* the CSS reacts to.
|
|
13
13
|
* - Idempotent. Enhancing twice is a no-op, so it is safe to call after a
|
|
14
14
|
* framework re-render, a turbo navigation or an htmx swap.
|
|
15
15
|
*
|
|
16
|
-
* Mark a root with data-ml="<
|
|
16
|
+
* Mark a root with data-ml="<behavior>" and call enhance(), or call observe()
|
|
17
17
|
* once and let new markup enhance itself.
|
|
18
18
|
*/
|
|
19
19
|
|
|
@@ -574,7 +574,7 @@ const behaviors = {
|
|
|
574
574
|
// share one implementation rather than drifting apart.
|
|
575
575
|
behaviors.sheet = behaviors.modal;
|
|
576
576
|
|
|
577
|
-
/** Attach
|
|
577
|
+
/** Attach behavior to every marked root inside `scope`. Safe to call again. */
|
|
578
578
|
export function enhance(scope = document) {
|
|
579
579
|
const roots = [
|
|
580
580
|
...(scope.matches?.("[data-ml]") ? [scope] : []),
|