@genesislcap/foundation-forms 14.451.2-FUI-2550.2 → 14.451.2-FUI-2550.5

package/dist/custom-elements.json

@@ -2236,6 +2236,29 @@
       "kind": "javascript-module",
       "path": "src/jsonforms/renderers/CategorizationWrapperRenderer.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "computeCategoryClassName",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "category",
+              "type": {
+                "text": "UiSchemaElement"
+              }
+            },
+            {
+              "name": "data",
+              "type": {
+                "text": "any"
+              }
+            }
+          ]
+        },
         {
           "kind": "variable",
           "name": "tabControlIconStyles",
@@ -2328,6 +2351,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "computeCategoryClassName",
+          "declaration": {
+            "name": "computeCategoryClassName",
+            "module": "src/jsonforms/renderers/CategorizationWrapperRenderer.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "tabControlIconStyles",
@@ -3050,7 +3081,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<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div class=\"fl-form-grid-layout\">\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",
@@ -3087,7 +3118,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                class=\"group-label\"\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<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      hideLabel: true,\n      innerTemplate: html<DispatchRenderer>`\n        <div class=\"fl-group-layout\">\n          ${when(\n            (x) => x.control.label,\n            html<DispatchRenderer>`\n              <div for=\"${(x) => x.control.path + '-wrapper'}\" class=\"fl-group-label\">\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",
@@ -3124,7 +3155,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<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div class=\"fl-horizontal-layout\">\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <dispatch-renderer\n                class=\"fl-horizontal-layout-item\"\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",
@@ -3180,7 +3211,7 @@
         {
           "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<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div class=\"fl-vertical-layout\">\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",
@@ -3314,7 +3345,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<DispatchRenderer>`\n  <template>\n    ${layoutWrapperTemplate({\n      innerTemplate: html<DispatchRenderer>`\n        <div class=\"fl-2-column-layout\">\n          ${repeat(\n            (x) => x.control.uischema.elements,\n            html`\n              <div class=\"fl-2-column-item\">\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",
@@ -4382,6 +4413,34 @@
               "kind": "field",
               "name": "determinedRenderer",
               "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "depth",
+              "type": {
+                "text": "number"
+              },
+              "default": "1"
+            },
+            {
+              "kind": "method",
+              "name": "computeHostClass",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateHostAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ],
           "superclass": {

package/dist/dts/form.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../src/form.styles.ts"],"names":[],"mappings":"AAMA,gBAAgB;AAChB,eAAO,MAAM,sBAAsB,GAAI,SAAQ,MAAe,WAK7D,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,iDAoFhC,CAAC"}
+{"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../src/form.styles.ts"],"names":[],"mappings":"AAMA,gBAAgB;AAChB,eAAO,MAAM,sBAAsB,GAAI,SAAQ,MAAe,WAK7D,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,iDAoIhC,CAAC"}

package/dist/dts/jsonforms/renderers/CategorizationWrapperRenderer.d.ts

@@ -1,4 +1,6 @@
 import { FASTElement } from '@microsoft/fast-element';
+import { UiSchemaElement } from '../../types';
+export declare function computeCategoryClassName(category: UiSchemaElement, data: any): string;
 export declare const tabControlIconStyles: import("@microsoft/fast-element").ElementStyles;
 export declare const CategorizationWrapperRendererTemplate: (prefix?: string) => import("@microsoft/fast-element").ViewTemplate<CategorizationWrapper, any>;
 export declare class CategorizationWrapper extends FASTElement {

package/dist/dts/jsonforms/renderers/CategorizationWrapperRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategorizationWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/CategorizationWrapperRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,oBAAoB,iDAKhC,CAAC;AAEF,eAAO,MAAM,qCAAqC,GAChD,eAAe,+EAqDhB,CAAC;AAsBF,qBAQa,qBAAsB,SAAQ,WAAW;IACxC,IAAI,MAAC;IACL,OAAO,MAAC;IACR,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAgB;IAEpD,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIjC,eAAe,CAAC,KAAK,EAAE,KAAK;IAO5B,gBAAgB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO;CAQjD"}
+{"version":3,"file":"CategorizationWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/CategorizationWrapperRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAA2C,eAAe,EAAE,MAAM,aAAa,CAAC;AAEvF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,GAAG,MAAM,CAMrF;AAED,eAAO,MAAM,oBAAoB,iDAKhC,CAAC;AAEF,eAAO,MAAM,qCAAqC,GAChD,eAAe,+EAsDhB,CAAC;AAkBF,qBAQa,qBAAsB,SAAQ,WAAW;IACxC,IAAI,MAAC;IACL,OAAO,MAAC;IACR,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAgB;IAEpD,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIjC,eAAe,CAAC,KAAK,EAAE,KAAK;IAO5B,gBAAgB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO;CAQjD"}

package/dist/dts/jsonforms/renderers/ControlWrapperRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/ControlWrapperRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,cAAc,MAAM,oDAwD3D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,iDAA6C,CAAC;AAE/E,UAAU,qBAAqB;IAC7B;;;;OAIG;IACH,aAAa,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC9C,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,qBAAqB,KAC7B,YAAY,CAAC,gBAAgB,CA2D/B,CAAC;AAmCF,4BAA4B;AAC5B,eAAO,MAAM,8BAA8B,wBAoD1C,CAAC;AAoEF;;;;GAIG;AACH,qBAKa,cAAe,SAAQ,WAAW;IACjC,OAAO,MAAC;IACR,SAAS,MAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACuB,SAAS,EAAE,OAAO,CAAS;IACzE,MAAM,EAAE,MAAM,CAAC;IAEZ,iBAAiB;IAQ1B,IACI,eAAe,YAOlB;IAED,IACI,aAAa,WAOhB;IAED,IACI,kBAAkB,2BAGrB;IAED,IACI,UAAU,WAOb;CACF"}
+{"version":3,"file":"ControlWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/ControlWrapperRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,cAAc,MAAM,oDA0D3D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,iDAA6C,CAAC;AAE/E,UAAU,qBAAqB;IAC7B;;;;OAIG;IACH,aAAa,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC9C,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,qBAAqB,KAC7B,YAAY,CAAC,gBAAgB,CA2D/B,CAAC;AAmCF,4BAA4B;AAC5B,eAAO,MAAM,8BAA8B,wBAoD1C,CAAC;AAoEF;;;;GAIG;AACH,qBAKa,cAAe,SAAQ,WAAW;IACjC,OAAO,MAAC;IACR,SAAS,MAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACuB,SAAS,EAAE,OAAO,CAAS;IACzE,MAAM,EAAE,MAAM,CAAC;IAEZ,iBAAiB;IAQ1B,IACI,eAAe,YAOlB;IAED,IACI,aAAa,WAOhB;IAED,IACI,kBAAkB,2BAGrB;IAED,IACI,UAAU,WAOb;CACF"}

package/dist/dts/jsonforms/renderers/LayoutFormGridRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutFormGridRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutFormGridRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,8BAA8B,uEAiC1C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,GAIjC,CAAC"}
+{"version":3,"file":"LayoutFormGridRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutFormGridRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,8BAA8B,uEA2B1C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,GAIjC,CAAC"}

package/dist/dts/jsonforms/renderers/LayoutGroupRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutGroupRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutGroupRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,2BAA2B,uEA8CvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,GAItC,CAAC"}
+{"version":3,"file":"LayoutGroupRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutGroupRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,2BAA2B,uEAoCvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,GAItC,CAAC"}

package/dist/dts/jsonforms/renderers/LayoutHorizontalRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutHorizontalRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutHorizontalRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,gCAAgC,uEAiC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,GAInC,CAAC"}
+{"version":3,"file":"LayoutHorizontalRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutHorizontalRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,gCAAgC,uEA4B5C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,GAInC,CAAC"}

package/dist/dts/jsonforms/renderers/LayoutVertical2ColumnsRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutVertical2ColumnsRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutVertical2ColumnsRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,sCAAsC,uEAmClD,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,GAIzC,CAAC"}
+{"version":3,"file":"LayoutVertical2ColumnsRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutVertical2ColumnsRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,eAAO,MAAM,sCAAsC,uEA6BlD,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,GAIzC,CAAC"}

package/dist/dts/jsonforms/renderers/VerticalCategorizationWrapperRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalCategorizationWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/VerticalCategorizationWrapperRenderer.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAExE,eAAO,MAAM,6CAA6C,GACxD,eAAe,uFA4DhB,CAAC;AAgEF,qBAQa,6BAA8B,SAAQ,qBAAqB;IAChE,MAAM,EAAE,MAAM,CAAM;IAE1B,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAMjD,iBAAiB;CAIlB"}
+{"version":3,"file":"VerticalCategorizationWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/VerticalCategorizationWrapperRenderer.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,qBAAqB,EAA4B,MAAM,iCAAiC,CAAC;AAElG,eAAO,MAAM,6CAA6C,GACxD,eAAe,uFAmEhB,CAAC;AA6DF,qBAQa,6BAA8B,SAAQ,qBAAqB;IAChE,MAAM,EAAE,MAAM,CAAM;IAE1B,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAMjD,iBAAiB;CAIlB"}

package/dist/dts/jsonforms/renderers/dispatch-renderer.d.ts

@@ -17,6 +17,10 @@ export declare class DispatchRenderer extends FASTElement {
     createRenderer: () => void;
     onBlur(): void;
     get determinedRenderer(): any;
+    depth: number;
+    private computeHostClass;
+    private updateHostAttributes;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }
 //# sourceMappingURL=dispatch-renderer.d.ts.map

package/dist/dts/jsonforms/renderers/dispatch-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dispatch-renderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/dispatch-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EAMZ,MAAM,yBAAyB,CAAC;AAsBjC,qBAMa,gBAAiB,SAAQ,WAAW;IACnC,SAAS,MAAC;IACtB,gBAAgB;IAIJ,KAAK,MAAC;IAClB,YAAY;IAGA,OAAO,MAAC;IAEpB,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,SAAS,IAAI,OAAO,CAGvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAI3B;IAED,gBAAgB;IAGJ,QAAQ,MAAC;IACT,OAAO,MAAC;IACR,QAAQ,MAAC;IACT,MAAM,MAAC;IACnB,aAAa;IAIb,cAAc,aAmBZ;IAEF,MAAM;IAIN,IAAI,kBAAkB,QAgBrB;IAED,oBAAoB;CAKrB"}
+{"version":3,"file":"dispatch-renderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/dispatch-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EAMZ,MAAM,yBAAyB,CAAC;AAsBjC,qBAMa,gBAAiB,SAAQ,WAAW;IACnC,SAAS,MAAC;IACtB,gBAAgB;IAIJ,KAAK,MAAC;IAClB,YAAY;IAIA,OAAO,MAAC;IAEpB,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,SAAS,IAAI,OAAO,CAGvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAI3B;IAED,gBAAgB;IAGJ,QAAQ,MAAC;IACT,OAAO,MAAC;IACR,QAAQ,MAAC;IACT,MAAM,MAAC;IACnB,aAAa;IAIb,cAAc,aAmBZ;IAEF,MAAM;IAIN,IAAI,kBAAkB,QAgBrB;IAED,KAAK,EAAE,MAAM,CAAK;IAElB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,oBAAoB;IAM5B,iBAAiB;IAYjB,oBAAoB;CAKrB"}

package/dist/dts/types.d.ts

@@ -541,6 +541,16 @@ export interface StandardRendererOptions {
      * @public
      */
     useNumberControl?: boolean;
+    /**
+     * CSS class name(s) to apply to the element's rendered root.
+     * - On a control, applied to its wrapper root element.
+     * - On a categorization `Category`, applied to its tab header.
+     *
+     * Either a static string, or a function that receives the entire form data
+     * and returns the class name(s) to apply.
+     * @public
+     */
+    className?: string | ((data: any) => string);
 }
 /**
  * Configuration options for the segmented control renderer.

package/dist/dts/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/form.styles.js

@@ -88,6 +88,54 @@ export const foundationFormStyles = css `
       0 2px 4px rgb(0 0 0 / 6%),
       0 6px 12px rgb(0 0 0 / 8%);
   }
+
+  /* ── Layout wrappers ────────────────────────────────────────────────────── */
+
+  .fl-layout-label {
+    color: var(--neutral-foreground-hint);
+  }
+
+  .fl-vertical-layout {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fl-horizontal-layout {
+    display: flex;
+    flex-direction: row;
+    gap: calc(${designUnit} * 2px);
+  }
+
+  .fl-horizontal-layout-item {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fl-form-grid-layout {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: calc(${designUnit} * 2px);
+  }
+
+  .fl-2-column-layout {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+  }
+
+  .fl-2-column-item {
+    width: 49%;
+  }
+
+  .fl-group-label {
+    color: var(--neutral-foreground-rest);
+    padding-bottom: calc(${designUnit} * 1px);
+    margin-bottom: calc(${designUnit} * 2px);
+    font-weight: 600;
+    font-size: var(--type-ramp-base-font-size);
+    display: flex;
+    justify-content: space-between;
+  }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     foundation-form {
       background: ${SystemColors.Canvas};

package/dist/esm/jsonforms/renderers/CategorizationWrapperRenderer.js

@@ -1,5 +1,13 @@
 import { __decorate } from "tslib";
 import { html, css, observable, customElement, FASTElement, repeat, when, } from '@microsoft/fast-element';
+export function computeCategoryClassName(category, data) {
+    var _a, _b;
+    const className = (_a = category === null || category === void 0 ? void 0 : category.options) === null || _a === void 0 ? void 0 : _a.className;
+    if (typeof className === 'function') {
+        return (_b = className(data)) !== null && _b !== void 0 ? _b : '';
+    }
+    return className !== null && className !== void 0 ? className : '';
+}
 export const tabControlIconStyles = css `
   .tab-control-icon {
     margin-left: 3px;
@@ -8,9 +16,9 @@ export const tabControlIconStyles = css `
 `;
 export const CategorizationWrapperRendererTemplate = (prefix = 'zero') => html `
   <template>
-    <${prefix}-tabs class="tabs-container" @change=${(x, ctx) => x.handleTabChange(ctx.event)}>
+    <${prefix}-tabs appearance="secondary" class="tabs-container" @change=${(x, ctx) => x.handleTabChange(ctx.event)}>
       ${repeat((x) => x.control.uischema.elements, html `
-          <${prefix}-tab class="tab-control">
+          <${prefix}-tab appearance="secondary" class="tab-control">
             ${(x, ctx) => { var _a; return (_a = x.label) !== null && _a !== void 0 ? _a : `Category ${ctx.index + 1}`; }}
             ${when((x, ctx) => ctx.parent.hasCategoryError(ctx.index), html `
                 <${prefix}-icon class="tab-control-icon" name="circle-exclamation"></${prefix}-icon>
@@ -22,6 +30,7 @@ export const CategorizationWrapperRendererTemplate = (prefix = 'zero') => html `
             ${when((x, ctx) => ctx.parent.isMounted(ctx.index), html `
                 ${repeat((x) => x.options.childElements, html `
                     <dispatch-renderer
+                      class="fl-categorization-item"
                       :submitted=${(x, ctx) => ctx.parentContext.parent.form.submitted}
                       :dispatch=${(x, ctx) => ctx.parentContext.parent.form.dispatch}
                       :jsonforms=${(x, ctx) => ctx.parentContext.parent.form.jsonforms}
@@ -47,10 +56,6 @@ const styles = css `
     border-bottom: none;
   }
 
-  categorization-wrapper .tab-control {
-    box-shadow: none;
-  }
-
   categorization-wrapper .tab-control .tab-control-icon {
     margin-left: 3px;
     color: #f9644d;

package/dist/esm/jsonforms/renderers/ControlWrapperRenderer.js

@@ -25,6 +25,7 @@ export const controlWrapperStylesFor = (hostSelector) => css `
     justify-content: space-between;
     font-weight: 700;
     cursor: default;
+    font-size: var(--type-ramp-base-font-size);
   }
   ${hostSelector} .foundation-control-wrapper-label.visually-hidden {
     position: absolute;
@@ -46,7 +47,8 @@ export const controlWrapperStylesFor = (hostSelector) => css `
   }
   ${hostSelector} .labelLeft .foundation-control-wrapper-label {
     flex: 0 1 auto;
-    width: calc(var(--design-unit) * 30px);
+    width: var(--form-label-left-width, calc(var(--design-unit) * 30px));
+    min-width: var(--form-label-left-width, calc(var(--design-unit) * 30px));
     margin-right: calc(var(--design-unit) * 2px);
     align-items: center;
     margin-bottom: 0;

package/dist/esm/jsonforms/renderers/LayoutFormGridRenderer.js

@@ -6,13 +6,7 @@ export const LayoutFormGridRendererTemplate = html `
   <template>
     ${layoutWrapperTemplate({
     innerTemplate: html `
-        <div
-          style="
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 8px;
-          "
-        >
+        <div class="fl-form-grid-layout">
           ${repeat((x) => x.control.uischema.elements, html `
               <dispatch-renderer
                 :submitted=${(x, ctx) => ctx.parent.submitted}

package/dist/esm/jsonforms/renderers/LayoutGroupRenderer.js

@@ -7,19 +7,9 @@ export const LayoutGroupRendererTemplate = html `
     ${layoutWrapperTemplate({
     hideLabel: true,
     innerTemplate: html `
-        <div>
+        <div class="fl-group-layout">
           ${when((x) => x.control.label, html `
-              <div
-                for="${(x) => x.control.path + '-wrapper'}"
-                class="group-label"
-                style="color: var(--neutral-foreground-rest);
-                     padding-bottom: calc(var(--design-unit) * 1px);
-                     margin-bottom: calc(var(--design-unit) * 4px);
-                     font-weight: 600;
-                     font-size: var(--type-ramp-base-font-size);
-                     display: flex;
-                     justify-content: space-between;"
-              >
+              <div for="${(x) => x.control.path + '-wrapper'}" class="fl-group-label">
                 ${(x) => x.control.label}
               </div>
             `)}

package/dist/esm/jsonforms/renderers/LayoutHorizontalRenderer.js

@@ -6,15 +6,10 @@ export const LayoutHorizontalRendererTemplate = html `
   <template>
     ${layoutWrapperTemplate({
     innerTemplate: html `
-        <div
-          style="
-            display: flex;
-            flex-direction: row;
-            gap: 10px"
-        >
+        <div class="fl-horizontal-layout">
           ${repeat((x) => x.control.uischema.elements, html `
               <dispatch-renderer
-                style="flex: 1; min-width: 0"
+                class="fl-horizontal-layout-item"
                 :submitted=${(x, ctx) => ctx.parent.submitted}
                 :dispatch=${(x, ctx) => ctx.parent.dispatch}
                 :jsonforms=${(x, ctx) => ctx.parent.jsonforms}

package/dist/esm/jsonforms/renderers/LayoutRenderer.js

@@ -15,7 +15,7 @@ export const layoutWrapperTemplate = (options) => {
     const { innerTemplate, hideLabel = false } = options;
     return html `
     ${when((x) => { var _a; return !!((_a = x.control) === null || _a === void 0 ? void 0 : _a.label) && !hideLabel; }, html `
-        <div style="color: var(--neutral-foreground-hint);">${(x) => x.control.label}</div>
+        <div class="fl-layout-label">${(x) => x.control.label}</div>
       `)}
     ${when((x) => { var _a; return (_a = x.control) === null || _a === void 0 ? void 0 : _a.visible; }, innerTemplate)}
   `;
@@ -24,7 +24,7 @@ export const LayoutRendererTemplate = html `
   <template>
     ${layoutWrapperTemplate({
     innerTemplate: html `
-        <div>
+        <div class="fl-vertical-layout">
           ${repeat((x) => x.control.uischema.elements, html `
               <dispatch-renderer
                 :submitted=${(x, ctx) => ctx.parent.submitted}

package/dist/esm/jsonforms/renderers/LayoutVertical2ColumnsRenderer.js

@@ -6,15 +6,9 @@ export const LayoutVertical2ColumnsRendererTemplate = html `
   <template>
     ${layoutWrapperTemplate({
     innerTemplate: html `
-        <div
-          style="
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: space-between;"
-        >
+        <div class="fl-2-column-layout">
           ${repeat((x) => x.control.uischema.elements, html `
-              <div style="width: 49%">
+              <div class="fl-2-column-item">
                 <dispatch-renderer
                   :submitted=${(x, ctx) => ctx.parent.submitted}
                   :dispatch=${(x, ctx) => ctx.parent.dispatch}

package/dist/esm/jsonforms/renderers/NumberControlRenderer.js

@@ -28,7 +28,7 @@ export const NumberControlRendererTemplate = (prefix = 'zero') => html `
           tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
           @change=${handleNumberChange}
           @input=${(x, c) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.changeOnInput) ? handleNumberChange(x, c) : undefined); }}
-          placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+          placeholder=${(x) => x.control.uischema.placeholder || ''}
           id=${(x) => x.control.path}
           data-test-id=${(x) => x.control.path}
           ?required=${(x) => x.control.required}

package/dist/esm/jsonforms/renderers/StringControlRenderer.js

@@ -36,7 +36,7 @@ export const getStringControlRendererTemplate = (prefix = 'zero') => html `
               :value=${(x) => x.control.data || ''}
               @input=${(x, c) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.changeOnInput) ? changeHandler(x, c) : undefined); }}
               @change=${changeHandler}
-              placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+              placeholder=${(x) => x.control.uischema.placeholder || ''}
               id=${(x) => x.control.path}
               data-test-id=${(x) => x.control.path}
               tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
@@ -50,7 +50,7 @@ export const getStringControlRendererTemplate = (prefix = 'zero') => html `
               :value=${(x) => x.control.data || ''}
               @input=${(x, c) => { var _a; return (((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.changeOnInput) ? changeHandler(x, c) : undefined); }}
               @change=${changeHandler}
-              placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
+              placeholder=${(x) => x.control.uischema.placeholder || ''}
               id=${(x) => x.control.path}
               data-test-id=${(x) => x.control.path}
               ?required=${(x) => x.control.required}

package/dist/esm/jsonforms/renderers/VerticalCategorizationWrapperRenderer.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { attr, css, customElement, html, repeat, when, } from '@microsoft/fast-element';
-import { CategorizationWrapper } from './CategorizationWrapperRenderer';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { CategorizationWrapper, computeCategoryClassName } from './CategorizationWrapperRenderer';
 export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') => html `
   <template>
     <${prefix}-tabs
@@ -9,7 +10,14 @@ export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') =
       @change=${(x, ctx) => x.handleTabChange(ctx.event)}
     >
       ${repeat((x) => x.control.uischema.elements, html `
-          <${prefix}-tab class="tab-control" appearance="secondary">
+          <${prefix}-tab
+            class="${(x, ctx) => {
+    var _a, _b, _c;
+    const custom = computeCategoryClassName(x, (_c = (_b = (_a = ctx.parent.form) === null || _a === void 0 ? void 0 : _a.jsonforms) === null || _b === void 0 ? void 0 : _b.core) === null || _c === void 0 ? void 0 : _c.data);
+    return classNames('tab-control', [custom, !!custom]);
+}}"
+            appearance="secondary"
+          >
             <span class="tab-label">
               ${(x, ctx) => { var _a; return (_a = x.label) !== null && _a !== void 0 ? _a : `Category ${ctx.index + 1}`; }}
               ${when((x, ctx) => ctx.parent.hasCategoryError(ctx.index), html `
@@ -23,6 +31,7 @@ export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') =
             ${when((x, ctx) => ctx.parent.isMounted(ctx.index), html `
                 ${repeat((x) => x.options.childElements, html `
                     <dispatch-renderer
+                      class="fl-vertical-categorization-item"
                       :submitted=${(x, ctx) => ctx.parentContext.parent.form.submitted}
                       :dispatch=${(x, ctx) => ctx.parentContext.parent.form.dispatch}
                       :jsonforms=${(x, ctx) => ctx.parentContext.parent.form.jsonforms}
@@ -63,10 +72,7 @@ const styles = css `
 
   /* Reset the column layout above on horizontal categorization-wrappers nested inside the vertical one (e.g. Detailed View). */
   vertical-categorization-wrapper categorization-wrapper .tabs-container::part(tablist) {
-    flex-direction: row;
-    width: auto;
-    min-height: auto;
-    border-right: none;
+    display: grid;
   }
 
   vertical-categorization-wrapper .tabs-container .tab-control {

package/dist/esm/jsonforms/renderers/dispatch-renderer.js

@@ -30,12 +30,14 @@ let DispatchRenderer = class DispatchRenderer extends FASTElement {
             // @ts-ignore
             this.determinedRenderer.dispatchMapper);
         };
+        this.depth = 1;
     }
     jsonformsChanged() {
         this.createRenderer();
     }
     propsChanged() {
         this.createRenderer();
+        this.updateHostAttributes();
     }
     get submitted() {
         Observable.track(this, 'submitted');
@@ -69,6 +71,33 @@ let DispatchRenderer = class DispatchRenderer extends FASTElement {
             return rendererEntry;
         }
     }
+    computeHostClass() {
+        var _a, _b, _c, _d, _e, _f;
+        const uischema = (_a = this.props) === null || _a === void 0 ? void 0 : _a.uischema;
+        const levelClass = `dr-level-${this.depth}`;
+        if (!uischema)
+            return levelClass;
+        const type = (_c = (_b = uischema.type) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : '';
+        const field = (_f = (_e = (_d = uischema.scope) === null || _d === void 0 ? void 0 : _d.split('/').pop()) === null || _e === void 0 ? void 0 : _e.toLowerCase()) !== null && _f !== void 0 ? _f : '';
+        return [type && `dr-${type}`, field && `dr-${field}`, levelClass].filter(Boolean).join(' ');
+    }
+    updateHostAttributes() {
+        const preserved = Array.from(this.classList).filter((c) => !c.startsWith('dr-'));
+        const drClasses = this.computeHostClass().split(' ');
+        this.setAttribute('class', [...preserved, ...drClasses].join(' '));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let depth = 1;
+        let el = this.parentElement;
+        while (el) {
+            if (el.tagName.toLowerCase() === 'dispatch-renderer')
+                depth += 1;
+            el = el.parentElement;
+        }
+        this.depth = depth;
+        this.updateHostAttributes();
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.touched = false;

package/dist/foundation-forms.api.json

@@ -4016,6 +4016,33 @@
           "name": "StandardRendererOptions",
           "preserveMemberOrder": false,
           "members": [
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@genesislcap/foundation-forms!StandardRendererOptions#className:member",
+              "docComment": "/**\n * CSS class name(s) to apply to the element's rendered root. - On a control, applied to its wrapper root element. - On a categorization `Category`, applied to its tab header.\n *\n * Either a static string, or a function that receives the entire form data and returns the class name(s) to apply.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "className?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string | ((data: any) => string)"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "className",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@genesislcap/foundation-forms!StandardRendererOptions#hidden:member",

package/dist/foundation-forms.d.ts

@@ -488,6 +488,10 @@ declare class DispatchRenderer extends FASTElement {
     createRenderer: () => void;
     onBlur(): void;
     get determinedRenderer(): any;
+    depth: number;
+    private computeHostClass;
+    private updateHostAttributes;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }
 
@@ -2168,6 +2172,16 @@ export declare interface StandardRendererOptions {
      * @public
      */
     useNumberControl?: boolean;
+    /**
+     * CSS class name(s) to apply to the element's rendered root.
+     * - On a control, applied to its wrapper root element.
+     * - On a categorization `Category`, applied to its tab header.
+     *
+     * Either a static string, or a function that receives the entire form data
+     * and returns the class name(s) to apply.
+     * @public
+     */
+    className?: string | ((data: any) => string);
 }
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.451.2-FUI-2550.2",
+  "version": "14.451.2-FUI-2550.5",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -59,13 +59,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.451.2-FUI-2550.2",
-    "@genesislcap/genx": "14.451.2-FUI-2550.2",
-    "@genesislcap/rollup-builder": "14.451.2-FUI-2550.2",
-    "@genesislcap/ts-builder": "14.451.2-FUI-2550.2",
-    "@genesislcap/uvu-playwright-builder": "14.451.2-FUI-2550.2",
-    "@genesislcap/vite-builder": "14.451.2-FUI-2550.2",
-    "@genesislcap/webpack-builder": "14.451.2-FUI-2550.2",
+    "@genesislcap/foundation-testing": "14.451.2-FUI-2550.5",
+    "@genesislcap/genx": "14.451.2-FUI-2550.5",
+    "@genesislcap/rollup-builder": "14.451.2-FUI-2550.5",
+    "@genesislcap/ts-builder": "14.451.2-FUI-2550.5",
+    "@genesislcap/uvu-playwright-builder": "14.451.2-FUI-2550.5",
+    "@genesislcap/vite-builder": "14.451.2-FUI-2550.5",
+    "@genesislcap/webpack-builder": "14.451.2-FUI-2550.5",
     "@types/json-schema": "^7.0.11",
     "@types/papaparse": "^5.3.14"
   },
@@ -82,12 +82,12 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.451.2-FUI-2550.2",
-    "@genesislcap/foundation-criteria": "14.451.2-FUI-2550.2",
-    "@genesislcap/foundation-logger": "14.451.2-FUI-2550.2",
-    "@genesislcap/foundation-notifications": "14.451.2-FUI-2550.2",
-    "@genesislcap/foundation-ui": "14.451.2-FUI-2550.2",
-    "@genesislcap/foundation-utils": "14.451.2-FUI-2550.2",
+    "@genesislcap/foundation-comms": "14.451.2-FUI-2550.5",
+    "@genesislcap/foundation-criteria": "14.451.2-FUI-2550.5",
+    "@genesislcap/foundation-logger": "14.451.2-FUI-2550.5",
+    "@genesislcap/foundation-notifications": "14.451.2-FUI-2550.5",
+    "@genesislcap/foundation-ui": "14.451.2-FUI-2550.5",
+    "@genesislcap/foundation-utils": "14.451.2-FUI-2550.5",
     "@json-schema-tools/dereferencer": "^1.6.1",
     "@jsonforms/core": "^3.2.1",
     "@microsoft/fast-components": "2.30.6",
@@ -109,5 +109,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "b92c01a659248d27f0ea5a920e37c4dfb7b4259f"
+  "gitHead": "584095ad6c048a6a671b267427b04d9caad3fcff"
 }