@ktfth/stickjs 3.0.0

package/CHANGELOG.md

@@ -0,0 +1,169 @@
+# Changelog
+
+All notable changes to Stick.js will be documented here.
+
+## v3.1.0 — CLI + CDN + Vercel docs
+
+### New features
+- **CLI** — `npx stickjs add <component>` copies component files to `./stick-ui/` (shadcn/ui-style)
+- **`npx stickjs list`** — list all 15 available components
+- **`npx stickjs add --all`** — add all components at once
+- **`--force` flag** — overwrite existing files
+- **CDN** — all files available via jsdelivr and unpkg after npm publish
+- **Release script** — `npm run release` minifies, publishes to npm, and deploys docs to Vercel
+
+### Infrastructure
+- Vercel deployment for documentation site (`docs/vercel.json`)
+- `bin/registry.json` component manifest
+- `bin/stickjs.js` zero-dependency CLI (Node built-ins only)
+
+## v3.0.0 — core hardening + a11y + transitions
+
+### New features
+- **Error boundary** — handler failures are caught and logged; one failing handler no longer breaks siblings on the same element
+- **`Stick.fire(el, handler, param?)`** — invoke any handler programmatically without events (chainable)
+- **`Stick.on(event, fn)`** — lifecycle hooks for `bind` and `unbind` events (chainable)
+- **`data-stick-group="name"`** — mutual exclusivity: `show`/`toggle`/`show-modal` hides others in the same group
+- **`data-stick-transition="name"`** — CSS enter/leave transitions: adds `name-enter-active` / `name-leave-active` classes with automatic cleanup
+- **`set-aria` handler** — set ARIA attributes declaratively, auto-prefixes `aria-`
+- **`toggle-aria` handler** — flip ARIA boolean attributes (`true` ↔ `false`)
+
+### Improvements
+- `show`/`hide`/`toggle` auto-manage `aria-expanded` on trigger element
+- All handler invocations wrapped in try/catch (error boundary)
+
+## [2.9.0] — 2026-02-19
+
+### Added (iter 20)
+- `clone-template` now resolves `{{tokens}}` from the trigger element inside cloned text nodes and attributes — dynamic list generation fully declarative
+- `sort` handler — sort `target.children` alphabetically by textContent (default) or any `data-*`/attribute key (numeric-aware)
+- `count` handler — set `target.textContent` to count of elements matching CSS selector param, or `target.children.length` when param is empty
+- `data-stick-swap` now accepts `"prepend"` (alias for `afterbegin`) and `"append"` (alias for `beforeend`) for more natural naming
+- 6 new browser tests
+
+## [2.8.0] — 2026-02-19
+
+### Added (iter 19)
+- `data-stick-delegate="selector"` — event delegation: attach one listener to a container, fire for matching descendants. `el` in the handler is the matched child. Relative targets (`parent`, `next`, `closest:`) resolve from the matched child.
+- `{{url:key}}` interpolation — reads `URLSearchParams` from the current page URL at event time
+- `scroll-top` handler — `window.scrollTo({ top: 0, behavior: 'smooth' })` — back-to-top in one attribute
+- 9 new browser tests
+
+## [2.7.0] — 2026-02-19
+
+### Added (iter 18)
+- `parse()` shorthand — `"event:handler"` (no trailing colon) now valid; trailing colon remains optional
+- `watch` synthetic event — fires immediately on bind, then on every attribute mutation of `el` (MutationObserver)
+- `select` handler — `target.select()` — focus and select all text in an input/textarea
+- `history-push` handler — `window.history.pushState({}, '', param)` — update URL without page reload
+- 8 new browser tests covering all new features
+
+## [2.6.0] — 2026-02-20
+
+### Added (iter 17)
+- `{{chars}}` interpolation — `el.value.length` (character counter for inputs/textareas)
+- `Stick.debug(true?)` — enable verbose console logging (bind + fire events); chainable
+- Comprehensive demo rewrite (`index.html`) — 16 sections covering every major feature:
+  tabs with siblings, native dialog, checkboxes, counters, clone-template,
+  animate, store+ready, dispatch, plugin system, multi-target, intersect, observe()
+- 4 new browser tests for `{{chars}}` and `Stick.debug()`
+
+## [2.5.0] — 2026-02-20
+
+### Added (iter 16)
+- `Stick.use(plugin)` — plugin system: fn(stick) | { install } | { name: fn, … }
+- `Stick.unbind(el)` — remove all listeners from el, clear data-stick-bound (enables clean SPA unmount)
+- `{{index}}` interpolation — element's position among parent's children (0-based)
+- `{{length}}` interpolation — `el.children.length`
+- `{{attr}}` interpolation — any attribute via `el.getAttribute(attr)` (always worked, now documented)
+- Updated `stick.d.ts` — full TypeScript coverage: `StickPlugin`, `StickSyntheticEvent`, `use`, `unbind`
+- Internal: `listenerMap` WeakMap tracks attached listeners for `unbind` cleanup
+- 12 new browser tests
+
+## [2.4.0] — 2026-02-20
+
+### Added (iter 15)
+- Multi-target support: `"siblings"` and `"all:sel"` target keywords — handler called once per matched element
+- `ready` synthetic event — fires immediately on `bind()`, before any user interaction
+- `animate` handler — adds CSS class, auto-removes after `animationend`
+- Internal: `resolveTarget` → `resolveTargets` (returns array); enables true multi-target dispatch
+- 8 new browser tests (siblings, all:, ready, animate)
+
+## [2.3.0] — 2026-02-20
+
+### Added (iter 14)
+- `toggle-attr` handler — toggle attribute presence (great for `open`, `disabled`, `aria-expanded`)
+- `clone-template` handler — clone `<template>` content into target; auto-binds new elements
+- `data-stick-prevent` modifier — always call `event.preventDefault()` (saves a stacked slot on forms)
+- `data-stick-stop` modifier — always call `event.stopPropagation()`
+- `"self"` target keyword — explicit self-reference in `data-stick-target`
+- `Stick.remove(name)` API — unregister a handler, chainable
+- 10 new browser tests
+
+## [2.2.0] — 2026-02-20
+
+### Added (iter 13)
+- `data-stick-key="Enter"` modifier — filter keyboard events by key name (comma-separated)
+- `open` handler — `window.open(param, '_blank', 'noopener')`
+- `back` / `forward` handlers — history navigation
+- `show-modal` / `close-modal` handlers — native `<dialog>` support
+- 10 new browser tests
+
+## [2.1.0] — 2026-02-20
+
+### Added (iter 12)
+- `check`, `uncheck`, `toggle-check` handlers — checkbox control
+- `increment`, `decrement` handlers — counter mutation on text/input targets (optional step param)
+- `set-data` handler — `target.dataset[key] = value` (param: `"key:value"`)
+- `data-stick-passive` modifier — `addEventListener` with `passive: true` (performance for scroll/touch)
+- `data-stick-capture` modifier — `addEventListener` with `capture: true`
+- 13 new browser tests covering all new handlers and modifiers
+
+## [2.0.0] — 2026-02-20
+
+Complete rewrite. Zero dependencies. Vanilla JS.
+
+### Added
+- `data-stick="event:handler:param"` core syntax
+- `data-stick-target` — apply handler to another element
+- Relative targets: `"next"`, `"prev"`, `"parent"`, `"closest:sel"`
+- `data-stick-2/3/4/5` — stack multiple behaviors on one element
+- `data-stick-target-2/3/4/5` — per-slot targets for stacked behaviors
+- `data-stick-once` — remove listener after first fire
+- `data-stick-debounce="ms"` — debounce handler
+- `data-stick-throttle="ms"` — throttle handler
+- `data-stick-confirm="msg"` — window.confirm gate
+- `data-stick-bound` attribute — prevents double-binding; remove to rebind
+- `{{value}}`, `{{text}}`, `{{id}}`, `{{checked}}`, `{{data-*}}` param interpolation
+- `intersect` synthetic event (IntersectionObserver)
+- `Stick.observe()` — MutationObserver auto-bind
+- `Stick.version`, `Stick.handlers`, `Stick.parse()`, `Stick.bind()`
+- UMD wrapper — works as `<script>`, `require()`, or `import`
+- TypeScript types (`stick.d.ts`)
+- `llms.txt` — machine-readable API reference for LLMs
+
+### Built-in handlers (40)
+`show`, `hide`, `toggle`, `add-class`, `remove-class`, `toggle-class`,
+`set-text`, `set-html`, `set-value`, `clear`, `set-attr`, `remove-attr`,
+`set-style`, `focus`, `scroll-to`, `copy`, `navigate`, `reload`, `print`,
+`submit`, `reset`, `prevent`, `stop`, `dispatch`, `emit`, `remove`,
+`disable`, `enable`, `store`, `restore`, `fetch`, `log`, `alert`, `wait`
+
+### fetch handler options
+- `data-stick-method` — HTTP method (default: GET)
+- `data-stick-swap` — insertion mode (innerHTML, outerHTML, beforeend, …)
+- `data-stick-loading` — button label while in-flight
+- `data-stick-headers` — JSON string of fetch headers
+- `data-stick-json` — JSON body template with interpolation (auto-sets Content-Type)
+- `data-stick-error` — element to display fetch errors
+
+### Removed
+- jQuery dependency
+- Old `$.handler:param` syntax
+- `build/` directory (Ant/Java build tools)
+- All HTML5 Boilerplate scaffolding
+
+## [1.x] — 2011
+
+Original experimental release. jQuery-based.
+Syntax: `data-stick="$.handler:param"`. Handlers: alert, confirm, log, validate.

