diff --git a/index.html b/index.html
index 12fe5f6a7..80ece4eeb 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,12 @@ <h4>Behavioural</h4>
                     title="Inject history"
                     >Inject history<sup>unknown</sup></a
                 >
+                <a
+                    class="navigation bind"
+                    href="/src/pat/bind/index.html"
+                    title="Bind"
+                    >Bind<sup>β</sup></a
+                >
                 <a
                     class="navigation switch"
                     href="/src/pat/switch/index.html"
diff --git a/src/core/signals.js b/src/core/signals.js
new file mode 100644
index 000000000..d673b8cad
--- /dev/null
+++ b/src/core/signals.js
@@ -0,0 +1,222 @@
+/**
+ * A minimal reactive signals implementation.
+ *
+ * Provides ``signal``, ``computed``, ``effect``, ``batch`` and ``untracked``
+ * primitives with automatic dependency tracking.
+ *
+ * The public API is intentionally shaped after the TC39 signals proposal
+ * (https://github.com/tc39/proposal-signals) so that this module can be swapped
+ * for a native implementation once that lands in browsers.
+ *
+ * Effects are flushed in a microtask, so a burst of synchronous signal writes
+ * only re-runs each dependent effect once.
+ */
+import logging from "./logging";
+
+const log = logging.getLogger("signals");
+
+// The effect which is currently running and collecting dependencies.
+let current_effect = null;
+
+// Effects scheduled to re-run on the next microtask flush.
+const pending_effects = new Set();
+let flush_scheduled = false;
+
+// While > 0, effect flushing is deferred (see ``batch``).
+let batch_depth = 0;
+
+function schedule_flush() {
+    if (flush_scheduled || batch_depth > 0) {
+        return;
+    }
+    flush_scheduled = true;
+    queueMicrotask(flush_effects);
+}
+
+// Safety net against cyclic derivations that never settle.
+const MAX_FLUSH_ITERATIONS = 1000;
+
+function flush_effects() {
+    flush_scheduled = false;
+    // Drain the queue within this microtask so cascades (e.g. a computed
+    // updating a downstream effect) settle in one flush instead of lagging a
+    // tick. Effects scheduled while running are picked up by the next iteration.
+    let iterations = 0;
+    while (pending_effects.size > 0) {
+        if (++iterations > MAX_FLUSH_ITERATIONS) {
+            pending_effects.clear();
+            log.error(
+                "Aborting effect flush after too many iterations - likely a cyclic dependency."
+            );
+            return;
+        }
+        const effects = [...pending_effects];
+        pending_effects.clear();
+        for (const eff of effects) {
+            eff._run();
+        }
+    }
+}
+
+class Signal {
+    constructor(value) {
+        this._value = value;
+        this._subscribers = new Set(); // effects depending on this signal
+    }
+
+    get value() {
+        if (current_effect) {
+            // Track the dependency in both directions for cleanup.
+            this._subscribers.add(current_effect);
+            current_effect._deps.add(this);
+        }
+        return this._value;
+    }
+
+    set value(new_value) {
+        if (Object.is(new_value, this._value)) {
+            // No change → no notification. This is the central loop-breaker for
+            // two-way bindings: a write-back of an equal value is a no-op.
+            return;
+        }
+        this._value = new_value;
+        // Copy the subscribers as the set may be mutated while scheduling.
+        for (const eff of [...this._subscribers]) {
+            pending_effects.add(eff);
+        }
+        schedule_flush();
+    }
+
+    // Read the current value without subscribing the running effect.
+    peek() {
+        return this._value;
+    }
+}
+
+class Effect {
+    constructor(fn) {
+        this._fn = fn;
+        this._deps = new Set();
+        this._disposed = false;
+        this._run();
+    }
+
+    _run() {
+        if (this._disposed) {
+            return;
+        }
+        this._cleanup();
+        const previous = current_effect;
+        current_effect = this;
+        try {
+            this._fn();
+        } catch (e) {
+            log.error("Error while running effect.", e);
+        } finally {
+            current_effect = previous;
+        }
+    }
+
+    _cleanup() {
+        // Unsubscribe from all current dependencies before re-tracking.
+        for (const dep of this._deps) {
+            dep._subscribers.delete(this);
+        }
+        this._deps.clear();
+    }
+
+    dispose() {
+        this._disposed = true;
+        this._cleanup();
+        pending_effects.delete(this);
+    }
+}
+
+class Computed {
+    constructor(fn) {
+        this._signal = new Signal(undefined);
+        // An effect keeps the derived value up to date and propagates changes to
+        // anything reading the computed signal.
+        // NOTE: This is an eager computed - it recomputes whenever a dependency
+        // changes, even when nobody reads it. Good enough for v1; the TC39
+        // proposal computeds are lazy.
+        this._effect = new Effect(() => {
+            this._signal.value = fn();
+        });
+    }
+
+    get value() {
+        return this._signal.value;
+    }
+
+    peek() {
+        return this._signal.peek();
+    }
+
+    dispose() {
+        this._effect.dispose();
+    }
+}
+
+/**
+ * Create a writable reactive value.
+ * @param {*} initial_value - The initial value of the signal.
+ * @returns {Signal} A signal with a ``value`` getter/setter and ``peek()``.
+ */
+function signal(initial_value) {
+    return new Signal(initial_value);
+}
+
+/**
+ * Create a read-only signal derived from other signals.
+ * @param {function} fn - Function computing the derived value.
+ * @returns {Computed} A read-only signal with a ``value`` getter, ``peek()``
+ *                     and ``dispose()``.
+ */
+function computed(fn) {
+    return new Computed(fn);
+}
+
+/**
+ * Run ``fn`` and re-run it whenever any signal read during it changes.
+ * @param {function} fn - The effect callback.
+ * @returns {function} A dispose function which stops the effect.
+ */
+function effect(fn) {
+    const eff = new Effect(fn);
+    return () => eff.dispose();
+}
+
+/**
+ * Coalesce all signal writes performed in ``fn`` into a single effect flush.
+ * @param {function} fn - The callback performing the writes.
+ * @returns {*} The return value of ``fn``.
+ */
+function batch(fn) {
+    batch_depth++;
+    try {
+        return fn();
+    } finally {
+        batch_depth--;
+        schedule_flush();
+    }
+}
+
+/**
+ * Run ``fn`` without subscribing the currently running effect to any signal
+ * read inside it.
+ * @param {function} fn - The callback to run untracked.
+ * @returns {*} The return value of ``fn``.
+ */
+function untracked(fn) {
+    const previous = current_effect;
+    current_effect = null;
+    try {
+        return fn();
+    } finally {
+        current_effect = previous;
+    }
+}
+
+export { signal, computed, effect, batch, untracked };
+export default { signal, computed, effect, batch, untracked };
diff --git a/src/core/signals.test.js b/src/core/signals.test.js
new file mode 100644
index 000000000..ef62e606c
--- /dev/null
+++ b/src/core/signals.test.js
@@ -0,0 +1,186 @@
+import { signal, computed, effect, batch, untracked } from "./signals";
+
+// A microtask flush helper: effects are batched and run in a microtask.
+const flush = () => Promise.resolve();
+
+describe("core/signals", function () {
+    describe("1 - signal", function () {
+        it("1.1 - stores and returns its value", function () {
+            const count = signal(1);
+            expect(count.value).toBe(1);
+            count.value = 2;
+            expect(count.value).toBe(2);
+        });
+
+        it("1.2 - peek() reads without subscribing", async function () {
+            const count = signal(1);
+            let runs = 0;
+            effect(() => {
+                runs++;
+                count.peek();
+            });
+            await flush();
+            expect(runs).toBe(1);
+
+            count.value = 2;
+            await flush();
+            // The effect did not subscribe via peek(), so it does not re-run.
+            expect(runs).toBe(1);
+        });
+    });
+
+    describe("2 - effect", function () {
+        it("2.1 - runs immediately and on dependency change", async function () {
+            const count = signal(1);
+            const seen = [];
+            effect(() => seen.push(count.value));
+
+            // Effect runs synchronously on creation.
+            expect(seen).toEqual([1]);
+
+            count.value = 2;
+            await flush();
+            expect(seen).toEqual([1, 2]);
+        });
+
+        it("2.2 - coalesces multiple writes into one re-run", async function () {
+            const count = signal(0);
+            let runs = 0;
+            effect(() => {
+                runs++;
+                count.value;
+            });
+            expect(runs).toBe(1);
+
+            count.value = 1;
+            count.value = 2;
+            count.value = 3;
+            await flush();
+            // The three writes are flushed together → a single re-run.
+            expect(runs).toBe(2);
+            expect(count.value).toBe(3);
+        });
+
+        it("2.3 - does not re-run on equal-value writes", async function () {
+            const count = signal(1);
+            let runs = 0;
+            effect(() => {
+                runs++;
+                count.value;
+            });
+            await flush();
+            expect(runs).toBe(1);
+
+            count.value = 1; // same value (Object.is) → no notification
+            await flush();
+            expect(runs).toBe(1);
+        });
+
+        it("2.4 - dispose() stops the effect", async function () {
+            const count = signal(1);
+            let runs = 0;
+            const dispose = effect(() => {
+                runs++;
+                count.value;
+            });
+            await flush();
+            expect(runs).toBe(1);
+
+            dispose();
+            count.value = 2;
+            await flush();
+            expect(runs).toBe(1);
+        });
+
+        it("2.5 - re-tracks dependencies on each run", async function () {
+            const toggle = signal(true);
+            const a = signal("a");
+            const b = signal("b");
+            const seen = [];
+            effect(() => seen.push(toggle.value ? a.value : b.value));
+            expect(seen).toEqual(["a"]);
+
+            // While toggle is true, b is not a dependency.
+            b.value = "b2";
+            await flush();
+            expect(seen).toEqual(["a"]);
+
+            toggle.value = false;
+            await flush();
+            expect(seen).toEqual(["a", "b2"]);
+
+            // Now a is no longer a dependency.
+            a.value = "a2";
+            await flush();
+            expect(seen).toEqual(["a", "b2"]);
+        });
+    });
+
+    describe("3 - computed", function () {
+        it("3.1 - derives from other signals", async function () {
+            const first = signal("Jane");
+            const last = signal("Doe");
+            const full = computed(() => `${first.value} ${last.value}`);
+            expect(full.value).toBe("Jane Doe");
+
+            first.value = "John";
+            await flush();
+            expect(full.value).toBe("John Doe");
+        });
+
+        it("3.2 - is reactive as an effect dependency", async function () {
+            const count = signal(2);
+            const doubled = computed(() => count.value * 2);
+            const seen = [];
+            effect(() => seen.push(doubled.value));
+            expect(seen).toEqual([4]);
+
+            count.value = 5;
+            await flush();
+            expect(seen).toEqual([4, 10]);
+        });
+    });
+
+    describe("4 - batch", function () {
+        it("4.1 - defers flushing until the batch ends", async function () {
+            const a = signal(1);
+            const b = signal(2);
+            let runs = 0;
+            effect(() => {
+                runs++;
+                a.value + b.value;
+            });
+            expect(runs).toBe(1);
+
+            batch(() => {
+                a.value = 10;
+                b.value = 20;
+            });
+            await flush();
+            expect(runs).toBe(2);
+        });
+    });
+
+    describe("5 - untracked", function () {
+        it("5.1 - reads without creating a dependency", async function () {
+            const tracked = signal(1);
+            const hidden = signal(1);
+            let runs = 0;
+            effect(() => {
+                runs++;
+                tracked.value;
+                untracked(() => hidden.value);
+            });
+            await flush();
+            expect(runs).toBe(1);
+
+            hidden.value = 2;
+            await flush();
+            expect(runs).toBe(1); // not a dependency
+
+            tracked.value = 2;
+            await flush();
+            expect(runs).toBe(2);
+        });
+    });
+});
diff --git a/src/pat/bind/bind.js b/src/pat/bind/bind.js
new file mode 100644
index 000000000..805ba2102
--- /dev/null
+++ b/src/pat/bind/bind.js
@@ -0,0 +1,271 @@
+/**
+ * Patterns bind - declarative data binding between DOM elements.
+ *
+ * A ``pat-bind`` element wires one or more of its accessors (a form value, an
+ * attribute, its text or HTML content) to a named *channel*. Elements sharing a
+ * channel stay in sync: change a source and every target updates.
+ *
+ * Bindings are reactive under the hood via ``core/signals``, but the page
+ * author only ever writes markup - in the spirit of Patternslib.
+ *
+ * For usage, see documentation.md
+ */
+import { BasePattern } from "../../core/basepattern";
+import { signal, effect } from "../../core/signals";
+import Parser from "../../core/parser";
+import dom from "../../core/dom";
+import events from "../../core/events";
+import logging from "../../core/logging";
+import registry from "../../core/registry";
+
+const log = logging.getLogger("pat-bind");
+
+export const parser = new Parser("bind");
+parser.addArgument("key"); // channel name
+parser.addArgument("value"); // accessor: [attr], ::text, ::html or empty (inferred)
+parser.addArgument("direction", null, ["source", "target", "both"]);
+
+// Channel registry: maps a scope-root element to its named signals.
+// A ``WeakMap`` so detached scope roots can be garbage collected.
+const channel_registry = new WeakMap();
+
+/**
+ * Resolve the scope root for an element: the nearest ancestor (or itself)
+ * marked with ``data-pat-bind-scope``, falling back to ``document``.
+ */
+function get_scope_root(el) {
+    return el.closest("[data-pat-bind-scope]") || document;
+}
+
+/**
+ * Get - lazily creating - the signal backing a channel within an element's
+ * scope. Created on first use, so source/target order in the DOM is irrelevant.
+ */
+function get_channel(el, key) {
+    const root = get_scope_root(el);
+    let channels = channel_registry.get(root);
+    if (!channels) {
+        channels = new Map();
+        channel_registry.set(root, channels);
+    }
+    let sig = channels.get(key);
+    if (!sig) {
+        sig = signal(undefined);
+        channels.set(key, sig);
+    }
+    return sig;
+}
+
+/**
+ * Turn an accessor string into a ``{ read, write, event, observe }`` descriptor.
+ *
+ * - ``read()``  reads the bound value off the element.
+ * - ``write(v)`` writes a value onto the element.
+ * - ``event``   native event to listen to for source updates (or ``null``).
+ * - ``observe`` MutationObserver target for source updates (or ``null``).
+ *
+ * @param {Element} el - The bound element.
+ * @param {string} accessor - The accessor string, possibly empty (inferred).
+ * @param {function} sanitize - HTML sanitizer used for the ``::html`` accessor.
+ */
+function resolve_accessor(el, accessor, sanitize) {
+    if (!accessor) {
+        // Infer the accessor from the element type.
+        if (dom.is_input(el)) {
+            const type = (el.getAttribute("type") || "").toLowerCase();
+            accessor = type === "checkbox" || type === "radio" ? "[checked]" : "[value]";
+        } else {
+            accessor = "::text";
+        }
+    }
+
+    if (accessor === "::text") {
+        return {
+            read: () => el.textContent,
+            write: (v) => {
+                el.textContent = v ?? "";
+            },
+            event: null,
+            observe: "content",
+        };
+    }
+
+    if (accessor === "::html") {
+        return {
+            read: () => el.innerHTML,
+            write: (v) => {
+                el.innerHTML = sanitize(v ?? "");
+            },
+            event: null,
+            observe: "content",
+        };
+    }
+
+    const attr_match = accessor.match(/^\[\s*([a-z][a-z0-9_-]*)\s*\]$/i);
+    if (attr_match) {
+        const attr = attr_match[1];
+        // For live form-control state, ``[value]`` and ``[checked]`` map to the
+        // IDL property and the native ``input``/``change`` event, not to the
+        // static attribute.
+        const use_property = (attr === "value" || attr === "checked") && attr in el;
+        if (use_property) {
+            return {
+                read: () => el[attr],
+                write: (v) => {
+                    el[attr] = attr === "checked" ? Boolean(v) : v ?? "";
+                },
+                event: attr === "checked" ? "change" : "input",
+                observe: null,
+            };
+        }
+        return {
+            read: () => el.getAttribute(attr),
+            write: (v) => {
+                if (v === null || v === undefined || v === false) {
+                    el.removeAttribute(attr);
+                } else {
+                    el.setAttribute(attr, String(v));
+                }
+            },
+            event: null,
+            observe: `attribute:${attr}`,
+        };
+    }
+
+    log.error(`Invalid bind accessor: "${accessor}".`, el);
+    return null;
+}
+
+/**
+ * The MutationObserver config for a source accessor that has no native event.
+ */
+function mutation_config(observe) {
+    if (observe === "content") {
+        return { childList: true, characterData: true, subtree: true };
+    }
+    if (observe.startsWith("attribute:")) {
+        return { attributes: true, attributeFilter: [observe.slice("attribute:".length)] };
+    }
+    return {};
+}
+
+/**
+ * Default binding direction when not given explicitly: form controls bound to
+ * their value/checked default to two-way, everything else to ``target``.
+ */
+function infer_direction(el, accessor) {
+    if (dom.is_input(el) && accessor.event) {
+        return "both";
+    }
+    return "target";
+}
+
+class Pattern extends BasePattern {
+    static name = "bind";
+    static trigger = ".pat-bind";
+    static parser = parser;
+
+    // One binding per ``&&``-separated config; ``this.options`` becomes an array.
+    parser_multiple = true;
+    // Each element defines its own bindings; do not inherit from ancestors.
+    parser_inherit = false;
+
+    async init() {
+        this._disposers = []; // effect dispose functions
+        this._observers = []; // MutationObservers
+        this._listener_ids = []; // event listener ids, for cleanup
+
+        const bindings = Array.isArray(this.options) ? this.options : [this.options];
+
+        // Lazily load DOMPurify only when an ``::html`` accessor is in use.
+        let sanitize = (v) => v;
+        if (bindings.some((binding) => binding.value === "::html")) {
+            const DOMPurify = (await import("dompurify")).default;
+            sanitize = (v) => DOMPurify.sanitize(v ?? "");
+        }
+
+        for (const binding of bindings) {
+            this.setup_binding(binding, sanitize);
+        }
+    }
+
+    setup_binding(binding, sanitize) {
+        const key = binding.key;
+        if (!key) {
+            log.warn("Ignoring a pat-bind binding without a `key`.", this.el);
+            return;
+        }
+
+        const accessor = resolve_accessor(this.el, binding.value, sanitize);
+        if (!accessor) {
+            return;
+        }
+
+        const direction = binding.direction || infer_direction(this.el, accessor);
+        const sig = get_channel(this.el, key);
+
+        if (direction === "target" || direction === "both") {
+            this.setup_target(sig, accessor);
+        }
+        if (direction === "source" || direction === "both") {
+            this.setup_source(sig, accessor, key);
+        }
+    }
+
+    // Channel → element: keep the element's accessor in sync with the signal.
+    setup_target(sig, accessor) {
+        const dispose = effect(() => {
+            const value = sig.value;
+            if (value === undefined) {
+                // Channel not seeded yet; leave the server-rendered DOM as-is.
+                return;
+            }
+            if (Object.is(accessor.read(), value)) {
+                // Already in sync. Avoids redundant writes (e.g. resetting the
+                // caret of an input) and breaks two-way feedback loops.
+                return;
+            }
+            accessor.write(value);
+        });
+        this._disposers.push(dispose);
+    }
+
+    // Element → channel: push the element's accessor value into the signal.
+    setup_source(sig, accessor, key) {
+        // Seed the channel from the element's current value.
+        sig.value = accessor.read();
+
+        // The signal's own equal-value guard stops the
+        // signal → write → observer → read → signal feedback loop.
+        const handler = () => {
+            sig.value = accessor.read();
+        };
+
+        if (accessor.event) {
+            const id = `pat-bind--${key}--${this.uuid}`;
+            events.add_event_listener(this.el, accessor.event, id, handler);
+            this._listener_ids.push(id);
+        } else if (accessor.observe) {
+            const observer = new MutationObserver(handler);
+            observer.observe(this.el, mutation_config(accessor.observe));
+            this._observers.push(observer);
+        }
+    }
+
+    destroy() {
+        for (const dispose of this._disposers) {
+            dispose();
+        }
+        for (const observer of this._observers) {
+            observer.disconnect();
+        }
+        for (const id of this._listener_ids) {
+            events.remove_event_listener(this.el, id);
+        }
+        super.destroy();
+    }
+}
+
+registry.register(Pattern);
+
+export default Pattern;
diff --git a/src/pat/bind/bind.test.js b/src/pat/bind/bind.test.js
new file mode 100644
index 000000000..e3555cd5a
--- /dev/null
+++ b/src/pat/bind/bind.test.js
@@ -0,0 +1,164 @@
+import Pattern from "./bind";
+import events from "../../core/events";
+import utils from "../../core/utils";
+
+// MutationObserver callbacks and effects both run as microtasks; give them a
+// couple of ticks to settle.
+const tick = () => utils.timeout(1);
+
+describe("pat-bind", function () {
+    afterEach(function () {
+        document.body.innerHTML = "";
+    });
+
+    describe("1 - source → target", function () {
+        it("1.1 - updates a text target when the source select changes", async function () {
+            document.body.innerHTML = `
+                <select class="pat-bind" data-pat-bind="key: color">
+                    <option value="red">red</option>
+                    <option value="green">green</option>
+                </select>
+                <span class="pat-bind" data-pat-bind="key: color; value: ::text"></span>
+            `;
+            const select = document.querySelector("select");
+            const span = document.querySelector("span");
+
+            const source = new Pattern(select);
+            const target = new Pattern(span);
+            await events.await_pattern_init(source);
+            await events.await_pattern_init(target);
+
+            // The target is seeded from the source's initial value.
+            await tick();
+            expect(span.textContent).toBe("red");
+
+            select.value = "green";
+            select.dispatchEvent(events.change_event());
+            select.dispatchEvent(events.input_event());
+            await tick();
+
+            expect(span.textContent).toBe("green");
+        });
+
+        it("1.2 - binds to an attribute target", async function () {
+            document.body.innerHTML = `
+                <input class="pat-bind" data-pat-bind="key: url" value="/profile" />
+                <a class="pat-bind" data-pat-bind="key: url; value: [href]">link</a>
+            `;
+            const input = document.querySelector("input");
+            const anchor = document.querySelector("a");
+
+            const source = new Pattern(input);
+            const target = new Pattern(anchor);
+            await events.await_pattern_init(source);
+            await events.await_pattern_init(target);
+            await tick();
+
+            expect(anchor.getAttribute("href")).toBe("/profile");
+
+            input.value = "/dashboard";
+            input.dispatchEvent(events.input_event());
+            await tick();
+
+            expect(anchor.getAttribute("href")).toBe("/dashboard");
+        });
+    });
+
+    describe("2 - two-way binding", function () {
+        it("2.1 - keeps two inputs on the same channel in sync", async function () {
+            document.body.innerHTML = `
+                <input id="a" class="pat-bind" data-pat-bind="key: name" value="start" />
+                <input id="b" class="pat-bind" data-pat-bind="key: name" />
+            `;
+            const a = document.querySelector("#a");
+            const b = document.querySelector("#b");
+
+            const pa = new Pattern(a);
+            const pb = new Pattern(b);
+            await events.await_pattern_init(pa);
+            await events.await_pattern_init(pb);
+            await tick();
+
+            // b is seeded from the channel (which a seeded with "start").
+            expect(b.value).toBe("start");
+
+            // Typing into b propagates back to a (two-way).
+            b.value = "changed";
+            b.dispatchEvent(events.input_event());
+            await tick();
+
+            expect(a.value).toBe("changed");
+        });
+    });
+
+    describe("3 - multiple bindings per element", function () {
+        it("3.1 - binds text and an attribute on one element", async function () {
+            document.body.innerHTML = `
+                <input id="title" class="pat-bind" data-pat-bind="key: title" value="Hello" />
+                <input id="cls" class="pat-bind" data-pat-bind="key: cls" value="active" />
+                <div id="out" class="pat-bind"
+                     data-pat-bind="key: title; value: ::text && key: cls; value: [class]"></div>
+            `;
+            const out = document.querySelector("#out");
+
+            for (const el of document.querySelectorAll(".pat-bind")) {
+                const instance = new Pattern(el);
+                await events.await_pattern_init(instance);
+            }
+            await tick();
+
+            expect(out.textContent).toBe("Hello");
+            expect(out.getAttribute("class")).toContain("active");
+        });
+    });
+
+    describe("4 - scope", function () {
+        it("4.1 - isolates channels per scope root", async function () {
+            document.body.innerHTML = `
+                <div data-pat-bind-scope>
+                    <input class="pat-bind" data-pat-bind="key: v" value="one" />
+                    <span class="pat-bind" data-pat-bind="key: v; value: ::text"></span>
+                </div>
+                <div data-pat-bind-scope>
+                    <input class="pat-bind" data-pat-bind="key: v" value="two" />
+                    <span class="pat-bind" data-pat-bind="key: v; value: ::text"></span>
+                </div>
+            `;
+            for (const el of document.querySelectorAll(".pat-bind")) {
+                const instance = new Pattern(el);
+                await events.await_pattern_init(instance);
+            }
+            await tick();
+
+            const spans = document.querySelectorAll("span");
+            // Each scope keeps its own "v" channel.
+            expect(spans[0].textContent).toBe("one");
+            expect(spans[1].textContent).toBe("two");
+        });
+    });
+
+    describe("5 - direction", function () {
+        it("5.1 - a target does not write back to the channel", async function () {
+            document.body.innerHTML = `
+                <input class="pat-bind" data-pat-bind="key: msg" value="from-source" />
+                <input class="pat-bind" data-pat-bind="key: msg; value: [value]; direction: target" />
+            `;
+            const [source, target] = document.querySelectorAll("input");
+
+            for (const el of document.querySelectorAll(".pat-bind")) {
+                const instance = new Pattern(el);
+                await events.await_pattern_init(instance);
+            }
+            await tick();
+
+            expect(target.value).toBe("from-source");
+
+            // Changing the target must NOT propagate back to the source.
+            target.value = "edited";
+            target.dispatchEvent(events.input_event());
+            await tick();
+
+            expect(source.value).toBe("from-source");
+        });
+    });
+});
diff --git a/src/pat/bind/documentation.md b/src/pat/bind/documentation.md
new file mode 100644
index 000000000..079f96d41
--- /dev/null
+++ b/src/pat/bind/documentation.md
@@ -0,0 +1,103 @@
+## Description
+
+The _bind_ pattern provides declarative data binding between DOM elements.
+Select a value in one place and have a label, attribute or another field update
+elsewhere - without writing any JavaScript.
+
+## Documentation
+
+Binding works through named _channels_. Every `pat-bind` element ties one of its
+_accessors_ (a form value, an attribute, its text or its HTML) to a channel.
+Elements sharing a channel stay in sync.
+
+A minimal example - a select drives a label:
+
+    <select class="pat-bind" data-pat-bind="key: color">
+      <option value="red">Red</option>
+      <option value="green">Green</option>
+    </select>
+
+    <span class="pat-bind" data-pat-bind="key: color; value: ::text"></span>
+
+When the select changes, the span's text follows.
+
+### Configuration options
+
+Each binding is configured through `data-pat-bind` with the following keys:
+
+-   `key` (**required**): the channel name. Elements with the same `key` (within
+    the same scope, see below) are bound together.
+-   `value`: the _accessor_ - which part of this element is bound. One of:
+    -   `[<attribute>]`: an attribute value, e.g. `[value]`, `[href]`,
+        `[class]`, `[aria-pressed]`. For form controls, `[value]` and
+        `[checked]` bind to the live form state (and react to `input` /
+        `change`), not to the static HTML attribute.
+    -   `::text`: the element's text content (`textContent`).
+    -   `::html`: the element's HTML content (`innerHTML`). Values are sanitized
+        with DOMPurify on write.
+    -   _omitted_: inferred from the element. Form controls bind to their value
+        (or `checked` for checkboxes and radios); everything else binds to
+        `::text`.
+-   `direction`: the data-flow direction. One of:
+    -   `source`: the element writes into the channel (it is an input).
+    -   `target`: the channel writes into the element (it is a display).
+    -   `both`: two-way binding.
+    -   _omitted_: inferred. Form controls bound to their value/checked default
+        to `both`; everything else defaults to `target`.
+
+### Multiple bindings on one element
+
+Separate several bindings with `&&`, just like _pat-inject_:
+
+    <div class="pat-bind"
+         data-pat-bind="key: user_name; value: ::text &&
+                        key: theme; value: [class]"></div>
+
+This element shows the `user_name` channel as its text and mirrors the `theme`
+channel onto its `class` attribute.
+
+### Two-way binding
+
+Form controls are two-way by default, so two fields on the same channel mirror
+each other:
+
+    <input class="pat-bind" data-pat-bind="key: name" />
+    <input class="pat-bind" data-pat-bind="key: name" />
+
+Typing in either input updates the other.
+
+To bind a non-form element two-way - for example a `contenteditable` region -
+request it explicitly:
+
+    <div contenteditable class="pat-bind"
+         data-pat-bind="key: note; value: ::text; direction: both"></div>
+
+### Scope
+
+By default all channels live in a single, document-wide namespace. To reuse the
+same channel name in independent regions - the typical case being repeated
+content such as a list of cards - mark a container with `data-pat-bind-scope`.
+Channel lookups resolve to the nearest scope ancestor, falling back to the
+document.
+
+    <div class="card" data-pat-bind-scope>
+      <input class="pat-bind" data-pat-bind="key: price" />
+      <span  class="pat-bind" data-pat-bind="key: price; value: ::text"></span>
+    </div>
+    <!-- repeated; each card keeps its own `price` channel -->
+
+### Notes
+
+-   Channel values are strings, except `[checked]` which is a boolean.
+-   Targets are only written once a channel has a value, so server-rendered
+    content is left untouched until a source provides data.
+-   Two-way binding on `::text` / `::html` relies on a `MutationObserver` and is
+    intended for editable elements; for plain displays prefer a `target`
+    binding.
+
+### Relation to other patterns
+
+_pat-bind_ is built on the reactive primitives in `core/signals` (a small
+`signal` / `computed` / `effect` implementation shaped after the TC39 signals
+proposal). The signals are an implementation detail - the page author only ever
+writes markup.
diff --git a/src/pat/bind/index.html b/src/pat/bind/index.html
new file mode 100644
index 000000000..42715c61f
--- /dev/null
+++ b/src/pat/bind/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>pat-bind</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+    </head>
+    <body>
+        <h1>pat-bind</h1>
+        <p>
+            Declarative data binding between DOM elements. Elements sharing a
+            <em>channel</em> (the <code>key</code>) stay in sync — no JavaScript
+            required.
+        </p>
+
+        <section>
+            <h2>A source drives a target</h2>
+            <p>Pick a colour; the label and the swatch follow.</p>
+            <div class="pat-clone-code">
+              <form>
+                <fieldset class="vertical">
+                    <label>
+                        Colour:
+                        <select
+                            class="pat-bind"
+                            data-pat-bind="key: color"
+                        >
+                            <option value="rebeccapurple">Purple</option>
+                            <option value="crimson">Crimson</option>
+                            <option value="seagreen">Green</option>
+                        </select>
+                    </label>
+                    <p>
+                        You picked:
+                        <strong
+                            class="pat-bind"
+                            data-pat-bind="key: color; value: ::text"
+                        ></strong>
+                    </p>
+                    <p>
+                        … and it is mirrored onto a
+                        <code>title</code> attribute:
+                        <span
+                            class="pat-bind"
+                            data-pat-bind="key: color; value: [title]"
+                            >hover me</span
+                        >
+                    </p>
+                </fieldset>
+              </form>
+            </div>
+        </section>
+
+        <section>
+            <h2>Two-way binding</h2>
+            <p>
+                Form controls on the same channel mirror each other. Type in
+                either field.
+            </p>
+            <div class="pat-clone-code">
+              <form>
+                <fieldset class="vertical">
+                  <label>
+                    Name:
+                    <input class="pat-bind" data-pat-bind="key: name" />
+                  </label>
+                  <label>
+                    Same name:
+                    <input class="pat-bind" data-pat-bind="key: name" />
+                  </label>
+                  <p>
+                    Hello,
+                    <span
+                        class="pat-bind"
+                        data-pat-bind="key: name; value: ::text"
+                    >
+                    </span>!
+                  </p>
+                </fieldset>
+              </form>
+            </div>
+        </section>
+
+        <section>
+          <h2>Binding an attribute</h2>
+          <p>A checkbox drives the <code>disabled</code> state of a button.</p>
+          <div class="pat-clone-code">
+            <form>
+              <fieldset class="vertical">
+                  <label>
+                      <input
+                          type="checkbox"
+                          class="pat-bind"
+                          data-pat-bind="key: locked"
+                      />
+                      Lock the button
+                  </label>
+                  <button
+                      type="button"
+                      class="pat-button pat-bind"
+                      data-pat-bind="key: locked; value: [disabled]"
+                  >
+                      I follow the checkbox
+                  </button>
+              </fieldset>
+            </form>
+          </div>
+        </section>
+
+        <section>
+            <h2>Editable HTML (::html)</h2>
+            <p>
+                Edit the region below; its sanitized HTML is mirrored into the
+                preview. The <code>::html</code> accessor sanitizes with
+                DOMPurify on write.
+            </p>
+            <div class="pat-clone-code">
+              <div
+                  contenteditable
+                  class="pat-bind"
+                  data-pat-bind="key: note; value: ::html; direction: both"
+                  style="border: 1px solid #ccc; padding: 0.5em; min-height: 3em"
+              >
+                  Try <b>bold</b> or <i>italic</i> text…
+              </div>
+              <p>Preview:</p>
+              <div
+                  class="pat-bind"
+                  data-pat-bind="key: note; value: ::html"
+                  style="border: 1px solid #ccc; padding: 0.5em; min-height: 3em"
+              >
+              </div>
+            </div>
+        </section>
+
+        <section>
+            <h2>Scope</h2>
+            <p>
+                Each card is its own scope (<code>data-pat-bind-scope</code>), so
+                the reused <code>price</code> channel stays local to the card.
+            </p>
+            <div class="pat-clone-code">
+              <div class="card" data-pat-bind-scope>
+                  <h3>Card A</h3>
+                  <label>
+                      Price:
+                      <input
+                          type="number"
+                          class="pat-bind"
+                          data-pat-bind="key: price"
+                          value="10"
+                      />
+                  </label>
+                  <p>
+                      €<span
+                          class="pat-bind"
+                          data-pat-bind="key: price; value: ::text"
+                      ></span>
+                  </p>
+              </div>
+              <div class="card" data-pat-bind-scope>
+                  <h3>Card B</h3>
+                  <label>
+                      Price:
+                      <input
+                          type="number"
+                          class="pat-bind"
+                          data-pat-bind="key: price"
+                          value="42"
+                      />
+                  </label>
+                  <p>
+                      €<span
+                          class="pat-bind"
+                          data-pat-bind="key: price; value: ::text"
+                      ></span>
+                  </p>
+              </div>
+            </div>
+        </section>
+    </body>
+</html>
diff --git a/src/patterns.js b/src/patterns.js
index 7537e47df..aafde2c1a 100644
--- a/src/patterns.js
+++ b/src/patterns.js
@@ -12,6 +12,7 @@ import "./pat/auto-scale/auto-scale";
 import "./pat/auto-submit/auto-submit";
 import "./pat/auto-suggest/auto-suggest";
 import "./pat/autofocus/autofocus";
+import "./pat/bind/bind";
 import "./pat/breadcrumbs/breadcrumbs";
 import "./pat/bumper/bumper";
 import "./pat/calendar/calendar";