snice 2.5.3 → 3.1.0

package/dist/index.iife.js

@@ -1,6 +1,6 @@
 /*!
- * snice v2.5.2
- * Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v3.0.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
  */
@@ -39,10 +39,12 @@ var Snice = (function (exports) {
     // Internal element state symbols
     const READY_PROMISE = getSymbol('ready-promise');
     const READY_RESOLVE = getSymbol('ready-resolve');
+    getSymbol('rendered-promise');
+    getSymbol('rendered-resolve');
     const CONTROLLER = getSymbol('controller');
     const INITIALIZED = getSymbol('initialized');
     // Event handler symbols
-    const ON_HANDLERS = getSymbol('on-handlers');
+    getSymbol('on-handlers');
     // Controller symbols
     const CONTROLLER_KEY = getSymbol('controller-key');
     const CONTROLLER_NAME_KEY = getSymbol('controller-name');
@@ -54,13 +56,14 @@ var Snice = (function (exports) {
     // Property symbols
     const PROPERTIES = getSymbol('properties');
     const PROPERTY_VALUES = getSymbol('property-values');
+    const PRE_INIT_PROPERTY_VALUES = getSymbol('pre-init-property-values');
     const PROPERTIES_INITIALIZED = getSymbol('properties-initialized');
     const PROPERTY_WATCHERS = getSymbol('property-watchers');
     const EXPLICITLY_SET_PROPERTIES = getSymbol('explicitly-set-properties');
     // Router context symbol
     const ROUTER_CONTEXT = getSymbol('router-context');
     getSymbol('current-page-marker');
-    const CONTEXT_REQUEST_HANDLER = getSymbol('context-request-handler');
+    getSymbol('context-request-handler');
     const PAGE_TRANSITION = getSymbol('page-transition');
     const CREATED_AT = getSymbol('created-at');
     // Lifecycle symbols
@@ -71,313 +74,34 @@ var Snice = (function (exports) {
     // Observer symbols
     const OBSERVERS = getSymbol('observers');
     // Part symbols
-    const PARTS = getSymbol('parts');
-    const PART_TIMERS = getSymbol('part-timers');
+    getSymbol('parts');
+    getSymbol('part-timers');
     // Lifecycle callback timers
     const MOVED_TIMERS = getSymbol('moved-timers');
     const ADOPTED_TIMERS = getSymbol('adopted-timers');
     // Dispatch timing symbols
     const DISPATCH_TIMERS = getSymbol('dispatch-timers');
-
-    function on(eventName, selectorOrOptions, options) {
-        // Handle overloaded parameters
-        let selector;
-        let opts;
-        if (typeof selectorOrOptions === 'string') {
-            selector = selectorOrOptions;
-            opts = options;
-        }
-        else {
-            selector = undefined;
-            opts = selectorOrOptions;
-        }
-        return function (target, context) {
-            const propertyKey = context.name;
-            context.addInitializer(function () {
-                const constructor = this.constructor;
-                // Store event handler metadata
-                if (!constructor.prototype[ON_HANDLERS]) {
-                    constructor.prototype[ON_HANDLERS] = [];
-                }
-                // Normalize to array and expand at decoration time
-                const eventNames = Array.isArray(eventName) ? eventName : [eventName];
-                // Create a handler entry for each event
-                for (const event of eventNames) {
-                    constructor.prototype[ON_HANDLERS].push({
-                        eventName: event,
-                        selector,
-                        methodName: propertyKey,
-                        method: target,
-                        options: opts
-                    });
-                }
-            });
-        };
-    }
-    // Helper to setup event handlers for elements
-    function setupEventHandlers(instance, element) {
-        const handlers = instance.constructor.prototype[ON_HANDLERS];
-        if (!handlers)
-            return;
-        // Initialize cleanup object if needed
-        if (!instance[CLEANUP]) {
-            instance[CLEANUP] = { events: [], channels: [] };
-        }
-        for (const handler of handlers) {
-            // Get the current method from the instance (preserves decorator stacking)
-            const currentMethod = instance[handler.method.name];
-            const originalMethod = currentMethod ? currentMethod.bind(instance) : handler.method.bind(instance);
-            const handlerOptions = handler.options || {};
-            // Parse event name for key modifiers
-            const [baseEventName, keyModifier] = handler.eventName.split(':');
-            // Create debounced/throttled wrapper if needed
-            const createTimedWrapper = (method) => {
-                if (handlerOptions.debounce) {
-                    let timeoutId;
-                    return function (...args) {
-                        clearTimeout(timeoutId);
-                        timeoutId = setTimeout(() => method.apply(this, args), handlerOptions.debounce);
-                    };
-                }
-                if (handlerOptions.throttle) {
-                    let lastCall = 0;
-                    let timeoutId;
-                    return function (...args) {
-                        const now = Date.now();
-                        const remaining = handlerOptions.throttle - (now - lastCall);
-                        if (remaining <= 0) {
-                            clearTimeout(timeoutId);
-                            lastCall = now;
-                            method.apply(this, args);
-                        }
-                        else if (!timeoutId) {
-                            timeoutId = setTimeout(() => {
-                                lastCall = Date.now();
-                                timeoutId = null;
-                                method.apply(this, args);
-                            }, remaining);
-                        }
-                    };
-                }
-                return method;
-            };
-            // Create the event handler with key modifier support
-            const createEventHandler = (method) => {
-                if (keyModifier && (baseEventName === 'keydown' || baseEventName === 'keyup' || baseEventName === 'keypress')) {
-                    return (event) => {
-                        const keyEvent = event;
-                        // Helper to normalize key names (e.g., "Space" -> " ")
-                        const normalizeKey = (key) => {
-                            if (key === 'Space')
-                                return ' ';
-                            return key;
-                        };
-                        // Check for "any modifiers" match with ~ prefix
-                        if (keyModifier.startsWith('~')) {
-                            const key = normalizeKey(keyModifier.slice(1)); // Remove the ~ and normalize
-                            // Match if key matches, regardless of modifiers
-                            if (keyEvent.key === key) {
-                                method(event);
-                            }
-                            return;
-                        }
-                        // Check for modifier combinations using +
-                        if (keyModifier.includes('+')) {
-                            const parts = keyModifier.split('+');
-                            const key = normalizeKey(parts[parts.length - 1]); // Last part is the actual key
-                            const modifiers = parts.slice(0, -1); // Everything else is modifiers
-                            // Check the actual key
-                            if (keyEvent.key !== key)
-                                return;
-                            // Create a set of expected modifiers
-                            const expectedModifiers = new Set(modifiers.map((m) => m.toLowerCase()));
-                            const hasCtrl = expectedModifiers.has('ctrl');
-                            const hasShift = expectedModifiers.has('shift');
-                            const hasAlt = expectedModifiers.has('alt');
-                            const hasMeta = expectedModifiers.has('meta') || expectedModifiers.has('cmd');
-                            // Check that expected modifiers are pressed and unexpected ones are not
-                            const modifiersMatch = keyEvent.ctrlKey === hasCtrl &&
-                                keyEvent.shiftKey === hasShift &&
-                                keyEvent.altKey === hasAlt &&
-                                keyEvent.metaKey === hasMeta;
-                            if (modifiersMatch) {
-                                method(event);
-                            }
-                        }
-                        else {
-                            // Default: exact match (no modifiers allowed)
-                            const key = normalizeKey(keyModifier);
-                            // Only match if key matches AND no modifiers are pressed
-                            if (keyEvent.key === key &&
-                                !keyEvent.ctrlKey &&
-                                !keyEvent.shiftKey &&
-                                !keyEvent.altKey &&
-                                !keyEvent.metaKey) {
-                                method(event);
-                            }
-                        }
-                    };
-                }
-                return method;
-            };
-            // Apply timing wrapper (debounce/throttle)
-            const timedMethod = createTimedWrapper(originalMethod);
-            // Wrap boundMethod in try-catch for error isolation
-            const wrappedMethod = createEventHandler((event) => {
-                try {
-                    // Apply automatic preventDefault/stopPropagation if configured
-                    if (handlerOptions.preventDefault) {
-                        event.preventDefault();
-                    }
-                    if (handlerOptions.stopPropagation) {
-                        event.stopPropagation();
-                    }
-                    return timedMethod(event);
-                }
-                catch (error) {
-                    console.error(`Error in event handler ${handler.methodName}:`, error);
-                    // Don't rethrow - allow other handlers to continue
-                }
-            });
-            if (handler.selector) {
-                // Delegated event handling - use shadow root if available
-                const eventRoot = element.shadowRoot || element;
-                const delegatedHandler = (event) => {
-                    const target = event.target;
-                    let shouldHandle = false;
-                    if (target.matches && target.matches(handler.selector)) {
-                        shouldHandle = true;
-                    }
-                    else if (target.closest) {
-                        const closest = target.closest(handler.selector);
-                        if (closest) {
-                            shouldHandle = true;
-                        }
-                    }
-                    if (shouldHandle) {
-                        // Apply automatic preventDefault/stopPropagation only if we're handling this event
-                        if (handlerOptions.preventDefault) {
-                            event.preventDefault();
-                        }
-                        if (handlerOptions.stopPropagation) {
-                            event.stopPropagation();
-                            event.stopImmediatePropagation(); // Also stop other handlers on same element
-                        }
-                        wrappedMethod(event);
-                    }
-                };
-                const listenerOptions = {
-                    capture: handlerOptions.capture || false,
-                    once: handlerOptions.once || false,
-                    passive: handlerOptions.passive || false
-                };
-                eventRoot.addEventListener(baseEventName, delegatedHandler, listenerOptions);
-                instance[CLEANUP].events.push(() => {
-                    eventRoot.removeEventListener(baseEventName, delegatedHandler, listenerOptions);
-                });
-            }
-            else {
-                // Direct event handling - always on the element itself
-                const listenerOptions = {
-                    capture: handlerOptions.capture || false,
-                    once: handlerOptions.once || false,
-                    passive: handlerOptions.passive || false
-                };
-                element.addEventListener(baseEventName, wrappedMethod, listenerOptions);
-                instance[CLEANUP].events.push(() => {
-                    element.removeEventListener(baseEventName, wrappedMethod, listenerOptions);
-                });
-            }
-        }
-    }
-    // Helper to cleanup event handlers
-    function cleanupEventHandlers(instance) {
-        if (instance[CLEANUP]?.events) {
-            for (const cleanup of instance[CLEANUP].events) {
-                cleanup();
-            }
-            instance[CLEANUP].events = [];
-        }
-    }
-    /**
-     * Decorator that automatically dispatches a custom event after a method is called.
-     * The return value of the method becomes the event detail.
-     *
-     * @param eventName The name of the event to dispatch
-     * @param options Optional configuration extending EventInit
-     */
-    function dispatch(eventName, options) {
-        return function (originalMethod, _context) {
-            return function (...args) {
-                // Create timing wrappers for dispatch (per-instance)
-                if (!this[DISPATCH_TIMERS]) {
-                    this[DISPATCH_TIMERS] = new Map();
-                }
-                const timerKey = `${eventName}_${_context.name}`;
-                if (!this[DISPATCH_TIMERS].has(timerKey)) {
-                    this[DISPATCH_TIMERS].set(timerKey, {
-                        debounceTimeout: null,
-                        throttleLastCall: 0,
-                        throttleTimeout: null
-                    });
-                }
-                const timers = this[DISPATCH_TIMERS].get(timerKey);
-                // Call the original method with preserved this context
-                const result = originalMethod.apply(this, args);
-                // Helper to dispatch the event
-                const doDispatch = (detail) => {
-                    // Skip dispatch if result is undefined and dispatchOnUndefined is false
-                    if (detail === undefined && options?.dispatchOnUndefined === false) {
-                        return;
-                    }
-                    // Create event with spread operator for options
-                    const event = new CustomEvent(eventName, {
-                        bubbles: true, // Default to true for component events
-                        composed: true, // Allow crossing shadow DOM boundaries
-                        ...options, // Spread all EventInit options
-                        detail
-                    });
-                    this.dispatchEvent(event);
-                };
-                // Helper to handle timed dispatch
-                const timedDispatch = (detail) => {
-                    if (options?.debounce) {
-                        clearTimeout(timers.debounceTimeout);
-                        timers.debounceTimeout = setTimeout(() => doDispatch(detail), options.debounce);
-                    }
-                    else if (options?.throttle) {
-                        const now = Date.now();
-                        const remaining = options.throttle - (now - timers.throttleLastCall);
-                        if (remaining <= 0) {
-                            clearTimeout(timers.throttleTimeout);
-                            timers.throttleLastCall = now;
-                            doDispatch(detail);
-                        }
-                        else if (!timers.throttleTimeout) {
-                            timers.throttleTimeout = setTimeout(() => {
-                                timers.throttleLastCall = Date.now();
-                                timers.throttleTimeout = null;
-                                doDispatch(detail);
-                            }, remaining);
-                        }
-                    }
-                    else {
-                        doDispatch(detail);
-                    }
-                };
-                // Handle async methods
-                if (result instanceof Promise) {
-                    return result.then((resolvedResult) => {
-                        timedDispatch(resolvedResult);
-                        return resolvedResult;
-                    });
-                }
-                // Sync method
-                timedDispatch(result);
-                return result;
-            };
-        };
-    }
+    // Render symbols (v3.0.0)
+    const RENDER_METHOD = getSymbol('render-method');
+    const RENDER_OPTIONS = getSymbol('render-options');
+    const RENDER_INSTANCE = getSymbol('render-instance');
+    const RENDER_SCHEDULED = getSymbol('render-scheduled');
+    const RENDER_TIMERS = getSymbol('render-timers');
+    const RENDER_CALLBACKS = getSymbol('render-callbacks');
+    const STYLES_METHOD = getSymbol('styles-method');
+    const STYLES_APPLIED = getSymbol('styles-applied');
+    // Navigation context symbols
+    const CONTEXT_HANDLER = getSymbol('context-handler');
+    getSymbol('context-method-name');
+    const NAVIGATION_CONTEXT_INSTANCE = getSymbol('navigation-context-instance');
+    const REGISTERED_ELEMENTS = getSymbol('registered-elements');
+    const IS_UPDATING = getSymbol('is-updating');
+    const CONTEXT_REGISTER = getSymbol('context-register');
+    const CONTEXT_UNREGISTER = getSymbol('context-unregister');
+    const CONTEXT_NOTIFY_ELEMENT = getSymbol('context-notify-element');
+    getSymbol('context-options');
+    const CONTEXT_TIMER = getSymbol('context-timer');
+    const CONTEXT_CALLED = getSymbol('context-called');
 
     // Global cache for MediaQueryList objects
     const mediaQueryCache = new Map();
@@ -404,21 +128,22 @@ var Snice = (function (exports) {
         }
         return function (target, context) {
             const propertyKey = context.name;
+            const initKey = `__observe_init_${propertyKey}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
-                // Store observer metadata
-                if (!constructor.prototype[OBSERVERS]) {
-                    constructor.prototype[OBSERVERS] = [];
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
+                if (!constructor[OBSERVERS]) {
+                    constructor[OBSERVERS] = [];
                 }
-                // Normalize to array
                 const observeTargets = Array.isArray(observeTarget) ? observeTarget : [observeTarget];
-                // Create an observer entry for each target
                 for (const targetString of observeTargets) {
-                    // Parse the observation type from the observeTarget string
                     const [type, ...modifiers] = targetString.split(':');
-                    constructor.prototype[OBSERVERS].push({
+                    const targetStr = modifiers.join(':');
+                    constructor[OBSERVERS].push({
                         type,
-                        target: modifiers.join(':'), // Rejoin for media queries or mutation types
+                        target: targetStr,
                         selector,
                         methodName: propertyKey,
                         method: target,
@@ -430,8 +155,7 @@ var Snice = (function (exports) {
     }
     // Helper to setup observers for elements
     function setupObservers(instance, element) {
-        // Only check the prototype, not the instance itself to avoid property access issues
-        const observers = instance.constructor.prototype[OBSERVERS];
+        const observers = instance.constructor[OBSERVERS];
         if (!observers || !Array.isArray(observers) || observers.length === 0) {
             return;
         }
@@ -859,14 +583,16 @@ var Snice = (function (exports) {
     function respond(requestName, options) {
         return function (target, context) {
             const propertyKey = context.name;
+            const initKey = `__respond_init_${requestName}_${propertyKey}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
-                // Store response metadata on the prototype
-                // This will be picked up by setupResponseHandlers
-                if (!constructor.prototype[CHANNEL_HANDLERS]) {
-                    constructor.prototype[CHANNEL_HANDLERS] = [];
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
+                if (!constructor[CHANNEL_HANDLERS]) {
+                    constructor[CHANNEL_HANDLERS] = [];
                 }
-                constructor.prototype[CHANNEL_HANDLERS].push({
+                constructor[CHANNEL_HANDLERS].push({
                     channelName: requestName,
                     methodName: propertyKey,
                     method: target,
@@ -877,7 +603,7 @@ var Snice = (function (exports) {
     }
     // Helper to setup response handlers for elements and controllers
     function setupResponseHandlers(instance, element) {
-        const handlers = instance.constructor.prototype[CHANNEL_HANDLERS];
+        const handlers = instance.constructor[CHANNEL_HANDLERS];
         if (!handlers)
             return;
         // Store cleanup functions
@@ -977,71 +703,1296 @@ var Snice = (function (exports) {
         }
     }
 
-    // Controller-scoped cleanup registry
-    class ControllerScope {
-        constructor() {
-            this.cleanupFns = new Map();
-            this.pendingOperations = new Set();
-        }
-        register(key, cleanup) {
-            this.cleanupFns.set(key, cleanup);
-        }
-        unregister(key) {
-            this.cleanupFns.delete(key);
-        }
-        async cleanup() {
-            // Wait for all pending operations
-            await Promise.all(this.pendingOperations);
-            // Run all cleanup functions
-            for (const cleanup of this.cleanupFns.values()) {
-                try {
-                    await cleanup();
-                }
-                catch (error) {
-                    console.error('Error during cleanup:', error);
-                }
-            }
-            this.cleanupFns.clear();
+    /**
+     * Template system for Snice v3.0.0
+     * Inspired by lit-html but custom implementation
+     * Provides html`` and css`` tagged template processors with differential rendering
+     */
+    // Unique symbols for type checking
+    const HTML_RESULT = Symbol('html-result');
+    const CSS_RESULT = Symbol('css-result');
+    /**
+     * Tagged template function for creating HTML templates
+     *
+     * @example
+     * ```typescript
+     * html`<div class="card">
+     *   <h1>${this.title}</h1>
+     *   <button @click=${this.handleClick}>Click me</button>
+     * </div>`
+     * ```
+     */
+    function html(strings, ...values) {
+        return {
+            _$litType$: HTML_RESULT,
+            strings,
+            values
+        };
+    }
+    /**
+     * Tagged template function for creating CSS
+     *
+     * @example
+     * ```typescript
+     * css`:host {
+     *   display: block;
+     *   padding: 1rem;
+     * }`
+     * ```
+     */
+    function css(strings, ...values) {
+        // Combine strings and values into final CSS text
+        let cssText = strings[0];
+        for (let i = 0; i < values.length; i++) {
+            cssText += String(values[i]) + strings[i + 1];
         }
-        async runOperation(operation) {
-            const promise = operation();
-            const voidPromise = promise.then(() => { }, () => { });
-            this.pendingOperations.add(voidPromise);
+        const result = {
+            _$litType$: CSS_RESULT,
+            cssText
+        };
+        // Try to create constructable stylesheet for better performance
+        // This will be cached and reused across instances
+        if (typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype) {
             try {
-                const result = await promise;
-                this.pendingOperations.delete(voidPromise);
-                return result;
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(cssText);
+                result.styleSheet = sheet;
             }
-            catch (error) {
-                this.pendingOperations.delete(voidPromise);
-                throw error;
+            catch (e) {
+                // Fall back to regular <style> tag if constructable stylesheets fail
             }
         }
+        return result;
     }
     /**
-     * Decorator to register a controller class with a name
-     * @param name The name to register the controller under
+     * Check if a value is a TemplateResult
      */
-    function controller(name) {
-        return function (constructor, _context) {
-            snice.controllerRegistry.set(name, constructor);
-            // Mark as controller class for channel decorator detection
-            constructor.prototype[IS_CONTROLLER_CLASS] = true;
-            return constructor;
-        };
+    function isTemplateResult(value) {
+        return value && value._$litType$ === HTML_RESULT;
     }
     /**
-     * Attaches a controller to an element
-     * @param element The element to attach the controller to
-     * @param controllerName The name of the controller to attach
+     * Check if a value is a CSSResult
      */
-    async function attachController(element, controllerName) {
-        const existingController = element[CONTROLLER_KEY];
-        const existingName = element[CONTROLLER_NAME_KEY];
-        // For native elements, check if this is actually the desired controller
-        const nativeController = element[NATIVE_CONTROLLER];
-        if (nativeController !== undefined && nativeController !== controllerName) {
-            // This attachment is outdated, skip it
+    function isCSSResult(value) {
+        return value && value._$litType$ === CSS_RESULT;
+    }
+    /**
+     * Nothing - represents no value (different from null/undefined)
+     * Used to remove content from templates
+     */
+    const nothing = Symbol('nothing');
+    // Unique symbol for unsafe HTML
+    const UNSAFE_HTML = Symbol('unsafe-html');
+    /**
+     * Mark a string as raw HTML that should not be escaped
+     * WARNING: Only use with sanitized content - using user input can lead to XSS!
+     *
+     * @example
+     * ```typescript
+     * const htmlString = '<span class="bold">Hello</span>';
+     * html`<div>${unsafeHTML(htmlString)}</div>`
+     * ```
+     */
+    function unsafeHTML(html) {
+        return {
+            _$litType$: UNSAFE_HTML,
+            html
+        };
+    }
+    /**
+     * Check if a value is an UnsafeHTML wrapper
+     */
+    function isUnsafeHTML(value) {
+        return value && value._$litType$ === UNSAFE_HTML;
+    }
+
+    /**
+     * Simplified lit-html-style template system
+     * Based on lit-html's approach but simplified
+     */
+    // Unique marker for dynamic parts
+    // Using processing instruction syntax like lit-html for better compatibility
+    // This parses as a comment node but doesn't get escaped in attributes
+    const marker = `snice$${Math.random().toFixed(9).slice(2)}$`;
+    const markerMatch = '?' + marker;
+    const nodeMarker = `<${markerMatch}>`;
+    const markerRegex = new RegExp(marker, 'g');
+    // Template cache removed - negligible performance benefit (~0.00004ms per template)
+    /**
+     * A prepared template ready for rendering
+     */
+    class Template {
+        constructor(result, element, attrNamesForParts) {
+            this.parts = [];
+            this.element = element;
+            const walker = document.createTreeWalker(element.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+            let partIndex = 0;
+            const nodesToRemove = [];
+            let node;
+            while ((node = walker.nextNode()) !== null) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    const element = node;
+                    const tagName = element.tagName.toLowerCase();
+                    // Handle virtual elements: <if>, <case>
+                    // These elements stay in the DOM but are styled with display:contents
+                    // to be transparent wrappers that don't affect layout
+                    if (tagName === 'if') {
+                        // <if value="${condition}">children</if>
+                        const valueAttr = element.getAttribute('value');
+                        if (valueAttr && valueAttr.includes(marker)) {
+                            // Remove the value attribute
+                            element.removeAttribute('value');
+                            this.parts.push({
+                                type: 'if',
+                                index: partIndex++,
+                                element // Keep the <if> element, will show/hide via display property
+                            });
+                            // Continue processing children normally
+                        }
+                        continue;
+                    }
+                    // Handle <case> element
+                    // Like <if>, <case> stays in DOM styled with display:contents
+                    if (tagName === 'case') {
+                        // <case value="${value}">children</case>
+                        const valueAttr = element.getAttribute('value');
+                        if (valueAttr && valueAttr.includes(marker)) {
+                            // Remove the value attribute
+                            element.removeAttribute('value');
+                            this.parts.push({
+                                type: 'case',
+                                index: partIndex++,
+                                caseElement: element // Keep the <case> element for when/default processing
+                            });
+                            // Continue processing children normally
+                        }
+                        continue;
+                    }
+                    if (element.hasAttributes()) {
+                        const attributes = element.attributes;
+                        const attrsToRemove = [];
+                        for (let i = 0; i < attributes.length; i++) {
+                            const attr = attributes[i];
+                            const value = attr.value;
+                            // Check for attribute bindings
+                            if (value.includes(marker)) {
+                                attrsToRemove.push(attr);
+                                // Get original attribute name with preserved case
+                                const originalName = attrNamesForParts[partIndex] || attr.name;
+                                // Extract static string segments by splitting on marker
+                                const attrStrings = value.split(marker);
+                                if (originalName.startsWith('@')) {
+                                    // Event binding
+                                    this.parts.push({
+                                        type: 'event',
+                                        index: partIndex++,
+                                        name: originalName.slice(1),
+                                        element
+                                    });
+                                }
+                                else if (originalName.startsWith('.')) {
+                                    // Property binding - preserve original case for JavaScript properties
+                                    this.parts.push({
+                                        type: 'property',
+                                        index: partIndex++,
+                                        name: originalName.slice(1),
+                                        element
+                                    });
+                                }
+                                else if (originalName.startsWith('?')) {
+                                    // Boolean attribute
+                                    this.parts.push({
+                                        type: 'boolean-attribute',
+                                        index: partIndex++,
+                                        name: originalName.slice(1),
+                                        element
+                                    });
+                                }
+                                else {
+                                    // Regular attribute - use lowercased name from DOM
+                                    // Store static string segments for interpolation
+                                    this.parts.push({
+                                        type: 'attribute',
+                                        index: partIndex++,
+                                        name: attr.name,
+                                        element,
+                                        attrStrings
+                                    });
+                                }
+                            }
+                        }
+                        // Remove marker attributes
+                        for (const attr of attrsToRemove) {
+                            element.removeAttribute(attr.name);
+                        }
+                    }
+                }
+                else if (node.nodeType === Node.COMMENT_NODE) {
+                    const comment = node;
+                    // Check for marker match (processing instruction becomes comment)
+                    if (comment.data === markerMatch) {
+                        // Node part
+                        const parent = comment.parentNode;
+                        const endNode = document.createComment('');
+                        parent.insertBefore(endNode, comment.nextSibling);
+                        this.parts.push({
+                            type: 'node',
+                            index: partIndex++,
+                            startNode: comment,
+                            endNode
+                        });
+                    }
+                }
+                else if (node.nodeType === Node.TEXT_NODE) {
+                    const text = node;
+                    const data = text.data;
+                    if (data.includes(marker)) {
+                        // Split text node at markers
+                        const parent = text.parentNode;
+                        const parts = data.split(markerRegex);
+                        const lastIndex = parts.length - 1;
+                        for (let i = 0; i < lastIndex; i++) {
+                            parent.insertBefore(document.createTextNode(parts[i]), text);
+                            const comment = document.createComment('');
+                            const endNode = document.createComment('');
+                            parent.insertBefore(comment, text);
+                            parent.insertBefore(endNode, text);
+                            this.parts.push({
+                                type: 'node',
+                                index: partIndex++,
+                                startNode: comment,
+                                endNode
+                            });
+                        }
+                        // Last part
+                        if (parts[lastIndex] !== '') {
+                            text.data = parts[lastIndex];
+                        }
+                        else {
+                            nodesToRemove.push(text);
+                        }
+                    }
+                }
+            }
+            // Remove marker nodes
+            for (const node of nodesToRemove) {
+                node.parentNode?.removeChild(node);
+            }
+        }
+    }
+    /**
+     * Prepare a template for rendering
+     */
+    function prepareTemplate(result) {
+        // Build HTML with markers and extract original attribute names
+        const { strings } = result;
+        let html = '';
+        const attrNamesForParts = [];
+        for (let i = 0; i < strings.length; i++) {
+            const str = strings[i];
+            html += str;
+            if (i < strings.length - 1) {
+                // Check if we're in an attribute context
+                // Look backwards for = sign
+                const lastEquals = str.lastIndexOf('=');
+                const lastCloseTag = str.lastIndexOf('>');
+                if (lastEquals > lastCloseTag) {
+                    // We're in an attribute value - extract and preserve the original attribute name
+                    let attrStart = lastEquals - 1;
+                    while (attrStart >= 0 && /\S/.test(str[attrStart])) {
+                        attrStart--;
+                    }
+                    const attrName = str.substring(attrStart + 1, lastEquals).trim();
+                    attrNamesForParts.push(attrName);
+                    html += marker;
+                }
+                else {
+                    // Check if this is a meta element (<if> or <case>) by looking backwards
+                    // Match pattern: <if or <case followed by whitespace or >
+                    const metaElementMatch = str.match(/<(if|case)\s*$/);
+                    if (metaElementMatch) {
+                        // This is a meta element - add value attribute
+                        attrNamesForParts.push('value');
+                        html += `value="${marker}"`;
+                    }
+                    else {
+                        // We're in node content
+                        attrNamesForParts.push(''); // Empty string for node parts
+                        html += nodeMarker;
+                    }
+                }
+            }
+        }
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        return new Template(result, template, attrNamesForParts);
+    }
+    /**
+     * Instance of a rendered template
+     */
+    class TemplateInstance {
+        constructor(result) {
+            this.parts = [];
+            this.fragment = null;
+            this.template = prepareTemplate(result);
+        }
+        renderFragment() {
+            if (!this.fragment) {
+                // First render - clone template and create parts
+                this.fragment = this.template.element.content.cloneNode(true);
+                // Build a map of nodes from template to cloned fragment
+                const walker = document.createTreeWalker(this.template.element.content, NodeFilter.SHOW_ALL);
+                const clonedWalker = document.createTreeWalker(this.fragment, NodeFilter.SHOW_ALL);
+                const nodeMap = new Map();
+                let templateNode = walker.currentNode;
+                let clonedNode = clonedWalker.currentNode;
+                while (templateNode && clonedNode) {
+                    nodeMap.set(templateNode, clonedNode);
+                    templateNode = walker.nextNode();
+                    clonedNode = clonedWalker.nextNode();
+                }
+                for (const partDef of this.template.parts) {
+                    let part;
+                    switch (partDef.type) {
+                        case 'node':
+                            const startNode = nodeMap.get(partDef.startNode);
+                            const endNode = nodeMap.get(partDef.endNode);
+                            part = new NodePart(startNode, endNode);
+                            break;
+                        case 'attribute':
+                            const attrElement = nodeMap.get(partDef.element);
+                            part = new AttributePart(attrElement, partDef.name, partDef.attrStrings);
+                            break;
+                        case 'property':
+                            const propElement = nodeMap.get(partDef.element);
+                            part = new PropertyPart(propElement, partDef.name);
+                            break;
+                        case 'boolean-attribute':
+                            const boolElement = nodeMap.get(partDef.element);
+                            part = new BooleanAttributePart(boolElement, partDef.name);
+                            break;
+                        case 'event':
+                            const eventElement = nodeMap.get(partDef.element);
+                            part = new EventPart(eventElement, partDef.name);
+                            break;
+                        case 'if':
+                            const ifElement = nodeMap.get(partDef.element);
+                            part = new IfPart(ifElement);
+                            break;
+                        case 'case':
+                            const caseElement = nodeMap.get(partDef.caseElement);
+                            part = new CasePart(caseElement);
+                            break;
+                        default:
+                            throw new Error(`Unknown part type: ${partDef.type}`);
+                    }
+                    this.parts.push(part);
+                }
+            }
+            return this.fragment;
+        }
+        render(values) {
+            const fragment = this.renderFragment();
+            // Commit values to parts
+            this.update(values);
+            return fragment;
+        }
+        update(values) {
+            // Process virtual elements (if/case) first
+            for (let i = 0; i < this.parts.length; i++) {
+                const part = this.parts[i];
+                if (part instanceof IfPart || part instanceof CasePart) {
+                    part.commit(values[i]);
+                }
+            }
+            // Then process all other parts
+            for (let i = 0; i < this.parts.length; i++) {
+                const part = this.parts[i];
+                if (!(part instanceof IfPart || part instanceof CasePart)) {
+                    part.commit(values[i]);
+                }
+            }
+        }
+        clear() {
+            for (const part of this.parts) {
+                part.clear();
+            }
+        }
+    }
+    /**
+     * Base class for all parts
+     */
+    class Part {
+    }
+    /**
+     * NodePart handles text content and nested templates
+     */
+    class NodePart extends Part {
+        constructor(startNode, endNode) {
+            super();
+            this.value = undefined;
+            this.startNode = startNode;
+            this.endNode = endNode;
+        }
+        commit(value) {
+            if (value === this.value)
+                return;
+            this.value = value;
+            // Handle arrays
+            if (Array.isArray(value)) {
+                this.commitArray(value);
+                return;
+            }
+            // Handle nested templates
+            if (isTemplateResult(value)) {
+                this.commitTemplate(value);
+                return;
+            }
+            // Handle unsafe HTML
+            if (isUnsafeHTML(value)) {
+                this.commitUnsafeHTML(value);
+                return;
+            }
+            // Handle primitives
+            this.commitPrimitive(value);
+        }
+        commitPrimitive(value) {
+            this.clear();
+            const text = value === null || value === undefined ? '' : String(value);
+            const textNode = document.createTextNode(text);
+            this.insertBefore(textNode);
+        }
+        commitTemplate(template) {
+            this.clear();
+            const instance = new TemplateInstance(template);
+            const fragment = instance.render(template.values);
+            this.insertBefore(fragment);
+        }
+        commitArray(values) {
+            this.clear();
+            for (const value of values) {
+                if (isTemplateResult(value)) {
+                    const instance = new TemplateInstance(value);
+                    const fragment = instance.render(value.values);
+                    this.insertBefore(fragment);
+                }
+                else {
+                    const text = value === null || value === undefined ? '' : String(value);
+                    const textNode = document.createTextNode(text);
+                    this.insertBefore(textNode);
+                }
+            }
+        }
+        commitUnsafeHTML(value) {
+            this.clear();
+            // Create a temporary container to parse the HTML
+            const temp = document.createElement('template');
+            temp.innerHTML = value.html;
+            // Insert all parsed nodes
+            const fragment = temp.content;
+            this.insertBefore(fragment);
+        }
+        insertBefore(node) {
+            this.endNode.parentNode?.insertBefore(node, this.endNode);
+        }
+        clear() {
+            const parent = this.startNode.parentNode;
+            if (!parent)
+                return;
+            let node = this.startNode.nextSibling;
+            while (node && node !== this.endNode) {
+                const next = node.nextSibling;
+                parent.removeChild(node);
+                node = next;
+            }
+        }
+    }
+    /**
+     * AttributePart handles regular attribute updates
+     */
+    class AttributePart extends Part {
+        constructor(element, name, attrStrings) {
+            super();
+            this.value = undefined;
+            this.element = element;
+            this.name = name;
+            this.attrStrings = attrStrings;
+        }
+        commit(value) {
+            if (value === this.value)
+                return;
+            this.value = value;
+            if (value === null || value === undefined) {
+                this.element.removeAttribute(this.name);
+            }
+            else {
+                // Data-oriented: compute final value from strings + value
+                const finalValue = computeAttributeValue(this.attrStrings, value);
+                this.element.setAttribute(this.name, finalValue);
+            }
+        }
+        clear() {
+            this.element.removeAttribute(this.name);
+        }
+    }
+    /**
+     * Data-oriented function to compute attribute value from static strings and dynamic value
+     */
+    function computeAttributeValue(attrStrings, value) {
+        if (!attrStrings || attrStrings.length === 0) {
+            // No template strings, just use the value
+            return String(value);
+        }
+        if (attrStrings.length === 1) {
+            // Single string segment, no interpolation (shouldn't happen but handle it)
+            return attrStrings[0];
+        }
+        // Multiple segments: "prefix" + value + "suffix"
+        // For aria-label="Remove ${label}", attrStrings = ["Remove ", ""]
+        return attrStrings[0] + String(value) + attrStrings[1];
+    }
+    /**
+     * PropertyPart handles property bindings
+     */
+    class PropertyPart extends Part {
+        constructor(element, name) {
+            super();
+            this.value = undefined;
+            this.element = element;
+            this.name = name;
+        }
+        commit(value) {
+            if (value === this.value)
+                return;
+            this.value = value;
+            this.element[this.name] = value;
+        }
+        clear() {
+            this.element[this.name] = undefined;
+        }
+    }
+    /**
+     * BooleanAttributePart handles boolean attributes
+     */
+    class BooleanAttributePart extends Part {
+        constructor(element, name) {
+            super();
+            this.value = undefined;
+            this.element = element;
+            this.name = name;
+        }
+        commit(value) {
+            if (value === this.value)
+                return;
+            this.value = value;
+            if (value) {
+                this.element.setAttribute(this.name, '');
+            }
+            else {
+                this.element.removeAttribute(this.name);
+            }
+        }
+        clear() {
+            this.element.removeAttribute(this.name);
+        }
+    }
+    /**
+     * EventPart handles event listener bindings with keyboard shortcut support
+     */
+    class EventPart extends Part {
+        constructor(element, eventName) {
+            super();
+            this.listener = null;
+            this.value = undefined;
+            this.keyFilter = null;
+            this.element = element;
+            // Parse keyboard shortcuts:
+            // Supports both dot notation (@keydown.enter) and colon notation (@keydown:Enter) to match @on decorator
+            const dotIndex = eventName.indexOf('.');
+            const colonIndex = eventName.indexOf(':');
+            // Use whichever delimiter comes first (dot or colon)
+            const delimiterIndex = dotIndex > 0 && colonIndex > 0
+                ? Math.min(dotIndex, colonIndex)
+                : Math.max(dotIndex, colonIndex);
+            if (delimiterIndex > 0) {
+                const baseEvent = eventName.substring(0, delimiterIndex);
+                const keySpec = eventName.substring(delimiterIndex + 1);
+                this.eventName = baseEvent;
+                this.keyFilter = parseKeyboardFilter(keySpec);
+            }
+            else {
+                this.eventName = eventName;
+            }
+        }
+        commit(value) {
+            // Skip if same value (but null/undefined always triggers update)
+            if (value === this.value && value !== null && value !== undefined)
+                return;
+            // Remove old listener
+            if (this.listener) {
+                this.element.removeEventListener(this.eventName, this.listener);
+                this.listener = null;
+            }
+            this.value = value;
+            // Add new listener
+            if (value === null || value === undefined) {
+                return;
+            }
+            if (typeof value === 'function') {
+                // Auto-bind to host element (the custom element with shadow root)
+                // This allows @click=${this.handleClick} to work without manual binding
+                const rootNode = this.element.getRootNode();
+                const host = rootNode.host;
+                // Create a wrapper that calls the handler with the host as context
+                // This ensures consistent function reference for proper cleanup
+                if (host) {
+                    this.listener = ((event) => {
+                        // If keyboard filter is specified, check if event matches
+                        if (this.keyFilter && !matchesKeyboardFilter(event, this.keyFilter)) {
+                            return;
+                        }
+                        value.call(host, event);
+                    });
+                }
+                else {
+                    this.listener = ((event) => {
+                        if (this.keyFilter && !matchesKeyboardFilter(event, this.keyFilter)) {
+                            return;
+                        }
+                        value.call(null, event);
+                    });
+                }
+                this.element.addEventListener(this.eventName, this.listener);
+            }
+        }
+        clear() {
+            if (this.listener) {
+                this.element.removeEventListener(this.eventName, this.listener);
+                this.listener = null;
+            }
+        }
+    }
+    /**
+     * Parse keyboard shortcut specification
+     * Examples:
+     *   "enter" -> { key: "Enter" }
+     *   "ctrl+s" -> { key: "s", ctrl: true }
+     *   "ctrl+shift+s" -> { key: "s", ctrl: true, shift: true }
+     *   "~enter" -> { key: "Enter", anyModifiers: true }
+     */
+    function parseKeyboardFilter(spec) {
+        // Handle ~ prefix for matching regardless of modifiers
+        const anyModifiers = spec.startsWith('~');
+        if (anyModifiers) {
+            spec = spec.substring(1);
+        }
+        const parts = spec.split('+');
+        const filter = {
+            key: '',
+            anyModifiers
+        };
+        for (const part of parts) {
+            const lower = part.toLowerCase();
+            if (lower === 'ctrl' || lower === 'control') {
+                filter.ctrl = true;
+            }
+            else if (lower === 'alt') {
+                filter.alt = true;
+            }
+            else if (lower === 'shift') {
+                filter.shift = true;
+            }
+            else if (lower === 'meta' || lower === 'cmd' || lower === 'command') {
+                filter.meta = true;
+            }
+            else {
+                // This is the key itself - normalize common keys
+                filter.key = normalizeKey(part);
+            }
+        }
+        return filter;
+    }
+    /**
+     * Normalize key names to match KeyboardEvent.key
+     */
+    function normalizeKey(key) {
+        const keyMap = {
+            'esc': 'Escape',
+            'escape': 'Escape',
+            'enter': 'Enter',
+            'return': 'Enter',
+            'space': ' ',
+            'spacebar': ' ',
+            'up': 'ArrowUp',
+            'down': 'ArrowDown',
+            'left': 'ArrowLeft',
+            'right': 'ArrowRight',
+            'arrowup': 'ArrowUp',
+            'arrowdown': 'ArrowDown',
+            'arrowleft': 'ArrowLeft',
+            'arrowright': 'ArrowRight',
+            'delete': 'Delete',
+            'del': 'Delete',
+            'backspace': 'Backspace',
+            'tab': 'Tab',
+            'home': 'Home',
+            'end': 'End',
+            'pageup': 'PageUp',
+            'pagedown': 'PageDown'
+        };
+        const lower = key.toLowerCase();
+        return keyMap[lower] || key;
+    }
+    /**
+     * Check if keyboard event matches the filter
+     */
+    function matchesKeyboardFilter(event, filter) {
+        // Check key match
+        if (event.key !== filter.key) {
+            return false;
+        }
+        // If anyModifiers is true, we don't care about modifiers
+        if (filter.anyModifiers) {
+            return true;
+        }
+        // Check modifiers - by default, exact match
+        // If filter specifies ctrl: true, event must have ctrlKey
+        // If filter doesn't specify ctrl, event must NOT have ctrlKey
+        const ctrlMatch = filter.ctrl ? event.ctrlKey : !event.ctrlKey;
+        const altMatch = filter.alt ? event.altKey : !event.altKey;
+        const shiftMatch = filter.shift ? event.shiftKey : !event.shiftKey;
+        const metaMatch = filter.meta ? event.metaKey : !event.metaKey;
+        return ctrlMatch && altMatch && shiftMatch && metaMatch;
+    }
+    /**
+     * IfPart handles <if> conditional rendering
+     * Uses document fragments to actually remove/insert nodes from the DOM
+     * instead of just hiding them with CSS
+     */
+    class IfPart extends Part {
+        constructor(ifElement) {
+            super();
+            this.value = undefined;
+            this.fragment = null;
+            this.childNodes = [];
+            this.ifElement = ifElement;
+            // Set display to contents so the wrapper is transparent
+            // display:contents makes the element invisible but renders its children
+            this.ifElement.style.display = 'contents';
+            // Store initial child nodes
+            this.childNodes = Array.from(this.ifElement.childNodes);
+        }
+        commit(value) {
+            const condition = Boolean(value);
+            // If condition hasn't changed, do nothing
+            if (this.value !== undefined && Boolean(this.value) === condition) {
+                return;
+            }
+            this.value = value;
+            if (condition) {
+                // Show: restore children from fragment if they were removed
+                if (this.fragment && this.fragment.hasChildNodes()) {
+                    this.ifElement.appendChild(this.fragment);
+                    this.fragment = null;
+                }
+            }
+            else {
+                // Hide: move children to document fragment
+                this.fragment = document.createDocumentFragment();
+                while (this.ifElement.firstChild) {
+                    this.fragment.appendChild(this.ifElement.firstChild);
+                }
+            }
+        }
+        clear() {
+            // Move all children to fragment
+            this.fragment = document.createDocumentFragment();
+            while (this.ifElement.firstChild) {
+                this.fragment.appendChild(this.ifElement.firstChild);
+            }
+        }
+    }
+    /**
+     * CasePart handles <case>/<when>/<default> conditional rendering
+     * Uses document fragments to remove/insert <when> and <default> children
+     */
+    class CasePart extends Part {
+        constructor(caseElement) {
+            super();
+            this.value = undefined;
+            this.fragments = new Map(); // Store removed children in fragments
+            this.attachedChildren = new Map(); // Track which children are in DOM
+            this.caseElement = caseElement;
+            // Store children in original order
+            this.childrenList = Array.from(this.caseElement.children);
+            // Initialize all children as attached
+            this.childrenList.forEach(child => {
+                this.attachedChildren.set(child, true);
+                // Create a fragment for each child to hold it when detached
+                this.fragments.set(child, document.createDocumentFragment());
+            });
+        }
+        commit(value) {
+            // If value hasn't changed, do nothing
+            if (this.value === value)
+                return;
+            this.value = value;
+            // Find matching <when> or <default> and remove/insert appropriately
+            let hasMatch = false;
+            // First pass: check if any <when> matches
+            for (const child of this.childrenList) {
+                if (child.tagName.toLowerCase() === 'when') {
+                    const whenValue = child.getAttribute('value');
+                    if (whenValue === String(value)) {
+                        hasMatch = true;
+                        break;
+                    }
+                }
+            }
+            // Second pass: remove/insert children based on match
+            for (const child of this.childrenList) {
+                const tagName = child.tagName.toLowerCase();
+                const isAttached = this.attachedChildren.get(child) ?? true;
+                let shouldBeAttached = false;
+                if (tagName === 'when') {
+                    const whenValue = child.getAttribute('value');
+                    shouldBeAttached = (whenValue === String(value));
+                }
+                else if (tagName === 'default') {
+                    shouldBeAttached = !hasMatch;
+                }
+                // Update DOM if state changed
+                if (shouldBeAttached && !isAttached) {
+                    // Re-insert from fragment in correct position
+                    // Find next sibling that is still attached
+                    const childIndex = this.childrenList.indexOf(child);
+                    let insertBefore = null;
+                    for (let i = childIndex + 1; i < this.childrenList.length; i++) {
+                        if (this.attachedChildren.get(this.childrenList[i])) {
+                            insertBefore = this.childrenList[i];
+                            break;
+                        }
+                    }
+                    // Get child from fragment
+                    const fragment = this.fragments.get(child);
+                    if (fragment && fragment.firstChild) {
+                        if (insertBefore) {
+                            this.caseElement.insertBefore(fragment.firstChild, insertBefore);
+                        }
+                        else {
+                            this.caseElement.appendChild(fragment.firstChild);
+                        }
+                    }
+                    this.attachedChildren.set(child, true);
+                }
+                else if (!shouldBeAttached && isAttached) {
+                    // Move to fragment
+                    const fragment = this.fragments.get(child);
+                    if (fragment) {
+                        fragment.appendChild(child);
+                    }
+                    this.attachedChildren.set(child, false);
+                }
+            }
+        }
+        clear() {
+            // Move all children to fragments
+            for (const child of this.childrenList) {
+                if (this.attachedChildren.get(child)) {
+                    const fragment = this.fragments.get(child);
+                    if (fragment) {
+                        fragment.appendChild(child);
+                    }
+                    this.attachedChildren.set(child, false);
+                }
+            }
+        }
+    }
+
+    /**
+     * @on decorator for listening to events
+     * Use in elements or controllers to listen to DOM events or custom events
+     */
+    const ON_HANDLERS = getSymbol('on-handlers');
+    /**
+     * @on decorator for listening to events
+     *
+     * Works in both elements and controllers with full event delegation support.
+     *
+     * @param eventName - Event name(s) to listen for
+     * @param selector - Optional CSS selector for event delegation
+     * @param options - Event listener options including debounce/throttle
+     *
+     * @example
+     * ```typescript
+     * // In elements
+     * @element('my-button')
+     * class MyButton extends HTMLElement {
+     *   @on('click', 'button')
+     *   handleClick(e: MouseEvent) {
+     *     console.log('Button clicked!', e);
+     *   }
+     *
+     *   @on('input', 'input', { debounce: 300 })
+     *   handleInput(e: Event) {
+     *     console.log('Input changed:', (e.target as HTMLInputElement).value);
+     *   }
+     * }
+     *
+     * // In controllers
+     * @controller('my-controller')
+     * class MyController {
+     *   element!: HTMLElement;
+     *
+     *   @on('count-changed')
+     *   handleCountChanged(e: CustomEvent) {
+     *     console.log('Count changed to:', e.detail.count);
+     *   }
+     *
+     *   @on('click', '.item', { throttle: 100 })
+     *   handleItemClick(e: MouseEvent) {
+     *     console.log('Item clicked');
+     *   }
+     * }
+     * ```
+     */
+    function on(eventName, selectorOrOptions, options) {
+        // Parse arguments to support multiple call signatures
+        let selector = null;
+        let opts = {};
+        if (typeof selectorOrOptions === 'string') {
+            // With selector: (eventName, selector, options)
+            selector = selectorOrOptions;
+            opts = options || {};
+        }
+        else if (selectorOrOptions === null && options) {
+            // With null selector: (eventName, null, options)
+            opts = options;
+        }
+        else if (selectorOrOptions && typeof selectorOrOptions === 'object') {
+            // Without selector: (eventName, options)
+            opts = selectorOrOptions;
+        }
+        return function (originalMethod, context) {
+            const methodName = context.name;
+            const initKey = `__on_init_${methodName}_${selector || ''}_${JSON.stringify(eventName)}`;
+            context.addInitializer(function () {
+                const constructor = this.constructor;
+                // Only initialize once per class, not per instance
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
+                if (!constructor[ON_HANDLERS]) {
+                    constructor[ON_HANDLERS] = [];
+                }
+                const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+                for (const event of eventNames) {
+                    constructor[ON_HANDLERS].push({
+                        eventName: event,
+                        selector,
+                        methodName,
+                        method: originalMethod,
+                        options: opts
+                    });
+                }
+            });
+            return originalMethod;
+        };
+    }
+    /**
+     * Create a debounced version of a function
+     */
+    function debounce$1(fn, delay) {
+        let timeoutId = null;
+        return function (...args) {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                fn.apply(this, args);
+                timeoutId = null;
+            }, delay);
+        };
+    }
+    /**
+     * Create a throttled version of a function (leading edge only)
+     */
+    function throttle$1(fn, delay) {
+        let lastCall = 0;
+        return function (...args) {
+            const now = Date.now();
+            const timeSinceLastCall = now - lastCall;
+            if (timeSinceLastCall >= delay) {
+                lastCall = now;
+                fn.apply(this, args);
+            }
+            // Events within the throttle window are simply ignored (leading edge only)
+        };
+    }
+    /**
+     * Events that don't bubble - these require capture phase for delegation
+     */
+    const NON_BUBBLING_EVENTS = new Set([
+        'scroll',
+        'focus',
+        'blur',
+        'load',
+        'unload',
+        'error',
+        'resize',
+        'abort',
+        'mouseenter',
+        'mouseleave',
+        'pointerenter',
+        'pointerleave',
+    ]);
+    /**
+     * Setup event listeners for an element or controller instance
+     * Called automatically during element connection or controller attachment
+     */
+    function setupEventHandlers(instance, targetElement) {
+        const handlers = instance.constructor[ON_HANDLERS];
+        if (!handlers || !Array.isArray(handlers) || handlers.length === 0) {
+            return;
+        }
+        // Initialize cleanup object if needed
+        if (!instance[CLEANUP]) {
+            instance[CLEANUP] = { events: [], channels: [], observers: [] };
+        }
+        else if (!instance[CLEANUP].events) {
+            instance[CLEANUP].events = [];
+        }
+        else if (instance[CLEANUP].events.length > 0) {
+            // Events already set up - clean them up first to avoid duplicates
+            cleanupEventHandlers(instance);
+        }
+        for (const handler of handlers) {
+            // Get current method from instance (preserves decorator stacking)
+            const currentMethod = instance[handler.methodName];
+            let boundMethod = currentMethod ? currentMethod.bind(instance) : handler.method.bind(instance);
+            const handlerOptions = handler.options || {};
+            // Parse event name for key modifiers
+            // Supports both dot notation (@keydown.enter) and colon notation (@keydown:Enter)
+            const dotIndex = handler.eventName.indexOf('.');
+            const colonIndex = handler.eventName.indexOf(':');
+            const delimiterIndex = dotIndex > 0 && colonIndex > 0
+                ? Math.min(dotIndex, colonIndex)
+                : Math.max(dotIndex, colonIndex);
+            const baseEventName = delimiterIndex > 0
+                ? handler.eventName.substring(0, delimiterIndex)
+                : handler.eventName;
+            const keyModifier = delimiterIndex > 0
+                ? handler.eventName.substring(delimiterIndex + 1)
+                : null;
+            // Apply debounce if specified
+            if (handlerOptions.debounce && handlerOptions.debounce > 0) {
+                boundMethod = debounce$1(boundMethod, handlerOptions.debounce);
+            }
+            // Apply throttle if specified (debounce takes precedence)
+            else if (handlerOptions.throttle && handlerOptions.throttle > 0) {
+                boundMethod = throttle$1(boundMethod, handlerOptions.throttle);
+            }
+            // Create event handler with key modifier support
+            // Uses shared keyboard filter implementation from parts.ts
+            let keyFilter = null;
+            if (keyModifier && ['keydown', 'keyup', 'keypress'].includes(baseEventName)) {
+                keyFilter = parseKeyboardFilter(keyModifier);
+            }
+            const createKeyModifierHandler = (method) => {
+                if (!keyFilter) {
+                    return method;
+                }
+                return (event) => {
+                    const keyEvent = event;
+                    if (matchesKeyboardFilter(keyEvent, keyFilter)) {
+                        method(event);
+                    }
+                };
+            };
+            // Apply key modifier wrapper
+            const keyModifierMethod = createKeyModifierHandler(boundMethod);
+            // Main event handler with error handling and event delegation
+            if (handler.selector) {
+                // Delegated event handling - use shadow root if available
+                const eventRoot = targetElement.shadowRoot || targetElement;
+                const delegatedHandler = (event) => {
+                    const target = event.target;
+                    let matchingElement = null;
+                    // Check if target itself matches the selector
+                    if (target.matches && target.matches(handler.selector)) {
+                        matchingElement = target;
+                    }
+                    // Check if any parent matches the selector (event delegation)
+                    else if (target.closest) {
+                        matchingElement = target.closest(handler.selector);
+                    }
+                    // Only handle if we found a match
+                    // Note: No need to check contains() since the event bubbled to eventRoot
+                    if (matchingElement) {
+                        // Apply automatic preventDefault/stopPropagation
+                        if (handlerOptions.preventDefault) {
+                            event.preventDefault();
+                        }
+                        if (handlerOptions.stopPropagation) {
+                            event.stopPropagation();
+                            event.stopImmediatePropagation();
+                        }
+                        try {
+                            keyModifierMethod(event);
+                        }
+                        catch (error) {
+                            console.error(`Error in event handler ${handler.methodName}:`, error);
+                        }
+                    }
+                };
+                // Auto-enable capture for non-bubbling events when using delegation
+                const needsCapture = NON_BUBBLING_EVENTS.has(baseEventName);
+                const useCapture = handlerOptions.capture !== undefined
+                    ? handlerOptions.capture
+                    : needsCapture;
+                const listenerOptions = {
+                    capture: useCapture,
+                    once: handlerOptions.once || false,
+                    passive: handlerOptions.passive || false,
+                };
+                eventRoot.addEventListener(baseEventName, delegatedHandler, listenerOptions);
+                instance[CLEANUP].events.push({
+                    target: eventRoot,
+                    eventName: baseEventName,
+                    handler: delegatedHandler,
+                    options: listenerOptions,
+                });
+            }
+            else {
+                // Direct event handling - on the element itself
+                // If element has shadow root, listen on both shadow root AND host element
+                // to catch events from inside shadow DOM (with correct target) and on host itself
+                const shadowRoot = targetElement.shadowRoot;
+                const handledSymbol = Symbol('snice-event-handled');
+                const wrappedMethod = (event) => {
+                    // Prevent double-triggering when listening on both shadow root and host
+                    if (event[handledSymbol]) {
+                        return;
+                    }
+                    event[handledSymbol] = true;
+                    try {
+                        // Apply automatic preventDefault/stopPropagation
+                        if (handlerOptions.preventDefault) {
+                            event.preventDefault();
+                        }
+                        if (handlerOptions.stopPropagation) {
+                            event.stopPropagation();
+                        }
+                        keyModifierMethod(event);
+                    }
+                    catch (error) {
+                        console.error(`Error in event handler ${handler.methodName}:`, error);
+                    }
+                };
+                const listenerOptions = {
+                    capture: handlerOptions.capture || false,
+                    once: handlerOptions.once || false,
+                    passive: handlerOptions.passive || false,
+                };
+                if (shadowRoot) {
+                    // Listen on shadow root for events inside shadow DOM
+                    shadowRoot.addEventListener(baseEventName, wrappedMethod, listenerOptions);
+                    instance[CLEANUP].events.push({
+                        target: shadowRoot,
+                        eventName: baseEventName,
+                        handler: wrappedMethod,
+                        options: listenerOptions,
+                    });
+                }
+                // Also listen on host element (for clicks on host itself or when no shadow root)
+                targetElement.addEventListener(baseEventName, wrappedMethod, listenerOptions);
+                instance[CLEANUP].events.push({
+                    target: targetElement,
+                    eventName: baseEventName,
+                    handler: wrappedMethod,
+                    options: listenerOptions,
+                });
+            }
+        }
+    }
+    /**
+     * Cleanup event listeners for a controller instance
+     * Called automatically by the controller system during detach
+     */
+    function cleanupEventHandlers(instance) {
+        if (!instance[CLEANUP]?.events)
+            return;
+        for (const { target, eventName, handler, options } of instance[CLEANUP].events) {
+            target.removeEventListener(eventName, handler, options);
+        }
+        instance[CLEANUP].events = [];
+    }
+
+    // Controller-scoped cleanup registry
+    class ControllerScope {
+        constructor() {
+            this.cleanupFns = new Map();
+            this.pendingOperations = new Set();
+        }
+        register(key, cleanup) {
+            this.cleanupFns.set(key, cleanup);
+        }
+        unregister(key) {
+            this.cleanupFns.delete(key);
+        }
+        async cleanup() {
+            // Wait for all pending operations
+            await Promise.all(this.pendingOperations);
+            // Run all cleanup functions
+            for (const cleanup of this.cleanupFns.values()) {
+                try {
+                    await cleanup();
+                }
+                catch (error) {
+                    console.error('Error during cleanup:', error);
+                }
+            }
+            this.cleanupFns.clear();
+        }
+        async runOperation(operation) {
+            const promise = operation();
+            const voidPromise = promise.then(() => { }, () => { });
+            this.pendingOperations.add(voidPromise);
+            try {
+                const result = await promise;
+                this.pendingOperations.delete(voidPromise);
+                return result;
+            }
+            catch (error) {
+                this.pendingOperations.delete(voidPromise);
+                throw error;
+            }
+        }
+    }
+    /**
+     * Decorator to register a controller class with a name
+     * @param name The name to register the controller under
+     */
+    function controller(name) {
+        return function (constructor, _context) {
+            snice.controllerRegistry.set(name, constructor);
+            // Mark as controller class for channel decorator detection
+            constructor.prototype[IS_CONTROLLER_CLASS] = true;
+            return constructor;
+        };
+    }
+    /**
+     * Attaches a controller to an element
+     * @param element The element to attach the controller to
+     * @param controllerName The name of the controller to attach
+     */
+    async function attachController(element, controllerName) {
+        const existingController = element[CONTROLLER_KEY];
+        const existingName = element[CONTROLLER_NAME_KEY];
+        // For native elements, check if this is actually the desired controller
+        const nativeController = element[NATIVE_CONTROLLER];
+        if (nativeController !== undefined && nativeController !== controllerName) {
+            // This attachment is outdated, skip it
             return;
         }
         if (existingName === controllerName && existingController) {
@@ -1080,12 +2031,12 @@ var Snice = (function (exports) {
         await scope.runOperation(async () => {
             await controllerInstance.attach(element);
         });
-        // Setup @on event handlers for controller
-        setupEventHandlers(controllerInstance, element);
         // Setup @observe observers for controller
         setupObservers(controllerInstance, element);
         // Setup @channel handlers for controller
         setupResponseHandlers(controllerInstance, element);
+        // Setup @on event handlers for controller
+        setupEventHandlers(controllerInstance, element);
         element.dispatchEvent(new CustomEvent('@snice/controller-attached', {
             detail: { name: controllerName, controller: controllerInstance }
         }));
@@ -1111,12 +2062,12 @@ var Snice = (function (exports) {
             await controllerInstance.detach(element);
         }
         controllerInstance.element = null;
-        // Cleanup @on event handlers for controller
-        cleanupEventHandlers(controllerInstance);
         // Cleanup @observe observers for controller
         cleanupObservers(controllerInstance);
         // Cleanup @channel handlers for controller
         cleanupResponseHandlers(controllerInstance);
+        // Cleanup @on event handlers for controller
+        cleanupEventHandlers(controllerInstance);
         // Cleanup the controller scope
         if (scope) {
             await scope.cleanup();
@@ -1199,33 +2150,168 @@ var Snice = (function (exports) {
                     });
                 }
             }
-        });
-        // Start observing when DOM is ready
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => {
-                // Process existing elements (excluding custom elements)
-                document.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
-                // Start observing
-                observer.observe(document.body, {
-                    attributes: true,
-                    attributeFilter: ['controller'],
-                    childList: true,
-                    subtree: true
-                });
-            });
+        });
+        // Start observing when DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                // Process existing elements (excluding custom elements)
+                document.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
+                // Start observing
+                observer.observe(document.body, {
+                    attributes: true,
+                    attributeFilter: ['controller'],
+                    childList: true,
+                    subtree: true
+                });
+            });
+        }
+        else {
+            // DOM already loaded
+            document.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
+            observer.observe(document.body, {
+                attributes: true,
+                attributeFilter: ['controller'],
+                childList: true,
+                subtree: true
+            });
+        }
+        // Store observer reference for cleanup if needed
+        globalThis.sniceNativeControllerObserver = observer;
+    }
+
+    /**
+     * @context decorator for receiving router context updates
+     */
+    const CONTEXT_HANDLERS = getSymbol('context-handlers');
+    /**
+     * @context decorator for receiving router context updates
+     *
+     * @example
+     * ```typescript
+     * @element('my-layout')
+     * class MyLayout extends HTMLElement {
+     *   @context
+     *   handleContext(ctx: Context) {
+     *     this.renderNav(ctx.placards, ctx.currentRoute);
+     *   }
+     *
+     *   @context({ debounce: 300 })
+     *   handleContextDebounced(ctx: Context) {
+     *     // Called after 300ms of no updates
+     *   }
+     * }
+     * ```
+     */
+    function context$1(options = {}) {
+        return function (originalMethod, context) {
+            const methodName = context.name;
+            const initKey = `__context_init_${methodName}`;
+            context.addInitializer(function () {
+                const constructor = this.constructor;
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
+                if (!constructor[CONTEXT_HANDLERS]) {
+                    constructor[CONTEXT_HANDLERS] = [];
+                }
+                constructor[CONTEXT_HANDLERS].push({
+                    methodName,
+                    method: originalMethod,
+                    options,
+                });
+            });
+            return originalMethod;
+        };
+    }
+    /**
+     * Setup context handler for an element instance
+     * Called automatically during element connection
+     */
+    function setupContextHandler(element) {
+        const handlers = element.constructor[CONTEXT_HANDLERS];
+        if (!handlers || !Array.isArray(handlers) || handlers.length === 0) {
+            return;
+        }
+        // Get the Context instance from the router
+        const ctx = element[CONTEXT_HANDLER];
+        if (!ctx) {
+            return;
+        }
+        // Store the Context instance for cleanup
+        element[NAVIGATION_CONTEXT_INSTANCE] = ctx;
+        // Register each handler with the Context
+        for (const handler of handlers) {
+            const { methodName, method, options } = handler;
+            const wrappedMethodName = `__wrapped_${methodName}`;
+            // Create wrapped method with timing controls
+            element[wrappedMethodName] = function (context) {
+                // Skip if already called once
+                if (options.once && element[CONTEXT_CALLED]) {
+                    return;
+                }
+                const callMethod = () => {
+                    method.call(element, context);
+                    // Handle once option
+                    if (options.once) {
+                        element[CONTEXT_CALLED] = true;
+                        // Unregister after first call
+                        const ctx = element[NAVIGATION_CONTEXT_INSTANCE];
+                        if (ctx && typeof ctx[CONTEXT_UNREGISTER] === 'function') {
+                            ctx[CONTEXT_UNREGISTER](element);
+                        }
+                    }
+                };
+                // Handle debounce
+                if (options.debounce) {
+                    clearTimeout(element[CONTEXT_TIMER]);
+                    element[CONTEXT_TIMER] = setTimeout(callMethod, options.debounce);
+                }
+                // Handle throttle
+                else if (options.throttle) {
+                    const now = Date.now();
+                    const lastCall = element[CONTEXT_TIMER] || 0;
+                    if (now - lastCall >= options.throttle) {
+                        element[CONTEXT_TIMER] = now;
+                        callMethod();
+                    }
+                }
+                // No timing options - call immediately
+                else {
+                    callMethod();
+                }
+            };
+            // Register with the Context using the wrapped method name
+            if (typeof ctx[CONTEXT_REGISTER] === 'function') {
+                ctx[CONTEXT_REGISTER](element, wrappedMethodName);
+            }
+        }
+    }
+    /**
+     * Cleanup context handler for an element instance
+     * Called automatically during element disconnection
+     */
+    function cleanupContextHandler(element) {
+        const handlers = element.constructor[CONTEXT_HANDLERS];
+        if (!handlers || !Array.isArray(handlers) || handlers.length === 0) {
+            return;
+        }
+        // Clear any pending debounce timer
+        for (const handler of handlers) {
+            if (handler.options.debounce && element[CONTEXT_TIMER]) {
+                clearTimeout(element[CONTEXT_TIMER]);
+                delete element[CONTEXT_TIMER];
+            }
+            // Clean up wrapped method
+            const wrappedMethodName = `__wrapped_${handler.methodName}`;
+            delete element[wrappedMethodName];
         }
-        else {
-            // DOM already loaded
-            document.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
-            observer.observe(document.body, {
-                attributes: true,
-                attributeFilter: ['controller'],
-                childList: true,
-                subtree: true
-            });
+        // Unregister from Context if available
+        const ctx = element[NAVIGATION_CONTEXT_INSTANCE];
+        if (ctx && typeof ctx[CONTEXT_UNREGISTER] === 'function') {
+            ctx[CONTEXT_UNREGISTER](element);
         }
-        // Store observer reference for cleanup if needed
-        globalThis.sniceNativeControllerObserver = observer;
+        delete element[NAVIGATION_CONTEXT_INSTANCE];
+        delete element[CONTEXT_CALLED];
     }
 
     /**
@@ -1286,6 +2372,87 @@ var Snice = (function (exports) {
         }
     }
 
+    var _a, _b, _c;
+    // Symbol for storing the Set of elements
+    const REGISTERED_ELEMENTS_SET = Symbol('registered-elements-set');
+    // Counter for generating unique context IDs
+    let contextIdCounter = 0;
+    /**
+     * Represents the bundled router state that can notify registered elements of changes
+     */
+    class Context {
+        constructor(context = {}, placards = [], currentRoute = '', routeParams = {}) {
+            this[_a] = new WeakMap();
+            this[_b] = new Set();
+            this[_c] = false;
+            this.id = contextIdCounter++;
+            this.application = context;
+            this.navigation = {
+                placards,
+                route: currentRoute,
+                params: routeParams
+            };
+        }
+        /**
+         * Register an element to receive context updates
+         * @internal Used by @context decorator
+         */
+        [(_a = REGISTERED_ELEMENTS, _b = REGISTERED_ELEMENTS_SET, _c = IS_UPDATING, CONTEXT_REGISTER)](element, methodName) {
+            this[REGISTERED_ELEMENTS].set(element, methodName);
+            this[REGISTERED_ELEMENTS_SET].add(element);
+        }
+        /**
+         * Unregister an element from receiving context updates
+         * @internal Used by @context decorator cleanup
+         */
+        [CONTEXT_UNREGISTER](element) {
+            this[REGISTERED_ELEMENTS].delete(element);
+            this[REGISTERED_ELEMENTS_SET].delete(element);
+        }
+        /**
+         * Update the context and notify all registered elements
+         * Prevents infinite loops by tracking update state
+         */
+        update(context, placards, currentRoute, routeParams) {
+            // Prevent infinite loops
+            if (this[IS_UPDATING]) {
+                return;
+            }
+            this[IS_UPDATING] = true;
+            // Update properties (id remains immutable)
+            this.application = context;
+            this.navigation.placards = placards;
+            this.navigation.route = currentRoute;
+            this.navigation.params = routeParams;
+            // Notify all registered elements by calling their methods directly
+            const elementsSet = this[REGISTERED_ELEMENTS_SET];
+            const elementsMap = this[REGISTERED_ELEMENTS];
+            for (const element of elementsSet) {
+                const methodName = elementsMap.get(element);
+                if (methodName && typeof element[methodName] === 'function') {
+                    try {
+                        element[methodName](this);
+                    }
+                    catch (error) {
+                        // Log error but continue notifying other elements
+                        console.error(`Error calling @context method ${methodName}:`, error);
+                    }
+                }
+            }
+            this[IS_UPDATING] = false;
+        }
+        /**
+         * Notify a specific element of the current context state
+         * @internal Used by @context decorator
+         */
+        [CONTEXT_NOTIFY_ELEMENT](element) {
+            const methodName = this[REGISTERED_ELEMENTS].get(element);
+            if (methodName && typeof element[methodName] === 'function') {
+                element[methodName](this);
+            }
+        }
+    }
+
     /**
      * Detects the type constructor from an initial value
      * @param initialValue - The default value assigned to a property field (e.g., `name = "default"` -> "default")
@@ -1414,6 +2581,297 @@ var Snice = (function (exports) {
         }
     }
 
+    /**
+     * @render and @styles decorators for Snice v3.0.0
+     * Provides automatic differential rendering on property changes
+     */
+    /**
+     * Global render scheduler for microtask batching
+     * Batches multiple property changes into a single render
+     */
+    class RenderScheduler {
+        constructor() {
+            this.pending = new Set();
+            this.scheduled = false;
+        }
+        /**
+         * Schedule an element for rendering
+         * Batches renders in a microtask unless sync option is enabled
+         */
+        schedule(element, options) {
+            // Sync rendering - execute immediately
+            if (options.sync) {
+                performRender(element, options);
+                return;
+            }
+            // Async rendering - batch in microtask
+            this.pending.add(element);
+            if (!this.scheduled) {
+                this.scheduled = true;
+                queueMicrotask(() => this.flush());
+            }
+        }
+        /**
+         * Flush all pending renders
+         */
+        flush() {
+            const elements = Array.from(this.pending);
+            this.pending.clear();
+            this.scheduled = false;
+            for (const element of elements) {
+                const options = element[RENDER_OPTIONS] || {};
+                performRender(element, options);
+            }
+        }
+    }
+    const renderScheduler = new RenderScheduler();
+    /**
+     * Perform the actual render of an element
+     */
+    function performRender(element, options, precomputedResult) {
+        const renderMethod = element[RENDER_METHOD];
+        if (!renderMethod)
+            return;
+        // If once is true and we've already rendered, skip
+        if (options.once && element[RENDER_INSTANCE]) {
+            return;
+        }
+        try {
+            // Use precomputed result if provided, otherwise call the render method
+            const result = precomputedResult !== undefined ? precomputedResult : renderMethod.call(element);
+            // Check if differential rendering is disabled (expects string)
+            const differential = options.differential !== false;
+            if (!differential) {
+                // Non-differential expects string
+                if (typeof result !== 'string') {
+                    console.warn('Render method with differential: false must return a string');
+                    return;
+                }
+                // Simple string rendering
+                if (!element.shadowRoot) {
+                    element.attachShadow({ mode: 'open' });
+                }
+                element.shadowRoot.innerHTML = result;
+                // Mark scheduled flag as false
+                element[RENDER_SCHEDULED] = false;
+                // Call all registered render callbacks
+                const callbacks = element[RENDER_CALLBACKS];
+                if (callbacks && callbacks.length > 0) {
+                    const cbs = [...callbacks];
+                    element[RENDER_CALLBACKS] = [];
+                    cbs.forEach(cb => cb());
+                }
+                return;
+            }
+            if (!isTemplateResult(result)) {
+                console.warn('Render method must return html`` template result');
+                return;
+            }
+            // Get or create template instance (differential rendering)
+            let instance = element[RENDER_INSTANCE];
+            if (!instance) {
+                // First render - create shadow root if needed and initial instance
+                if (!element.shadowRoot) {
+                    element.attachShadow({ mode: 'open' });
+                }
+                instance = new TemplateInstance(result);
+                element[RENDER_INSTANCE] = instance;
+                // Create the fragment but don't commit values yet
+                const fragment = instance.renderFragment();
+                // Append to shadow root first so getRootNode() works in event handlers
+                element.shadowRoot.appendChild(fragment);
+                // Now commit values (this binds event handlers with correct host)
+                instance.update(result.values);
+            }
+            else {
+                // Subsequent render - just update the parts (differential rendering!)
+                instance.update(result.values);
+            }
+            // Mark scheduled flag as false
+            element[RENDER_SCHEDULED] = false;
+            // Call all registered render callbacks (for testing/debugging)
+            const callbacks = element[RENDER_CALLBACKS];
+            if (callbacks && callbacks.length > 0) {
+                const cbs = [...callbacks];
+                element[RENDER_CALLBACKS] = [];
+                cbs.forEach(cb => cb());
+            }
+        }
+        catch (error) {
+            console.error('Error rendering element:', error);
+        }
+    }
+    /**
+     * Request a render for an element
+     * Respects debounce/throttle/once/sync options
+     * @param immediate - Force immediate render (used for initial render)
+     */
+    function requestRender(element, immediate = false) {
+        const options = element[RENDER_OPTIONS] || {};
+        // Handle once option
+        if (options.once && element[RENDER_INSTANCE]) {
+            return;
+        }
+        // Force immediate render (for initial render)
+        if (immediate) {
+            performRender(element, options);
+            return;
+        }
+        // Handle debounce
+        if (options.debounce !== undefined && options.debounce > 0) {
+            if (!element[RENDER_TIMERS]) {
+                element[RENDER_TIMERS] = {};
+            }
+            clearTimeout(element[RENDER_TIMERS].debounce);
+            element[RENDER_TIMERS].debounce = setTimeout(() => {
+                renderScheduler.schedule(element, options);
+            }, options.debounce);
+            return;
+        }
+        // Handle throttle
+        if (options.throttle !== undefined && options.throttle > 0) {
+            if (!element[RENDER_TIMERS]) {
+                element[RENDER_TIMERS] = { lastThrottle: 0 };
+            }
+            const timers = element[RENDER_TIMERS];
+            const now = Date.now();
+            if (timers.lastThrottle === 0 || now - timers.lastThrottle >= options.throttle) {
+                timers.lastThrottle = now;
+                renderScheduler.schedule(element, options);
+            }
+            else {
+                // Schedule for later if not already scheduled
+                if (!timers.throttleTimer) {
+                    const remaining = options.throttle - (now - timers.lastThrottle);
+                    timers.throttleTimer = setTimeout(() => {
+                        timers.throttleTimer = null;
+                        timers.lastThrottle = Date.now();
+                        renderScheduler.schedule(element, options);
+                    }, remaining);
+                }
+            }
+            return;
+        }
+        // Normal rendering (with microtask batching unless sync)
+        renderScheduler.schedule(element, options);
+    }
+    /**
+     * @render decorator for component rendering
+     *
+     * Marks a method as the render method for the component.
+     * The method should return html`...` template.
+     * Automatically re-renders when properties change (unless once: true).
+     *
+     * @example
+     * ```typescript
+     * @render()
+     * renderContent() {
+     *   return html`<div>${this.count}</div>`;
+     * }
+     * ```
+     *
+     * @example
+     * ```typescript
+     * // Debounced rendering
+     * @render({ debounce: 100 })
+     * renderContent() {
+     *   return html`<div>${this.searchTerm}</div>`;
+     * }
+     * ```
+     *
+     * @example
+     * ```typescript
+     * // Render only once (manual re-renders only)
+     * @render({ once: true })
+     * renderContent() {
+     *   return html`<div>Static content</div>`;
+     * }
+     * ```
+     */
+    function render(options = {}) {
+        return function (originalMethod, context) {
+            context.name;
+            context.addInitializer(function () {
+                // Store the render method and options
+                this[RENDER_METHOD] = originalMethod;
+                this[RENDER_OPTIONS] = options;
+            });
+            // Return wrapped method that triggers re-render when called manually
+            return function (...args) {
+                // Call original method to get the template
+                const result = originalMethod.apply(this, args);
+                // Always render when method is called manually (even if once: true)
+                // Force immediate render to bypass all options, pass precomputed result to avoid calling method twice
+                performRender(this, {}, result);
+                return result;
+            };
+        };
+    }
+    /**
+     * @styles decorator for component styles
+     *
+     * Marks a method as the styles method for the component.
+     * The method should return css`...` template.
+     * Styles are applied once when the component is connected.
+     *
+     * @example
+     * ```typescript
+     * @styles()
+     * styles() {
+     *   return css`:host { display: block; }`;
+     * }
+     * ```
+     */
+    function styles() {
+        return function (originalMethod, context) {
+            context.addInitializer(function () {
+                // Store the styles method
+                this[STYLES_METHOD] = originalMethod;
+            });
+            return originalMethod;
+        };
+    }
+    /**
+     * Apply styles to an element
+     * Called during element initialization
+     */
+    function applyStyles(element) {
+        const stylesMethod = element[STYLES_METHOD];
+        if (!stylesMethod)
+            return;
+        // Only apply once
+        if (element[STYLES_APPLIED])
+            return;
+        element[STYLES_APPLIED] = true;
+        try {
+            const result = stylesMethod.call(element);
+            if (!isCSSResult(result)) {
+                console.warn('Styles method must return css`` template result');
+                return;
+            }
+            // Ensure shadow root exists
+            if (!element.shadowRoot) {
+                element.attachShadow({ mode: 'open' });
+            }
+            // Create base styles for meta elements (if, case)
+            const baseStyleSheet = new CSSStyleSheet();
+            baseStyleSheet.replaceSync('if, case { display: contents; }');
+            // Try to use constructable stylesheets for better performance
+            if (element.shadowRoot && result.styleSheet && 'adoptedStyleSheets' in element.shadowRoot) {
+                element.shadowRoot.adoptedStyleSheets = [baseStyleSheet, result.styleSheet];
+            }
+            else if (element.shadowRoot) {
+                // Fallback to <style> tag
+                const style = document.createElement('style');
+                style.textContent = 'if, case { display: contents; }\n' + result.cssText;
+                element.shadowRoot.appendChild(style);
+            }
+        }
+        catch (error) {
+            console.error('Error applying styles:', error);
+        }
+    }
+
     /**
      * Applies core element functionality to a constructor
      * This is shared between @element and @page decorators
@@ -1458,6 +2916,9 @@ var Snice = (function (exports) {
             enumerable: true,
             configurable: true
         });
+        // Note: rendered promise is stored via symbols RENDERED_PROMISE and RENDERED_RESOLVE
+        // It's not exposed as a public property - only accessible via test utilities
+        // This prevents accidental misuse in production code
         // Add controller property
         Object.defineProperty(constructor.prototype, 'controller', {
             get() {
@@ -1495,6 +2956,7 @@ var Snice = (function (exports) {
                 // Re-establish handlers that get cleaned up on disconnect
                 setupEventHandlers(this, this);
                 setupResponseHandlers(this, this);
+                setupContextHandler(this);
                 // Re-establish observers that get cleaned up on disconnect
                 try {
                     setupObservers(this, this);
@@ -1509,6 +2971,9 @@ var Snice = (function (exports) {
                 return;
             }
             try {
+                // Mark that properties are being initialized from attributes
+                // This allows property setters to work during initialization
+                this[PROPERTIES_INITIALIZED] = true;
                 // Initialize properties from attributes before rendering
                 const properties = constructor[PROPERTIES];
                 if (properties) {
@@ -1527,82 +2992,69 @@ var Snice = (function (exports) {
                         }
                     }
                 }
-                // Mark that properties have been initialized
-                this[PROPERTIES_INITIALIZED] = true;
+                // Apply any properties that were set before element was connected
+                // BUT only if they don't have an HTML attribute (don't override HTML attributes)
+                if (this[PRE_INIT_PROPERTY_VALUES]) {
+                    for (const [propName, propValue] of this[PRE_INIT_PROPERTY_VALUES]) {
+                        // Remove from map first so getter doesn't return it during setter call
+                        this[PRE_INIT_PROPERTY_VALUES].delete(propName);
+                        // Only apply pre-init value if NO HTML attribute exists
+                        // This prevents field initializers from overwriting HTML attributes
+                        const propOptions = properties?.get(propName);
+                        const attributeName = typeof propOptions?.attribute === 'string' ? propOptions.attribute : propName.toLowerCase();
+                        if (!this.hasAttribute(attributeName)) {
+                            this[propName] = propValue;
+                        }
+                    }
+                    // Clear the pre-init values map
+                    delete this[PRE_INIT_PROPERTY_VALUES];
+                }
                 // Properties are now stateless and read from DOM attributes only
                 // Initial values are not automatically reflected
-                // Create shadow root if it doesn't exist
-                if (!this.shadowRoot) {
-                    this.attachShadow({ mode: 'open' });
-                }
-                // Build the shadow DOM content
-                let shadowContent = '';
-                // Add HTML first (maintaining original order)
-                if (this.html) {
-                    try {
-                        const htmlResult = this.html();
-                        // Handle both async and sync html
-                        const htmlContent = htmlResult instanceof Promise ? await htmlResult : htmlResult;
-                        if (htmlContent !== undefined) {
-                            shadowContent += htmlContent;
+                // v3.0.0: Apply @styles decorator if present
+                // This creates the shadow root and applies styles
+                applyStyles(this);
+                // v3.0.0: Perform initial @render if present
+                // This uses differential rendering with template system
+                // Defer initial render to next microtask to allow property bindings
+                // from parent to be set first (avoids infinite loops in nested elements)
+                if (this[RENDER_METHOD]) {
+                    queueMicrotask(() => {
+                        requestRender(this, true);
+                        // Setup observers after first render completes so shadow DOM content exists
+                        try {
+                            setupObservers(this, this);
                         }
-                    }
-                    catch (error) {
-                        console.error(`Error in html() method for ${this.tagName}:`, error);
-                    }
+                        catch (error) {
+                            console.error(`Error setting up observers for ${this.tagName}:`, error);
+                        }
+                        // Mark element as ready after initial render completes
+                        if (this[READY_RESOLVE]) {
+                            this[READY_RESOLVE]();
+                            this[READY_RESOLVE] = null;
+                        }
+                    });
                 }
-                // Add CSS after HTML (maintaining original order)
-                if (this.css) {
+                else {
+                    // No render method, setup observers immediately
                     try {
-                        const cssResult = this.css();
-                        // Handle both async and sync css
-                        const cssResolved = cssResult instanceof Promise ? await cssResult : cssResult;
-                        if (cssResolved) {
-                            // Handle both string and array of strings
-                            const cssContent = Array.isArray(cssResolved) ? cssResolved.join('\n') : cssResolved;
-                            // No need for scoping with Shadow DOM, but add data attribute for compatibility
-                            shadowContent += `<style data-component-css>${cssContent}</style>`;
-                        }
+                        setupObservers(this, this);
                     }
                     catch (error) {
-                        console.error(`Error in css() method for ${this.tagName}:`, error);
+                        console.error(`Error setting up observers for ${this.tagName}:`, error);
                     }
-                }
-                // Set shadow DOM content
-                if (shadowContent) {
-                    this.shadowRoot.innerHTML = shadowContent;
-                }
-                // Render all @part methods into their corresponding elements
-                const parts = constructor[PARTS];
-                if (parts && this.shadowRoot) {
-                    for (const [partName, partHandler] of parts) {
-                        try {
-                            const partElement = this.shadowRoot.querySelector(`[part="${partName}"]`);
-                            if (partElement) {
-                                // For initial render, call original method directly to avoid timing restrictions
-                                const partResult = partHandler.method.call(this);
-                                const partContent = partResult instanceof Promise ? await partResult : partResult;
-                                if (partContent !== undefined) {
-                                    partElement.innerHTML = partContent;
-                                }
-                            }
-                        }
-                        catch (error) {
-                            console.error(`Error rendering @part('${partName}') in ${this.tagName}:`, error);
-                        }
+                    // Mark element as ready immediately if no render method
+                    if (this[READY_RESOLVE]) {
+                        this[READY_RESOLVE]();
+                        this[READY_RESOLVE] = null;
                     }
                 }
-                // Setup @on event handlers - use element for host events, shadow root for delegated events
+                // Setup @on event handlers (v2.5.4 compatibility restored!)
                 setupEventHandlers(this, this);
                 // Setup @respond handlers for elements
                 setupResponseHandlers(this, this);
-                // Setup @observe observers
-                try {
-                    setupObservers(this, this);
-                }
-                catch (error) {
-                    console.error(`Error setting up observers for ${this.tagName}:`, error);
-                }
+                // Setup @context handler for elements
+                setupContextHandler(this);
                 // Mark as initialized
                 this[INITIALIZED] = true;
                 // NOW call the original user-defined connectedCallback after shadow DOM is set up
@@ -1611,11 +3063,8 @@ var Snice = (function (exports) {
                 }
             }
             finally {
-                // Always mark element as ready, even if there were errors
-                if (this[READY_RESOLVE]) {
-                    this[READY_RESOLVE]();
-                    this[READY_RESOLVE] = null; // Clear the resolver
-                }
+                // Ready is now resolved inside the render microtask (or immediately if no render)
+                // This ensures ready waits for initial render to complete
             }
             // Call @ready handlers after everything is set up and ready promise is resolved
             const readyHandlers = constructor[READY_HANDLERS];
@@ -1652,10 +3101,12 @@ var Snice = (function (exports) {
                     console.error(`Failed to detach controller:`, error);
                 });
             }
-            // Cleanup @on event handlers
+            // Cleanup @on event handlers (v2.5.4 compatibility restored!)
             cleanupEventHandlers(this);
             // Cleanup @respond handlers
             cleanupResponseHandlers(this);
+            // Cleanup @context handler
+            cleanupContextHandler(this);
             // Cleanup @observe observers
             cleanupObservers(this);
         };
@@ -1718,6 +3169,10 @@ var Snice = (function (exports) {
                                             }
                                         }
                                     }
+                                    // Trigger auto-render on attribute change (same as property setter)
+                                    if (this[RENDER_METHOD] && this[INITIALIZED]) {
+                                        requestRender(this);
+                                    }
                                 }
                             }
                             break;
@@ -1757,7 +3212,7 @@ var Snice = (function (exports) {
             }
         };
     }
-    function element(tagName) {
+    function element(tagName, options) {
         return function (constructor, context) {
             // Transfer metadata from context to constructor
             if (context.metadata && context.metadata[PROPERTIES]) {
@@ -1768,6 +3223,11 @@ var Snice = (function (exports) {
                     constructor[PROPERTIES].set(key, value);
                 }
             }
+            // Set up form association if requested via options
+            // MUST be done BEFORE applyElementFunctionality and customElements.define
+            if (options?.formAssociated === true) {
+                constructor.formAssociated = true;
+            }
             applyElementFunctionality(constructor);
             customElements.define(tagName, constructor);
             return constructor;
@@ -1823,29 +3283,43 @@ var Snice = (function (exports) {
                             if (attrValue !== null) {
                                 return parseAttributeValue(attrValue, finalOptions || {}, undefined, initialValue);
                             }
-                            // For Boolean properties that have been explicitly set via attribute,
+                            // For Boolean properties that have been explicitly set via attribute (and then removed),
                             // follow HTML boolean attribute semantics (absence = false)
                             const inferredType = finalOptions?.type || detectType(initialValue);
                             if (inferredType === Boolean && this[EXPLICITLY_SET_PROPERTIES]?.has(propertyKey)) {
                                 return false;
                             }
-                            // Otherwise return initial value
+                            // Check for pre-init property values (set before element was connected)
+                            if (this[PRE_INIT_PROPERTY_VALUES]?.has(propertyKey)) {
+                                return this[PRE_INIT_PROPERTY_VALUES].get(propertyKey);
+                            }
+                            // Otherwise return initial value (respects default values like showRememberMe = true)
                             return initialValue;
                         },
                         set(newValue) {
-                            // Get old value from stored state for change detection
-                            if (!this[PROPERTY_VALUES]) {
-                                this[PROPERTY_VALUES] = {};
-                            }
-                            const oldValue = this[PROPERTY_VALUES][propertyKey];
+                            // Get old value by calling the getter (which reads from attribute)
+                            const oldValue = this[propertyKey];
                             // Check if value actually changed
                             if (oldValue === newValue)
                                 return;
-                            // Update stored value
-                            this[PROPERTY_VALUES][propertyKey] = newValue;
-                            // Always reflect to DOM - properties are always backed by attributes
+                            // Don't reflect to DOM until connectedCallback has started
+                            // This prevents field initializers from overwriting HTML attributes
+                            if (!this[PROPERTIES_INITIALIZED]) {
+                                // Store value for later application when element is connected
+                                if (!this[PRE_INIT_PROPERTY_VALUES]) {
+                                    this[PRE_INIT_PROPERTY_VALUES] = new Map();
+                                }
+                                this[PRE_INIT_PROPERTY_VALUES].set(propertyKey, newValue);
+                                return;
+                            }
+                            // Reflect to DOM - properties are backed by attributes
                             const attributeName = typeof finalOptions.attribute === 'string' ? finalOptions.attribute : propertyKey.toLowerCase();
                             const attributeValue = valueToAttribute(newValue, finalOptions, initialValue);
+                            // Mark as explicitly set for boolean handling
+                            if (!this[EXPLICITLY_SET_PROPERTIES]) {
+                                this[EXPLICITLY_SET_PROPERTIES] = new Set();
+                            }
+                            this[EXPLICITLY_SET_PROPERTIES].add(propertyKey);
                             // Flag to prevent attributeChangedCallback from triggering watchers for this change
                             if (!this._settingFromProperty)
                                 this._settingFromProperty = new Set();
@@ -1887,8 +3361,12 @@ var Snice = (function (exports) {
                                     }
                                 }
                             }
-                            if (this.requestUpdate) {
-                                this.requestUpdate(propertyKey, oldValue);
+                            // v3.0.0: Trigger auto-render on property change
+                            // This respects @render options (debounce, throttle, once, sync)
+                            // Only trigger renders after element is fully initialized to avoid
+                            // infinite loops during initial setup
+                            if (this[RENDER_METHOD] && this[INITIALIZED]) {
+                                requestRender(this);
                             }
                         },
                         configurable: true,
@@ -1983,12 +3461,15 @@ var Snice = (function (exports) {
     function watch(...propertyNames) {
         return function (target, context) {
             const methodName = context.name;
+            const initKey = `__watch_init_${methodName}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
                 if (!constructor[PROPERTY_WATCHERS]) {
                     constructor[PROPERTY_WATCHERS] = new Map();
                 }
-                // Store the watcher method for each property
                 for (const propertyName of propertyNames) {
                     if (!constructor[PROPERTY_WATCHERS].has(propertyName)) {
                         constructor[PROPERTY_WATCHERS].set(propertyName, []);
@@ -2067,8 +3548,12 @@ var Snice = (function (exports) {
     function ready() {
         return function (target, context) {
             const methodName = context.name;
+            const initKey = `__ready_init_${methodName}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
                 if (!constructor[READY_HANDLERS]) {
                     constructor[READY_HANDLERS] = [];
                 }
@@ -2086,8 +3571,12 @@ var Snice = (function (exports) {
     function dispose() {
         return function (target, context) {
             const methodName = context.name;
+            const initKey = `__dispose_init_${methodName}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
                 if (!constructor[DISPOSE_HANDLERS]) {
                     constructor[DISPOSE_HANDLERS] = [];
                 }
@@ -2105,8 +3594,12 @@ var Snice = (function (exports) {
     function moved(options = {}) {
         return function (originalMethod, context) {
             const methodName = context.name;
+            const initKey = `__moved_init_${methodName}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
+                if (constructor[initKey])
+                    return;
+                constructor[initKey] = true;
                 if (!constructor[MOVED_HANDLERS]) {
                     constructor[MOVED_HANDLERS] = [];
                 }
@@ -2191,102 +3684,20 @@ var Snice = (function (exports) {
             return function (...args) {
                 // Initialize timers storage if not present
                 if (!this[ADOPTED_TIMERS]) {
-                    this[ADOPTED_TIMERS] = new Map();
-                }
-                // Get or create timers for this specific method
-                if (!this[ADOPTED_TIMERS].has(methodName)) {
-                    this[ADOPTED_TIMERS].set(methodName, {
-                        throttleTimer: null,
-                        debounceTimer: null,
-                        lastThrottleCall: 0
-                    });
-                }
-                const timers = this[ADOPTED_TIMERS].get(methodName);
-                // Helper function to execute method
-                const executeMethod = (...methodArgs) => {
-                    return originalMethod.apply(this, methodArgs);
-                };
-                const hasDebounce = options.debounce !== undefined && options.debounce > 0;
-                const hasThrottle = options.throttle !== undefined && options.throttle > 0;
-                // Handle timing based on priority: debounce > throttle > immediate
-                switch (true) {
-                    case hasDebounce: {
-                        clearTimeout(timers.debounceTimer);
-                        timers.debounceTimer = setTimeout(() => executeMethod(...args), options.debounce);
-                        return undefined;
-                    }
-                    case hasThrottle: {
-                        const throttleMs = options.throttle;
-                        const now = Date.now();
-                        const canExecuteImmediately = timers.lastThrottleCall === 0 || now - timers.lastThrottleCall >= throttleMs;
-                        if (canExecuteImmediately) {
-                            timers.lastThrottleCall = now;
-                            return executeMethod(...args);
-                        }
-                        const hasScheduledTimer = !!timers.throttleTimer;
-                        if (!hasScheduledTimer) {
-                            const remainingTime = throttleMs - (now - timers.lastThrottleCall);
-                            timers.throttleTimer = setTimeout(() => {
-                                timers.throttleTimer = null;
-                                timers.lastThrottleCall = Date.now();
-                                executeMethod(...args);
-                            }, remainingTime);
-                        }
-                        return undefined;
-                    }
-                    default:
-                        return executeMethod(...args);
-                }
-            };
-        };
-    }
-    /**
-     * Decorator for methods that render specific parts of the template
-     * Parts are identified by the 'part' attribute in the HTML template
-     * When the decorated method is called, it automatically re-renders its part
-     */
-    function part(partName, options = {}) {
-        return function (originalMethod, context) {
-            const methodName = context.name;
-            context.addInitializer(function () {
-                const constructor = this.constructor;
-                if (!constructor[PARTS]) {
-                    constructor[PARTS] = new Map();
-                }
-                constructor[PARTS].set(partName, {
-                    methodName,
-                    method: originalMethod
-                });
-            });
-            // Return wrapped method that automatically re-renders the part when called
-            return function (...args) {
-                // Initialize timers storage if not present
-                if (!this[PART_TIMERS]) {
-                    this[PART_TIMERS] = new Map();
+                    this[ADOPTED_TIMERS] = new Map();
                 }
-                // Get or create timers for this specific part
-                if (!this[PART_TIMERS].has(partName)) {
-                    this[PART_TIMERS].set(partName, {
+                // Get or create timers for this specific method
+                if (!this[ADOPTED_TIMERS].has(methodName)) {
+                    this[ADOPTED_TIMERS].set(methodName, {
                         throttleTimer: null,
                         debounceTimer: null,
                         lastThrottleCall: 0
                     });
                 }
-                const timers = this[PART_TIMERS].get(partName);
-                // Helper function to execute method and update DOM
-                const executeAndUpdate = (...methodArgs) => {
-                    const result = originalMethod.apply(this, methodArgs);
-                    const updateDOM = (content) => {
-                        const hasContent = content !== undefined;
-                        const hasElement = this.shadowRoot?.querySelector(`[part="${partName}"]`);
-                        if (hasContent && hasElement) {
-                            hasElement.innerHTML = content;
-                        }
-                    };
-                    const isPromise = result instanceof Promise;
-                    return isPromise
-                        ? result.then(content => { updateDOM(content); return content; })
-                        : (updateDOM(result), result);
+                const timers = this[ADOPTED_TIMERS].get(methodName);
+                // Helper function to execute method
+                const executeMethod = (...methodArgs) => {
+                    return originalMethod.apply(this, methodArgs);
                 };
                 const hasDebounce = options.debounce !== undefined && options.debounce > 0;
                 const hasThrottle = options.throttle !== undefined && options.throttle > 0;
@@ -2294,7 +3705,7 @@ var Snice = (function (exports) {
                 switch (true) {
                     case hasDebounce: {
                         clearTimeout(timers.debounceTimer);
-                        timers.debounceTimer = setTimeout(() => executeAndUpdate(...args), options.debounce);
+                        timers.debounceTimer = setTimeout(() => executeMethod(...args), options.debounce);
                         return undefined;
                     }
                     case hasThrottle: {
@@ -2303,7 +3714,7 @@ var Snice = (function (exports) {
                         const canExecuteImmediately = timers.lastThrottleCall === 0 || now - timers.lastThrottleCall >= throttleMs;
                         if (canExecuteImmediately) {
                             timers.lastThrottleCall = now;
-                            return executeAndUpdate(...args);
+                            return executeMethod(...args);
                         }
                         const hasScheduledTimer = !!timers.throttleTimer;
                         if (!hasScheduledTimer) {
@@ -2311,17 +3722,19 @@ var Snice = (function (exports) {
                             timers.throttleTimer = setTimeout(() => {
                                 timers.throttleTimer = null;
                                 timers.lastThrottleCall = Date.now();
-                                executeAndUpdate(...args);
+                                executeMethod(...args);
                             }, remainingTime);
                         }
                         return undefined;
                     }
                     default:
-                        return executeAndUpdate(...args);
+                        return executeMethod(...args);
                 }
             };
         };
     }
+    // @part decorator removed in v3.0.0
+    // Use @render with differential rendering instead
 
     /*!
      * pica-route v1.1.2
@@ -3072,6 +4485,8 @@ var Snice = (function (exports) {
         let currentLayoutName = null; // Track current layout name
         let currentLayoutTimestamp = null; // Track current layout timestamp
         const context = options.context || {}; // Store context for guards
+        // Create Context instance for managing router state
+        const navigationContext = new Context(context, [], '', {});
         function getCurrentLayoutElement(target) {
             const noCurrentLayout = !currentLayoutName || !currentLayoutTimestamp;
             if (noCurrentLayout) {
@@ -3109,33 +4524,19 @@ var Snice = (function (exports) {
                 // Extend the connectedCallback to add router-specific functionality
                 const elementConnectedCallback = constructor.prototype.connectedCallback;
                 constructor.prototype.connectedCallback = function () {
+                    // Store the Context instance for @context decorated methods to access
+                    this[CONTEXT_HANDLER] = navigationContext;
                     // Call the element's connectedCallback first
                     elementConnectedCallback?.call(this);
-                    // Setup context request handler for nested elements
-                    const contextRequestHandler = (event) => {
-                        // Only respond if this element has context
-                        if (this[ROUTER_CONTEXT] !== undefined) {
-                            event.detail.context = this[ROUTER_CONTEXT];
-                            event.stopPropagation(); // Stop bubbling once context is provided
-                        }
-                    };
-                    this.addEventListener('@context/request', contextRequestHandler);
-                    // Store handler for cleanup
-                    this[CONTEXT_REQUEST_HANDLER] = contextRequestHandler;
                 };
                 // Extend the disconnectedCallback to clean up router-specific stuff
                 const elementDisconnectedCallback = constructor.prototype.disconnectedCallback;
                 constructor.prototype.disconnectedCallback = function () {
                     // Call element's disconnectedCallback first
                     elementDisconnectedCallback?.call(this);
-                    // Clean up context request handler
-                    const handler = this[CONTEXT_REQUEST_HANDLER];
-                    if (handler) {
-                        this.removeEventListener('@context/request', handler);
-                        delete this[CONTEXT_REQUEST_HANDLER];
-                    }
-                    // Clean up context reference
+                    // Clean up context references
                     delete this[ROUTER_CONTEXT];
+                    delete this[CONTEXT_HANDLER];
                 };
                 // Define the custom element
                 customElements.define(pageOptions.tag, constructor);
@@ -3194,8 +4595,8 @@ var Snice = (function (exports) {
          * initialize();
          */
         function initialize() {
-            const targetExists = !!document.querySelector(options.target);
-            if (!targetExists) {
+            const target = document.querySelector(options.target);
+            if (!target) {
                 throw new Error(`Target element not found: ${options.target}`);
             }
             const needsSorting = !is_sorted;
@@ -3219,6 +4620,10 @@ var Snice = (function (exports) {
                     : placard;
             });
         }
+        function emitContextUpdate(target, currentPath, routeParams) {
+            // Update the navigation context and notify all registered elements
+            navigationContext.update(context, placards, currentPath, routeParams);
+        }
         function updateLayout(layoutElement, currentPath, routeParams) {
             // Check if layout implements the update method
             if (typeof layoutElement.update === 'function') {
@@ -3301,6 +4706,7 @@ var Snice = (function (exports) {
                 }
                 const newPageElement = document.createElement(route.tag);
                 newPageElement[ROUTER_CONTEXT] = context;
+                newPageElement[CONTEXT_HANDLER] = navigationContext;
                 const routeParams = params;
                 Object.keys(routeParams).forEach(key => newPageElement.setAttribute(key, routeParams[key]));
                 return { result: RouteResult.SUCCESS, element: newPageElement, transition: route.transition, layout: route.layout, routeParams };
@@ -3391,7 +4797,7 @@ var Snice = (function (exports) {
             // Collect fresh placards before navigation
             collectPlacards();
             window.scrollTo(0, 0);
-            const isHomePath = (path.trim() === '' || path === '/') && !!home;
+            const isHomePath = (path?.trim() === '' || path === '/') && !!home;
             if (isHomePath) {
                 const homeRoute = routes.find(r => r.route.match('/'));
                 const guardsAllowed = checkGuards(homeRoute?.guards, {}, target);
@@ -3405,11 +4811,15 @@ var Snice = (function (exports) {
                 const hasLayout = layoutElement !== null || getCurrentLayoutElement(target) !== null;
                 if (hasLayout) {
                     await renderWithLayout(target, element, finalTransition, layoutElement, needsNewLayout, path, {});
+                    emitContextUpdate(target, path, {});
                     return;
                 }
                 await renderDirect(target, element, finalTransition);
+                emitContextUpdate(target, path, {});
                 return;
             }
+            if (!path)
+                return;
             const routeResult = resolveRoute(path, target);
             const isGuardsFailed = routeResult.result === RouteResult.GUARDS_FAILED;
             if (isGuardsFailed) {
@@ -3424,9 +4834,11 @@ var Snice = (function (exports) {
                 const hasLayout = layoutElement !== null || getCurrentLayoutElement(target) !== null;
                 if (hasLayout) {
                     await renderWithLayout(target, element, finalTransition, layoutElement, needsNewLayout, path, routeParams);
+                    emitContextUpdate(target, path, routeParams);
                     return;
                 }
                 await renderDirect(target, element, finalTransition);
+                emitContextUpdate(target, path, routeParams);
                 return;
             }
             const { element, transition, layout } = create404Element();
@@ -3436,9 +4848,11 @@ var Snice = (function (exports) {
             const hasLayout = layoutElement !== null || getCurrentLayoutElement(target) !== null;
             if (hasLayout) {
                 await renderWithLayout(target, element, finalTransition, layoutElement, needsNewLayout, path, {});
+                emitContextUpdate(target, path, {});
                 return;
             }
             await renderDirect(target, element, finalTransition);
+            emitContextUpdate(target, path, {});
         }
         async function performTransition$1(container, oldElement, newElement, transition) {
             return performTransition(container, oldElement, newElement, transition);
@@ -3451,29 +4865,599 @@ var Snice = (function (exports) {
         };
     }
 
+    // @on decorator removed in v3.0.0 - use template event syntax instead: @click=${handler}
+    /**
+     * Decorator that automatically dispatches a custom event after a method is called.
+     * The return value of the method becomes the event detail.
+     *
+     * @param eventName The name of the event to dispatch
+     * @param options Optional configuration extending EventInit
+     */
+    function dispatch(eventName, options) {
+        return function (originalMethod, _context) {
+            return function (...args) {
+                // Create timing wrappers for dispatch (per-instance)
+                if (!this[DISPATCH_TIMERS]) {
+                    this[DISPATCH_TIMERS] = new Map();
+                }
+                const timerKey = `${eventName}_${_context.name}`;
+                if (!this[DISPATCH_TIMERS].has(timerKey)) {
+                    this[DISPATCH_TIMERS].set(timerKey, {
+                        debounceTimeout: null,
+                        throttleLastCall: 0,
+                        throttleTimeout: null
+                    });
+                }
+                const timers = this[DISPATCH_TIMERS].get(timerKey);
+                // Call the original method with preserved this context
+                const result = originalMethod.apply(this, args);
+                // Helper to dispatch the event
+                const doDispatch = (detail) => {
+                    // Skip dispatch if result is undefined and dispatchOnUndefined is false
+                    if (detail === undefined && options?.dispatchOnUndefined === false) {
+                        return;
+                    }
+                    // Create event with spread operator for options
+                    const event = new CustomEvent(eventName, {
+                        bubbles: true, // Default to true for component events
+                        composed: true, // Allow crossing shadow DOM boundaries
+                        ...options, // Spread all EventInit options
+                        detail
+                    });
+                    this.dispatchEvent(event);
+                };
+                // Helper to handle timed dispatch
+                const timedDispatch = (detail) => {
+                    if (options?.debounce) {
+                        clearTimeout(timers.debounceTimeout);
+                        timers.debounceTimeout = setTimeout(() => doDispatch(detail), options.debounce);
+                    }
+                    else if (options?.throttle) {
+                        const now = Date.now();
+                        const remaining = options.throttle - (now - timers.throttleLastCall);
+                        if (remaining <= 0) {
+                            clearTimeout(timers.throttleTimeout);
+                            timers.throttleLastCall = now;
+                            doDispatch(detail);
+                        }
+                        else if (!timers.throttleTimeout) {
+                            timers.throttleTimeout = setTimeout(() => {
+                                timers.throttleLastCall = Date.now();
+                                timers.throttleTimeout = null;
+                                doDispatch(detail);
+                            }, remaining);
+                        }
+                    }
+                    else {
+                        doDispatch(detail);
+                    }
+                };
+                // Handle async methods
+                if (result instanceof Promise) {
+                    return result.then((resolvedResult) => {
+                        timedDispatch(resolvedResult);
+                        return resolvedResult;
+                    });
+                }
+                // Sync method
+                timedDispatch(result);
+                return result;
+            };
+        };
+    }
+
+    /**
+     * Custom element readiness utilities
+     * Handles waiting for custom elements to be defined with timeout warnings
+     */
+    /**
+     * Global flag to disable custom element readiness timeout warnings
+     * Set this to true in environments where slow element registration is expected
+     */
+    let DISABLE_ELEMENT_READY_WARNINGS = false;
+    /**
+     * Set whether to disable custom element readiness timeout warnings
+     */
+    function setDisableElementReadyWarnings(value) {
+        DISABLE_ELEMENT_READY_WARNINGS = value;
+    }
+    /**
+     * Default timeout for custom element registration warning (500ms)
+     */
+    const DEFAULT_WARNING_TIMEOUT = 500;
+    /**
+     * Wait for a custom element to be defined
+     * Logs a warning if it takes longer than the warning timeout
+     *
+     * @param tagName - The custom element tag name
+     * @param warningTimeout - Time in ms before warning (default 500ms)
+     * @returns Promise that resolves when element is defined
+     */
+    async function waitForElementDefined(tagName, warningTimeout = DEFAULT_WARNING_TIMEOUT) {
+        // If already defined, return immediately
+        if (customElements.get(tagName)) {
+            return;
+        }
+        // Set up warning timer if not disabled
+        let warningTimer = null;
+        if (!DISABLE_ELEMENT_READY_WARNINGS) {
+            warningTimer = setTimeout(() => {
+                console.warn(`Custom element <${tagName}> is taking longer than ${warningTimeout}ms to register. ` +
+                    `This may indicate a missing import or circular dependency. ` +
+                    `Set DISABLE_ELEMENT_READY_WARNINGS=true to disable this warning.`);
+            }, warningTimeout);
+        }
+        try {
+            // Wait for element to be defined
+            await customElements.whenDefined(tagName);
+        }
+        finally {
+            // Clear warning timer
+            if (warningTimer) {
+                clearTimeout(warningTimer);
+            }
+        }
+    }
+    /**
+     * Wait for a custom element to be defined and ready
+     * First waits for the element to be registered, then waits for its ready promise
+     *
+     * @param element - The custom element instance
+     * @param warningTimeout - Time in ms before warning about registration (default 500ms)
+     * @returns Promise that resolves when element is defined and ready
+     */
+    async function waitForElementReady(element, warningTimeout = DEFAULT_WARNING_TIMEOUT) {
+        const tagName = element.tagName.toLowerCase();
+        // Wait for element to be defined
+        await waitForElementDefined(tagName, warningTimeout);
+        // Wait for element's ready promise if it exists
+        if ('ready' in element && typeof element.ready?.then === 'function') {
+            await element.ready;
+        }
+    }
+    /**
+     * Process all custom elements in a node tree and wait for them to be ready
+     * This is useful after inserting a template with custom elements
+     *
+     * @param node - The root node to scan for custom elements
+     * @param warningTimeout - Time in ms before warning about registration (default 500ms)
+     * @returns Promise that resolves when all custom elements are ready
+     */
+    async function waitForAllCustomElements(node, warningTimeout = DEFAULT_WARNING_TIMEOUT) {
+        const customElements = [];
+        // Find all custom elements (tag names with hyphens)
+        if (node instanceof Element) {
+            if (node.tagName.includes('-')) {
+                customElements.push(node);
+            }
+            // Also check in shadow DOM
+            if (node.shadowRoot) {
+                const shadowCustomElements = node.shadowRoot.querySelectorAll('*');
+                shadowCustomElements.forEach(el => {
+                    if (el.tagName.includes('-')) {
+                        customElements.push(el);
+                    }
+                });
+            }
+        }
+        // If it's a DocumentFragment, check all children
+        if (node instanceof DocumentFragment) {
+            const elements = node.querySelectorAll('*');
+            elements.forEach(el => {
+                if (el.tagName.includes('-')) {
+                    customElements.push(el);
+                }
+            });
+        }
+        // Wait for all custom elements to be ready
+        await Promise.all(customElements.map(el => waitForElementReady(el, warningTimeout)));
+    }
+
+    /**
+     * Render debugging utilities for Snice v3.0.0
+     * For testing and debugging only - not recommended for production use
+     */
+    /**
+     * Track renders of an element using an async generator
+     * Each call to tracker.next() waits for the next render to complete
+     *
+     * @example
+     * ```typescript
+     * const tracker = trackRenders(element);
+     *
+     * element.someProp = 'new value';
+     * await tracker.next(); // Waits for render
+     * // DOM is now updated
+     *
+     * element.someProp = 'another value';
+     * await tracker.next(); // Waits for next render
+     * // DOM is updated again
+     * ```
+     *
+     * WARNING: For testing/debugging only!
+     * - Do not use in production code
+     * - The generator yields indefinitely - use it only in controlled test environments
+     * - Each yield waits for the next render event
+     */
+    async function* trackRenders(element) {
+        while (true) {
+            await new Promise(resolve => {
+                if (!element[RENDER_CALLBACKS]) {
+                    element[RENDER_CALLBACKS] = [];
+                }
+                element[RENDER_CALLBACKS].push(resolve);
+            });
+            yield;
+        }
+    }
+
+    /**
+     * Method decorators for common patterns
+     * @debounce, @throttle, @once, @memoize
+     */
+    const DEBOUNCE_TIMERS = getSymbol('debounce-timers');
+    const THROTTLE_TIMERS = getSymbol('throttle-timers');
+    const ONCE_CALLED = getSymbol('once-called');
+    const MEMOIZE_CACHE = getSymbol('memoize-cache');
+    /**
+     * @debounce decorator - delays function execution until after wait time has elapsed
+     * since the last invocation
+     *
+     * @param wait - Time to wait in milliseconds (default: 300)
+     * @param options - Debounce options
+     * @param options.leading - Invoke on the leading edge (default: false)
+     * @param options.trailing - Invoke on the trailing edge (default: true)
+     * @param options.maxWait - Maximum time to wait before invoking (default: undefined)
+     *
+     * @example
+     * ```typescript
+     * @element('search-input')
+     * class SearchInput extends HTMLElement {
+     *   @debounce(500)
+     *   handleSearch(query: string) {
+     *     // Only called 500ms after last keystroke
+     *     fetch(`/api/search?q=${query}`);
+     *   }
+     * }
+     * ```
+     */
+    function debounce(wait = 300, options = {}) {
+        const { leading = false, trailing = true, maxWait } = options;
+        return function (originalMethod, context) {
+            const methodName = context.name;
+            return function (...args) {
+                if (!this[DEBOUNCE_TIMERS]) {
+                    this[DEBOUNCE_TIMERS] = {};
+                }
+                const timers = this[DEBOUNCE_TIMERS];
+                const timerKey = methodName;
+                // Clear existing timer
+                if (timers[timerKey]) {
+                    clearTimeout(timers[timerKey].timeout);
+                }
+                // Track when debounce started for maxWait
+                const now = Date.now();
+                const isFirstCall = !timers[timerKey];
+                const startTime = isFirstCall ? now : timers[timerKey].startTime;
+                // Check if maxWait exceeded
+                const shouldInvokeFromMaxWait = maxWait !== undefined && now - startTime >= maxWait;
+                // Leading edge invocation
+                if (leading && isFirstCall) {
+                    const result = originalMethod.apply(this, args);
+                    timers[timerKey] = {
+                        timeout: null,
+                        startTime,
+                        lastArgs: args,
+                    };
+                    return result;
+                }
+                // Set new timer for trailing edge
+                const timeout = setTimeout(() => {
+                    if (trailing || shouldInvokeFromMaxWait) {
+                        originalMethod.apply(this, timers[timerKey].lastArgs);
+                    }
+                    delete timers[timerKey];
+                }, shouldInvokeFromMaxWait ? 0 : wait);
+                timers[timerKey] = {
+                    timeout,
+                    startTime,
+                    lastArgs: args,
+                };
+            };
+        };
+    }
+    /**
+     * @throttle decorator - ensures function is called at most once per specified time period
+     *
+     * @param wait - Time to wait in milliseconds (default: 300)
+     * @param options - Throttle options
+     * @param options.leading - Invoke on the leading edge (default: true)
+     * @param options.trailing - Invoke on the trailing edge (default: true)
+     *
+     * @example
+     * ```typescript
+     * @element('scroll-tracker')
+     * class ScrollTracker extends HTMLElement {
+     *   @throttle(100)
+     *   handleScroll(e: Event) {
+     *     // Called at most once every 100ms
+     *     this.updateScrollPosition();
+     *   }
+     * }
+     * ```
+     */
+    function throttle(wait = 300, options = {}) {
+        const { leading = true, trailing = true } = options;
+        return function (originalMethod, context) {
+            const methodName = context.name;
+            return function (...args) {
+                if (!this[THROTTLE_TIMERS]) {
+                    this[THROTTLE_TIMERS] = {};
+                }
+                const timers = this[THROTTLE_TIMERS];
+                const timerKey = methodName;
+                const now = Date.now();
+                if (!timers[timerKey]) {
+                    // First call
+                    if (leading) {
+                        originalMethod.apply(this, args);
+                    }
+                    timers[timerKey] = {
+                        lastInvoke: now,
+                        timeout: null,
+                        lastArgs: args,
+                    };
+                    if (trailing && !leading) {
+                        // If no leading edge, set up trailing
+                        timers[timerKey].timeout = setTimeout(() => {
+                            originalMethod.apply(this, timers[timerKey].lastArgs);
+                            delete timers[timerKey];
+                        }, wait);
+                    }
+                }
+                else {
+                    // Subsequent calls
+                    const timeSinceLastInvoke = now - timers[timerKey].lastInvoke;
+                    // Update last args
+                    timers[timerKey].lastArgs = args;
+                    // Clear any pending trailing call
+                    if (timers[timerKey].timeout) {
+                        clearTimeout(timers[timerKey].timeout);
+                    }
+                    if (timeSinceLastInvoke >= wait) {
+                        // Enough time has passed, invoke immediately
+                        originalMethod.apply(this, args);
+                        timers[timerKey].lastInvoke = now;
+                    }
+                    else if (trailing) {
+                        // Set up trailing call
+                        const remaining = wait - timeSinceLastInvoke;
+                        timers[timerKey].timeout = setTimeout(() => {
+                            originalMethod.apply(this, timers[timerKey].lastArgs);
+                            timers[timerKey].lastInvoke = Date.now();
+                            timers[timerKey].timeout = null;
+                        }, remaining);
+                    }
+                }
+            };
+        };
+    }
+    /**
+     * @once decorator - ensures function is only called once
+     * Subsequent calls return the result of the first call
+     *
+     * @param perInstance - If true, function can be called once per instance (default: true)
+     *                      If false, function can only be called once globally across all instances
+     *
+     * @example
+     * ```typescript
+     * @element('data-loader')
+     * class DataLoader extends HTMLElement {
+     *   @once()
+     *   async loadData() {
+     *     // Only loads data once, even if called multiple times
+     *     const data = await fetch('/api/data');
+     *     return data.json();
+     *   }
+     * }
+     * ```
+     */
+    function once(perInstance = true) {
+        let globalCalled = false;
+        let globalResult;
+        return function (originalMethod, context) {
+            const methodName = context.name;
+            return function (...args) {
+                if (perInstance) {
+                    // Per-instance tracking
+                    if (!this[ONCE_CALLED]) {
+                        this[ONCE_CALLED] = {};
+                    }
+                    if (!this[ONCE_CALLED][methodName]) {
+                        this[ONCE_CALLED][methodName] = {
+                            called: true,
+                            result: originalMethod.apply(this, args),
+                        };
+                    }
+                    return this[ONCE_CALLED][methodName].result;
+                }
+                else {
+                    // Global tracking
+                    if (!globalCalled) {
+                        globalCalled = true;
+                        globalResult = originalMethod.apply(this, args);
+                    }
+                    return globalResult;
+                }
+            };
+        };
+    }
+    /**
+     * @memoize decorator - caches function results based on arguments
+     * Uses JSON.stringify for argument comparison by default
+     *
+     * @param options - Memoization options
+     * @param options.keyGenerator - Custom function to generate cache key from arguments
+     * @param options.maxSize - Maximum cache size (default: 100)
+     * @param options.ttl - Time to live in milliseconds (default: undefined - no expiration)
+     *
+     * @example
+     * ```typescript
+     * @element('calculator')
+     * class Calculator extends HTMLElement {
+     *   @memoize({ maxSize: 50 })
+     *   fibonacci(n: number): number {
+     *     // Results are cached, subsequent calls with same n are instant
+     *     if (n <= 1) return n;
+     *     return this.fibonacci(n - 1) + this.fibonacci(n - 2);
+     *   }
+     * }
+     * ```
+     */
+    function memoize(options = {}) {
+        const { keyGenerator = (...args) => JSON.stringify(args), maxSize = 100, ttl } = options;
+        return function (originalMethod, context) {
+            const methodName = context.name;
+            return function (...args) {
+                if (!this[MEMOIZE_CACHE]) {
+                    this[MEMOIZE_CACHE] = {};
+                }
+                if (!this[MEMOIZE_CACHE][methodName]) {
+                    this[MEMOIZE_CACHE][methodName] = new Map();
+                }
+                const cache = this[MEMOIZE_CACHE][methodName];
+                const key = keyGenerator(...args);
+                // Check if cached
+                if (cache.has(key)) {
+                    const cached = cache.get(key);
+                    // Check TTL
+                    if (ttl !== undefined) {
+                        const age = Date.now() - cached.timestamp;
+                        if (age > ttl) {
+                            cache.delete(key);
+                        }
+                        else {
+                            return cached.value;
+                        }
+                    }
+                    else {
+                        return cached.value;
+                    }
+                }
+                // Compute result
+                const result = originalMethod.apply(this, args);
+                // Store in cache
+                cache.set(key, {
+                    value: result,
+                    timestamp: Date.now(),
+                });
+                // Enforce max size (LRU - delete oldest)
+                if (cache.size > maxSize) {
+                    const firstKey = cache.keys().next().value;
+                    cache.delete(firstKey);
+                }
+                return result;
+            };
+        };
+    }
+    /**
+     * Clear all debounce timers for an instance
+     * Useful in cleanup/disconnectedCallback
+     */
+    function clearDebounceTimers(instance) {
+        if (instance[DEBOUNCE_TIMERS]) {
+            for (const timerKey in instance[DEBOUNCE_TIMERS]) {
+                if (instance[DEBOUNCE_TIMERS][timerKey]?.timeout) {
+                    clearTimeout(instance[DEBOUNCE_TIMERS][timerKey].timeout);
+                }
+            }
+            instance[DEBOUNCE_TIMERS] = {};
+        }
+    }
+    /**
+     * Clear all throttle timers for an instance
+     * Useful in cleanup/disconnectedCallback
+     */
+    function clearThrottleTimers(instance) {
+        if (instance[THROTTLE_TIMERS]) {
+            for (const timerKey in instance[THROTTLE_TIMERS]) {
+                if (instance[THROTTLE_TIMERS][timerKey]?.timeout) {
+                    clearTimeout(instance[THROTTLE_TIMERS][timerKey].timeout);
+                }
+            }
+            instance[THROTTLE_TIMERS] = {};
+        }
+    }
+    /**
+     * Clear memoize cache for an instance
+     */
+    function clearMemoizeCache(instance, methodName) {
+        if (instance[MEMOIZE_CACHE]) {
+            if (methodName) {
+                delete instance[MEMOIZE_CACHE][methodName];
+            }
+            else {
+                instance[MEMOIZE_CACHE] = {};
+            }
+        }
+    }
+    /**
+     * Reset once-called state for an instance
+     */
+    function resetOnce(instance, methodName) {
+        if (instance[ONCE_CALLED]) {
+            if (methodName) {
+                delete instance[ONCE_CALLED][methodName];
+            }
+            else {
+                instance[ONCE_CALLED] = {};
+            }
+        }
+    }
+
+    exports.Context = Context;
     exports.IS_CONTROLLER_INSTANCE = IS_CONTROLLER_INSTANCE;
     exports.Router = Router;
     exports.SimpleArray = SimpleArray;
     exports.adopted = adopted;
     exports.applyElementFunctionality = applyElementFunctionality;
-    exports.context = context;
+    exports.clearDebounceTimers = clearDebounceTimers;
+    exports.clearMemoizeCache = clearMemoizeCache;
+    exports.clearThrottleTimers = clearThrottleTimers;
+    exports.context = context$1;
+    exports.contextProperty = context;
     exports.controller = controller;
+    exports.css = css;
+    exports.debounce = debounce;
     exports.dispatch = dispatch;
     exports.dispose = dispose;
     exports.element = element;
     exports.getSymbol = getSymbol;
+    exports.html = html;
     exports.layout = layout;
+    exports.memoize = memoize;
     exports.moved = moved;
+    exports.nothing = nothing;
     exports.observe = observe;
     exports.on = on;
-    exports.part = part;
+    exports.once = once;
     exports.property = property;
     exports.query = query;
     exports.queryAll = queryAll;
     exports.ready = ready;
+    exports.render = render;
     exports.request = request;
+    exports.resetOnce = resetOnce;
     exports.respond = respond;
+    exports.setDisableElementReadyWarnings = setDisableElementReadyWarnings;
+    exports.styles = styles;
+    exports.throttle = throttle;
+    exports.trackRenders = trackRenders;
+    exports.unsafeHTML = unsafeHTML;
     exports.useNativeElementControllers = useNativeElementControllers;
+    exports.waitForAllCustomElements = waitForAllCustomElements;
+    exports.waitForElementDefined = waitForElementDefined;
+    exports.waitForElementReady = waitForElementReady;
     exports.watch = watch;
 
     return exports;