@genesislcap/foundation-forms 14.429.1 → 14.429.2-alpha-0d0a008.0

package/dist/custom-elements.json

@@ -706,6 +706,54 @@
             "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": "ControlWrapper",
+          "declaration": {
+            "name": "ControlWrapper",
+            "module": "./jsonforms/renderers/ControlWrapperRenderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ControlWrapperRendererTemplate",
+          "declaration": {
+            "name": "ControlWrapperRendererTemplate",
+            "module": "./jsonforms/renderers/ControlWrapperRenderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "layoutWrapperTemplate",
+          "declaration": {
+            "name": "layoutWrapperTemplate",
+            "module": "./jsonforms/renderers/LayoutRenderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LayoutWrapper",
+          "declaration": {
+            "name": "LayoutWrapper",
+            "module": "./jsonforms/renderers/LayoutRenderer"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -1903,416 +1951,190 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isArray.ts",
+      "path": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "isArray",
+          "name": "ArrayListWrapperRendererTemplate",
           "parameters": [
             {
-              "name": "itemsType",
+              "name": "prefix",
+              "default": "'zero'",
               "type": {
-                "text": "ArrayItemsType"
+                "text": "string"
               }
             }
           ]
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ArrayListWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "form"
+            },
+            {
+              "kind": "field",
+              "name": "control"
+            },
+            {
+              "kind": "field",
+              "name": "schema"
+            },
+            {
+              "kind": "field",
+              "name": "uiSchema"
+            },
+            {
+              "kind": "field",
+              "name": "isGridView",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "gridViewHeaderCells",
+              "type": {
+                "text": "GridHeaderCell[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "gridViewUiSchema",
+              "type": {
+                "text": "any"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "controlChanged"
+            },
+            {
+              "kind": "method",
+              "name": "addItem"
+            },
+            {
+              "kind": "method",
+              "name": "deleteItem",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "submitRow",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The row index to submit"
+                }
+              ],
+              "description": "Submits a single row by emitting an event that bubbles up to the foundation-form."
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "array-list-wrapper",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "isArray",
+          "name": "ArrayListWrapperRendererTemplate",
           "declaration": {
-            "name": "isArray",
-            "module": "src/jsonforms/testers/isArray.ts"
+            "name": "ArrayListWrapperRendererTemplate",
+            "module": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isDate.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "isOneOfDate"
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "isOneOfDate",
+          "name": "ArrayListWrapper",
           "declaration": {
-            "name": "isOneOfDate",
-            "module": "src/jsonforms/testers/isDate.ts"
+            "name": "ArrayListWrapper",
+            "module": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "array-list-wrapper",
+          "declaration": {
+            "name": "ArrayListWrapper",
+            "module": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isInvisible.ts",
+      "path": "src/jsonforms/renderers/BooleanControlRenderer.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "isInvisible",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
+          "name": "BooleanControlRendererTemplate",
           "parameters": [
             {
-              "name": "uischema",
-              "type": {
-                "text": "UISchemaElement"
-              }
-            },
-            {
-              "name": "schema",
-              "type": {
-                "text": "JsonSchema"
-              }
-            },
-            {
-              "name": "context",
+              "name": "prefix",
+              "default": "'zero'",
               "type": {
-                "text": "TesterContext"
+                "text": "string"
               }
             }
           ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isInvisible",
-          "declaration": {
-            "name": "isInvisible",
-            "module": "src/jsonforms/testers/isInvisible.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isOneOfBoolean.ts",
-      "declarations": [
+        },
         {
           "kind": "variable",
-          "name": "isOneOfBoolean"
+          "name": "BooleanControlEntry",
+          "type": {
+            "text": "RendererEntry"
+          },
+          "default": "{\n  renderer: html<DispatchRenderer>`\n    ${(x) => BooleanControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(BOOLEAN_CONTROL_RANK, isOneOfBoolean),\n  mapper: mapStateToControlProps,\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "isOneOfBoolean",
+          "name": "BooleanControlRendererTemplate",
           "declaration": {
-            "name": "isOneOfBoolean",
-            "module": "src/jsonforms/testers/isOneOfBoolean.ts"
+            "name": "BooleanControlRendererTemplate",
+            "module": "src/jsonforms/renderers/BooleanControlRenderer.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isOneOfEnum.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "isOneOfEnum"
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "isOneOfEnum",
+          "name": "BooleanControlEntry",
           "declaration": {
-            "name": "isOneOfEnum",
-            "module": "src/jsonforms/testers/isOneOfEnum.ts"
+            "name": "BooleanControlEntry",
+            "module": "src/jsonforms/renderers/BooleanControlRenderer.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isOneOfNumber.ts",
+      "path": "src/jsonforms/renderers/CategorizationWrapperRenderer.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "isOneOfNumber"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isOneOfNumber",
-          "declaration": {
-            "name": "isOneOfNumber",
-            "module": "src/jsonforms/testers/isOneOfNumber.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isOneOfOptionMultiselect.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "isOneOfOptionMultiselect"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isOneOfOptionMultiselect",
-          "declaration": {
-            "name": "isOneOfOptionMultiselect",
-            "module": "src/jsonforms/testers/isOneOfOptionMultiselect.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/testers/isTime.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "isOneOfTime"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isOneOfTime",
-          "declaration": {
-            "name": "isOneOfTime",
-            "module": "src/jsonforms/testers/isTime.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/testers/optionIs.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "optionIs",
-          "return": {
-            "type": {
-              "text": "Tester"
-            }
-          },
-          "parameters": [
-            {
-              "name": "optionName",
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "optionIs",
-          "declaration": {
-            "name": "optionIs",
-            "module": "src/jsonforms/testers/optionIs.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "ArrayListWrapperRendererTemplate",
-          "parameters": [
-            {
-              "name": "prefix",
-              "default": "'zero'",
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ArrayListWrapper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "form"
-            },
-            {
-              "kind": "field",
-              "name": "control"
-            },
-            {
-              "kind": "field",
-              "name": "schema"
-            },
-            {
-              "kind": "field",
-              "name": "uiSchema"
-            },
-            {
-              "kind": "field",
-              "name": "isGridView",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "gridViewHeaderCells",
-              "type": {
-                "text": "GridHeaderCell[]"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "gridViewUiSchema",
-              "type": {
-                "text": "any"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "method",
-              "name": "controlChanged"
-            },
-            {
-              "kind": "method",
-              "name": "addItem"
-            },
-            {
-              "kind": "method",
-              "name": "deleteItem",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "submitRow",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The row index to submit"
-                }
-              ],
-              "description": "Submits a single row by emitting an event that bubbles up to the foundation-form."
-            }
-          ],
-          "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
-          },
-          "tagName": "array-list-wrapper",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ArrayListWrapperRendererTemplate",
-          "declaration": {
-            "name": "ArrayListWrapperRendererTemplate",
-            "module": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ArrayListWrapper",
-          "declaration": {
-            "name": "ArrayListWrapper",
-            "module": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "array-list-wrapper",
-          "declaration": {
-            "name": "ArrayListWrapper",
-            "module": "src/jsonforms/renderers/ArrayListWrapperRenderer.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/renderers/BooleanControlRenderer.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "BooleanControlRendererTemplate",
-          "parameters": [
-            {
-              "name": "prefix",
-              "default": "'zero'",
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "variable",
-          "name": "BooleanControlEntry",
-          "type": {
-            "text": "RendererEntry"
-          },
-          "default": "{\n  renderer: html<DispatchRenderer>`\n    ${(x) => BooleanControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(BOOLEAN_CONTROL_RANK, isOneOfBoolean),\n  mapper: mapStateToControlProps,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BooleanControlRendererTemplate",
-          "declaration": {
-            "name": "BooleanControlRendererTemplate",
-            "module": "src/jsonforms/renderers/BooleanControlRenderer.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BooleanControlEntry",
-          "declaration": {
-            "name": "BooleanControlEntry",
-            "module": "src/jsonforms/renderers/BooleanControlRenderer.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/jsonforms/renderers/CategorizationWrapperRenderer.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "tabControlIconStyles",
-          "default": "css`\n  .tab-control-icon {\n    margin-left: 3px;\n    color: #f9644d;\n  }\n`"
-        },
+          "name": "tabControlIconStyles",
+          "default": "css`\n  .tab-control-icon {\n    margin-left: 3px;\n    color: #f9644d;\n  }\n`"
+        },
         {
           "kind": "function",
           "name": "CategorizationWrapperRendererTemplate",
@@ -2492,9 +2314,23 @@
       "path": "src/jsonforms/renderers/ControlWrapperRenderer.ts",
       "declarations": [
         {
-          "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": "function",
+          "name": "controlWrapperTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<DispatchRenderer>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "ControlWrapperOptions"
+              }
+            }
+          ],
+          "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"
         },
         {
           "kind": "class",
@@ -2573,6 +2409,7 @@
             "name": "FASTElement",
             "package": "@microsoft/fast-element"
           },
+          "deprecated": "Use `controlWrapperTemplate` instead. The `<control-wrapper>` custom element will be removed in a future major version. Migrate to the light-DOM `controlWrapperTemplate` function which renders inline within the parent renderer's template.",
           "tagName": "control-wrapper",
           "customElement": true
         }
@@ -2580,9 +2417,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ControlWrapperRendererTemplate",
+          "name": "controlWrapperTemplate",
           "declaration": {
-            "name": "ControlWrapperRendererTemplate",
+            "name": "controlWrapperTemplate",
             "module": "src/jsonforms/renderers/ControlWrapperRenderer.ts"
           }
         },
@@ -2627,7 +2464,7 @@
           "type": {
             "text": "RendererEntry"
           },
-          "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}"
+          "default": "{\n  renderer: html`\n    ${(x) => DateControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),\n  mapper: mapStateToControlProps,\n}"
         }
       ],
       "exports": [
@@ -2840,7 +2677,7 @@
           "type": {
             "text": "RendererEntry"
           },
-          "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}"
+          "default": "{\n  renderer: html`\n    ${(x) => DateControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(DATE_CONTROL_RANK, isOneOfDate),\n  mapper: mapStateToControlProps,\n}"
         }
       ],
       "exports": [
@@ -2930,7 +2767,7 @@
           "type": {
             "text": "RendererEntry"
           },
-          "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}"
+          "default": "{\n  renderer: html`\n    ${(x) => TimeControlRendererTemplate(x.prefix)}\n  `,\n  tester: rankWith(TIME_CONTROL_RANK, isOneOfTime),\n  mapper: mapStateToControlProps,\n}"
         }
       ],
       "exports": [
@@ -2996,7 +2833,7 @@
         {
           "kind": "variable",
           "name": "LayoutArrayRendererTemplate",
-          "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`"
+          "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`"
         },
         {
           "kind": "variable",
@@ -3070,7 +2907,7 @@
         {
           "kind": "variable",
           "name": "LayoutFormGridRendererTemplate",
-          "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`"
+          "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`"
         },
         {
           "kind": "variable",
@@ -3107,7 +2944,7 @@
         {
           "kind": "variable",
           "name": "LayoutGroupRendererTemplate",
-          "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`"
+          "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`"
         },
         {
           "kind": "variable",
@@ -3144,7 +2981,7 @@
         {
           "kind": "variable",
           "name": "LayoutHorizontalRendererTemplate",
-          "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`"
+          "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`"
         },
         {
           "kind": "variable",
@@ -3178,6 +3015,38 @@
       "kind": "javascript-module",
       "path": "src/jsonforms/renderers/LayoutRenderer.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "layoutWrapperTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<DispatchRenderer>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "LayoutWrapperOptions"
+              }
+            }
+          ],
+          "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"
+        },
+        {
+          "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`"
+        },
+        {
+          "kind": "variable",
+          "name": "LayoutRendererEntry",
+          "type": {
+            "text": "any"
+          },
+          "default": "{\n  renderer: LayoutRendererTemplate,\n  tester: rankWith(LAYOUT_RANK, isLayout),\n  mapper: mapStateToLayoutProps,\n}"
+        },
         {
           "kind": "class",
           "description": "",
@@ -3206,57 +3075,53 @@
               "fieldName": "hideLabel"
             }
           ],
-          "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
-          },
-          "tagName": "layout-wrapper",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "LayoutRendererTemplate",
-          "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",
-          "name": "LayoutRendererEntry",
-          "type": {
-            "text": "any"
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
           },
-          "default": "{\n  renderer: LayoutRendererTemplate,\n  tester: rankWith(LAYOUT_RANK, isLayout),\n  mapper: mapStateToLayoutProps,\n}"
+          "deprecated": "Use `layoutWrapperTemplate` instead. The `<layout-wrapper>` custom element will be removed in a future major version. Migrate to the light-DOM `layoutWrapperTemplate` function which renders inline within the parent renderer's template.",
+          "tagName": "layout-wrapper",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LayoutWrapper",
+          "name": "layoutWrapperTemplate",
           "declaration": {
-            "name": "LayoutWrapper",
+            "name": "layoutWrapperTemplate",
             "module": "src/jsonforms/renderers/LayoutRenderer.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "layout-wrapper",
+          "kind": "js",
+          "name": "LayoutRendererTemplate",
           "declaration": {
-            "name": "LayoutWrapper",
+            "name": "LayoutRendererTemplate",
             "module": "src/jsonforms/renderers/LayoutRenderer.ts"
           }
         },
         {
           "kind": "js",
-          "name": "LayoutRendererTemplate",
+          "name": "LayoutRendererEntry",
           "declaration": {
-            "name": "LayoutRendererTemplate",
+            "name": "LayoutRendererEntry",
             "module": "src/jsonforms/renderers/LayoutRenderer.ts"
           }
         },
         {
           "kind": "js",
-          "name": "LayoutRendererEntry",
+          "name": "LayoutWrapper",
           "declaration": {
-            "name": "LayoutRendererEntry",
+            "name": "LayoutWrapper",
+            "module": "src/jsonforms/renderers/LayoutRenderer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "layout-wrapper",
+          "declaration": {
+            "name": "LayoutWrapper",
             "module": "src/jsonforms/renderers/LayoutRenderer.ts"
           }
         }
@@ -3306,7 +3171,7 @@
         {
           "kind": "variable",
           "name": "LayoutVertical2ColumnsRendererTemplate",
-          "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`"
+          "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`"
         },
         {
           "kind": "variable",
@@ -4287,6 +4152,232 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isArray.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isArray",
+          "parameters": [
+            {
+              "name": "itemsType",
+              "type": {
+                "text": "ArrayItemsType"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isArray",
+          "declaration": {
+            "name": "isArray",
+            "module": "src/jsonforms/testers/isArray.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isDate.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isOneOfDate"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isOneOfDate",
+          "declaration": {
+            "name": "isOneOfDate",
+            "module": "src/jsonforms/testers/isDate.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isInvisible.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isInvisible",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "uischema",
+              "type": {
+                "text": "UISchemaElement"
+              }
+            },
+            {
+              "name": "schema",
+              "type": {
+                "text": "JsonSchema"
+              }
+            },
+            {
+              "name": "context",
+              "type": {
+                "text": "TesterContext"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isInvisible",
+          "declaration": {
+            "name": "isInvisible",
+            "module": "src/jsonforms/testers/isInvisible.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isOneOfBoolean.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isOneOfBoolean"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isOneOfBoolean",
+          "declaration": {
+            "name": "isOneOfBoolean",
+            "module": "src/jsonforms/testers/isOneOfBoolean.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isOneOfEnum.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isOneOfEnum"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isOneOfEnum",
+          "declaration": {
+            "name": "isOneOfEnum",
+            "module": "src/jsonforms/testers/isOneOfEnum.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isOneOfNumber.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isOneOfNumber"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isOneOfNumber",
+          "declaration": {
+            "name": "isOneOfNumber",
+            "module": "src/jsonforms/testers/isOneOfNumber.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isOneOfOptionMultiselect.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isOneOfOptionMultiselect"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isOneOfOptionMultiselect",
+          "declaration": {
+            "name": "isOneOfOptionMultiselect",
+            "module": "src/jsonforms/testers/isOneOfOptionMultiselect.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/isTime.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isOneOfTime"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isOneOfTime",
+          "declaration": {
+            "name": "isOneOfTime",
+            "module": "src/jsonforms/testers/isTime.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/testers/optionIs.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "optionIs",
+          "return": {
+            "type": {
+              "text": "Tester"
+            }
+          },
+          "parameters": [
+            {
+              "name": "optionName",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "optionIs",
+          "declaration": {
+            "name": "optionIs",
+            "module": "src/jsonforms/testers/optionIs.ts"
+          }
+        }
+      ]
     }
   ]
 }