diff --git a/dom/directives.ts b/dom/directives.ts
index d945370..1a89564 100644
--- a/dom/directives.ts
+++ b/dom/directives.ts
@@ -1,17 +1,24 @@
 /**
- * Apply scroll directives on elements with lvt-scroll attributes.
+ * Apply scroll directives on elements with lvt-fx:scroll attributes.
+ * Configuration read from CSS custom properties:
+ *   --lvt-scroll-behavior: auto | smooth (default: auto)
+ *   --lvt-scroll-threshold: <number> (default: 100)
  */
+const VALID_SCROLL_BEHAVIORS = new Set(["auto", "smooth", "instant"]);
+
 export function handleScrollDirectives(rootElement: Element): void {
-  const scrollElements = rootElement.querySelectorAll("[lvt-scroll]");
+  const scrollElements = rootElement.querySelectorAll("[lvt-fx\\:scroll]");
 
   scrollElements.forEach((element) => {
     const htmlElement = element as HTMLElement;
-    const mode = htmlElement.getAttribute("lvt-scroll");
-    const behavior =
-      (htmlElement.getAttribute("lvt-scroll-behavior") as ScrollBehavior) ||
-      "auto";
+    const mode = htmlElement.getAttribute("lvt-fx:scroll");
+    const computed = getComputedStyle(htmlElement);
+    const rawBehavior = computed.getPropertyValue("--lvt-scroll-behavior").trim();
+    const behavior: ScrollBehavior = VALID_SCROLL_BEHAVIORS.has(rawBehavior)
+      ? (rawBehavior as ScrollBehavior)
+      : "auto";
     const threshold = parseInt(
-      htmlElement.getAttribute("lvt-scroll-threshold") || "100",
+      computed.getPropertyValue("--lvt-scroll-threshold").trim() || "100",
       10
     );
 
@@ -51,24 +58,28 @@ export function handleScrollDirectives(rootElement: Element): void {
         break;
 
       default:
-        console.warn(`Unknown lvt-scroll mode: ${mode}`);
+        console.warn(`Unknown lvt-fx:scroll mode: ${mode}`);
     }
   });
 }
 
 /**
- * Apply highlight directives to elements with lvt-highlight attributes.
+ * Apply highlight directives to elements with lvt-fx:highlight attributes.
+ * Configuration read from CSS custom properties:
+ *   --lvt-highlight-duration: <ms> (default: 500)
+ *   --lvt-highlight-color: <color> (default: #ffc107)
  */
 export function handleHighlightDirectives(rootElement: Element): void {
-  const highlightElements = rootElement.querySelectorAll("[lvt-highlight]");
+  const highlightElements = rootElement.querySelectorAll("[lvt-fx\\:highlight]");
 
   highlightElements.forEach((element) => {
-    const mode = element.getAttribute("lvt-highlight");
+    const mode = element.getAttribute("lvt-fx:highlight");
+    const computed = getComputedStyle(element);
     const duration = parseInt(
-      element.getAttribute("lvt-highlight-duration") || "500",
+      computed.getPropertyValue("--lvt-highlight-duration").trim() || "500",
       10
     );
-    const color = element.getAttribute("lvt-highlight-color") || "#ffc107";
+    const color = computed.getPropertyValue("--lvt-highlight-color").trim() || "#ffc107";
 
     if (!mode) return;
 
@@ -90,15 +101,18 @@ export function handleHighlightDirectives(rootElement: Element): void {
 }
 
 /**
- * Apply animation directives to elements with lvt-animate attributes.
+ * Apply animation directives to elements with lvt-fx:animate attributes.
+ * Configuration read from CSS custom properties:
+ *   --lvt-animate-duration: <ms> (default: 300)
  */
 export function handleAnimateDirectives(rootElement: Element): void {
-  const animateElements = rootElement.querySelectorAll("[lvt-animate]");
+  const animateElements = rootElement.querySelectorAll("[lvt-fx\\:animate]");
 
   animateElements.forEach((element) => {
-    const animation = element.getAttribute("lvt-animate");
+    const animation = element.getAttribute("lvt-fx:animate");
+    const computed = getComputedStyle(element);
     const duration = parseInt(
-      element.getAttribute("lvt-animate-duration") || "300",
+      computed.getPropertyValue("--lvt-animate-duration").trim() || "300",
       10
     );
 
@@ -122,7 +136,7 @@ export function handleAnimateDirectives(rootElement: Element): void {
         break;
 
       default:
-        console.warn(`Unknown lvt-animate mode: ${animation}`);
+        console.warn(`Unknown lvt-fx:animate mode: ${animation}`);
     }
 
     htmlElement.addEventListener(
diff --git a/dom/event-delegation.ts b/dom/event-delegation.ts
index 9192f07..a1d145e 100644
--- a/dom/event-delegation.ts
+++ b/dom/event-delegation.ts
@@ -1,7 +1,19 @@
 import { debounce, throttle } from "../utils/rate-limit";
-import { checkLvtConfirm } from "../utils/confirm";
+import { lvtSelector } from "../utils/lvt-selector";
+import { executeAction, type ReactiveAction } from "./reactive-attributes";
 import type { Logger } from "../utils/logger";
 
+// Methods supported by click-away, derived from ReactiveAction values
+const CLICK_AWAY_METHOD_MAP: Record<string, ReactiveAction> = {
+  reset: "reset",
+  addclass: "addClass",
+  removeclass: "removeClass",
+  toggleclass: "toggleClass",
+  setattr: "setAttr",
+  toggleattr: "toggleAttr",
+};
+const CLICK_AWAY_METHODS = Object.keys(CLICK_AWAY_METHOD_MAP);
+
 export interface EventDelegationContext {
   getWrapperElement(): Element | null;
   getRateLimitedHandlers(): WeakMap<Element, Map<string, Function>>;
@@ -12,8 +24,6 @@ export interface EventDelegationContext {
     button: HTMLButtonElement | null,
     originalButtonText: string | null
   ): void;
-  openModal(modalId: string): void;
-  closeModal(modalId: string): void;
   getWebSocketReadyState(): number | undefined;
   triggerPendingUploads(uploadName: string): void;
 }
@@ -102,7 +112,7 @@ export class EventDelegator {
 
         if (!inWrapper) return;
 
-        const attrName = `lvt-${eventType}`;
+        const attrName = `lvt-on:${eventType}`;
         element = target;
 
         while (element && element !== currentWrapper.parentElement) {
@@ -122,7 +132,7 @@ export class EventDelegator {
           // Orphan button detection (Tier 1: formless standalone buttons).
           // A <button name="action"> outside any form triggers the named action directly.
           // Resolution order for click events:
-          //   1. lvt-click attribute (Tier 2 — already checked above)
+          //   1. lvt-on:click attribute (Tier 2 — already checked above)
           //   2. Orphan button name (Tier 1 — checked here)
           if (!action && eventType === "click") {
             const btn = element instanceof HTMLButtonElement ? element : null;
@@ -140,13 +150,13 @@ export class EventDelegator {
             }
           }
 
-          // Auto-intercept forms without lvt-submit (progressive complexity).
+          // Auto-intercept forms (progressive complexity).
           // Button name IS the action. Resolution order:
           //   1. submitter.name (button name = action)
           //   2. form.name (form name = action)
           //   3. "" (server defaults to Submit())
           if (!action && eventType === "submit" && element instanceof HTMLFormElement) {
-            if (!element.hasAttribute("lvt-no-intercept")) {
+            if (!element.hasAttribute("lvt-form:no-intercept")) {
               const submitter = (e as SubmitEvent).submitter;
               if (submitter instanceof HTMLButtonElement && submitter.name) {
                 action = submitter.name;
@@ -170,23 +180,6 @@ export class EventDelegator {
             }
           }
 
-          if (!action && (eventType === "change" || eventType === "input" || eventType === "search")) {
-            // For input/search events, also check lvt-change on the element itself
-            // This handles: typing (input), clearing via X button (search/input), blur (change)
-            if ((eventType === "input" || eventType === "search") && element.hasAttribute("lvt-change")) {
-              action = element.getAttribute("lvt-change");
-              actionElement = element;
-            }
-            // Check for form-level lvt-change
-            if (!action) {
-              const formElement: HTMLFormElement | null = element.closest("form");
-              if (formElement && formElement.hasAttribute("lvt-change")) {
-                action = formElement.getAttribute("lvt-change");
-                actionElement = formElement;
-              }
-            }
-          }
-
           if (action != null && actionElement) {
             if (eventType === "submit") {
               (window as any).__lvtActionFound = action;
@@ -218,12 +211,6 @@ export class EventDelegator {
                 targetElement,
               });
 
-              // Handle lvt-confirm for any action
-              if (!checkLvtConfirm(targetElement as HTMLElement)) {
-                this.logger.debug("Action cancelled by user:", action);
-                return;
-              }
-
               const message: any = { action, data: {} };
 
               if (targetElement instanceof HTMLFormElement) {
@@ -247,12 +234,12 @@ export class EventDelegator {
                 );
 
                 // Determine which form field key is the action routing key
-                // (the submitter button's name, or "action"/"lvt-action" legacy fields)
+                // (the submitter button's name, or "action" field)
                 const submitterForData = (targetElement as any).__lvtSubmitter as HTMLButtonElement | undefined;
                 const actionFieldName = submitterForData?.name || "action";
 
                 formData.forEach((value, key) => {
-                  if (key === actionFieldName || key === "action" || key === "lvt-action") return;
+                  if (key === actionFieldName || key === "action") return;
                   if (checkboxNames.has(key)) {
                     message.data[key] = true;
                     this.logger.debug("Converted checkbox", key, "to true");
@@ -299,19 +286,17 @@ export class EventDelegator {
                 this.extractButtonData(actionElement as HTMLButtonElement, message.data);
               }
 
-              Array.from(targetElement.attributes).forEach((attr) => {
-                if (attr.name.startsWith("lvt-data-")) {
-                  const key = attr.name.replace("lvt-data-", "");
-                  message.data[key] = this.context.parseValue(attr.value);
-                }
-              });
-
-              Array.from(targetElement.attributes).forEach((attr) => {
-                if (attr.name.startsWith("lvt-value-")) {
-                  const key = attr.name.replace("lvt-value-", "");
-                  message.data[key] = this.context.parseValue(attr.value);
-                }
-              });
+              // Extract standard data-* attributes from the action element.
+              // Exclude data-key (list reconciliation) and data-lvt-id (internal framework ID)
+              // since these are LiveTemplate internals, not user-provided action data.
+              if (!(targetElement instanceof HTMLFormElement) && !isOrphanButton) {
+                Array.from(actionElement.attributes).forEach((attr) => {
+                  if (attr.name.startsWith("data-") && attr.name !== "data-key" && attr.name !== "data-lvt-id") {
+                    const key = attr.name.slice(5);
+                    message.data[key] = this.context.parseValue(attr.value);
+                  }
+                });
+              }
 
               if (
                 eventType === "submit" &&
@@ -324,12 +309,12 @@ export class EventDelegator {
 
                 if (
                   submitButton &&
-                  submitButton.hasAttribute("lvt-disable-with")
+                  submitButton.hasAttribute("lvt-form:disable-with")
                 ) {
                   originalButtonText = submitButton.textContent;
                   submitButton.disabled = true;
                   submitButton.textContent =
-                    submitButton.getAttribute("lvt-disable-with");
+                    submitButton.getAttribute("lvt-form:disable-with");
                   this.logger.debug("Disabled submit button");
                 }
 
@@ -376,8 +361,8 @@ export class EventDelegator {
               }
             };
 
-            const throttleValue = actionElement.getAttribute("lvt-throttle");
-            const debounceValue = actionElement.getAttribute("lvt-debounce");
+            const throttleValue = actionElement.getAttribute("lvt-mod:throttle");
+            const debounceValue = actionElement.getAttribute("lvt-mod:debounce");
 
             // Skip rate limiting for "search" event (clear button click) - it's a discrete action
             const shouldRateLimit = (throttleValue || debounceValue) && eventType !== "search";
@@ -472,8 +457,8 @@ export class EventDelegator {
         const currentWrapper = this.context.getWrapperElement();
         if (!currentWrapper) return;
 
-        const attrName = `lvt-window-${eventType}`;
-        const elements = currentWrapper.querySelectorAll(`[${attrName}]`);
+        const attrName = `lvt-on:window:${eventType}`;
+        const elements = currentWrapper.querySelectorAll(lvtSelector(attrName));
 
         elements.forEach((element) => {
           const action = element.getAttribute(attrName);
@@ -492,22 +477,16 @@ export class EventDelegator {
 
           const message: any = { action, data: {} };
 
+          // Extract standard data-* attributes from element
           Array.from(element.attributes).forEach((attr) => {
-            if (attr.name.startsWith("lvt-data-")) {
-              const key = attr.name.replace("lvt-data-", "");
-              message.data[key] = this.context.parseValue(attr.value);
-            }
-          });
-
-          Array.from(element.attributes).forEach((attr) => {
-            if (attr.name.startsWith("lvt-value-")) {
-              const key = attr.name.replace("lvt-value-", "");
+            if (attr.name.startsWith("data-") && attr.name !== "data-key" && attr.name !== "data-lvt-id") {
+              const key = attr.name.slice(5);
               message.data[key] = this.context.parseValue(attr.value);
             }
           });
 
-          const throttleValue = element.getAttribute("lvt-throttle");
-          const debounceValue = element.getAttribute("lvt-debounce");
+          const throttleValue = element.getAttribute("lvt-mod:throttle");
+          const debounceValue = element.getAttribute("lvt-mod:debounce");
 
           const handleAction = () => this.context.send(message);
 
@@ -546,6 +525,11 @@ export class EventDelegator {
     });
   }
 
+  /**
+   * Sets up click-away detection for lvt-el:*:on:click-away attributes.
+   * Instead of routing to a server action, click-away triggers client-side
+   * DOM manipulation via executeAction from reactive-attributes.
+   */
   setupClickAwayDelegation(): void {
     const wrapperElement = this.context.getWrapperElement();
     if (!wrapperElement) return;
@@ -562,31 +546,22 @@ export class EventDelegator {
       if (!currentWrapper) return;
 
       const target = e.target as Element;
-      const elements = currentWrapper.querySelectorAll("[lvt-click-away]");
-
-      elements.forEach((element) => {
-        if (!element.contains(target)) {
-          const action = element.getAttribute("lvt-click-away");
-          if (!action) return;
-
-          const message: any = { action, data: {} };
-
-          Array.from(element.attributes).forEach((attr) => {
-            if (attr.name.startsWith("lvt-data-")) {
-              const key = attr.name.replace("lvt-data-", "");
-              message.data[key] = this.context.parseValue(attr.value);
-            }
-          });
 
-          Array.from(element.attributes).forEach((attr) => {
-            if (attr.name.startsWith("lvt-value-")) {
-              const key = attr.name.replace("lvt-value-", "");
-              message.data[key] = this.context.parseValue(attr.value);
-            }
-          });
-
-          this.context.send(message);
-        }
+      const clickAwaySelector = CLICK_AWAY_METHODS
+        .map(m => lvtSelector(`lvt-el:${m}:on:click-away`))
+        .join(", ");
+      const clickAwayElements = currentWrapper.querySelectorAll(clickAwaySelector);
+      clickAwayElements.forEach((element) => {
+        if (element.contains(target)) return; // Click was inside, not away
+
+        Array.from(element.attributes).forEach((attr) => {
+          if (!attr.name.includes(":on:click-away")) return;
+          const match = attr.name.match(/^lvt-el:(\w+):on:click-away$/);
+          if (!match) return;
+          const method = CLICK_AWAY_METHOD_MAP[match[1].toLowerCase()];
+          if (!method) return;
+          executeAction(element, method, attr.value);
+        });
       });
     };
 
@@ -594,121 +569,6 @@ export class EventDelegator {
     document.addEventListener("click", listener);
   }
 
-  setupModalDelegation(): void {
-    const wrapperElement = this.context.getWrapperElement();
-    if (!wrapperElement) return;
-
-    const wrapperId = wrapperElement.getAttribute("data-lvt-id");
-
-    const openListenerKey = `__lvt_modal_open_${wrapperId}`;
-    const existingOpenListener = (document as any)[openListenerKey];
-    if (existingOpenListener) {
-      document.removeEventListener("click", existingOpenListener);
-    }
-
-    const openListener = (e: Event) => {
-      const currentWrapper = this.context.getWrapperElement();
-      if (!currentWrapper) return;
-
-      const target = (e.target as Element)?.closest("[lvt-modal-open]");
-      if (!target || !currentWrapper.contains(target)) return;
-
-      const modalId = target.getAttribute("lvt-modal-open");
-      if (!modalId) return;
-
-      e.preventDefault();
-      this.context.openModal(modalId);
-    };
-
-    (document as any)[openListenerKey] = openListener;
-    document.addEventListener("click", openListener);
-
-    const closeListenerKey = `__lvt_modal_close_${wrapperId}`;
-    const existingCloseListener = (document as any)[closeListenerKey];
-    if (existingCloseListener) {
-      document.removeEventListener("click", existingCloseListener);
-    }
-
-    // Close listener is intentionally NOT scoped to wrapper (unlike openListener).
-    // Close buttons may be inside modals rendered in portals outside the wrapper.
-    // Instead, we verify the target modal exists by ID.
-    const closeListener = (e: Event) => {
-      const target = (e.target as Element)?.closest("[lvt-modal-close]");
-      if (!target) return;
-
-      const modalId = target.getAttribute("lvt-modal-close");
-      if (!modalId) return;
-
-      // Verify the modal exists before attempting to close
-      const modal = document.getElementById(modalId);
-      if (!modal) return;
-
-      e.preventDefault();
-      this.context.closeModal(modalId);
-    };
-
-    (document as any)[closeListenerKey] = closeListener;
-    document.addEventListener("click", closeListener);
-
-    const backdropListenerKey = `__lvt_modal_backdrop_${wrapperId}`;
-    const existingBackdropListener = (document as any)[backdropListenerKey];
-    if (existingBackdropListener) {
-      document.removeEventListener("click", existingBackdropListener);
-    }
-
-    // Helper to close modal, dispatching action if data-modal-close-action is set
-    const closeModalWithAction = (modal: Element, modalId: string) => {
-      const closeAction = modal.getAttribute("data-modal-close-action");
-      if (closeAction) {
-        this.context.send({ action: closeAction, data: {} });
-      } else {
-        this.context.closeModal(modalId);
-      }
-    };
-
-    const backdropListener = (e: Event) => {
-      const target = e.target as Element;
-      // Only trigger if clicked directly on the backdrop element itself
-      if (!target.hasAttribute("data-modal-backdrop")) return;
-
-      const modalId = target.getAttribute("data-modal-id");
-      if (!modalId) return;
-
-      const modal = document.getElementById(modalId);
-      if (!modal) return;
-
-      closeModalWithAction(modal, modalId);
-    };
-
-    (document as any)[backdropListenerKey] = backdropListener;
-    document.addEventListener("click", backdropListener);
-
-    const escapeListenerKey = `__lvt_modal_escape_${wrapperId}`;
-    const existingEscapeListener = (document as any)[escapeListenerKey];
-    if (existingEscapeListener) {
-      document.removeEventListener("keydown", existingEscapeListener);
-    }
-
-    const escapeListener = (e: KeyboardEvent) => {
-      if (e.key !== "Escape") return;
-      const currentWrapper = this.context.getWrapperElement();
-      if (!currentWrapper) return;
-
-      const openModals = currentWrapper.querySelectorAll(
-        '[role="dialog"]:not([hidden])'
-      );
-      if (openModals.length > 0) {
-        const lastModal = openModals[openModals.length - 1];
-        if (lastModal.id) {
-          closeModalWithAction(lastModal, lastModal.id);
-        }
-      }
-    };
-
-    (document as any)[escapeListenerKey] = escapeListener;
-    document.addEventListener("keydown", escapeListener);
-  }
-
   /**
    * Sets up focus trapping for elements with lvt-focus-trap attribute.
    * Focus is trapped within the element, cycling through focusable elements
diff --git a/dom/link-interceptor.ts b/dom/link-interceptor.ts
index 5989d0c..1573fc8 100644
--- a/dom/link-interceptor.ts
+++ b/dom/link-interceptor.ts
@@ -58,7 +58,7 @@ export class LinkInterceptor {
     if (link.target && link.target !== "_self") return true;
     // Download links
     if (link.hasAttribute("download")) return true;
-    // Opt-out
+    // Opt-out (lvt-no-intercept is the generic opt-out for both forms and links)
     if (link.hasAttribute("lvt-no-intercept")) return true;
     // Hash-only links (scroll anchors)
     if (link.pathname === window.location.pathname && link.hash) return true;
diff --git a/dom/modal-manager.ts b/dom/modal-manager.ts
deleted file mode 100644
index b310550..0000000
--- a/dom/modal-manager.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { Logger } from "../utils/logger";
-
-/**
- * Manages client-side modal interactions for LiveTemplate.
- */
-export class ModalManager {
-  constructor(private readonly logger: Logger) {}
-
-  open(modalId: string): void {
-    const modal = document.getElementById(modalId);
-    if (!modal) {
-      this.logger.warn(`Modal with id="${modalId}" not found`);
-      return;
-    }
-
-    modal.removeAttribute("hidden");
-    modal.style.display = "flex";
-    modal.setAttribute("aria-hidden", "false");
-    modal.dispatchEvent(new CustomEvent("lvt:modal-opened", { bubbles: true }));
-
-    this.logger.info(`Opened modal: ${modalId}`);
-
-    const firstInput = modal.querySelector(
-      "input, textarea, select"
-    ) as HTMLElement | null;
-    if (firstInput) {
-      setTimeout(() => {
-        const activeElement = document.activeElement as HTMLElement | null;
-        const isVisible = (element: HTMLElement | null): boolean => {
-          if (!element) {
-            return false;
-          }
-
-          if (element === document.body) {
-            return true;
-          }
-
-          // Use offsetParent and bounding rects to determine visibility without hitting layout too hard.
-          if (element.offsetParent !== null) {
-            return true;
-          }
-
-          return element.getClientRects().length > 0;
-        };
-
-        const shouldMoveFocus =
-          !activeElement ||
-          !modal.contains(activeElement) ||
-          !isVisible(activeElement);
-
-        if (shouldMoveFocus) {
-          firstInput.focus();
-        }
-      }, 100);
-    }
-  }
-
-  close(modalId: string): void {
-    const modal = document.getElementById(modalId);
-    if (!modal) {
-      this.logger.warn(`Modal with id="${modalId}" not found`);
-      return;
-    }
-
-    modal.setAttribute("hidden", "");
-    modal.style.display = "none";
-    modal.setAttribute("aria-hidden", "true");
-    modal.dispatchEvent(new CustomEvent("lvt:modal-closed", { bubbles: true }));
-
-    this.logger.info(`Closed modal: ${modalId}`);
-  }
-}
diff --git a/dom/reactive-attributes.ts b/dom/reactive-attributes.ts
index 9656a26..3b504ae 100644
--- a/dom/reactive-attributes.ts
+++ b/dom/reactive-attributes.ts
@@ -1,22 +1,23 @@
 /**
  * Reactive Attributes - Declarative DOM actions triggered by LiveTemplate lifecycle events.
  *
- * Attribute Pattern: lvt-{action}-on:{event}="param"
+ * Attribute Pattern: lvt-el:{method}:on:[{action}:]{state|interaction}="param"
  *
- * Events:
+ * States (lifecycle):
  *   - pending: Action started, waiting for server response
  *   - success: Action completed successfully
  *   - error: Action completed with validation errors
  *   - done: Action completed (regardless of success/error)
  *
- * Event Scope:
- *   - Global: lvt-reset-on:success (any action)
- *   - Action-specific: lvt-reset-on:create-todo:success (specific action only)
+ * Interactions:
+ *   - click-away: Click outside the element (handled by setupClickAwayDelegation)
  *
- * Actions:
+ * Trigger Scope:
+ *   - Unscoped: lvt-el:reset:on:success (any action)
+ *   - Action-scoped: lvt-el:reset:on:create-todo:success (specific action only)
+ *
+ * Methods:
  *   - reset: Calls form.reset()
- *   - disable: Sets element.disabled = true
- *   - enable: Sets element.disabled = false
  *   - addClass: Adds CSS class(es)
  *   - removeClass: Removes CSS class(es)
  *   - toggleClass: Toggles CSS class(es)
@@ -26,8 +27,6 @@
 
 export type ReactiveAction =
   | "reset"
-  | "disable"
-  | "enable"
   | "addClass"
   | "removeClass"
   | "toggleClass"
@@ -44,23 +43,11 @@ export interface ReactiveBinding {
 }
 
 const LIFECYCLE_EVENTS: LifecycleEvent[] = ["pending", "success", "error", "done"];
+const LIFECYCLE_SET = new Set<string>(LIFECYCLE_EVENTS);
 
-const REACTIVE_ACTIONS: ReactiveAction[] = [
-  "reset",
-  "disable",
-  "enable",
-  "addClass",
-  "removeClass",
-  "toggleClass",
-  "setAttr",
-  "toggleAttr",
-];
-
-// Lowercase versions for case-insensitive matching (HTML attributes are lowercased)
-const ACTION_MAP: Record<string, ReactiveAction> = {
+// Lowercase method names → canonical ReactiveAction
+const METHOD_MAP: Record<string, ReactiveAction> = {
   reset: "reset",
-  disable: "disable",
-  enable: "enable",
   addclass: "addClass",
   removeclass: "removeClass",
   toggleclass: "toggleClass",
@@ -71,43 +58,46 @@ const ACTION_MAP: Record<string, ReactiveAction> = {
 /**
  * Parse a reactive attribute name and value into a binding.
  *
+ * Supported pattern: lvt-el:{method}:on:[{action}:]{state}
+ *
  * Examples:
- *   parseReactiveAttribute("lvt-reset-on:success", "") => { action: "reset", lifecycle: "success" }
- *   parseReactiveAttribute("lvt-addClass-on:pending", "loading") => { action: "addClass", lifecycle: "pending", param: "loading" }
- *   parseReactiveAttribute("lvt-reset-on:create-todo:success", "") => { action: "reset", lifecycle: "success", actionName: "create-todo" }
+ *   parseReactiveAttribute("lvt-el:reset:on:success", "") => { action: "reset", lifecycle: "success" }
+ *   parseReactiveAttribute("lvt-el:addclass:on:pending", "loading") => { action: "addClass", lifecycle: "pending", param: "loading" }
+ *   parseReactiveAttribute("lvt-el:reset:on:create-todo:success", "") => { action: "reset", lifecycle: "success", actionName: "create-todo" }
  */
 export function parseReactiveAttribute(
   attrName: string,
   attrValue: string
 ): ReactiveBinding | null {
-  // Pattern: lvt-{action}-on:{actionName?}:{lifecycle}
-  // The lifecycle must be at the end, action name is optional in the middle
-  // Note: HTML attributes are lowercased by browsers, so we match case-insensitively
-  const match = attrName.toLowerCase().match(/^lvt-(\w+)-on:(.+)$/);
-  if (!match) return null;
-
-  const actionKey = match[1];
-  const action = ACTION_MAP[actionKey];
-  if (!action) return null;
-
-  const eventPart = match[2];
-
-  // Check if the last segment is a lifecycle event
-  // Format: "{actionName}:{lifecycle}" or just "{lifecycle}"
-  const segments = eventPart.split(":");
-  const lastSegment = segments[segments.length - 1] as LifecycleEvent;
-
-  if (!LIFECYCLE_EVENTS.includes(lastSegment)) return null;
-
-  const lifecycle = lastSegment;
-  const actionName = segments.length > 1 ? segments.slice(0, -1).join(":") : undefined;
-
-  return {
-    action,
-    lifecycle,
-    actionName: actionName || undefined,
-    param: attrValue || undefined,
-  };
+  const lower = attrName.toLowerCase();
+
+  // New pattern: lvt-el:{method}:on:[{action}:]{state}
+  const newMatch = lower.match(/^lvt-el:(\w+):on:(.+)$/);
+  if (newMatch) {
+    const methodKey = newMatch[1];
+    const action = METHOD_MAP[methodKey];
+    if (!action) return null;
+
+    const eventPart = newMatch[2];
+    // Skip interaction triggers (click-away) — handled by click-away delegation
+    if (eventPart === "click-away") return null;
+
+    const segments = eventPart.split(":");
+    const lastSegment = segments[segments.length - 1];
+    if (!LIFECYCLE_SET.has(lastSegment)) return null;
+
+    const lifecycle = lastSegment as LifecycleEvent;
+    const actionName = segments.length > 1 ? segments.slice(0, -1).join(":") : undefined;
+
+    return {
+      action,
+      lifecycle,
+      actionName: actionName || undefined,
+      param: attrValue || undefined,
+    };
+  }
+
+  return null;
 }
 
 /**
@@ -125,18 +115,6 @@ export function executeAction(
       }
       break;
 
-    case "disable":
-      if ("disabled" in element) {
-        (element as HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement).disabled = true;
-      }
-      break;
-
-    case "enable":
-      if ("disabled" in element) {
-        (element as HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement).disabled = false;
-      }
-      break;
-
     case "addClass":
       if (param) {
         const classes = param.split(/\s+/).filter(Boolean);
@@ -179,45 +157,61 @@ export function executeAction(
 
 /**
  * Check if an event matches a binding.
- *
- * @param binding The reactive binding to check
- * @param lifecycle The lifecycle event that fired
- * @param actionName The action name that triggered the event (optional)
  */
 export function matchesEvent(
   binding: ReactiveBinding,
   lifecycle: LifecycleEvent,
   actionName?: string
 ): boolean {
-  // Lifecycle must match
   if (binding.lifecycle !== lifecycle) return false;
-
-  // If binding has no actionName, it's global (matches any action)
   if (!binding.actionName) return true;
-
-  // If binding has actionName, it must match the fired action
   return binding.actionName === actionName;
 }
 
 /**
  * Process all reactive attributes for a lifecycle event.
- *
- * Instead of building complex selectors, we iterate all elements with any lvt-*-on:* attribute
- * and check each one against the fired event.
  */
 export function processReactiveAttributes(
   lifecycle: LifecycleEvent,
   actionName?: string
 ): void {
-  // Find all elements that might have reactive attributes
-  // This is a broad selector but avoids escaping issues with attribute names containing colons
-  const allElements = document.querySelectorAll("*");
+  // Target only elements with lvt-el: attributes instead of scanning all DOM elements.
+  // CSS doesn't support attribute-name-starts-with, so we build selectors from known
+  // method prefixes. This covers both unscoped (lvt-el:reset:on:success) and
+  // action-scoped (lvt-el:reset:on:create-todo:success) patterns.
+  const methodKeys = Object.keys(METHOD_MAP);
+  const selectorParts: string[] = [];
+
+  // Escape CSS-special characters in actionName for use in attribute selectors
+  const escapedAction = actionName
+    ? actionName.replace(/([^\w-])/g, "\\$1")
+    : undefined;
+
+  for (const m of methodKeys) {
+    selectorParts.push(`[lvt-el\\:${m}\\:on\\:${lifecycle}]`);
+    if (escapedAction) {
+      selectorParts.push(`[lvt-el\\:${m}\\:on\\:${escapedAction}\\:${lifecycle}]`);
+    }
+  }
+  const selector = selectorParts.join(", ");
+
+  let candidates: NodeListOf<Element>;
+  try {
+    candidates = document.querySelectorAll(selector);
+  } catch {
+    // If selector is still invalid despite escaping, scan targeted elements only
+    // by matching unscoped patterns (without actionName)
+    const fallbackParts = methodKeys.map(m => `[lvt-el\\:${m}\\:on\\:${lifecycle}]`);
+    try {
+      candidates = document.querySelectorAll(fallbackParts.join(", "));
+    } catch {
+      return; // Cannot construct any valid selector
+    }
+  }
 
-  allElements.forEach((element) => {
-    // Check all attributes on this element for reactive bindings
+  candidates.forEach((element) => {
     Array.from(element.attributes).forEach((attr) => {
-      // Quick filter: only process lvt-*-on: attributes
-      if (!attr.name.startsWith("lvt-") || !attr.name.includes("-on:")) {
+      if (!attr.name.startsWith("lvt-el:") || !attr.name.includes(":on:")) {
         return;
       }
 
@@ -231,11 +225,9 @@ export function processReactiveAttributes(
 
 /**
  * Set up document-level event listeners for reactive attributes.
- * This should be called once during client initialization.
  */
 export function setupReactiveAttributeListeners(): void {
   LIFECYCLE_EVENTS.forEach((lifecycle) => {
-    // Listen in capture phase to process before event bubbles
     document.addEventListener(
       `lvt:${lifecycle}`,
       (e: Event) => {
@@ -243,7 +235,7 @@ export function setupReactiveAttributeListeners(): void {
         const actionName = customEvent.detail?.action;
         processReactiveAttributes(lifecycle, actionName);
       },
-      true // capture phase
+      true
     );
   });
 }
diff --git a/livetemplate-client.ts b/livetemplate-client.ts
index 62e3486..a8cddf0 100644
--- a/livetemplate-client.ts
+++ b/livetemplate-client.ts
@@ -17,7 +17,6 @@ import {
 import { EventDelegator } from "./dom/event-delegation";
 import { LinkInterceptor } from "./dom/link-interceptor";
 import { ObserverManager } from "./dom/observer-manager";
-import { ModalManager } from "./dom/modal-manager";
 import { LoadingIndicator } from "./dom/loading-indicator";
 import { FormDisabler } from "./dom/form-disabler";
 import { setupReactiveAttributeListeners } from "./dom/reactive-attributes";
@@ -40,7 +39,6 @@ import type {
 import { createLogger, Logger } from "./utils/logger";
 export { loadAndApplyUpdate, compareHTML } from "./utils/testing";
 export { setupReactiveAttributeListeners } from "./dom/reactive-attributes";
-export { checkLvtConfirm, extractLvtData } from "./utils/confirm";
 
 export class LiveTemplateClient {
   private readonly treeRenderer: TreeRenderer;
@@ -63,7 +61,6 @@ export class LiveTemplateClient {
   private eventDelegator: EventDelegator;
   private linkInterceptor: LinkInterceptor;
   private observerManager: ObserverManager;
-  private modalManager: ModalManager;
   private formLifecycleManager: FormLifecycleManager;
   private loadingIndicator: LoadingIndicator;
   private formDisabler: FormDisabler;
@@ -103,8 +100,7 @@ export class LiveTemplateClient {
     this.treeRenderer = new TreeRenderer(this.logger.child("TreeRenderer"));
     this.focusManager = new FocusManager(this.logger.child("FocusManager"));
 
-    this.modalManager = new ModalManager(this.logger.child("ModalManager"));
-    this.formLifecycleManager = new FormLifecycleManager(this.modalManager);
+    this.formLifecycleManager = new FormLifecycleManager();
     this.loadingIndicator = new LoadingIndicator();
     this.formDisabler = new FormDisabler();
 
@@ -162,8 +158,6 @@ export class LiveTemplateClient {
             button,
             originalButtonText
           ),
-        openModal: (modalId: string) => this.modalManager.open(modalId),
-        closeModal: (modalId: string) => this.modalManager.close(modalId),
         getWebSocketReadyState: () => this.webSocketManager.getReadyState(),
         triggerPendingUploads: (uploadName: string) =>
           this.uploadHandler.triggerPendingUploads(uploadName),
@@ -388,9 +382,6 @@ export class LiveTemplateClient {
     // Set up click-outside listener for client-managed toast stack
     setupToastClickOutside();
 
-    // Set up modal delegation
-    this.eventDelegator.setupModalDelegation();
-
     // Set up focus trap delegation for lvt-focus-trap attribute
     this.eventDelegator.setupFocusTrapDelegation();
 
@@ -400,7 +391,7 @@ export class LiveTemplateClient {
     // Set up link interception for SPA navigation
     this.linkInterceptor.setup(this.wrapperElement);
 
-    // Set up reactive attribute listeners for lvt-{action}-on:{event} attributes
+    // Set up reactive attribute listeners for lvt-el:*:on:* attributes
     setupReactiveAttributeListeners();
 
     // Initialize focus tracking
diff --git a/livetemplate.css b/livetemplate.css
new file mode 100644
index 0000000..45da16f
--- /dev/null
+++ b/livetemplate.css
@@ -0,0 +1,24 @@
+/**
+ * LiveTemplate CSS Custom Property Defaults
+ *
+ * These custom properties configure lvt-fx:* directives.
+ * Override them in your own stylesheets to customize behavior.
+ *
+ * Usage:
+ *   [lvt-fx\:scroll] { --lvt-scroll-behavior: smooth; }
+ *   [lvt-fx\:highlight] { --lvt-highlight-color: yellow; --lvt-highlight-duration: 1000; }
+ *   [lvt-fx\:animate] { --lvt-animate-duration: 500; }
+ */
+
+:root {
+  /* Scroll directive defaults */
+  --lvt-scroll-behavior: auto;
+  --lvt-scroll-threshold: 100;
+
+  /* Highlight directive defaults */
+  --lvt-highlight-duration: 500;
+  --lvt-highlight-color: #ffc107;
+
+  /* Animate directive defaults */
+  --lvt-animate-duration: 300;
+}
diff --git a/state/form-lifecycle-manager.ts b/state/form-lifecycle-manager.ts
index f91abbb..516f420 100644
--- a/state/form-lifecycle-manager.ts
+++ b/state/form-lifecycle-manager.ts
@@ -1,5 +1,4 @@
 import type { ResponseMetadata } from "../types";
-import { ModalManager } from "../dom/modal-manager";
 
 /**
  * Tracks form submission lifecycle for LiveTemplate actions.
@@ -9,7 +8,7 @@ export class FormLifecycleManager {
   private activeButton: HTMLButtonElement | null = null;
   private originalButtonText: string | null = null;
 
-  constructor(private readonly modalManager: ModalManager) {}
+  constructor() {}
 
   setActiveSubmission(
     form: HTMLFormElement | null,
@@ -59,12 +58,13 @@ export class FormLifecycleManager {
       new CustomEvent("lvt:success", { detail: meta })
     );
 
-    const modalParent = this.activeForm.closest('[role="dialog"]');
-    if (modalParent && modalParent.id) {
-      this.modalManager.close(modalParent.id);
+    // Close parent <dialog> using native API instead of ModalManager
+    const dialogParent = this.activeForm.closest("dialog");
+    if (dialogParent && dialogParent.open) {
+      dialogParent.close();
     }
 
-    if (!this.activeForm.hasAttribute("lvt-preserve")) {
+    if (!this.activeForm.hasAttribute("lvt-form:preserve")) {
       this.activeForm.reset();
     }
   }
diff --git a/tests/directives.test.ts b/tests/directives.test.ts
index 193f278..e8dc518 100644
--- a/tests/directives.test.ts
+++ b/tests/directives.test.ts
@@ -14,9 +14,9 @@ describe("handleScrollDirectives", () => {
     jest.restoreAllMocks();
   });
 
-  it("scrolls element to bottom when lvt-scroll='bottom'", () => {
+  it("scrolls element to bottom when lvt-fx:scroll='bottom'", () => {
     document.body.innerHTML = `
-      <div id="container" lvt-scroll="bottom" style="height: 100px; overflow: auto;">
+      <div id="container" lvt-fx:scroll="bottom" style="height: 100px; overflow: auto;">
         <div style="height: 500px;">Content</div>
       </div>
     `;
@@ -34,8 +34,8 @@ describe("handleScrollDirectives", () => {
     });
   });
 
-  it("scrolls to top when lvt-scroll='top'", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll="top"></div>`;
+  it("scrolls to top when lvt-fx:scroll='top'", () => {
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll="top"></div>`;
     const container = document.getElementById("container")!;
     const scrollToSpy = jest.fn();
     container.scrollTo = scrollToSpy;
@@ -48,8 +48,8 @@ describe("handleScrollDirectives", () => {
     });
   });
 
-  it("respects lvt-scroll-behavior attribute", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll="top" lvt-scroll-behavior="smooth"></div>`;
+  it("respects --lvt-scroll-behavior custom property", () => {
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll="top" style="--lvt-scroll-behavior: smooth;"></div>`;
     const container = document.getElementById("container")!;
     const scrollToSpy = jest.fn();
     container.scrollTo = scrollToSpy;
@@ -63,7 +63,7 @@ describe("handleScrollDirectives", () => {
   });
 
   it("sticky bottom only scrolls when near bottom", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll="bottom-sticky" lvt-scroll-threshold="50"></div>`;
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll="bottom-sticky" style="--lvt-scroll-threshold: 50;"></div>`;
     const container = document.getElementById("container")!;
     Object.defineProperty(container, "scrollHeight", { value: 500, configurable: true });
     Object.defineProperty(container, "scrollTop", { value: 400, configurable: true });
@@ -79,7 +79,7 @@ describe("handleScrollDirectives", () => {
   });
 
   it("sticky bottom does not scroll when far from bottom", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll="bottom-sticky" lvt-scroll-threshold="50"></div>`;
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll="bottom-sticky" style="--lvt-scroll-threshold: 50;"></div>`;
     const container = document.getElementById("container")!;
     Object.defineProperty(container, "scrollHeight", { value: 500, configurable: true });
     Object.defineProperty(container, "scrollTop", { value: 0, configurable: true });
@@ -94,8 +94,8 @@ describe("handleScrollDirectives", () => {
     expect(scrollToSpy).not.toHaveBeenCalled();
   });
 
-  it("does nothing for lvt-scroll='preserve'", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll="preserve"></div>`;
+  it("does nothing for lvt-fx:scroll='preserve'", () => {
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll="preserve"></div>`;
     const container = document.getElementById("container")!;
     const scrollToSpy = jest.fn();
     container.scrollTo = scrollToSpy;
@@ -106,15 +106,15 @@ describe("handleScrollDirectives", () => {
   });
 
   it("warns on unknown scroll mode", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll="unknown-mode"></div>`;
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll="unknown-mode"></div>`;
 
     handleScrollDirectives(document.body);
 
-    expect(console.warn).toHaveBeenCalledWith("Unknown lvt-scroll mode: unknown-mode");
+    expect(console.warn).toHaveBeenCalledWith("Unknown lvt-fx:scroll mode: unknown-mode");
   });
 
-  it("handles empty lvt-scroll attribute", () => {
-    document.body.innerHTML = `<div id="container" lvt-scroll=""></div>`;
+  it("handles empty lvt-fx:scroll attribute", () => {
+    document.body.innerHTML = `<div id="container" lvt-fx:scroll=""></div>`;
     const container = document.getElementById("container")!;
     const scrollToSpy = jest.fn();
     container.scrollTo = scrollToSpy;
@@ -136,7 +136,7 @@ describe("handleHighlightDirectives", () => {
   });
 
   it("applies highlight color temporarily", () => {
-    document.body.innerHTML = `<div id="target" lvt-highlight="flash"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:highlight="flash"></div>`;
     const target = document.getElementById("target")!;
 
     handleHighlightDirectives(document.body);
@@ -145,8 +145,8 @@ describe("handleHighlightDirectives", () => {
     expect(target.style.transition).toContain("background-color");
   });
 
-  it("respects custom lvt-highlight-duration", () => {
-    document.body.innerHTML = `<div id="target" lvt-highlight="flash" lvt-highlight-duration="1000"></div>`;
+  it("respects custom --lvt-highlight-duration", () => {
+    document.body.innerHTML = `<div id="target" lvt-fx:highlight="flash" style="--lvt-highlight-duration: 1000;"></div>`;
     const target = document.getElementById("target")!;
 
     handleHighlightDirectives(document.body);
@@ -154,8 +154,8 @@ describe("handleHighlightDirectives", () => {
     expect(target.style.transition).toContain("1000ms");
   });
 
-  it("respects custom lvt-highlight-color", () => {
-    document.body.innerHTML = `<div id="target" lvt-highlight="flash" lvt-highlight-color="#ff0000"></div>`;
+  it("respects custom --lvt-highlight-color", () => {
+    document.body.innerHTML = `<div id="target" lvt-fx:highlight="flash" style="--lvt-highlight-color: #ff0000;"></div>`;
     const target = document.getElementById("target")!;
 
     handleHighlightDirectives(document.body);
@@ -164,7 +164,7 @@ describe("handleHighlightDirectives", () => {
   });
 
   it("restores original background after highlight", () => {
-    document.body.innerHTML = `<div id="target" lvt-highlight="flash" lvt-highlight-duration="500" style="background-color: blue;"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:highlight="flash" style="background-color: blue;"></div>`;
     const target = document.getElementById("target")!;
     const originalBg = target.style.backgroundColor;
 
@@ -178,8 +178,8 @@ describe("handleHighlightDirectives", () => {
     jest.advanceTimersByTime(500);
   });
 
-  it("handles empty lvt-highlight attribute", () => {
-    document.body.innerHTML = `<div id="target" lvt-highlight=""></div>`;
+  it("handles empty lvt-fx:highlight attribute", () => {
+    document.body.innerHTML = `<div id="target" lvt-fx:highlight=""></div>`;
     const target = document.getElementById("target")!;
     const originalBg = target.style.backgroundColor;
 
@@ -203,7 +203,7 @@ describe("handleAnimateDirectives", () => {
   });
 
   it("applies fade animation", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate="fade"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:animate="fade"></div>`;
     const target = document.getElementById("target")!;
 
     handleAnimateDirectives(document.body);
@@ -212,7 +212,7 @@ describe("handleAnimateDirectives", () => {
   });
 
   it("applies slide animation", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate="slide"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:animate="slide"></div>`;
     const target = document.getElementById("target")!;
 
     handleAnimateDirectives(document.body);
@@ -221,7 +221,7 @@ describe("handleAnimateDirectives", () => {
   });
 
   it("applies scale animation", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate="scale"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:animate="scale"></div>`;
     const target = document.getElementById("target")!;
 
     handleAnimateDirectives(document.body);
@@ -229,8 +229,8 @@ describe("handleAnimateDirectives", () => {
     expect(target.style.animation).toContain("lvt-scale-in");
   });
 
-  it("respects custom animation duration", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate="fade" lvt-animate-duration="1000"></div>`;
+  it("respects custom animation duration via CSS custom property", () => {
+    document.body.innerHTML = `<div id="target" lvt-fx:animate="fade" style="--lvt-animate-duration: 1000;"></div>`;
     const target = document.getElementById("target")!;
 
     handleAnimateDirectives(document.body);
@@ -239,7 +239,7 @@ describe("handleAnimateDirectives", () => {
   });
 
   it("clears animation on animationend", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate="fade"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:animate="fade"></div>`;
     const target = document.getElementById("target")!;
 
     handleAnimateDirectives(document.body);
@@ -253,8 +253,8 @@ describe("handleAnimateDirectives", () => {
 
   it("injects CSS keyframes only once", () => {
     document.body.innerHTML = `
-      <div lvt-animate="fade"></div>
-      <div lvt-animate="slide"></div>
+      <div lvt-fx:animate="fade"></div>
+      <div lvt-fx:animate="slide"></div>
     `;
 
     handleAnimateDirectives(document.body);
@@ -265,15 +265,15 @@ describe("handleAnimateDirectives", () => {
   });
 
   it("warns on unknown animation mode", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate="unknown"></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:animate="unknown"></div>`;
 
     handleAnimateDirectives(document.body);
 
-    expect(console.warn).toHaveBeenCalledWith("Unknown lvt-animate mode: unknown");
+    expect(console.warn).toHaveBeenCalledWith("Unknown lvt-fx:animate mode: unknown");
   });
 
   it("handles empty lvt-animate attribute", () => {
-    document.body.innerHTML = `<div id="target" lvt-animate=""></div>`;
+    document.body.innerHTML = `<div id="target" lvt-fx:animate=""></div>`;
     const target = document.getElementById("target")!;
 
     handleAnimateDirectives(document.body);
diff --git a/tests/event-delegation.test.ts b/tests/event-delegation.test.ts
index d3d7c92..ba3515d 100644
--- a/tests/event-delegation.test.ts
+++ b/tests/event-delegation.test.ts
@@ -30,8 +30,6 @@ describe("EventDelegator", () => {
       parseValue: (value: string) => value,
       send: jest.fn(),
       setActiveSubmission: jest.fn(),
-      openModal: jest.fn(),
-      closeModal: jest.fn(),
       getWebSocketReadyState: () => 1,
       triggerPendingUploads: jest.fn(),
     };
@@ -46,7 +44,7 @@ describe("EventDelegator", () => {
     const wrapper = document.createElement("div");
     wrapper.setAttribute("data-lvt-id", "wrapper-1");
     wrapper.innerHTML = `
-      <button id="save" lvt-click="save" lvt-data-id="42"></button>
+      <button id="save" lvt-on:click="save" data-id="42"></button>
     `;
     document.body.appendChild(wrapper);
 
@@ -73,7 +71,7 @@ describe("EventDelegator", () => {
     const wrapper = document.createElement("div");
     wrapper.setAttribute("data-lvt-id", "wrapper-2");
     wrapper.innerHTML = `
-      <button id="ping" lvt-click="ping" lvt-throttle="200"></button>
+      <button id="ping" lvt-on:click="ping" lvt-mod:throttle="200"></button>
     `;
     document.body.appendChild(wrapper);
 
@@ -100,7 +98,7 @@ describe("EventDelegator", () => {
     const wrapper = document.createElement("div");
     wrapper.setAttribute("data-lvt-id", "wrapper-password");
     wrapper.innerHTML = `
-      <form id="login-form" lvt-submit="login">
+      <form id="login-form" lvt-on:submit="login">
         <input type="text" name="username" value="testuser" />
         <input type="password" name="password" value="12345" />
         <button type="submit" id="submit">Login</button>
@@ -152,10 +150,10 @@ describe("EventDelegator", () => {
     const wrapper = document.createElement("div");
     wrapper.setAttribute("data-lvt-id", "wrapper-3");
     wrapper.innerHTML = `
-      <form id="add-form" lvt-submit="add">
+      <form id="add-form" lvt-on:submit="add">
         <input type="text" name="title" value="Hello" />
         <input type="checkbox" name="published" checked />
-        <button type="submit" id="submit" lvt-disable-with="Saving...">Save</button>
+        <button type="submit" id="submit" lvt-form:disable-with="Saving...">Save</button>
       </form>
     `;
     document.body.appendChild(wrapper);
@@ -634,10 +632,10 @@ describe("EventDelegator", () => {
       });
     });
 
-    it("lvt-click takes priority over orphan button name", () => {
+    it("lvt-on:click takes priority over orphan button name", () => {
       const wrapper = document.createElement("div");
       wrapper.setAttribute("data-lvt-id", "wrapper-orphan-10");
-      wrapper.innerHTML = `<button id="btn" lvt-click="tier2action" name="tier1action">Button</button>`;
+      wrapper.innerHTML = `<button id="btn" lvt-on:click="tier2action" name="tier1action">Button</button>`;
       document.body.appendChild(wrapper);
 
       const context = createContext(wrapper);
diff --git a/tests/form-lifecycle-manager.test.ts b/tests/form-lifecycle-manager.test.ts
index e44c599..2f4435d 100644
--- a/tests/form-lifecycle-manager.test.ts
+++ b/tests/form-lifecycle-manager.test.ts
@@ -1,47 +1,42 @@
 import { FormLifecycleManager } from "../state/form-lifecycle-manager";
-import { ModalManager } from "../dom/modal-manager";
-import { createLogger } from "../utils/logger";
 import type { ResponseMetadata } from "../types";
 
 describe("FormLifecycleManager", () => {
-  let modalCloseSpy: jest.SpyInstance;
-  let modalManager: ModalManager;
-
   beforeEach(() => {
-    modalManager = new ModalManager(
-      createLogger({ scope: "ModalManagerTest", level: "silent" })
-    );
-    modalCloseSpy = jest
-      .spyOn(modalManager, "close")
-      .mockImplementation(() => {});
     document.body.innerHTML = "";
   });
 
   afterEach(() => {
-    modalCloseSpy.mockRestore();
     document.body.innerHTML = "";
   });
 
   const createForm = () => {
-    const modal = document.createElement("div");
-    modal.id = "modal-1";
-    modal.setAttribute("role", "dialog");
+    const dialog = document.createElement("dialog");
+    dialog.id = "dialog-1";
+    // JSDOM doesn't implement dialog.showModal() — polyfill
+    if (!dialog.showModal) {
+      dialog.showModal = function () { this.setAttribute("open", ""); };
+    }
+    if (!dialog.close) {
+      dialog.close = function () { this.removeAttribute("open"); };
+    }
 
     const form = document.createElement("form");
-    modal.appendChild(form);
+    dialog.appendChild(form);
 
     const button = document.createElement("button");
     button.textContent = "Submit";
     form.appendChild(button);
 
-    document.body.appendChild(modal);
+    document.body.appendChild(dialog);
+    dialog.showModal();
 
-    return { form, button, modal };
+    return { form, button, dialog };
   };
 
-  it("dispatches success events, resets the form, and closes the modal on success", () => {
-    const { form, button, modal } = createForm();
-    const manager = new FormLifecycleManager(modalManager);
+  it("dispatches success events, resets the form, and closes the dialog on success", () => {
+    const { form, button, dialog } = createForm();
+    const manager = new FormLifecycleManager();
 
     const doneListener = jest.fn();
     const successListener = jest.fn();
@@ -55,21 +50,21 @@ describe("FormLifecycleManager", () => {
 
     expect(doneListener).toHaveBeenCalledWith(expect.any(CustomEvent));
     expect(successListener).toHaveBeenCalledWith(expect.any(CustomEvent));
-    expect(modalCloseSpy).toHaveBeenCalledWith("modal-1");
+    expect(dialog.open).toBe(false);
     expect(form.elements.length).toBeGreaterThan(0);
     expect(button.disabled).toBe(false);
     expect(button.textContent).toBe("Submit");
   });
 
-  it("respects lvt-preserve and keeps the fields intact", () => {
+  it("respects lvt-form:preserve and keeps the fields intact", () => {
     const { form, button } = createForm();
-    form.setAttribute("lvt-preserve", "");
+    form.setAttribute("lvt-form:preserve", "");
 
     const input = document.createElement("input");
     input.value = "Keep me";
     form.appendChild(input);
 
-    const manager = new FormLifecycleManager(modalManager);
+    const manager = new FormLifecycleManager();
     manager.setActiveSubmission(form, button, "Submit");
 
     const metadata: ResponseMetadata = { success: true, errors: {} };
@@ -79,8 +74,8 @@ describe("FormLifecycleManager", () => {
   });
 
   it("dispatches error events and keeps the form when the response fails", () => {
-    const { form, button } = createForm();
-    const manager = new FormLifecycleManager(modalManager);
+    const { form, button, dialog } = createForm();
+    const manager = new FormLifecycleManager();
 
     const doneListener = jest.fn();
     const errorListener = jest.fn();
@@ -97,14 +92,14 @@ describe("FormLifecycleManager", () => {
 
     expect(doneListener).toHaveBeenCalledWith(expect.any(CustomEvent));
     expect(errorListener).toHaveBeenCalledWith(expect.any(CustomEvent));
-    expect(modalCloseSpy).not.toHaveBeenCalled();
+    expect(dialog.open).toBe(true);
     expect(button.disabled).toBe(false);
     expect(button.textContent).toBe("Submit");
   });
 
   it("reset simply clears active submission state", () => {
-    const { form, button } = createForm();
-    const manager = new FormLifecycleManager(modalManager);
+    const { form, button, dialog } = createForm();
+    const manager = new FormLifecycleManager();
 
     manager.setActiveSubmission(form, button, "Submit");
     manager.reset();
@@ -112,6 +107,7 @@ describe("FormLifecycleManager", () => {
     const metadata: ResponseMetadata = { success: true, errors: {} };
     manager.handleResponse(metadata);
 
-    expect(modalCloseSpy).not.toHaveBeenCalled();
+    // Dialog should still be open since reset was called before handleResponse
+    expect(dialog.open).toBe(true);
   });
 });
diff --git a/tests/modal-manager.test.ts b/tests/modal-manager.test.ts
deleted file mode 100644
index 5ae0ce7..0000000
--- a/tests/modal-manager.test.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ModalManager } from "../dom/modal-manager";
-import { createLogger } from "../utils/logger";
-
-describe("ModalManager", () => {
-  let consoleLogSpy: jest.SpyInstance;
-  let consoleWarnSpy: jest.SpyInstance;
-
-  beforeEach(() => {
-    consoleLogSpy = jest.spyOn(console, "log").mockImplementation(() => {});
-    consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
-    document.body.innerHTML = "";
-  });
-
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-    consoleWarnSpy.mockRestore();
-    jest.useRealTimers();
-    document.body.innerHTML = "";
-  });
-
-  it("opens a modal and focuses the first input when no element is active", () => {
-    jest.useFakeTimers();
-
-    const modal = document.createElement("div");
-    modal.id = "test-modal";
-    modal.setAttribute("hidden", "");
-    modal.style.display = "none";
-    modal.setAttribute("aria-hidden", "true");
-
-    const input = document.createElement("input");
-    input.type = "text";
-    modal.appendChild(input);
-
-    document.body.appendChild(modal);
-
-    const manager = new ModalManager(
-      createLogger({ scope: "ModalManagerTest", level: "silent" })
-    );
-    const openedListener = jest.fn();
-    modal.addEventListener("lvt:modal-opened", openedListener);
-
-    manager.open("test-modal");
-
-    expect(modal.hasAttribute("hidden")).toBe(false);
-    expect(modal.style.display).toBe("flex");
-    expect(modal.getAttribute("aria-hidden")).toBe("false");
-    expect(openedListener).toHaveBeenCalled();
-
-    jest.runAllTimers();
-
-    expect(document.activeElement).toBe(input);
-  });
-
-  it("respects the current focus when a visible element inside the modal is already active", () => {
-    jest.useFakeTimers();
-
-    const modal = document.createElement("div");
-    modal.id = "test-modal-visible";
-    modal.setAttribute("hidden", "");
-    modal.style.display = "none";
-    modal.setAttribute("aria-hidden", "true");
-
-    const firstInput = document.createElement("input");
-    firstInput.type = "text";
-    const secondInput = document.createElement("input");
-    secondInput.type = "text";
-
-    // Emulate layout visibility checks performed in ModalManager.
-    Object.defineProperty(secondInput, "offsetParent", {
-      get: () => modal,
-    });
-    secondInput.getClientRects = () => [{ width: 10, height: 10 }] as any;
-
-    modal.appendChild(firstInput);
-    modal.appendChild(secondInput);
-    document.body.appendChild(modal);
-
-    const manager = new ModalManager(
-      createLogger({ scope: "ModalManagerTest", level: "silent" })
-    );
-    manager.open("test-modal-visible");
-
-    secondInput.focus();
-
-    jest.runAllTimers();
-
-    expect(document.activeElement).toBe(secondInput);
-  });
-
-  it("closes a modal and emits the closed event", () => {
-    const modal = document.createElement("div");
-    modal.id = "test-modal-close";
-    document.body.appendChild(modal);
-
-    const manager = new ModalManager(
-      createLogger({ scope: "ModalManagerTest", level: "silent" })
-    );
-    const closedListener = jest.fn();
-    modal.addEventListener("lvt:modal-closed", closedListener);
-
-    manager.close("test-modal-close");
-
-    expect(modal.hasAttribute("hidden")).toBe(true);
-    expect(modal.style.display).toBe("none");
-    expect(modal.getAttribute("aria-hidden")).toBe("true");
-    expect(closedListener).toHaveBeenCalled();
-  });
-});
diff --git a/tests/reactive-attributes.test.ts b/tests/reactive-attributes.test.ts
index 6ae79f5..8d51ffa 100644
--- a/tests/reactive-attributes.test.ts
+++ b/tests/reactive-attributes.test.ts
@@ -18,9 +18,9 @@ describe("Reactive Attributes", () => {
   });
 
   describe("parseReactiveAttribute", () => {
-    describe("valid attribute parsing", () => {
+    describe("valid attribute parsing (new lvt-el: pattern)", () => {
       it("parses global lifecycle event", () => {
-        const result = parseReactiveAttribute("lvt-reset-on:success", "");
+        const result = parseReactiveAttribute("lvt-el:reset:on:success", "");
         expect(result).toEqual({
           action: "reset",
           lifecycle: "success",
@@ -30,7 +30,7 @@ describe("Reactive Attributes", () => {
       });
 
       it("parses action-specific lifecycle event", () => {
-        const result = parseReactiveAttribute("lvt-reset-on:create-todo:success", "");
+        const result = parseReactiveAttribute("lvt-el:reset:on:create-todo:success", "");
         expect(result).toEqual({
           action: "reset",
           lifecycle: "success",
@@ -40,7 +40,7 @@ describe("Reactive Attributes", () => {
       });
 
       it("parses parameterized action with value", () => {
-        const result = parseReactiveAttribute("lvt-addClass-on:pending", "loading opacity-50");
+        const result = parseReactiveAttribute("lvt-el:addclass:on:pending", "loading opacity-50");
         expect(result).toEqual({
           action: "addClass",
           lifecycle: "pending",
@@ -50,7 +50,7 @@ describe("Reactive Attributes", () => {
       });
 
       it("parses action-specific parameterized action", () => {
-        const result = parseReactiveAttribute("lvt-addClass-on:save:pending", "loading");
+        const result = parseReactiveAttribute("lvt-el:addclass:on:save:pending", "loading");
         expect(result).toEqual({
           action: "addClass",
           lifecycle: "pending",
@@ -62,30 +62,28 @@ describe("Reactive Attributes", () => {
       it("parses all lifecycle events", () => {
         const lifecycles: LifecycleEvent[] = ["pending", "success", "error", "done"];
         lifecycles.forEach((lifecycle) => {
-          const result = parseReactiveAttribute(`lvt-reset-on:${lifecycle}`, "");
+          const result = parseReactiveAttribute(`lvt-el:reset:on:${lifecycle}`, "");
           expect(result?.lifecycle).toBe(lifecycle);
         });
       });
 
-      it("parses all action types", () => {
-        const actions = [
-          "reset",
-          "disable",
-          "enable",
-          "addClass",
-          "removeClass",
-          "toggleClass",
-          "setAttr",
-          "toggleAttr",
+      it("parses all method types", () => {
+        const methods = [
+          ["reset", "reset"],
+          ["addclass", "addClass"],
+          ["removeclass", "removeClass"],
+          ["toggleclass", "toggleClass"],
+          ["setattr", "setAttr"],
+          ["toggleattr", "toggleAttr"],
         ];
-        actions.forEach((action) => {
-          const result = parseReactiveAttribute(`lvt-${action}-on:success`, "value");
-          expect(result?.action).toBe(action);
+        methods.forEach(([input, expected]) => {
+          const result = parseReactiveAttribute(`lvt-el:${input}:on:success`, "value");
+          expect(result?.action).toBe(expected);
         });
       });
 
       it("handles action names with hyphens", () => {
-        const result = parseReactiveAttribute("lvt-reset-on:create-new-todo:success", "");
+        const result = parseReactiveAttribute("lvt-el:reset:on:create-new-todo:success", "");
         expect(result).toEqual({
           action: "reset",
           lifecycle: "success",
@@ -95,7 +93,7 @@ describe("Reactive Attributes", () => {
       });
 
       it("handles action names with colons", () => {
-        const result = parseReactiveAttribute("lvt-reset-on:todos:create:success", "");
+        const result = parseReactiveAttribute("lvt-el:reset:on:todos:create:success", "");
         expect(result).toEqual({
           action: "reset",
           lifecycle: "success",
@@ -105,21 +103,32 @@ describe("Reactive Attributes", () => {
       });
     });
 
+    describe("click-away interaction keyword", () => {
+      it("returns null for click-away (handled by click-away delegation)", () => {
+        expect(parseReactiveAttribute("lvt-el:removeclass:on:click-away", "open")).toBeNull();
+      });
+    });
+
     describe("invalid attribute parsing", () => {
       it("returns null for non-reactive attributes", () => {
-        expect(parseReactiveAttribute("lvt-click", "action")).toBeNull();
-        expect(parseReactiveAttribute("lvt-submit", "save")).toBeNull();
+        expect(parseReactiveAttribute("lvt-on:click", "action")).toBeNull();
+        expect(parseReactiveAttribute("lvt-on:submit", "save")).toBeNull();
         expect(parseReactiveAttribute("class", "foo")).toBeNull();
       });
 
-      it("returns null for unknown actions", () => {
-        expect(parseReactiveAttribute("lvt-foo-on:success", "")).toBeNull();
-        expect(parseReactiveAttribute("lvt-hide-on:pending", "")).toBeNull();
+      it("returns null for unknown methods", () => {
+        expect(parseReactiveAttribute("lvt-el:foo:on:success", "")).toBeNull();
+        expect(parseReactiveAttribute("lvt-el:hide:on:pending", "")).toBeNull();
       });
 
       it("returns null for unknown lifecycle events", () => {
-        expect(parseReactiveAttribute("lvt-reset-on:loading", "")).toBeNull();
-        expect(parseReactiveAttribute("lvt-reset-on:complete", "")).toBeNull();
+        expect(parseReactiveAttribute("lvt-el:reset:on:loading", "")).toBeNull();
+        expect(parseReactiveAttribute("lvt-el:reset:on:complete", "")).toBeNull();
+      });
+
+      it("returns null for removed actions (disable/enable)", () => {
+        expect(parseReactiveAttribute("lvt-el:disable:on:pending", "")).toBeNull();
+        expect(parseReactiveAttribute("lvt-el:enable:on:done", "")).toBeNull();
       });
     });
   });
@@ -143,47 +152,10 @@ describe("Reactive Attributes", () => {
         const div = document.createElement("div");
         document.body.appendChild(div);
 
-        // Should not throw
         executeAction(div, "reset");
       });
     });
 
-    describe("disable/enable", () => {
-      it("disables a button", () => {
-        const button = document.createElement("button");
-        document.body.appendChild(button);
-
-        executeAction(button, "disable");
-        expect(button.disabled).toBe(true);
-      });
-
-      it("enables a button", () => {
-        const button = document.createElement("button");
-        button.disabled = true;
-        document.body.appendChild(button);
-
-        executeAction(button, "enable");
-        expect(button.disabled).toBe(false);
-      });
-
-      it("disables an input", () => {
-        const input = document.createElement("input");
-        document.body.appendChild(input);
-
-        executeAction(input, "disable");
-        expect(input.disabled).toBe(true);
-      });
-
-      it("enables an input", () => {
-        const input = document.createElement("input");
-        input.disabled = true;
-        document.body.appendChild(input);
-
-        executeAction(input, "enable");
-        expect(input.disabled).toBe(false);
-      });
-    });
-
     describe("addClass", () => {
       it("adds a single class", () => {
         const div = document.createElement("div");
@@ -369,7 +341,7 @@ describe("Reactive Attributes", () => {
   describe("processReactiveAttributes", () => {
     it("processes global success bindings", () => {
       const form = document.createElement("form");
-      form.setAttribute("lvt-reset-on:success", "");
+      form.setAttribute("lvt-el:reset:on:success", "");
       const input = document.createElement("input");
       input.name = "title";
       input.value = "test";
@@ -383,7 +355,7 @@ describe("Reactive Attributes", () => {
 
     it("processes action-specific bindings", () => {
       const form = document.createElement("form");
-      form.setAttribute("lvt-reset-on:create-todo:success", "");
+      form.setAttribute("lvt-el:reset:on:create-todo:success", "");
       const input = document.createElement("input");
       input.name = "title";
       input.value = "test";
@@ -400,45 +372,45 @@ describe("Reactive Attributes", () => {
     });
 
     it("processes multiple bindings on same element", () => {
-      const button = document.createElement("button");
-      button.setAttribute("lvt-disable-on:pending", "");
-      button.setAttribute("lvt-addClass-on:pending", "loading");
-      document.body.appendChild(button);
+      const div = document.createElement("div");
+      div.setAttribute("lvt-el:addclass:on:pending", "loading");
+      div.setAttribute("lvt-el:setattr:on:pending", "aria-busy:true");
+      document.body.appendChild(div);
 
       processReactiveAttributes("pending", "save");
 
-      expect(button.disabled).toBe(true);
-      expect(button.classList.contains("loading")).toBe(true);
+      expect(div.classList.contains("loading")).toBe(true);
+      expect(div.getAttribute("aria-busy")).toBe("true");
     });
 
     it("processes bindings on multiple elements", () => {
       const form = document.createElement("form");
-      form.setAttribute("lvt-reset-on:success", "");
+      form.setAttribute("lvt-el:reset:on:success", "");
       const input = document.createElement("input");
       input.value = "test";
       form.appendChild(input);
 
-      const button = document.createElement("button");
-      button.disabled = true;
-      button.setAttribute("lvt-enable-on:success", "");
+      const div = document.createElement("div");
+      div.setAttribute("lvt-el:removeclass:on:success", "loading");
+      div.className = "loading";
 
       document.body.appendChild(form);
-      document.body.appendChild(button);
+      document.body.appendChild(div);
 
       processReactiveAttributes("success", "save");
 
       expect(input.value).toBe("");
-      expect(button.disabled).toBe(false);
+      expect(div.classList.contains("loading")).toBe(false);
     });
 
     it("ignores bindings for different lifecycles", () => {
-      const button = document.createElement("button");
-      button.setAttribute("lvt-disable-on:pending", "");
-      document.body.appendChild(button);
+      const div = document.createElement("div");
+      div.setAttribute("lvt-el:addclass:on:pending", "loading");
+      document.body.appendChild(div);
 
       processReactiveAttributes("success", "save");
 
-      expect(button.disabled).toBe(false);
+      expect(div.classList.contains("loading")).toBe(false);
     });
   });
 
@@ -446,10 +418,10 @@ describe("Reactive Attributes", () => {
     it("sets up listeners for all lifecycle events", () => {
       setupReactiveAttributeListeners();
 
-      const button = document.createElement("button");
-      button.setAttribute("lvt-disable-on:pending", "");
-      button.setAttribute("lvt-enable-on:done", "");
-      document.body.appendChild(button);
+      const div = document.createElement("div");
+      div.setAttribute("lvt-el:addclass:on:pending", "loading");
+      div.setAttribute("lvt-el:removeclass:on:done", "loading");
+      document.body.appendChild(div);
 
       // Simulate pending event
       document.dispatchEvent(
@@ -458,7 +430,7 @@ describe("Reactive Attributes", () => {
           bubbles: true,
         })
       );
-      expect(button.disabled).toBe(true);
+      expect(div.classList.contains("loading")).toBe(true);
 
       // Simulate done event
       document.dispatchEvent(
@@ -467,17 +439,16 @@ describe("Reactive Attributes", () => {
           bubbles: true,
         })
       );
-      expect(button.disabled).toBe(false);
+      expect(div.classList.contains("loading")).toBe(false);
     });
 
     it("handles events without action name", () => {
       setupReactiveAttributeListeners();
 
       const div = document.createElement("div");
-      div.setAttribute("lvt-addClass-on:success", "success-state");
+      div.setAttribute("lvt-el:addclass:on:success", "success-state");
       document.body.appendChild(div);
 
-      // Event without action in detail
       document.dispatchEvent(
         new CustomEvent("lvt:success", {
           detail: {},
@@ -485,7 +456,6 @@ describe("Reactive Attributes", () => {
         })
       );
 
-      // Global binding should still work
       expect(div.classList.contains("success-state")).toBe(true);
     });
   });
diff --git a/utils/confirm.ts b/utils/confirm.ts
deleted file mode 100644
index 763781a..0000000
--- a/utils/confirm.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Check if an element has lvt-confirm attribute and prompt user if needed.
- * Returns true if action should proceed, false if cancelled.
- */
-export function checkLvtConfirm(element: HTMLElement): boolean {
-  if (element.hasAttribute("lvt-confirm")) {
-    const confirmMessage = element.getAttribute("lvt-confirm");
-    if (confirmMessage && !confirm(confirmMessage)) {
-      return false; // User cancelled
-    }
-  }
-  return true; // Proceed
-}
-
-/**
- * Extract lvt-data-* attributes from an element.
- * lvt-data-id="123" becomes { id: "123" }
- * lvt-data-user-name="john" becomes { "user-name": "john" }
- */
-export function extractLvtData(element: HTMLElement): Record<string, string> {
-  const data: Record<string, string> = {};
-  const attributes = element.attributes;
-
-  for (let i = 0; i < attributes.length; i++) {
-    const attr = attributes[i];
-    if (attr.name.startsWith("lvt-data-")) {
-      const key = attr.name.substring(9); // Remove "lvt-data-" prefix
-      data[key] = attr.value;
-    }
-  }
-
-  return data;
-}
diff --git a/utils/lvt-selector.ts b/utils/lvt-selector.ts
new file mode 100644
index 0000000..db87602
--- /dev/null
+++ b/utils/lvt-selector.ts
@@ -0,0 +1,8 @@
+/** Escapes colons in attribute names for use in CSS attribute selectors. */
+export function lvtSelector(attr: string, value?: string): string {
+  const escaped = attr.replace(/:/g, "\\:");
+  if (value === undefined) return `[${escaped}]`;
+  // Escape backslashes and double-quotes in the value to prevent CSS selector injection
+  const safeValue = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  return `[${escaped}="${safeValue}"]`;
+}