@genesislcap/foundation-forms 14.427.2-alpha-e0ffaad.0 → 14.428.1-alpha-035cbdd.0

package/dist/custom-elements.json

@@ -706,30 +706,6 @@
             "module": "./jsonforms/renderers/LayoutVerticalCategorizationRenderer"
           }
         },
-        {
-          "kind": "js",
-          "name": "controlWrapperTemplate",
-          "declaration": {
-            "name": "controlWrapperTemplate",
-            "module": "./jsonforms/renderers/ControlWrapperRenderer"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "controlWrapperStyles",
-          "declaration": {
-            "name": "controlWrapperStyles",
-            "module": "./jsonforms/renderers/ControlWrapperRenderer"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "layoutWrapperTemplate",
-          "declaration": {
-            "name": "layoutWrapperTemplate",
-            "module": "./jsonforms/renderers/LayoutRenderer"
-          }
-        },
         {
           "kind": "js",
           "name": "*",
@@ -1315,6 +1291,234 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/json-forms.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "JSON Forms host element for schema-driven UI.",
+          "name": "JSONForms",
+          "members": [
+            {
+              "kind": "field",
+              "name": "submitted",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "prefix"
+            },
+            {
+              "kind": "method",
+              "name": "prefixChanged"
+            },
+            {
+              "kind": "field",
+              "name": "jsonforms"
+            },
+            {
+              "kind": "field",
+              "name": "i18n"
+            },
+            {
+              "kind": "field",
+              "name": "uichemaToUse"
+            },
+            {
+              "kind": "field",
+              "name": "schema"
+            },
+            {
+              "kind": "method",
+              "name": "schemaChanged"
+            },
+            {
+              "kind": "field",
+              "name": "uischema",
+              "type": {
+                "text": "UISchemaElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "uischemaChanged"
+            },
+            {
+              "kind": "field",
+              "name": "data"
+            },
+            {
+              "kind": "method",
+              "name": "dataChanged"
+            },
+            {
+              "kind": "field",
+              "name": "renderers",
+              "type": {
+                "text": "JsonFormsRendererRegistryEntry[]"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderersChanged"
+            },
+            {
+              "kind": "field",
+              "name": "validationMode",
+              "type": {
+                "text": "ValidationMode"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "validationModeChanged"
+            },
+            {
+              "kind": "field",
+              "name": "ajv",
+              "type": {
+                "text": "Ajv"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "ajvChanged"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "readonlyChanged"
+            },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "configChanged"
+            },
+            {
+              "kind": "field",
+              "name": "rowSubmitStatuses",
+              "type": {
+                "text": "Map<number, BulkRowStatus>"
+              },
+              "default": "new Map()",
+              "description": "Row submit statuses for bulk insert mode.\nPassed from the parent foundation-form."
+            },
+            {
+              "kind": "method",
+              "name": "rowSubmitStatusesChanged"
+            },
+            {
+              "kind": "field",
+              "name": "bulkInsert",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the form is in bulk insert mode.\nPassed from the parent foundation-form."
+            },
+            {
+              "kind": "method",
+              "name": "bulkInsertChanged"
+            },
+            {
+              "kind": "field",
+              "name": "props",
+              "type": {
+                "text": "RendererProps"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "dispatch"
+            },
+            {
+              "kind": "field",
+              "name": "validate",
+              "description": "Performs client-side validation by running the validator defined in the UI schema.",
+              "parameters": [
+                {
+                  "description": "the UI schema",
+                  "name": "uischema"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "copyUISchemaToClipboard"
+            }
+          ],
+          "events": [
+            {
+              "description": "Bubbles from nested dispatch-renderer when a control emits change (e.g. multiselect)",
+              "name": "change"
+            },
+            {
+              "description": "Fired when bound form data changes",
+              "name": "data-change"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "submitted"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "readonly"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "json-forms",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "JSONForms",
+          "declaration": {
+            "name": "JSONForms",
+            "module": "src/jsonforms/json-forms.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "json-forms",
+          "declaration": {
+            "name": "JSONForms",
+            "module": "src/jsonforms/json-forms.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/confirmation-dialog-utils.ts",
@@ -1609,318 +1813,90 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/types.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/validation.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "mustMatch",
-          "parameters": [
-            {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "description": "any other field"
-            }
-          ],
-          "description": "Ensures the value of the current field (the one the validator is on) matches the one of the target field.",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "getAnyOfErrorMessage",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "errors",
-              "type": {
-                "text": "Array<any> | undefined"
-              }
-            },
-            {
-              "name": "schema",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "controlPath",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "name": "uiCustomMsg",
-              "optional": true,
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Computes a human-friendly anyOf error message for a given control path.\nPrefers UI schema custom message, then JSON schema errorMessage.anyOf, then a constructed fallback.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "mustMatch",
-          "declaration": {
-            "name": "mustMatch",
-            "module": "src/utils/validation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getAnyOfErrorMessage",
-          "declaration": {
-            "name": "getAnyOfErrorMessage",
-            "module": "src/utils/validation.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/json-forms.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "JSON Forms host element for schema-driven UI.",
-          "name": "JSONForms",
-          "members": [
-            {
-              "kind": "field",
-              "name": "submitted",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "prefix"
-            },
-            {
-              "kind": "method",
-              "name": "prefixChanged"
-            },
-            {
-              "kind": "field",
-              "name": "jsonforms"
-            },
-            {
-              "kind": "field",
-              "name": "i18n"
-            },
-            {
-              "kind": "field",
-              "name": "uichemaToUse"
-            },
-            {
-              "kind": "field",
-              "name": "schema"
-            },
-            {
-              "kind": "method",
-              "name": "schemaChanged"
-            },
-            {
-              "kind": "field",
-              "name": "uischema",
-              "type": {
-                "text": "UISchemaElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "uischemaChanged"
-            },
-            {
-              "kind": "field",
-              "name": "data"
-            },
-            {
-              "kind": "method",
-              "name": "dataChanged"
-            },
-            {
-              "kind": "field",
-              "name": "renderers",
-              "type": {
-                "text": "JsonFormsRendererRegistryEntry[]"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderersChanged"
-            },
-            {
-              "kind": "field",
-              "name": "validationMode",
-              "type": {
-                "text": "ValidationMode"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "validationModeChanged"
-            },
-            {
-              "kind": "field",
-              "name": "ajv",
-              "type": {
-                "text": "Ajv"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "ajvChanged"
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "readonlyChanged"
-            },
-            {
-              "kind": "field",
-              "name": "config",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "configChanged"
-            },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/validation.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mustMatch",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "rowSubmitStatuses",
+              "name": "target",
               "type": {
-                "text": "Map<number, BulkRowStatus>"
+                "text": "string"
               },
-              "default": "new Map()",
-              "description": "Row submit statuses for bulk insert mode.\nPassed from the parent foundation-form."
-            },
-            {
-              "kind": "method",
-              "name": "rowSubmitStatusesChanged"
-            },
+              "description": "any other field"
+            }
+          ],
+          "description": "Ensures the value of the current field (the one the validator is on) matches the one of the target field.",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "privacy": "public"
+        },
+        {
+          "kind": "function",
+          "name": "getAnyOfErrorMessage",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "bulkInsert",
+              "name": "errors",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the form is in bulk insert mode.\nPassed from the parent foundation-form."
-            },
-            {
-              "kind": "method",
-              "name": "bulkInsertChanged"
+                "text": "Array<any> | undefined"
+              }
             },
             {
-              "kind": "field",
-              "name": "props",
+              "name": "schema",
               "type": {
-                "text": "RendererProps"
-              },
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "dispatch"
-            },
-            {
-              "kind": "field",
-              "name": "validate",
-              "description": "Performs client-side validation by running the validator defined in the UI schema.",
-              "parameters": [
-                {
-                  "description": "the UI schema",
-                  "name": "uischema"
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "any"
               }
             },
             {
-              "kind": "method",
-              "name": "copyUISchemaToClipboard"
-            }
-          ],
-          "events": [
-            {
-              "description": "Bubbles from nested dispatch-renderer when a control emits change (e.g. multiselect)",
-              "name": "change"
-            },
-            {
-              "description": "Fired when bound form data changes",
-              "name": "data-change"
-            }
-          ],
-          "attributes": [
-            {
+              "name": "controlPath",
               "type": {
-                "text": "boolean"
-              },
-              "fieldName": "submitted"
+                "text": "string | undefined"
+              }
             },
             {
+              "name": "uiCustomMsg",
+              "optional": true,
               "type": {
-                "text": "boolean"
-              },
-              "fieldName": "readonly"
+                "text": "string"
+              }
             }
           ],
-          "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
-          },
-          "tagName": "json-forms",
-          "customElement": true
+          "description": "Computes a human-friendly anyOf error message for a given control path.\nPrefers UI schema custom message, then JSON schema errorMessage.anyOf, then a constructed fallback.",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "JSONForms",
+          "name": "mustMatch",
           "declaration": {
-            "name": "JSONForms",
-            "module": "src/jsonforms/json-forms.ts"
+            "name": "mustMatch",
+            "module": "src/utils/validation.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "json-forms",
+          "kind": "js",
+          "name": "getAnyOfErrorMessage",
           "declaration": {
-            "name": "JSONForms",
-            "module": "src/jsonforms/json-forms.ts"
+            "name": "getAnyOfErrorMessage",
+            "module": "src/utils/validation.ts"
           }
         }
       ]
@@ -2290,31 +2266,113 @@
       "path": "src/jsonforms/renderers/ControlWrapperRenderer.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "controlWrapperTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<DispatchRenderer>"
-            }
-          },
-          "parameters": [
+          "kind": "variable",
+          "name": "ControlWrapperRendererTemplate",
+          "default": "html`\n  <template>\n    ${when(\n      (x) => x.control?.visible,\n      html`\n        <div\n          class=${(x) =>\n            classNames(\n              ['wrapperRoot', true],\n              ['labelLeft', x.jsonForms?.core?.uischema?.options?.labelPlacement === 'left'],\n            )}\n          id=${(x) => x.control.path + '-wrapper'}\n          data-test-id=${(x) => x.control.path + '-wrapper'}\n          role=\"group\"\n          aria-labelledby=${(x) => (x.computedLabel ? x.control.path + '-label' : null)}\n        >\n          ${when(\n            (x) => x.computedLabel,\n            html`\n              <label\n                id=\"${(x) => x.control.path + '-label'}\"\n                for=\"${(x) => x.control.path}\"\n                class=\"${(x) => classNames('label', ['visually-hidden', x.hideLabel])}\"\n              >\n                <span>\n                  ${(x) => x.computedLabel}${when(\n                    (x) => x.control.uischema?.options?.tooltip,\n                    (x) => x.getPrefixedTooltip,\n                  )}\n                </span>\n              </label>\n            `,\n          )}\n\n          <div class=\"wrapper\" part=\"wrapper\">\n            <slot></slot>\n          </div>\n          <div\n            class=\"${(x) =>\n              (x.control.errors || x.anyOfError) && x.touched ? 'error' : 'description'}\"\n          >\n            ${(x) =>\n              x.touched && (x.control.errors || x.anyOfError)\n                ? [x.control.errors, x.anyOfError].filter(Boolean).join(' ')\n                : x.showDescription\n                  ? x.control.description\n                  : ''}\n          </div>\n        </div>\n      `,\n    )}\n  </template>\n`"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ControlWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "control"
+            },
+            {
+              "kind": "field",
+              "name": "jsonForms"
+            },
+            {
+              "kind": "field",
+              "name": "touched",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
-              "name": "options",
+              "kind": "field",
+              "name": "prefix",
               "type": {
-                "text": "ControlWrapperOptions"
+                "text": "string"
               }
+            },
+            {
+              "kind": "field",
+              "name": "showDescription",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "computedLabel",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "getPrefixedTooltip",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "anyOfError",
+              "readonly": true
             }
           ],
-          "description": "Light-DOM-friendly control wrapper that replaces the former `<control-wrapper>`\ncustom element. Renders label, error/description slots, and composes a provided\ninner control template inline within the renderer's template so that bindings\nstay on the `DispatchRenderer` source.",
-          "privacy": "public"
+          "attributes": [
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideLabel"
+            },
+            {
+              "name": "prefix",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "prefix"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "control-wrapper",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "controlWrapperTemplate",
+          "name": "ControlWrapperRendererTemplate",
           "declaration": {
-            "name": "controlWrapperTemplate",
+            "name": "ControlWrapperRendererTemplate",
+            "module": "src/jsonforms/renderers/ControlWrapperRenderer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ControlWrapper",
+          "declaration": {
+            "name": "ControlWrapper",
+            "module": "src/jsonforms/renderers/ControlWrapperRenderer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "control-wrapper",
+          "declaration": {
+            "name": "ControlWrapper",
             "module": "src/jsonforms/renderers/ControlWrapperRenderer.ts"
           }
         }
@@ -2343,7 +2401,7 @@
           "type": {
             "text": "RendererEntry"
           },
-          "default": "{\n  renderer: html`\n    ${(x) => DateControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),\n  mapper: mapStateToControlProps,\n}"
+          "default": "{\n  renderer: html`\n    ${(x) => DateControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),\n  mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template\n}"
         }
       ],
       "exports": [
@@ -2556,7 +2614,7 @@
           "type": {
             "text": "RendererEntry"
           },
-          "default": "{\n  renderer: html`\n    ${(x) => DateControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),\n  mapper: mapStateToControlProps,\n}"
+          "default": "{\n  renderer: html`\n    ${(x) => DateControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),\n  mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template\n}"
         }
       ],
       "exports": [
@@ -2646,7 +2704,7 @@
           "type": {
             "text": "RendererEntry"
           },
-          "default": "{\n  renderer: html`\n    ${(x) => TimeControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(TIME_CONTROL_RANK, isOneOfTime),\n  mapper: mapStateToControlProps,\n}"
+          "default": "{\n  renderer: html`\n    ${(x) => TimeControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(TIME_CONTROL_RANK, isOneOfTime),\n  mapper: mapStateToControlProps, // TODO: change mapper to handle dates instead of doing it in the template\n}"
         }
       ],
       "exports": [
@@ -2712,7 +2770,7 @@
         {
           "kind": "variable",
           "name": "LayoutArrayRendererTemplate",
-          "default": "html<DispatchRenderer>`\n  <template>\n    <div style=\"${(x) => (x.control.uischema.options?.border ? borderStyle : '')}\">\n      ${controlWrapperTemplate({\n        prefix: 'zero',\n        innerTemplate: html<DispatchRenderer>`\n          <array-list-wrapper :form=${(x) => x} :control=${(x) => x.control}></array-list-wrapper>\n        `,\n      })}\n    </div>\n  </template>\n`"
+          "default": "html`\n  <template>\n    <div style=\"${(x) => (x.control.uischema.options?.border ? borderStyle : '')}\">\n      <control-wrapper\n        :control=${(x) => x.control}\n        :jsonForms=${(x) => x.jsonforms}\n        :touched=${(x) => x.touched}\n        ?submitted=${(x) => x.submitted}\n      >\n        <array-list-wrapper :form=${(x) => x} :control=${(x) => x.control}></array-list-wrapper>\n      </control-wrapper>\n    </div>\n  </template>\n`"
         },
         {
           "kind": "variable",
@@ -2786,7 +2844,7 @@
         {
           "kind": "variable",
           "name": "LayoutFormGridRendererTemplate",
-          "default": "html<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div\n          style=\"\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 8px;\n          \"\n        >\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <dispatch-renderer\n                ?submitted=${(x, ctx) => ctx.parent.submitted}\n                :dispatch=${(x, ctx) => ctx.parent.dispatch}\n                :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n                :prefix=${(x, ctx) => ctx.parent.prefix}\n                :props=${(x, ctx) => ({\n                  uischema: x,\n                  schema: ctx.parent.control.schema,\n                  renderers: ctx.parent.control.renderers,\n                  path: ctx.parent.control.path,\n                  enabled: ctx.parent.control.enabled,\n                })}\n              ></dispatch-renderer>\n            `,\n          )}\n        </div>\n      `,\n    })}\n  </template>\n`"
+          "default": "html`\n  <template>\n    <layout-wrapper :control=${(x) => x.control}>\n      <div\n        style=\"\n          display: grid;\n          grid-template-columns: repeat(4, 1fr);\n          gap: 8px;\n        \"\n      >\n        ${repeat(\n          (x) => x.control.uischema.elements,\n          html`\n            <dispatch-renderer\n              ?submitted=${(x, ctx) => ctx.parent.submitted}\n              :dispatch=${(x, ctx) => ctx.parent.dispatch}\n              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n              :prefix=${(x, ctx) => ctx.parent.prefix}\n              :props=${(x, ctx) => ({\n                uischema: x,\n                schema: ctx.parent.control.schema,\n                renderers: ctx.parent.control.renderers,\n                path: ctx.parent.control.path,\n                enabled: ctx.parent.control.enabled,\n              })}\n            ></dispatch-renderer>\n          `,\n        )}\n      </div>\n    </layout-wrapper>\n  </template>\n`"
         },
         {
           "kind": "variable",
@@ -2823,7 +2881,7 @@
         {
           "kind": "variable",
           "name": "LayoutGroupRendererTemplate",
-          "default": "html<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      hideLabel: true,\n      innerTemplate: html<DispatchRenderer>`\n        <div>\n          ${when(\n            (x) => x.control.label,\n            html<DispatchRenderer>`\n              <div\n                for=\"${(x) => x.control.path + '-wrapper'}\"\n                style=\"color: var(--neutral-foreground-rest);\n                     padding-bottom: calc(var(--design-unit) * 1px);\n                     margin-bottom: calc(var(--design-unit) * 4px);\n                     font-weight: 600;\n                     font-size: var(--type-ramp-base-font-size);\n                     display: flex;\n                     justify-content: space-between;\"\n              >\n                ${(x) => x.control.label}\n              </div>\n            `,\n          )}\n          ${repeat(\n            (x) => x.control.uischema.options.childElements,\n            html`\n              <dispatch-renderer\n                ?submitted=${(x, ctx) => ctx.parent.submitted}\n                :dispatch=${(x, ctx) => ctx.parent.dispatch}\n                :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n                :prefix=${(x, ctx) => ctx.parent.prefix}\n                :props=${(x, ctx) => ({\n                  uischema: x,\n                  schema: ctx.parent.control.schema,\n                  renderers: ctx.parent.control.renderers,\n                  path: ctx.parent.control.path,\n                  enabled: ctx.parent.control.enabled,\n                })}\n              ></dispatch-renderer>\n            `,\n          )}\n        </div>\n      `,\n    })}\n  </template>\n`"
+          "default": "html`\n  <template>\n    <layout-wrapper :control=${(x) => x.control} hide-label>\n      <div>\n        ${when(\n          (x) => x.control.label,\n          html`\n            <div\n              for=\"${(x) => x.control.path + '-wrapper'}\"\n              style=\"color: var(--neutral-foreground-rest);\n                   padding-bottom: calc(var(--design-unit) * 1px);\n                   margin-bottom: calc(var(--design-unit) * 4px);\n                   font-weight: 600;\n                   font-size: var(--type-ramp-base-font-size);\n                   display: flex;\n                   justify-content: space-between;\"\n            >\n              ${(x) => x.control.label}\n            </div>\n          `,\n        )}\n        ${repeat(\n          (x) => x.control.uischema.options.childElements,\n          html`\n            <dispatch-renderer\n              ?submitted=${(x, ctx) => ctx.parent.submitted}\n              :dispatch=${(x, ctx) => ctx.parent.dispatch}\n              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n              :prefix=${(x, ctx) => ctx.parent.prefix}\n              :props=${(x, ctx) => ({\n                uischema: x,\n                schema: ctx.parent.control.schema,\n                renderers: ctx.parent.control.renderers,\n                path: ctx.parent.control.path,\n                enabled: ctx.parent.control.enabled,\n              })}\n            ></dispatch-renderer>\n          `,\n        )}\n      </div>\n    </layout-wrapper>\n  </template>\n`"
         },
         {
           "kind": "variable",
@@ -2860,7 +2918,7 @@
         {
           "kind": "variable",
           "name": "LayoutHorizontalRendererTemplate",
-          "default": "html<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div\n          style=\"\n            display: flex;\n            flex-direction: row;\n            gap: 10px\"\n        >\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <dispatch-renderer\n                style=\"flex: 1; min-width: 0\"\n                ?submitted=${(x, ctx) => ctx.parent.submitted}\n                :dispatch=${(x, ctx) => ctx.parent.dispatch}\n                :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n                :prefix=${(x, ctx) => ctx.parent.prefix}\n                :props=${(x, ctx) => ({\n                  uischema: x,\n                  schema: ctx.parent.control.schema,\n                  renderers: ctx.parent.control.renderers,\n                  path: ctx.parent.control.path,\n                  enabled: ctx.parent.control.enabled,\n                })}\n              ></dispatch-renderer>\n            `,\n          )}\n        </div>\n      `,\n    })}\n  </template>\n`"
+          "default": "html`\n  <template>\n    <layout-wrapper :control=${(x) => x.control}>\n      <div\n        style=\"\n      display: flex;\n      flex-direction: row;\n      gap: 10px\"\n      >\n        ${repeat(\n          (x) => x.control.uischema.elements,\n          html`\n            <dispatch-renderer\n              style=\"flex: 1; min-width: 0\"\n              ?submitted=${(x, ctx) => ctx.parent.submitted}\n              :dispatch=${(x, ctx) => ctx.parent.dispatch}\n              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n              :prefix=${(x, ctx) => ctx.parent.prefix}\n              :props=${(x, ctx) => ({\n                uischema: x,\n                schema: ctx.parent.control.schema,\n                renderers: ctx.parent.control.renderers,\n                path: ctx.parent.control.path,\n                enabled: ctx.parent.control.enabled,\n              })}\n            ></dispatch-renderer>\n          `,\n        )}\n      </div>\n    </layout-wrapper>\n  </template>\n`"
         },
         {
           "kind": "variable",
@@ -2895,28 +2953,44 @@
       "path": "src/jsonforms/renderers/LayoutRenderer.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "layoutWrapperTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<DispatchRenderer>"
+          "kind": "class",
+          "description": "",
+          "name": "LayoutWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "control"
+            },
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             }
-          },
-          "parameters": [
+          ],
+          "attributes": [
             {
-              "name": "options",
+              "name": "hide-label",
               "type": {
-                "text": "LayoutWrapperOptions"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideLabel"
             }
           ],
-          "description": "Light-DOM-friendly layout wrapper that replaces the former `<layout-wrapper>`\ncustom element. Renders the (optional) control label and, when the control is\nvisible, composes the provided inner template inline so that bindings stay on\nthe `DispatchRenderer` source.",
-          "privacy": "public"
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "layout-wrapper",
+          "customElement": true
         },
         {
           "kind": "variable",
           "name": "LayoutRendererTemplate",
-          "default": "html<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div>\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <dispatch-renderer\n                ?submitted=${(x, ctx) => ctx.parent.submitted}\n                :dispatch=${(x, ctx) => ctx.parent.dispatch}\n                :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n                :prefix=${(x, ctx) => ctx.parent.prefix}\n                :props=${(x, ctx) => ({\n                  uischema: x,\n                  schema: ctx.parent.control.schema,\n                  renderers: ctx.parent.control.renderers,\n                  path: ctx.parent.control.path,\n                  enabled: ctx.parent.control.enabled,\n                })}\n              ></dispatch-renderer>\n            `,\n          )}\n        </div>\n      `,\n    })}\n  </template>\n`"
+          "default": "html`\n  <template>\n    <layout-wrapper :control=${(x) => x.control}>\n      <div>\n        ${repeat(\n          (x) => x.control.uischema.elements,\n          html`\n            <dispatch-renderer\n              ?submitted=${(x, ctx) => ctx.parent.submitted}\n              :dispatch=${(x, ctx) => ctx.parent.dispatch}\n              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n              :prefix=${(x, ctx) => ctx.parent.prefix}\n              :props=${(x, ctx) => ({\n                uischema: x,\n                schema: ctx.parent.control.schema,\n                renderers: ctx.parent.control.renderers,\n                path: ctx.parent.control.path,\n                enabled: ctx.parent.control.enabled,\n              })}\n            ></dispatch-renderer>\n          `,\n        )}\n      </div>\n    </layout-wrapper>\n  </template>\n`"
         },
         {
           "kind": "variable",
@@ -2930,9 +3004,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "layoutWrapperTemplate",
+          "name": "LayoutWrapper",
+          "declaration": {
+            "name": "LayoutWrapper",
+            "module": "src/jsonforms/renderers/LayoutRenderer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "layout-wrapper",
           "declaration": {
-            "name": "layoutWrapperTemplate",
+            "name": "LayoutWrapper",
             "module": "src/jsonforms/renderers/LayoutRenderer.ts"
           }
         },
@@ -2998,7 +3080,7 @@
         {
           "kind": "variable",
           "name": "LayoutVertical2ColumnsRendererTemplate",
-          "default": "html<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div\n          style=\"\n            display: flex;\n            flex-direction: row;\n            flex-wrap: wrap;\n            justify-content: space-between;\"\n        >\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <div style=\"width: 49%\">\n                <dispatch-renderer\n                  ?submitted=${(x, ctx) => ctx.parent.submitted}\n                  :dispatch=${(x, ctx) => ctx.parent.dispatch}\n                  :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n                  :prefix=${(x, ctx) => ctx.parent.prefix}\n                  :props=${(x, ctx) => ({\n                    uischema: x,\n                    schema: ctx.parent.control.schema,\n                    renderers: ctx.parent.control.renderers,\n                    path: ctx.parent.control.path,\n                    enabled: ctx.parent.control.enabled,\n                  })}\n                ></dispatch-renderer>\n              </div>\n            `,\n          )}\n        </div>\n      `,\n    })}\n  </template>\n`"
+          "default": "html`\n  <template>\n    <layout-wrapper :control=${(x) => x.control}>\n      <div\n        style=\"\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n          justify-content: space-between;\"\n        >\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <div style=\"width: 49%\">\n                <dispatch-renderer\n                  ?submitted=${(x, ctx) => ctx.parent.submitted}\n                  :dispatch=${(x, ctx) => ctx.parent.dispatch}\n                  :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n                  :prefix=${(x, ctx) => ctx.parent.prefix}\n                  :props=${(x, ctx) => ({\n                    uischema: x,\n                    schema: ctx.parent.control.schema,\n                    renderers: ctx.parent.control.renderers,\n                    path: ctx.parent.control.path,\n                    enabled: ctx.parent.control.enabled,\n                  })}\n                ></dispatch-renderer>\n              </div>\n        </div>\n      `,\n          )}\n    </layout-wrapper>\n  </template>\n`"
         },
         {
           "kind": "variable",