package/README.md

@@ -0,0 +1,449 @@
+# Stick.js
+
+**Declarative behavior for HTML elements.** Zero dependencies, ~220 lines of vanilla JS.
+
+Drop in one `<script>` and annotate your HTML — no JavaScript glue required for the most common UI interactions.
+
+```html
+<script src="stick.js"></script>
+
+<button data-stick="click:toggle" data-stick-target="#menu">Menu</button>
+<input  data-stick="input:fetch:/api/search?q={{value}}"
+        data-stick-target="#results" data-stick-debounce="300">
+```
+
+---
+
+## Install
+
+**Script tag** (put before your custom-handler `<script>`):
+```html
+<script src="stick.js"></script>
+```
+
+**npm:**
+```bash
+npm install stickjs
+```
+
+**ESM / CommonJS:**
+```js
+import Stick from 'stickjs';
+const Stick = require('stickjs');
+```
+
+---
+
+## Syntax
+
+```
+data-stick="event:handler:param"
+```
+
+| Attribute | Purpose |
+|-----------|---------|
+| `data-stick="event:handler:param"` | Primary behavior |
+| `data-stick-2="event:handler:param"` | Stack a 2nd behavior (up to `data-stick-5`) |
+| `data-stick-target="#sel"` | Apply handler to another element |
+| `data-stick-target-2="#other"` | Per-slot target for `data-stick-2` (also `-3`, `-4`, `-5`) |
+| `data-stick-once` | Remove listener after first fire |
+| `data-stick-debounce="300"` | Debounce handler by N ms |
+| `data-stick-throttle="300"` | Throttle handler by N ms |
+| `data-stick-confirm="message"` | `window.confirm()` gate before handler |
+| `data-stick-key="Enter"` | Only fire when `event.key` matches (comma-separated, e.g. `"Enter,Escape"`) |
+| `data-stick-prevent` | Always call `event.preventDefault()` before handler (e.g. on `<form>`) |
+| `data-stick-stop` | Always call `event.stopPropagation()` before handler |
+| `data-stick-passive` | Add event listener as passive (use for `scroll`/`touchmove`) |
+| `data-stick-capture` | Add event listener in capture phase |
+| `data-stick-delegate=".item"` | Event delegation — listen on `el`, fire only for matching descendant elements. Handler receives the matched child as `el`. |
+| `data-stick-method="POST"` | HTTP method for `fetch` handler |
+| `data-stick-swap="beforeend"` | Fetch insertion mode (default: `innerHTML`). Aliases: `prepend` = `afterbegin`, `append` = `beforeend` |
+| `data-stick-loading="Loading…"` | Button label while fetch is in-flight |
+| `data-stick-headers='{"Authorization":"Bearer TOKEN"}'` | Fetch headers (JSON string) |
+| `data-stick-json='{"key":"{{value}}"}'` | JSON body for fetch POST (auto-sets Content-Type) |
+| `data-stick-error="#el"` | Element to display fetch errors |
+
+### Target selectors
+
+`data-stick-target` accepts:
+
+| Value | Resolves to |
+|-------|------------|
+| `"#id"` or any CSS selector | `document.querySelector(sel)` |
+| `"self"` | The trigger element itself (explicit) |
+| `"siblings"` | All sibling elements (same parent, excluding el) |
+| `"all:.cls"` | All elements matching a CSS selector (`querySelectorAll`) |
+| `"next"` | `el.nextElementSibling` |
+| `"prev"` | `el.previousElementSibling` |
+| `"parent"` | `el.parentElement` |
+| `"closest:form"` | `el.closest("form")` |
+
+### Param interpolation
+
+Tokens in `param` are resolved at event time from the **trigger element**:
+
+| Token | Value |
+|-------|-------|
+| `{{value}}` | `el.value` |
+| `{{text}}` | `el.textContent` |
+| `{{id}}` | `el.id` |
+| `{{name}}` | `el.name` |
+| `{{checked}}` | `"true"` or `"false"` |
+| `{{index}}` | Position among parent's children (0-based) |
+| `{{length}}` | `el.children.length` |
+| `{{chars}}` | `el.value.length` or `textContent.length` — character count |
+| `{{data-foo}}` | `el.dataset.foo` |
+| `{{url:key}}` | `URLSearchParams` value from the current page URL (e.g. `{{url:q}}` → `?q=value`) |
+| `{{href}}`, `{{src}}`, etc. | Any attribute via `el.getAttribute(name)` |
+
+### Synthetic events
+
+| Event | Trigger |
+|-------|---------|
+| `ready` | Fires immediately on bind — use to initialize state |
+| `watch` | Fires immediately on bind, then on every attribute mutation of `el` (MutationObserver) |
+| `intersect` | Element enters the viewport (IntersectionObserver) |
+
+---
+
+## Built-in handlers
+
+### Visibility
+
+| Handler | Effect |
+|---------|--------|
+| `show` | `target.hidden = false` |
+| `hide` | `target.hidden = true` |
+| `toggle` | Toggle `target.hidden` |
+
+### CSS classes
+
+| Handler | Effect |
+|---------|--------|
+| `add-class` | `target.classList.add(param)` |
+| `remove-class` | `target.classList.remove(param)` |
+| `toggle-class` | `target.classList.toggle(param)` |
+
+### Content
+
+| Handler | Effect |
+|---------|--------|
+| `set-text` | `target.textContent = param` |
+| `set-html` | `target.innerHTML = param` |
+| `set-value` | `target.value = param` |
+| `clear` | `target.textContent = ""` |
+
+### Attributes & styles
+
+| Handler | Effect |
+|---------|--------|
+| `set-attr` | `target.setAttribute(name, val)` — param: `"name:value"` |
+| `remove-attr` | `target.removeAttribute(param)` |
+| `toggle-attr` | Toggle attribute presence — param is attr name (e.g. `"disabled"`, `"open"`) |
+| `set-style` | `target.style[prop] = val` — param: `"property:value"` |
+
+### Focus, scroll & selection
+
+| Handler | Effect |
+|---------|--------|
+| `focus` | `target.focus()` |
+| `scroll-to` | `target.scrollIntoView({ behavior: 'smooth' })` |
+| `select` | `target.select()` — select all text in an input/textarea |
+
+### Clipboard & navigation
+
+| Handler | Effect |
+|---------|--------|
+| `copy` | `navigator.clipboard.writeText(param \|\| el.textContent)` |
+| `navigate` | `window.location.href = param` |
+| `open` | `window.open(param, '_blank', 'noopener')` |
+| `back` | `window.history.back()` |
+| `forward` | `window.history.forward()` |
+| `history-push` | `window.history.pushState({}, '', param)` — update URL without reload |
+| `scroll-top` | `window.scrollTo({ top: 0, behavior: 'smooth' })` — back-to-top |
+| `reload` | `window.location.reload()` |
+| `print` | `window.print()` |
+
+### Forms
+
+| Handler | Effect |
+|---------|--------|
+| `submit` | Submit closest `<form>` |
+| `reset` | Reset closest `<form>` |
+
+### Events
+
+| Handler | Effect |
+|---------|--------|
+| `prevent` | `event.preventDefault()` |
+| `stop` | `event.stopPropagation()` |
+| `dispatch` / `emit` | `target.dispatchEvent(new CustomEvent(param, { bubbles: true, detail: { source: el } }))` |
+
+### DOM
+
+| Handler | Effect |
+|---------|--------|
+| `remove` | `target.remove()` |
+| `disable` | `target.disabled = true` |
+| `enable` | `target.disabled = false` |
+
+### Checkboxes
+
+| Handler | Effect |
+|---------|--------|
+| `check` | `target.checked = true` |
+| `uncheck` | `target.checked = false` |
+| `toggle-check` | Toggle `target.checked` |
+
+### Counters
+
+| Handler | Effect |
+|---------|--------|
+| `increment` | Add `param` (default `1`) to `target` value or textContent |
+| `decrement` | Subtract `param` (default `1`) from `target` value or textContent |
+
+### Data attributes
+
+| Handler | Effect |
+|---------|--------|
+| `set-data` | `target.dataset[key] = val` — param: `"key:value"` |
+
+### Native dialog
+
+| Handler | Effect |
+|---------|--------|
+| `show-modal` | `target.showModal()` — open native `<dialog>` as modal |
+| `close-modal` | `target.close(param?)` — close native `<dialog>` |
+
+### Storage
+
+| Handler | Effect |
+|---------|--------|
+| `store` | `localStorage.setItem(key, val)` — param: `"key:value"` |
+| `restore` | `localStorage.getItem(param)` → set target `.value` or `.textContent` |
+
+### Templates & animation
+
+| Handler | Effect |
+|---------|--------|
+| `clone-template` | Clone `<template>` matched by param selector, resolve `{{tokens}}` from `el`, append to target. Auto-binds new elements. |
+| `animate` | `target.classList.add(param)` — removes the class automatically after `animationend` |
+| `sort` | Sort `target.children` by textContent (default) or param key (e.g. `"data-price"`) — numeric-aware |
+| `count` | Set `target.textContent` to count of elements matching CSS param, or `target.children.length` when empty |
+
+### Network
+
+| Handler | Notes |
+|---------|-------|
+| `fetch` | Fetch `param` URL, inject response HTML into `target`. Supports `data-stick-method`, `data-stick-swap`, `data-stick-loading`, `data-stick-headers`, `data-stick-json`, `data-stick-error`. |
+
+### Debug
+
+| Handler | Effect |
+|---------|--------|
+| `log` | `console.log('[Stick]', param)` |
+| `alert` | `window.alert(param)` |
+
+---
+
+## Examples
+
+```html
+<!-- Toggle menu open/closed -->
+<button data-stick="click:toggle-class:open" data-stick-target="#menu">Menu</button>
+
+<!-- Show panel on click, only once -->
+<button data-stick="click:show" data-stick-target="#welcome" data-stick-once>
+  Show welcome
+</button>
+
+<!-- Search with debounce -->
+<input data-stick="input:fetch:/api/search?q={{value}}"
+       data-stick-target="#results"
+       data-stick-debounce="300"
+       placeholder="Search…">
+
+<!-- Fetch + append (load more) -->
+<button data-stick="click:fetch:/api/posts?page={{data-page}}"
+        data-stick-target="#list"
+        data-stick-swap="beforeend"
+        data-stick-loading="Loading…"
+        data-page="2">Load more</button>
+
+<!-- Confirm before destructive action -->
+<button data-stick="click:fetch:/api/item/42"
+        data-stick-method="DELETE"
+        data-stick-target="parent"
+        data-stick-confirm="Delete this item?">Delete</button>
+
+<!-- POST JSON -->
+<button data-stick="click:fetch:/api/users"
+        data-stick-method="POST"
+        data-stick-json='{"name":"{{value}}"}'
+        data-stick-target="#result">Create user</button>
+
+<!-- Lazy-load on scroll into view -->
+<section data-stick="intersect:fetch:/api/widget"
+         data-stick-target="#widget-output"
+         data-stick-once>Loading widget…</section>
+
+<!-- Stack behaviors with different targets -->
+<button
+  data-stick="click:add-class:loading"   data-stick-target="#submit-btn"
+  data-stick-2="click:show"              data-stick-target-2="#spinner"
+  data-stick-3="click:fetch:/api/save"   data-stick-target-3="#response">
+  Save
+</button>
+
+<!-- Dispatch event for other components to react -->
+<li data-stick="click:emit:item-selected" data-id="42">Item 42</li>
+
+<!-- Navigate to sibling (no ID needed) -->
+<button data-stick="click:toggle" data-stick-target="next">Toggle next</button>
+<div>This toggles</div>
+
+<!-- Native dialog modal -->
+<button data-stick="click:show-modal:" data-stick-target="#my-dialog">Open</button>
+<dialog id="my-dialog">
+  <p>Hello from dialog</p>
+  <button data-stick="click:close-modal:" data-stick-target="closest:dialog">Close</button>
+</dialog>
+
+<!-- Submit form on Enter key -->
+<input data-stick="keydown:submit:" data-stick-key="Enter">
+
+<!-- Increment / decrement counter -->
+<button data-stick="click:decrement:" data-stick-target="#count">−</button>
+<span id="count">0</span>
+<button data-stick="click:increment:" data-stick-target="#count">+</button>
+
+<!-- Tab interface — no JS required -->
+<nav>
+  <button class="tab active"
+    data-stick="click:add-class:active"
+    data-stick-2="click:remove-class:active" data-stick-target-2="siblings">Tab 1</button>
+  <button class="tab"
+    data-stick="click:add-class:active"
+    data-stick-2="click:remove-class:active" data-stick-target-2="siblings">Tab 2</button>
+</nav>
+
+<!-- Restore stored preference on page load -->
+<select data-stick="ready:restore:theme-pref" data-stick-target="self"
+        data-stick-2="change:store:theme-pref:{{value}}">
+  <option>light</option><option>dark</option>
+</select>
+
+<!-- Animate on click -->
+<button data-stick="click:animate:bounce" data-stick-target="#icon">Bounce</button>
+<span id="icon">🎉</span>
+
+<!-- clone-template with interpolation — add items from input, no JS needed -->
+<template id="task-tpl">
+  <li>{{value}} <button data-stick="click:remove" data-stick-target="parent">×</button></li>
+</template>
+<input id="task-input" placeholder="New task"
+  data-stick="keydown:clone-template:#task-tpl"
+  data-stick-key="Enter"
+  data-stick-target="#task-list"
+  data-stick-2="keydown:set-value:"
+  data-stick-target-2="self">
+<ul id="task-list"></ul>
+
+<!-- Sort a list alphabetically -->
+<button data-stick="click:sort" data-stick-target="#task-list">Sort A–Z</button>
+
+<!-- Count items -->
+<span data-stick="ready:count:.task" data-stick-target="self"></span>
+
+<!-- Event delegation — single listener handles dynamic list items -->
+<ul data-stick="click:remove" data-stick-target="parent" data-stick-delegate=".item">
+  <li class="item">Task A <button>×</button></li>
+  <li class="item">Task B <button>×</button></li>
+</ul>
+
+<!-- Back to top -->
+<button data-stick="click:scroll-top">Back to top</button>
+
+<!-- Pre-fill search from URL ?q= param -->
+<input data-stick="ready:set-value:{{url:q}}" data-stick-target="self">
+```
+
+---
+
+## JavaScript API
+
+```js
+Stick.version          // "2.9.0"
+
+Stick.add(name, fn)    // register a handler — chainable
+Stick.remove(name)     // unregister a handler — chainable
+Stick.use(plugin)      // register a plugin — chainable
+Stick.debug(true?)     // enable verbose console logging — chainable
+                       // plugin: fn(stick) | { install(stick) } | { 'name': fn, … }
+Stick.unbind(el)       // remove all listeners from el, clear data-stick-bound — chainable
+// fn signature: (el, param, event, target) => void | Promise<void>
+//   el     — trigger element (has data-stick)
+//   param  — string after second colon, {{tokens}} already resolved
+//   event  — DOM Event or synthetic { type: 'intersect', entry }
+//   target — resolved data-stick-target element, or el
+
+Stick.handlers         // frozen snapshot: { name: fn, … }
+
+Stick.init(root?)      // scan and bind [data-stick] under root — chainable
+                       // default: document
+
+Stick.observe(root?)   // MutationObserver: auto-bind new [data-stick] elements
+                       // called automatically on load; default: document.body
+
+Stick.parse(value)     // parse "event:handler:param" → { event, handler, param } | null
+
+Stick.bind(el)         // bind a single element
+```
+
+### Rebinding
+
+Elements are marked `data-stick-bound` after binding to prevent double-bind. Remove it to force rebind:
+
+```js
+el.removeAttribute('data-stick-bound');
+Stick.bind(el);
+```
+
+### Script placement
+
+```html
+<script src="stick.js"></script>      ← here
+<script>
+  Stick.add('my-handler', fn);        ← register before DOMContentLoaded fires
+</script>
+<!-- data-stick elements anywhere in body -->
+```
+
+`stick.js` queues `Stick.init()` on `DOMContentLoaded`, so any `Stick.add()` calls in subsequent `<script>` tags are picked up automatically.
+
+---
+
+## Testing
+
+Open `test/stick.test.html` in a browser. Covers 55+ assertions across all handlers, modifiers, and edge cases.
+
+---
+
+## LLM-friendly
+
+See `llms.txt` for a machine-readable reference optimised for LLM context windows.
+
+| Intent | HTML |
+|--------|------|
+| "toggle sidebar on click" | `data-stick="click:toggle" data-stick-target="#sidebar"` |
+| "search as you type, wait 300ms" | `data-stick="input:fetch:/api/search?q={{value}}" data-stick-debounce="300" data-stick-target="#results"` |
+| "confirm before delete" | `data-stick="click:fetch:/api/items/1" data-stick-method="DELETE" data-stick-confirm="Delete?" data-stick-target="parent"` |
+| "lazy-load when visible" | `data-stick="intersect:fetch:/api/widget" data-stick-once data-stick-target="#out"` |
+| "copy link on click" | `data-stick="click:copy:https://example.com"` |
+| "two behaviors, two targets" | `data-stick="click:show" data-stick-target="#modal" data-stick-2="click:add-class:open" data-stick-target-2="#overlay"` |
+
+---
+
+## License
+
+GPL-3.0 © 2011–2026 Kaique Silva

