face-up 0.0.1 → 0.0.2

package/README.md

@@ -26,7 +26,13 @@ class MyInput extends HTMLElement {
     static supportedFeatures = {
         faceUp: {
             fallbackSpawn: FaceUp,
-            callbackForwarding: ['connectedCallback', 'disconnectedCallback'],
+            callbackForwarding: [
+                'connectedCallback',
+                'disconnectedCallback',
+                'formDisabledCallback',
+                'formResetCallback',
+                'formStateRestoreCallback'
+            ],
             getSharedContext(instance) {
                 return {
                     internals: instance.#internals,
@@ -40,19 +46,6 @@ class MyInput extends HTMLElement {
         super();
         this.#internals = this.attachInternals();
     }
-
-    // Forward form lifecycle callbacks to the feature
-    formDisabledCallback(disabled) {
-        this.faceUp.formDisabledCallback(disabled);
-    }
-
-    formResetCallback() {
-        this.faceUp.formResetCallback();
-    }
-
-    formStateRestoreCallback(state, mode) {
-        this.faceUp.formStateRestoreCallback(state, mode);
-    }
 }
 
 // assignFeatures calls FaceUp.onAssigned which sets static formAssociated = true
@@ -65,6 +58,8 @@ customElements.define('my-input', MyInput);
 
 Note: `static formAssociated = true` is set automatically by `FaceUp.onAssigned` — you don't need to declare it yourself.
 
+Form lifecycle callbacks (`formDisabledCallback`, `formResetCallback`, `formStateRestoreCallback`) are forwarded automatically via `callbackForwarding` — no manual forwarding code needed in the host element.
+
 ## Setting Values
 
 Dispatch events on the host's `propagator` to update the form value:
@@ -138,23 +133,25 @@ The `state` is stored internally by the browser and passed back to `formStateRes
 | `reportValidity()` | `boolean` | Shows browser validation UI if invalid |
 | `setValidity(flags, message?, anchor?)` | `void` | Sets custom validity flags |
 
-### Form Lifecycle Methods
+### Form Lifecycle Callbacks (forwarded via `callbackForwarding`)
 
-| Method | Description |
-|--------|-------------|
+| Callback | Description |
+|----------|-------------|
 | `formDisabledCallback(disabled)` | Called when disabled state changes |
 | `formResetCallback()` | Called when the form is reset |
 | `formStateRestoreCallback(state, mode)` | Called when browser restores form state |
 
+These are forwarded automatically by `assign-gingerly`'s `callbackForwarding` mechanism — the host element does not need to implement them manually.
+
 ## Requirements
 
 The host custom element **must**:
 
 1. Call `this.attachInternals()` in its constructor
 2. Pass the internals via `getSharedContext` in `supportedFeatures`
-3. Forward form lifecycle callbacks to the feature
+3. Include the form lifecycle callbacks in `callbackForwarding`
 
-`static formAssociated = true` is handled automatically by `FaceUp.onAssigned` when `assignFeatures` is called.
+Both `static formAssociated = true` and form lifecycle callback forwarding are handled automatically — no manual boilerplate needed in the host element.
 
 ## Dev
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "face-up",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A Custom Element Feature that Adds Form Associated Behavior to a Custom Element",
   "homepage": "https://github.com/bahrus/face-up#readme",
   "bugs": {
@@ -22,7 +22,7 @@
     "chrome": "npx playwright cr http://localhost:8000"
   },
   "devDependencies": {
-    "assign-gingerly": "0.0.42",
+    "assign-gingerly": "0.0.43",
     "@playwright/test": "1.60.0",
     "spa-ssi": "0.0.27"
   },

package/tests/test1.html

@@ -20,7 +20,13 @@
             static supportedFeatures = {
                 faceUp: {
                     fallbackSpawn: FaceUp,
-                    callbackForwarding: ['connectedCallback', 'disconnectedCallback'],
+                    callbackForwarding: [
+                        'connectedCallback',
+                        'disconnectedCallback',
+                        'formDisabledCallback',
+                        'formResetCallback',
+                        'formStateRestoreCallback'
+                    ],
                     getSharedContext(instance) {
                         return {
                             internals: instance.#internals,
@@ -55,27 +61,6 @@
             // Expose name for form submission
             get name() { return this.getAttribute('name'); }
             get type() { return this.localName; }
-
-            // Form lifecycle callbacks forwarded to the feature
-            formDisabledCallback(disabled) {
-                this.faceUp.formDisabledCallback(disabled);
-                const input = this.shadowRoot.querySelector('input');
-                input.disabled = disabled;
-            }
-
-            formResetCallback() {
-                this.faceUp.formResetCallback();
-                const input = this.shadowRoot.querySelector('input');
-                input.value = '';
-            }
-
-            formStateRestoreCallback(state, mode) {
-                this.faceUp.formStateRestoreCallback(state, mode);
-                if (state) {
-                    const input = this.shadowRoot.querySelector('input');
-                    input.value = typeof state === 'string' ? state : '';
-                }
-            }
         }
 
         // Inject the FaceUp feature (onAssigned sets static formAssociated = true)

package/types/NewCustomElementFeature.md

@@ -426,7 +426,7 @@ customElements.assignFeatures(MyElement, {
 3. On first `connectedCallback`, the lazy getter is triggered — spawning the feature at the correct lifecycle moment (when the element is in the DOM and computed styles are available).
 4. For async features, forwarding is skipped until the real instance is available.
 
-**Supported callbacks:** `connectedCallback`, `disconnectedCallback`, `attributeChangedCallback`, `adoptedCallback`
+**Supported callbacks:** `connectedCallback`, `disconnectedCallback`, `attributeChangedCallback`, `adoptedCallback`, `formAssociatedCallback`, `formDisabledCallback`, `formResetCallback`, `formStateRestoreCallback`
 
 **When to use it:**
 
@@ -434,6 +434,7 @@ customElements.assignFeatures(MyElement, {
 - The feature needs `getComputedStyle` (which requires the element to be in the DOM)
 - The feature sets up event listeners that should be cleaned up on disconnect
 - The feature needs to handle elements created via cloned templates (where the constructor fires before DOM insertion)
+- The feature manages form-associated behavior (`formDisabledCallback`, `formResetCallback`, `formStateRestoreCallback`) — e.g., face-up
 
 **Avoiding double-connect on initial spawn:**