@mintjamsinc/ichigojs 0.1.62 → 0.1.64

package/dist/ichigo.esm.js

@@ -7597,41 +7597,65 @@ class VBindDirective {
      * Returns true when the target is a custom element and the binding should be
      * delivered as a property rather than an HTML attribute.
      *
-     * Two conditions trigger property delivery:
+     * Three conditions trigger property delivery:
      *  1. The value is an object or array — serialising these to a string attribute
      *     would lose type information.
      *  2. The element exposes a matching property accessor (e.g. a prop declared via
      *     defineComponent), even when the value is a primitive.
+     *  3. The element declares a matching prop in its static _props (case-insensitive
+     *     and kebab-case → camelCase tolerant), so primitive values reach the
+     *     reactive binding via the generated setter instead of being lost as a
+     *     plain HTML attribute that no attributeChangedCallback observes.
      */
     #isCustomElementProperty(element, name, value) {
         if (!element.tagName.includes('-')) {
             return false;
         }
         const isObjectOrArray = Array.isArray(value) || (typeof value === 'object' && value !== null);
-        return isObjectOrArray || name in element;
+        if (isObjectOrArray || name in element) {
+            return true;
+        }
+        return this.#findDeclaredProp(element, name) !== undefined;
     }
     /**
      * Resolves the actual property name on a custom element for a given
      * (lowercased) HTML attribute name.  HTML attributes are always lowercase,
      * but custom element props are typically camelCase.  This method checks the
      * element's declared _props (set by defineComponent) for a case-insensitive
-     * match, falling back to scanning the prototype's own property descriptors.
+     * match against both the raw attribute name and its kebab-case → camelCase
+     * conversion (so `user-name` resolves to `userName`), falling back to the
+     * original name when no match is found.
      */
     #resolveCustomElementPropertyName(element, name) {
         // Fast path: exact match already exists
         if (name in element) {
             return name;
         }
-        // Check declared _props from defineComponent / IchigoElement
+        return this.#findDeclaredProp(element, name) ?? name;
+    }
+    /**
+     * Looks up a declared prop on a custom element constructor whose name matches
+     * the given attribute name, treating the comparison as case-insensitive and
+     * tolerant of kebab-case → camelCase conversion.  Returns the canonical prop
+     * name (as declared) when a match is found, or undefined otherwise.
+     */
+    #findDeclaredProp(element, name) {
         const props = element.constructor._props;
-        if (Array.isArray(props)) {
-            const lowerName = name.toLowerCase();
-            const match = props.find(p => p.toLowerCase() === lowerName);
-            if (match) {
-                return match;
-            }
+        if (!Array.isArray(props)) {
+            return undefined;
         }
-        return name;
+        const lowerName = name.toLowerCase();
+        const camelLower = this.#kebabToCamel(lowerName).toLowerCase();
+        return props.find(p => {
+            const lowerProp = p.toLowerCase();
+            return lowerProp === lowerName || lowerProp === camelLower;
+        });
+    }
+    /**
+     * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
+     */
+    #kebabToCamel(str) {
+        return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
     }
     /**
      * Checks if the attribute should be set as a DOM property.