package/bin/registry.json

@@ -0,0 +1,20 @@
+{
+  "components": {
+    "accordion":        { "html": "components/accordion.html", "plugin": null },
+    "tabs":             { "html": "components/tabs.html", "plugin": null },
+    "toggle":           { "html": "components/toggle.html", "plugin": null },
+    "notification":     { "html": "components/notification.html", "plugin": null },
+    "copy-button":      { "html": "components/copy-button.html", "plugin": null },
+    "skeleton":         { "html": "components/skeleton.html", "plugin": null },
+    "dialog":           { "html": "components/dialog.html", "plugin": null },
+    "toast":            { "html": "components/toast.html", "plugin": "plugins/toast.js" },
+    "dropdown":         { "html": "components/dropdown.html", "plugin": "plugins/dropdown.js" },
+    "tooltip":          { "html": "components/tooltip.html", "plugin": "plugins/tooltip.js" },
+    "toggle-group":     { "html": "components/toggle-group.html", "plugin": null },
+    "command-palette":  { "html": "components/command-palette.html", "plugin": "plugins/command-palette.js" },
+    "data-table":       { "html": "components/data-table.html", "plugin": "plugins/data-table.js" },
+    "stepper":          { "html": "components/stepper.html", "plugin": "plugins/stepper.js" },
+    "autocomplete":     { "html": "components/autocomplete.html", "plugin": "plugins/autocomplete.js" }
+  },
+  "css": "stick-ui.css"
+}