assign-gingerly 0.0.77 → 0.0.79

package/DX/emojis.ts

@@ -22,7 +22,7 @@
  * | 🏷️ | builtIns.microDataJoin |
  * | 📋 | builtIns.manageTemplateList |
  */
-export const builtInEmoji: Record<string, string> = {
+export const builtInEmoji= {
     '📦': 'builtIns.lazyLoad',
     '🎚️': 'builtIns.lazyLoadSwitch',
     '🔗': 'builtIns.join',
@@ -31,7 +31,7 @@ export const builtInEmoji: Record<string, string> = {
     '📊': 'builtIns.rangeSelector',
 };
 
-export const akaMethods: Record<string, string> = {
+export const akaMethods = {
     '🔍': 'querySelector',
     '🧺': 'querySelectorAll',
     '+': 'add',
@@ -53,7 +53,7 @@ export const akaMethods: Record<string, string> = {
     //'🧩': 'includes'
 };
 
-export const aka: Record<string, string> = {
+export const aka = {
     '©️': 'content?.cloneNode?.true',
     //'🔎': 'clone?.querySelector'
     // textContent is a property, not a method — aliasing it via akaMethods

package/assignGingerly.js

@@ -433,13 +433,14 @@ export function evaluatePathWithMethods(target, pathParts, value, withMethods, p
             const methodName = isZeroArgMethod ? part.slice(0, -1) : part;
             const method = current[methodName];
             if (typeof method === 'function') {
+                const appendArgs = permissionProcessor?.getMethodAppendArgs(methodName) ?? [];
                 if (isZeroArgMethod || nextIsMethod) {
                     // Zero-arg call - next part is either a method or explicitly not an argument
-                    current = method.call(current);
+                    current = method.call(current, ...appendArgs);
                 }
                 else {
                     // Only current is method - call with next part as string arg
-                    current = method.call(current, nextPart);
+                    current = method.call(current, nextPart, ...appendArgs);
                     i++; // Skip next part since we consumed it as argument
                 }
             }
@@ -541,8 +542,9 @@ function applyToEach(iterable, remainingPath, value, withMethods, aliasMap, opti
                     const methodName = isZeroArgMethod ? part.slice(0, -1) : part;
                     const method = current[methodName];
                     if (typeof method === 'function') {
+                        const appendArgs = permissionProcessor?.getMethodAppendArgs(methodName) ?? [];
                         if (isZeroArgMethod) {
-                            current = method.call(current);
+                            current = method.call(current, ...appendArgs);
                             continue;
                         }
                         // For methods in the middle, we need to check the next part
@@ -551,15 +553,15 @@ function applyToEach(iterable, remainingPath, value, withMethods, aliasMap, opti
                         const nextIsMethod = nextPart && (withMethods.has(nextPart)
                             || (nextPart.endsWith('|') && withMethods.has(nextPart.slice(0, -1))));
                         if (nextIsMethod) {
-                            current = method.call(current);
+                            current = method.call(current, ...appendArgs);
                         }
                         else if (nextPart) {
-                            current = method.call(current, nextPart);
+                            current = method.call(current, nextPart, ...appendArgs);
                             // Skip next part
                             pathToForEach.splice(nextIndex, 1);
                         }
                         else {
-                            current = method.call(current);
+                            current = method.call(current, ...appendArgs);
                         }
                     }
                     else {
@@ -582,15 +584,16 @@ function applyToEach(iterable, remainingPath, value, withMethods, aliasMap, opti
                 // Last segment is a method - call it
                 const method = result.target[result.lastKey];
                 if (typeof method === 'function') {
+                    const appendArgs = permissionProcessor?.getMethodAppendArgs(result.lastKey) ?? [];
                     if (result.isZeroArg) {
-                        // Trailing | marker - call with no arguments, ignoring the value
-                        method.call(result.target);
+                        // Trailing | marker - call with appended args only, ignoring the value
+                        method.call(result.target, ...appendArgs);
                     }
                     else if (Array.isArray(value)) {
-                        method.apply(result.target, value);
+                        method.apply(result.target, [...value, ...appendArgs]);
                     }
                     else {
-                        method.call(result.target, value);
+                        method.call(result.target, value, ...appendArgs);
                     }
                 }
             }
@@ -991,12 +994,13 @@ export function assignGingerly(target, source, options, permissionProcessor) {
                         // Last segment is a method — call it
                         const method = result.target[result.lastKey];
                         if (typeof method === 'function') {
-                            // Trailing | marker - call with no arguments, ignoring the value
+                            const appendArgs = capturedPermissionProcessor?.getMethodAppendArgs(result.lastKey) ?? [];
+                            // Trailing | marker - call with appended args only, ignoring the value
                             const returnVal = result.isZeroArg
-                                ? method.call(result.target)
+                                ? method.call(result.target, ...appendArgs)
                                 : Array.isArray(capturedValue)
-                                    ? method.apply(result.target, capturedValue)
-                                    : method.call(result.target, capturedValue);
+                                    ? method.apply(result.target, [...capturedValue, ...appendArgs])
+                                    : method.call(result.target, capturedValue, ...appendArgs);
                             // If it's an async method, await it (for side effects)
                             if (result.isAsyncMethod)
                                 await returnVal;
@@ -1035,15 +1039,16 @@ export function assignGingerly(target, source, options, permissionProcessor) {
                     // Last segment is a method - call it
                     const method = result.target[result.lastKey];
                     if (typeof method === 'function') {
+                        const appendArgs = permissionProcessor?.getMethodAppendArgs(result.lastKey) ?? [];
                         if (result.isZeroArg) {
-                            // Trailing | marker - call with no arguments, ignoring the value
-                            method.call(result.target);
+                            // Trailing | marker - call with appended args only, ignoring the value
+                            method.call(result.target, ...appendArgs);
                         }
                         else if (Array.isArray(value)) {
-                            method.apply(result.target, value);
+                            method.apply(result.target, [...value, ...appendArgs]);
                         }
                         else {
-                            method.call(result.target, value);
+                            method.call(result.target, value, ...appendArgs);
                         }
                     }
                     // Silently skip if not a function
@@ -1117,15 +1122,16 @@ export function assignGingerly(target, source, options, permissionProcessor) {
                 const methodName = isZeroArgKey ? key.slice(0, -1) : key;
                 const method = target[methodName];
                 if (typeof method === 'function') {
+                    const appendArgs = permissionProcessor?.getMethodAppendArgs(methodName) ?? [];
                     if (isZeroArgKey) {
-                        // Trailing | marker - call with no arguments, ignoring the value
-                        method.call(target);
+                        // Trailing | marker - call with appended args only, ignoring the value
+                        method.call(target, ...appendArgs);
                     }
                     else if (Array.isArray(value)) {
-                        method.apply(target, value);
+                        method.apply(target, [...value, ...appendArgs]);
                     }
                     else {
-                        method.call(target, value);
+                        method.call(target, value, ...appendArgs);
                     }
                 }
                 // Silently skip if not a function

package/assignGingerly.ts

@@ -525,12 +525,13 @@ export function evaluatePathWithMethods(
       const methodName = isZeroArgMethod ? part.slice(0, -1) : part;
       const method = current[methodName];
       if (typeof method === 'function') {
+        const appendArgs = permissionProcessor?.getMethodAppendArgs(methodName) ?? [];
         if (isZeroArgMethod || nextIsMethod) {
           // Zero-arg call - next part is either a method or explicitly not an argument
-          current = method.call(current);
+          current = method.call(current, ...appendArgs);
         } else {
           // Only current is method - call with next part as string arg
-          current = method.call(current, nextPart);
+          current = method.call(current, nextPart, ...appendArgs);
           i++; // Skip next part since we consumed it as argument
         }
       } else {
@@ -649,8 +650,9 @@ function applyToEach(
           const methodName = isZeroArgMethod ? part.slice(0, -1) : part;
           const method = current[methodName];
           if (typeof method === 'function') {
+            const appendArgs = permissionProcessor?.getMethodAppendArgs(methodName) ?? [];
             if (isZeroArgMethod) {
-              current = method.call(current);
+              current = method.call(current, ...appendArgs);
               continue;
             }
             // For methods in the middle, we need to check the next part
@@ -659,13 +661,13 @@ function applyToEach(
             const nextIsMethod = nextPart && (withMethods.has(nextPart)
               || (nextPart.endsWith('|') && withMethods.has(nextPart.slice(0, -1))));
             if (nextIsMethod) {
-              current = method.call(current);
+              current = method.call(current, ...appendArgs);
             } else if (nextPart) {
-              current = method.call(current, nextPart);
+              current = method.call(current, nextPart, ...appendArgs);
               // Skip next part
               pathToForEach.splice(nextIndex, 1);
             } else {
-              current = method.call(current);
+              current = method.call(current, ...appendArgs);
             }
           } else {
             current = current[methodName];
@@ -687,13 +689,14 @@ function applyToEach(
         // Last segment is a method - call it
         const method = result.target[result.lastKey];
         if (typeof method === 'function') {
+          const appendArgs = permissionProcessor?.getMethodAppendArgs(result.lastKey) ?? [];
           if (result.isZeroArg) {
-            // Trailing | marker - call with no arguments, ignoring the value
-            method.call(result.target);
+            // Trailing | marker - call with appended args only, ignoring the value
+            method.call(result.target, ...appendArgs);
           } else if (Array.isArray(value)) {
-            method.apply(result.target, value);
+            method.apply(result.target, [...value, ...appendArgs]);
           } else {
-            method.call(result.target, value);
+            method.call(result.target, value, ...appendArgs);
           }
         }
       } else {
@@ -1130,12 +1133,13 @@ export function assignGingerly(
             // Last segment is a method — call it
             const method = result.target[result.lastKey];
             if (typeof method === 'function') {
-              // Trailing | marker - call with no arguments, ignoring the value
+              const appendArgs = capturedPermissionProcessor?.getMethodAppendArgs(result.lastKey) ?? [];
+              // Trailing | marker - call with appended args only, ignoring the value
               const returnVal = result.isZeroArg
-                ? method.call(result.target)
+                ? method.call(result.target, ...appendArgs)
                 : Array.isArray(capturedValue)
-                ? method.apply(result.target, capturedValue)
-                : method.call(result.target, capturedValue);
+                ? method.apply(result.target, [...capturedValue, ...appendArgs])
+                : method.call(result.target, capturedValue, ...appendArgs);
               // If it's an async method, await it (for side effects)
               if (result.isAsyncMethod) await returnVal;
             }
@@ -1171,13 +1175,14 @@ export function assignGingerly(
           // Last segment is a method - call it
           const method = result.target[result.lastKey];
           if (typeof method === 'function') {
+            const appendArgs = permissionProcessor?.getMethodAppendArgs(result.lastKey) ?? [];
             if (result.isZeroArg) {
-              // Trailing | marker - call with no arguments, ignoring the value
-              method.call(result.target);
+              // Trailing | marker - call with appended args only, ignoring the value
+              method.call(result.target, ...appendArgs);
             } else if (Array.isArray(value)) {
-              method.apply(result.target, value);
+              method.apply(result.target, [...value, ...appendArgs]);
             } else {
-              method.call(result.target, value);
+              method.call(result.target, value, ...appendArgs);
             }
           }
           // Silently skip if not a function
@@ -1245,13 +1250,14 @@ export function assignGingerly(
         const methodName = isZeroArgKey ? key.slice(0, -1) : key;
         const method = target[methodName];
         if (typeof method === 'function') {
+          const appendArgs = permissionProcessor?.getMethodAppendArgs(methodName) ?? [];
           if (isZeroArgKey) {
-            // Trailing | marker - call with no arguments, ignoring the value
-            method.call(target);
+            // Trailing | marker - call with appended args only, ignoring the value
+            method.call(target, ...appendArgs);
           } else if (Array.isArray(value)) {
-            method.apply(target, value);
+            method.apply(target, [...value, ...appendArgs]);
           } else {
-            method.call(target, value);
+            method.call(target, value, ...appendArgs);
           }
         }
         // Silently skip if not a function

package/assignPermissions/PermissionProcessor.js

@@ -1,11 +1,14 @@
 import { isAllowedUrl } from './isAllowedUrl.js';
+import { getValue } from '../resolve/getValues.js';
 export class PermissionProcessor {
     constructor(permissions) {
         this.permissions = permissions;
         const { props, attrs } = buildMaps(permissions);
         this.props = props;
         this.attrs = attrs;
-        this.methods = buildMethodSet(permissions);
+        const { blockedMethods, configuredMethods } = buildMethodMaps(permissions);
+        this.blockedMethods = blockedMethods;
+        this.configuredMethods = configuredMethods;
         this.warned = new Set();
         this.warnedMethods = new Set();
     }
@@ -25,11 +28,29 @@ export class PermissionProcessor {
         return true;
     }
     checkRestrictedMethod(methodName) {
-        if (!this.methods.has(methodName))
+        if (!this.blockedMethods.has(methodName))
             return false;
         this.warnRestrictedMethod(methodName);
         return true;
     }
+    getMethodAppendArgs(methodName) {
+        const config = this.configuredMethods.get(methodName);
+        if (!config)
+            return undefined;
+        const rawArgs = config.appendArgs ?? config.addArgs;
+        if (!rawArgs || rawArgs.length === 0)
+            return undefined;
+        const resolved = [];
+        for (const arg of rawArgs) {
+            if (typeof arg === 'string' && arg.startsWith('?.')) {
+                resolved.push(getValue(arg, this.permissions));
+            }
+            else {
+                resolved.push(arg);
+            }
+        }
+        return resolved;
+    }
     redirectRestrictedProp(target, key, value) {
         if (!this.props.has(key))
             return false;
@@ -151,16 +172,22 @@ function normalizeAttrNames(attr, propNames) {
         return propNames;
     return normalizeStrings(attr);
 }
-function buildMethodSet(permissions) {
+function buildMethodMaps(permissions) {
     const methodSettings = permissions?.restrictedMethodSettings;
-    const methods = new Set();
+    const blockedMethods = new Set();
+    const configuredMethods = new Map();
     if (!methodSettings || methodSettings.length === 0) {
-        return methods;
+        return { blockedMethods, configuredMethods };
     }
     for (const setting of methodSettings) {
         if (typeof setting === 'string') {
-            methods.add(setting);
+            blockedMethods.add(setting);
+            continue;
+        }
+        if (configuredMethods.has(setting.method)) {
+            throw new Error(`assignGingerly: duplicate restrictedMethodSettings entry for '${setting.method}'.`);
         }
+        configuredMethods.set(setting.method, setting);
     }
-    return methods;
+    return { blockedMethods, configuredMethods };
 }

package/assignPermissions/PermissionProcessor.ts

@@ -1,4 +1,5 @@
-import type { AssignPermissions, RestrictedPropSetting } from '../types/assign-gingerly/types.js';
+import type { AssignPermissions, RestrictedMethodConfig, RestrictedPropSetting } from '../types/assign-gingerly/types.js';
+import { getValue } from '../resolve/getValues.js';
 import { isAllowedUrl } from './isAllowedUrl.js';
 
 export interface RestrictedPropSettingsMap {
@@ -10,7 +11,8 @@ export class PermissionProcessor {
     private readonly permissions: AssignPermissions | undefined;
     private readonly props: Map<string, RestrictedPropSetting | undefined>;
     private readonly attrs: Map<string, RestrictedPropSetting | undefined>;
-    private readonly methods: Set<string>;
+    private readonly blockedMethods: Set<string>;
+    private readonly configuredMethods: Map<string, RestrictedMethodConfig>;
     private readonly warned = new Set<string>();
     private readonly warnedMethods = new Set<string>();
 
@@ -19,7 +21,9 @@ export class PermissionProcessor {
         const { props, attrs } = buildMaps(permissions);
         this.props = props;
         this.attrs = attrs;
-        this.methods = buildMethodSet(permissions);
+        const { blockedMethods, configuredMethods } = buildMethodMaps(permissions);
+        this.blockedMethods = blockedMethods;
+        this.configuredMethods = configuredMethods;
     }
 
     get crossDomainImports(): boolean {
@@ -41,11 +45,36 @@ export class PermissionProcessor {
     }
 
     checkRestrictedMethod(methodName: string): boolean {
-        if (!this.methods.has(methodName)) return false;
+        if (!this.blockedMethods.has(methodName)) return false;
         this.warnRestrictedMethod(methodName);
         return true;
     }
 
+    /**
+     * Returns the resolved appendArgs for a configured method, if any.
+     * - String entries that start with `?.` are resolved against the permissions object.
+     * - Non-path strings are returned as-is.
+     * - Methods listed as plain strings in restrictedMethodSettings do not return args;
+     *   they are fully blocked via checkRestrictedMethod.
+     */
+    getMethodAppendArgs(methodName: string): any[] | undefined {
+        const config = this.configuredMethods.get(methodName);
+        if (!config) return undefined;
+
+        const rawArgs = config.appendArgs ?? config.addArgs;
+        if (!rawArgs || rawArgs.length === 0) return undefined;
+
+        const resolved: any[] = [];
+        for (const arg of rawArgs) {
+            if (typeof arg === 'string' && arg.startsWith('?.')) {
+                resolved.push(getValue(arg, this.permissions));
+            } else {
+                resolved.push(arg);
+            }
+        }
+        return resolved;
+    }
+
     redirectRestrictedProp(target: any, key: string, value: any): boolean {
         if (!this.props.has(key)) return false;
         const setting = this.props.get(key);
@@ -192,19 +221,25 @@ function normalizeAttrNames(
     return normalizeStrings(attr);
 }
 
-function buildMethodSet(permissions: AssignPermissions | undefined): Set<string> {
+function buildMethodMaps(permissions: AssignPermissions | undefined): { blockedMethods: Set<string>; configuredMethods: Map<string, RestrictedMethodConfig> } {
     const methodSettings = permissions?.restrictedMethodSettings;
-    const methods = new Set<string>();
+    const blockedMethods = new Set<string>();
+    const configuredMethods = new Map<string, RestrictedMethodConfig>();
     if (!methodSettings || methodSettings.length === 0) {
-        return methods;
+        return { blockedMethods, configuredMethods };
     }
 
     for (const setting of methodSettings) {
         if (typeof setting === 'string') {
-            methods.add(setting);
+            blockedMethods.add(setting);
+            continue;
+        }
+
+        if (configuredMethods.has(setting.method)) {
+            throw new Error(`assignGingerly: duplicate restrictedMethodSettings entry for '${setting.method}'.`);
         }
-        // Phase II: object-form RestrictedMethodConfig entries are ignored for now.
+        configuredMethods.set(setting.method, setting);
     }
 
-    return methods;
+    return { blockedMethods, configuredMethods };
 }

package/evaluatePathWithAsyncMethods.js

@@ -43,13 +43,14 @@ export async function evaluatePathWithAsyncMethods(target, pathParts, value, wit
             // Async method — call and await
             const method = current[baseName];
             if (typeof method === 'function') {
+                const appendArgs = permissionProcessor?.getMethodAppendArgs(baseName) ?? [];
                 if (isZeroArgAsync || nextIsMethod) {
                     // Zero-arg call — next is either a method or explicitly not an argument
-                    current = await method.call(current);
+                    current = await method.call(current, ...appendArgs);
                 }
                 else {
                     // Call with next part as string arg, then await
-                    current = await method.call(current, nextPart);
+                    current = await method.call(current, nextPart, ...appendArgs);
                     i++; // Skip next part since we consumed it as argument
                 }
             }
@@ -65,13 +66,14 @@ export async function evaluatePathWithAsyncMethods(target, pathParts, value, wit
             // Sync method — same logic as evaluatePathWithMethods
             const method = current[baseName];
             if (typeof method === 'function') {
+                const appendArgs = permissionProcessor?.getMethodAppendArgs(baseName) ?? [];
                 if (isZeroArgSync || nextIsMethod) {
                     // Zero-arg call — next is either a method or explicitly not an argument
-                    current = method.call(current);
+                    current = method.call(current, ...appendArgs);
                 }
                 else {
                     // Call with next part as string arg
-                    current = method.call(current, nextPart);
+                    current = method.call(current, nextPart, ...appendArgs);
                     i++; // Skip next part since we consumed it as argument
                 }
             }

package/evaluatePathWithAsyncMethods.ts

@@ -69,12 +69,13 @@ export async function evaluatePathWithAsyncMethods(
             // Async method — call and await
             const method = current[baseName];
             if (typeof method === 'function') {
+                const appendArgs = permissionProcessor?.getMethodAppendArgs(baseName) ?? [];
                 if (isZeroArgAsync || nextIsMethod) {
                     // Zero-arg call — next is either a method or explicitly not an argument
-                    current = await method.call(current);
+                    current = await method.call(current, ...appendArgs);
                 } else {
                     // Call with next part as string arg, then await
-                    current = await method.call(current, nextPart);
+                    current = await method.call(current, nextPart, ...appendArgs);
                     i++; // Skip next part since we consumed it as argument
                 }
             } else {
@@ -88,12 +89,13 @@ export async function evaluatePathWithAsyncMethods(
             // Sync method — same logic as evaluatePathWithMethods
             const method = current[baseName];
             if (typeof method === 'function') {
+                const appendArgs = permissionProcessor?.getMethodAppendArgs(baseName) ?? [];
                 if (isZeroArgSync || nextIsMethod) {
                     // Zero-arg call — next is either a method or explicitly not an argument
-                    current = method.call(current);
+                    current = method.call(current, ...appendArgs);
                 } else {
                     // Call with next part as string arg
-                    current = method.call(current, nextPart);
+                    current = method.call(current, nextPart, ...appendArgs);
                     i++; // Skip next part since we consumed it as argument
                 }
             } else {

package/inferencer/types/NewCustomElement.md

@@ -8,9 +8,10 @@ This document provides step-by-step instructions for creating a **brand new** cu
 - Custom element features (composable behavior classes injected into elements) — see [NewCustomElementFeature.md](./NewCustomElementFeature.md)
 - Enhancements (declarative behaviors attached to existing elements via attributes) — see [NewEnhancementInstructions.md](./NewEnhancementInstructions.md)
 
-## Reference Implementation
+## Reference Implementations
 
 - **[time-ticker](https://github.com/bahrus/time-ticker)** — A non-visual custom element that fires events periodically. Demonstrates extending `ElementMaker`, a custom feature (`TimeTicker`), roundabout wiring via `defRef.json`, and the `def.js` / `wireFeatures.js` pattern.
+- **[scratch-box](https://github.com/bahrus/scratch-box)** — A visual, form-associated custom element with a declarative shadow DOM template and zero custom element JavaScript. Demonstrates `cede` script definition from a static `root.html` and JSON feature configuration.
 
 ## Prerequisites
 
@@ -51,7 +52,9 @@ This document provides step-by-step instructions for creating a **brand new** cu
   },
   "dependencies": {
     "assign-gingerly": "0.0.48",
-    "el-maker": "0.0.0"
+    "el-maker": "0.0.0",
+    "imp-h": "0.0.5",
+    "mount-observer": "0.1.50"
   }
 }
 ```
@@ -92,7 +95,12 @@ export type T = AllProps;
 - `AllProps` — includes internal/computed state managed by roundabout
 - Export `T` as a convenience alias for use in `defRef.mjs` type annotations
 
-## Step 4: Create the Element Class
+## Step 4: Create the Element Class, if the complexity is too much for a "code-free" solution.
+
+For visual web components that use declarative Shadow DOM, step 4 should be considered as a last resort, after exausting:
+
+1.  The power of assign-gingerly/assignFrom/RoundaboutLib configuration (JSON)
+2.  Defining a new reusable custom element feature to include with el-maker's package (Step 5).
 
 Create `[element-name]-element.js` (e.g., `my-element-element.js`):
 
@@ -375,9 +383,176 @@ Plus infrastructure:
 
 For elements like `time-ticker` that have no HTML template or shadow DOM, simply don't activate the `templateMaker` feature in `wireFeatures.js`. The feature remains declared in `supportedFeatures` (inherited from `ElementMaker`) but is never instantiated because no `assignFeatures` call references it.
 
-## Elements With HTML (Coming Soon)
+## Elements With HTML: Declarative Shadow DOM Without a JS Class
+
+For visual elements you can skip the `def.js` / `wireFeatures.js` / custom element class entirely and register the element with a `cede` script that extends `el-maker`. The scratch-box checkbox is the reference implementation of this pattern: it is built from a single static HTML file (`root.html`) and a JSON feature configuration (`el-maker.json`).
+
+### How scratch-box is structured
+
+| File | Role |
+|------|------|
+| `root.html` | Declarative shadow DOM template, styles, inner form, and enhancement metadata. |
+| `el-maker.mjs` | Type-checked configuration generator for the ElementMaker features. |
+| `el-maker.json` | Generated JSON consumed by the `cede` script. |
+
+### The template file (`root.html`)
+
+The host element declares its shadow root declaratively, then contains everything needed inside the shadow DOM, including styles, a form element, and a `<be-hive>` block that wires up declarative enhancements:
+
+```html
+<scratch-box>
+    <template shadowrootmode=open>
+        <style adopt>
+            :host[hidden] { display:none; }
+            :host { display:block; background-color: HSL(250, 22%, 41%); padding: 1vw; }
+            /* ... remaining styles ... */
+        </style>
+        <form class="checkbox-wrapper">
+            <input 🪢 name=value type="checkbox" id="option"/>
+            <link itemprop=value>
+            <label for="option">
+                <slot name="labelTxt">scratch-box</slot>
+                <svg viewBox="0 0 60 40" aria-hidden="true" focusable="false">
+                    <path d="M21,2 ..." stroke-width="4" fill="none" stroke-dasharray="270" stroke-dashoffset="270"></path>
+                </svg>
+            </label>
+        </form>
+
+        <be-hive>
+            <script type=emc-parser
+                    src="be-hive/parsers/parse-grouped-capture-statements.js"
+                    parser-name=parse-grouped-capture-statements></script>
+            <script type=emc
+                    src="be-bound/🪢.json"
+                    wait-for-parsers=parse-grouped-capture-statements></script>
+        </be-hive>
+    </template>
+</scratch-box>
+```
+
+Key details:
+
+- `shadowrootmode=open` gives the element a declarative shadow DOM that the browser attaches before any script runs.
+- The internal checkbox is named `value` and carries the `🪢` emoji attribute. That marks it for the `be-bound` enhancement so the host `value` property and the inner checkbox `checked` state stay in sync.
+- `<link itemprop=value>` lets the `faceUp` feature expose the element as a form-associated value without any JS wiring.
+- The `<slot name="labelTxt">` lets users provide the label from light DOM via `<span slot="labelTxt">...</span>`.
+- `<style adopt>` with `adopt` ensures the styles are adopted into the shadow root instead of a separate `<style>` element.
+
+### The feature configuration (`el-maker.mjs` → `el-maker.json`)
+
+Instead of `wireFeatures.js`, the features are declared in JSON and consumed by the `cede` script. The source file is type-checked TypeScript via JSDoc comments and outputs `el-maker.json`:
+
+```javascript
+//@ts-check
+
+import { writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import {akaMethods as m, aka, builtInEmoji} from 'assign-gingerly/DX/emojis.js';
+
+/** @import {FontFaceFeatureConfig} from './types/font-face-feature/types'; */
+/** @import {EndUserProps} from './types'; */
+/** @import {RoundaboutOptions} from './types/roundabout/types' */
+/** @import {ElMakerConfig} from './types/el-maker/types' */
+
+const props = {
+    value: 'value',
+    name: 'name',
+    disabled: 'disabled',
+};
+
+const fontFaceFeatureConfig = {
+    fontFamilies: [
+        {
+            name: 'Indie Flower',
+            url: 'https://fonts.gstatic.com/s/indieflower/v24/m8JVjfNVeKWVnh3QMuKkFcZVZ0uH5dI.woff2',
+            descriptors: {
+                style: 'normal',
+                weight: '400',
+                unicodeRange: '...',
+            },
+        },
+        // additional font-face descriptors...
+    ],
+};
+
+const raConfig = {
+    assignOptions: {
+        akaMethods: {
+            '🔍': m['🔍']
+        }
+    },
+    merges: [
+        {
+            ifKeyIn: ['disabled'],
+            assign: {
+                '?.shadowRoot?.🔍?.input?.disabled': '?.disabled',
+            }
+        },
+    ],
+};
+
+/** @type {ElMakerConfig<EndUserProps>} */
+const features = {
+    assignFeatures: {
+        faceUp: { customData: { integrateWithRoundabout: true } },
+        truthSourcer: {},
+        roundabout: { customData: { raConfig } },
+        fontMgr: { customData: { fontFaceFeatureConfig } },
+        templateMaker: {},
+    },
+};
+
+export function render() {
+    return JSON.stringify(features, null, 4);
+}
+
+const __filename = fileURLToPath(import.meta.url);
+const outputFile = __filename.replace(/\.mjs$/, '.json');
+writeFileSync(outputFile, render(), 'utf8');
+```
+
+Run `node el-maker.mjs` (or `npm run build-el-maker` if your `package.json` includes a watch script) to regenerate `el-maker.json`.
+
+### Registering the element in a page
+
+The element is defined by a `cede` script. Include `imp-h` (or another template importer) to fetch `root.html`, and `el-maker/def.js` to provide the base class machinery:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>scratch-box demo</title>
+    <script type=module>
+        import 'be-hive/be-hive.js';
+        import 'imp-h/imp-h.js';
+        import 'el-maker/def.js';
+    </script>
+</head>
+<body>
+    <scratch-box imp-h="scratch-box/root.html">
+        <span slot=labelTxt>Create demo</span>
+        <script type=cede data-extends=el-maker src="scratch-box/el-maker.json"></script>
+    </scratch-box>
+</body>
+</html>
+```
+
+Notes:
+
+- `imp-h` observes the `imp-h` attribute and imports the declarative shadow DOM template from `root.html`.
+- The `<script type=cede data-extends=el-maker>` tells the mount observer to register the host element by extending `ElementMaker` and applying the feature JSON.
+- No JS class file is required because all behavior is provided by the configured ElementMaker features and the declarative shadow DOM.
+
+### When to use this pattern
+
+Use the declarative shadow DOM + `cede` pattern when:
+
+- The element is primarily visual and static.
+- You want server-side rendering and progressive enhancement with no client-side custom element class.
+- Feature configuration (form association, attribute reflection, reactive wiring, fonts) is sufficient for all behavior.
 
-For elements that render static or dynamic HTML, the `templateMaker` feature handles template instantiation and shadow DOM attachment. Documentation for this pattern — including how to declare templates, bind data, and integrate with roundabout — will be added in a future update.
+When you need custom runtime behavior beyond the shared features, fall back to the class-based pattern in the earlier sections and add your own feature.
 
 ## Tips
 

package/inferencer/types/assign-gingerly/types.d.ts

@@ -955,7 +955,8 @@ export interface RestrictedPropSetting {
  */
 export interface RestrictedMethodConfig {
     method: string;
-    addArgs?: string[];          // Phase V: append sanitizer args
+    appendArgs?: string[];       // Phase II: append args to each method call
+    addArgs?: string[];           // Deprecated alias for appendArgs
 }
 
 /**
@@ -982,6 +983,8 @@ export interface AssignPermissions {
     /** Sanitizer options (Phase III+) */
     sanitizerOptions?: Record<string, any>;
 
+    customSettings?: any;
+
     /** Restricted method settings (Phase IV+) */
     restrictedMethodSettings?: Array<string | RestrictedMethodConfig>;
 }
@@ -999,6 +1002,7 @@ export declare class PermissionProcessor {
     get hasAttrs(): boolean;
     checkRestrictedProp(key: string): boolean;
     checkRestrictedMethod(methodName: string): boolean;
+    getMethodAppendArgs(methodName: string): any[] | undefined;
     redirectRestrictedProp(target: any, key: string, value: any): boolean;
     checkRestrictedAttributeCall(methodName: string, args: any[]): { blocked: boolean; attrName?: string };
 }

package/inferencer/types/face-up/types.d.ts

@@ -52,6 +52,11 @@ export interface FaceUpProps {
      */
     value: string | File | FormData | null;
 
+    /**
+     * The control name used when submitting the form.
+     */
+    name: string;
+
     /**
      * Internal state for form restoration (optional).
      * If provided, passed as the second argument to setFormValue().

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assign-gingerly",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "This package provides a utility function for carefully merging one object into another.",
   "homepage": "https://github.com/bahrus/assign-gingerly#readme",
   "bugs": {

package/types/assign-gingerly/types.d.ts

@@ -955,7 +955,8 @@ export interface RestrictedPropSetting {
  */
 export interface RestrictedMethodConfig {
     method: string;
-    addArgs?: string[];          // Phase V: append sanitizer args
+    appendArgs?: string[];       // Phase II: append args to each method call
+    addArgs?: string[];           // Deprecated alias for appendArgs
 }
 
 /**
@@ -982,6 +983,8 @@ export interface AssignPermissions {
     /** Sanitizer options (Phase III+) */
     sanitizerOptions?: Record<string, any>;
 
+    customSettings?: any;
+
     /** Restricted method settings (Phase IV+) */
     restrictedMethodSettings?: Array<string | RestrictedMethodConfig>;
 }
@@ -999,6 +1002,7 @@ export declare class PermissionProcessor {
     get hasAttrs(): boolean;
     checkRestrictedProp(key: string): boolean;
     checkRestrictedMethod(methodName: string): boolean;
+    getMethodAppendArgs(methodName: string): any[] | undefined;
     redirectRestrictedProp(target: any, key: string, value: any): boolean;
     checkRestrictedAttributeCall(methodName: string, args: any[]): { blocked: boolean; attrName?: string };
 }