snice 4.35.1 → 4.36.1

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.35.0
+ * snice v4.36.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -77,6 +77,7 @@ var Snice = (function (exports) {
     const RENDER_CALLBACKS = getSymbol('render-callbacks');
     const STYLES_METHOD = getSymbol('styles-method');
     const STYLES_APPLIED = getSymbol('styles-applied');
+    const PARENT_STYLES_METHODS = getSymbol('parent-styles-methods');
     // Navigation context symbols
     const CONTEXT_HANDLER = getSymbol('context-handler');
     const NAVIGATION_CONTEXT_INSTANCE = getSymbol('navigation-context-instance');
@@ -487,12 +488,13 @@ var Snice = (function (exports) {
         }
         return function (target, context) {
             const propertyKey = context.name;
-            const initKey = `__observe_init_${propertyKey}`;
             context.addInitializer(function () {
                 const constructor = this.constructor;
-                if (constructor[initKey])
+                if (!constructor.__observeMethods)
+                    constructor.__observeMethods = new Set();
+                if (constructor.__observeMethods.has(target))
                     return;
-                constructor[initKey] = true;
+                constructor.__observeMethods.add(target);
                 if (!constructor[OBSERVERS]) {
                     constructor[OBSERVERS] = [];
                 }
@@ -903,12 +905,13 @@ 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;
-                if (constructor[initKey])
+                if (!constructor.__respondMethods)
+                    constructor.__respondMethods = new Set();
+                if (constructor.__respondMethods.has(target))
                     return;
-                constructor[initKey] = true;
+                constructor.__respondMethods.add(target);
                 if (!constructor[CHANNEL_HANDLERS]) {
                     constructor[CHANNEL_HANDLERS] = [];
                 }
@@ -2251,14 +2254,14 @@ var Snice = (function (exports) {
         }
         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]) {
+                // Dedup by method reference — allows child to register same-named methods
+                if (!constructor.__onMethods)
+                    constructor.__onMethods = new Set();
+                if (constructor.__onMethods.has(originalMethod))
                     return;
-                }
-                constructor[initKey] = true;
+                constructor.__onMethods.add(originalMethod);
                 if (!constructor[ON_HANDLERS]) {
                     constructor[ON_HANDLERS] = [];
                 }
@@ -2752,12 +2755,13 @@ var Snice = (function (exports) {
     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])
+                if (!constructor.__contextMethods)
+                    constructor.__contextMethods = new Set();
+                if (constructor.__contextMethods.has(originalMethod))
                     return;
-                constructor[initKey] = true;
+                constructor.__contextMethods.add(originalMethod);
                 if (!constructor[CONTEXT_HANDLERS]) {
                     constructor[CONTEXT_HANDLERS] = [];
                 }
@@ -3081,7 +3085,13 @@ var Snice = (function (exports) {
     function styles() {
         return function (originalMethod, context) {
             context.addInitializer(function () {
-                // Store the styles method
+                // Collect parent styles methods before overwriting with child's
+                if (this[STYLES_METHOD] && !this[PARENT_STYLES_METHODS]) {
+                    this[PARENT_STYLES_METHODS] = [this[STYLES_METHOD]];
+                }
+                else if (this[STYLES_METHOD] && this[PARENT_STYLES_METHODS]) {
+                    this[PARENT_STYLES_METHODS].push(this[STYLES_METHOD]);
+                }
                 this[STYLES_METHOD] = originalMethod;
             });
             return originalMethod;
@@ -3100,11 +3110,22 @@ var Snice = (function (exports) {
             return;
         element[STYLES_APPLIED] = true;
         try {
+            // Collect all CSS results: parent styles first, then child styles
+            const allResults = [];
+            const parentMethods = element[PARENT_STYLES_METHODS];
+            if (parentMethods) {
+                for (const method of parentMethods) {
+                    const r = method.call(element);
+                    if (isCSSResult(r))
+                        allResults.push(r);
+                }
+            }
             const result = stylesMethod.call(element);
             if (!isCSSResult(result)) {
                 console.warn('Styles method must return css`` template result');
                 return;
             }
+            allResults.push(result);
             // Ensure shadow root exists
             if (!element.shadowRoot) {
                 element.attachShadow({ mode: 'open' });
@@ -3112,14 +3133,16 @@ var Snice = (function (exports) {
             if (!element.shadowRoot)
                 return;
             // Prefer constructable stylesheets
-            if (result.styleSheet && 'adoptedStyleSheets' in element.shadowRoot) {
-                element.shadowRoot.adoptedStyleSheets = [result.styleSheet];
+            if (allResults.every(r => !!r.styleSheet) && 'adoptedStyleSheets' in element.shadowRoot) {
+                element.shadowRoot.adoptedStyleSheets = allResults.map(r => r.styleSheet);
                 return;
             }
-            // Fallback to <style> tag
-            const style = document.createElement('style');
-            style.textContent = result.cssText;
-            element.shadowRoot.appendChild(style);
+            // Fallback — one <style> tag per stylesheet, preserving cascade order
+            for (const r of allResults) {
+                const style = document.createElement('style');
+                style.textContent = r.cssText;
+                element.shadowRoot.appendChild(style);
+            }
         }
         catch (error) {
             console.error('Error applying styles:', error);
@@ -3392,7 +3415,45 @@ var Snice = (function (exports) {
             }
         };
     }
+    /**
+     * Walk the prototype chain and merge parent element metadata into the child.
+     * Called once at class definition time — zero per-instance cost.
+     * Skips plain HTMLElement (no metadata to merge).
+     *
+     * Only merges PROPERTIES (stored via context.metadata at decoration time)
+     * and formAssociated. Other handler registrations (@watch, @on, @ready, etc.)
+     * inherit automatically via TC39 addInitializer — parent initializers run
+     * during child instance construction.
+     */
+    function mergeParentMetadata(constructor) {
+        let parent = Object.getPrototypeOf(constructor);
+        // Collect ancestors bottom-up, then merge top-down so the deepest parent goes first
+        const ancestors = [];
+        while (parent && parent !== HTMLElement && parent !== Function.prototype) {
+            ancestors.push(parent);
+            parent = Object.getPrototypeOf(parent);
+        }
+        ancestors.reverse();
+        for (const ancestor of ancestors) {
+            // Properties (Map) — parent first, child overrides
+            if (ancestor[PROPERTIES]) {
+                if (!constructor[PROPERTIES])
+                    constructor[PROPERTIES] = new Map();
+                for (const [key, value] of ancestor[PROPERTIES]) {
+                    if (!constructor[PROPERTIES].has(key)) {
+                        constructor[PROPERTIES].set(key, value);
+                    }
+                }
+            }
+            // formAssociated — inherit if parent is form-associated
+            if (ancestor.formAssociated && !constructor.formAssociated) {
+                constructor.formAssociated = true;
+            }
+        }
+    }
     function defineElement(tagName, constructor, context, options) {
+        // Merge metadata from parent @element classes (inheritance support)
+        mergeParentMetadata(constructor);
         if (context.metadata && context.metadata[PROPERTIES]) {
             if (!constructor[PROPERTIES])
                 constructor[PROPERTIES] = new Map();
@@ -3446,8 +3507,12 @@ var Snice = (function (exports) {
                 }
                 // Always store property options on constructor for runtime access
                 constructor[PROPERTIES].set(propertyKey, finalOptions);
-                // Set up the property descriptor on first access
-                if (!Object.hasOwn(this.constructor.prototype, propertyKey)) {
+                // Set up the property descriptor — re-define if a subclass overrides
+                // the property with different options (different closure captures)
+                const definerKey = `__propDef_${propertyKey}`;
+                const existingDefiner = this.constructor.prototype[definerKey];
+                if (!existingDefiner || existingDefiner !== options) {
+                    this.constructor.prototype[definerKey] = options;
                     const descriptor = {
                         get() {
                             // attribute: false — use internal storage only, no DOM sync
@@ -3583,12 +3648,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])
+                // Dedup by method reference — allows child classes to register
+                // their own method with the same name as a parent's
+                if (!constructor.__watchMethods)
+                    constructor.__watchMethods = new Set();
+                if (constructor.__watchMethods.has(target))
                     return;
-                constructor[initKey] = true;
+                constructor.__watchMethods.add(target);
                 if (!constructor[PROPERTY_WATCHERS]) {
                     constructor[PROPERTY_WATCHERS] = new Map();
                 }
@@ -3659,12 +3727,14 @@ var Snice = (function (exports) {
     }
     function registerHandler(symbol, prefix, target, context, extra) {
         const methodName = context.name;
-        const initKey = `__${prefix}_init_${methodName}`;
         context.addInitializer(function () {
             const constructor = this.constructor;
-            if (constructor[initKey])
+            const setKey = `__${prefix}Methods`;
+            if (!constructor[setKey])
+                constructor[setKey] = new Set();
+            if (constructor[setKey].has(target))
                 return;
-            constructor[initKey] = true;
+            constructor[setKey].add(target);
             if (!constructor[symbol])
                 constructor[symbol] = [];
             constructor[symbol].push({ methodName, method: target, ...extra });