@genesislcap/foundation-utils 14.95.0 → 14.96.1

package/dist/custom-elements.json

@@ -143,6 +143,59 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/decorators/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./renderOnChange"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/decorators/renderOnChange.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "renderOnChange",
+          "parameters": [
+            {
+              "name": "target",
+              "type": {
+                "text": "FASTElement & { render(): void }"
+              },
+              "description": "The target to define the property change handler on."
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The property name."
+            }
+          ],
+          "description": "Defines a property changed handler that calls a render() method on the target as an internal observation enhancement.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "renderOnChange",
+          "declaration": {
+            "name": "renderOnChange",
+            "module": "src/decorators/renderOnChange.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/data/inMemoryDatabase.ts",
@@ -343,7 +396,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/decorators/index.ts",
+      "path": "src/directives/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -351,45 +404,15 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./renderOnChange"
+            "package": "./sync"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/decorators/renderOnChange.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "renderOnChange",
-          "parameters": [
-            {
-              "name": "target",
-              "type": {
-                "text": "FASTElement & { render(): void }"
-              },
-              "description": "The target to define the property change handler on."
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "description": "The property name."
-            }
-          ],
-          "description": "Defines a property changed handler that calls a render() method on the target as an internal observation enhancement.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "renderOnChange",
+          "name": "*",
           "declaration": {
-            "name": "renderOnChange",
-            "module": "src/decorators/renderOnChange.ts"
+            "name": "*",
+            "package": "./when-else"
           }
         }
       ]
@@ -445,7 +468,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/index.ts",
+      "path": "src/env/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -453,7 +476,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./sync"
+            "package": "./is-dev"
           }
         },
         {
@@ -461,7 +484,207 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./when-else"
+            "package": "./variables"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/env/is-dev.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isDev",
+          "description": "Determines if the current environment is a development environment.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isDev",
+          "declaration": {
+            "name": "isDev",
+            "module": "src/env/is-dev.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/env/variables.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SOCKET_EXT",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_SOCKET_EXT",
+          "type": {
+            "text": "string"
+          },
+          "default": "'gwf'",
+          "description": "The sub-path used for WebSocket connections when API_HOST is not set",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "FORCE_HTTP",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_FORCE_HTTP",
+          "type": {
+            "text": "string"
+          },
+          "description": "The path to a JSON config file for the HTTP mode.",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "API_HOST",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_API_HOST",
+          "type": {
+            "text": "string"
+          },
+          "default": "`${PROTOCOL}//${location.host}/${_SOCKET_EXT}/`",
+          "description": "The Genesis Server URL (WebSocket or HTTP).",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "HTTP_CONFIG",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_HTTP_CONFIG",
+          "type": {
+            "text": "string"
+          },
+          "description": "Configuration settings for HTTP, used in http connect flow [`genesislcap-foundation-comms.HttpConnectConfig`](https://link-to-docs).",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_ORGANISATION",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_DEFAULT_ORGANISATION",
+          "type": {
+            "text": "string"
+          },
+          "description": "The default Organisation value, used in auth/login flow [`genesislcap-foundation-login`](https://link-to-docs).",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_PASSWORD",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_DEFAULT_PASSWORD",
+          "type": {
+            "text": "string"
+          },
+          "description": "The default Password value, used in auth/login flow [`genesislcap-foundation-login`](https://link-to-docs).",
+          "privacy": "public"
+        },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_USER",
+          "type": {
+            "text": "string"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "_DEFAULT_USER",
+          "type": {
+            "text": "string"
+          },
+          "description": "The default Username value, used in auth/login flow [`genesislcap-foundation-login`](https://link-to-docs).",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SOCKET_EXT",
+          "declaration": {
+            "name": "_SOCKET_EXT",
+            "module": "src/env/variables.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FORCE_HTTP",
+          "declaration": {
+            "name": "_FORCE_HTTP",
+            "module": "src/env/variables.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "API_HOST",
+          "declaration": {
+            "name": "_API_HOST",
+            "module": "src/env/variables.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HTTP_CONFIG",
+          "declaration": {
+            "name": "_HTTP_CONFIG",
+            "module": "src/env/variables.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_ORGANISATION",
+          "declaration": {
+            "name": "_DEFAULT_ORGANISATION",
+            "module": "src/env/variables.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_PASSWORD",
+          "declaration": {
+            "name": "_DEFAULT_PASSWORD",
+            "module": "src/env/variables.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_USER",
+          "declaration": {
+            "name": "_DEFAULT_USER",
+            "module": "src/env/variables.ts"
           }
         }
       ]
@@ -855,328 +1078,105 @@
             },
             {
               "kind": "field",
-              "name": "_group",
-              "default": "new RegExp(`[${parts.find((d) => d.type === 'group').value}]`, 'g')"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "NumberParser",
-          "declaration": {
-            "name": "NumberParser",
-            "module": "src/formatters/localeNumberParser.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/logger/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./logger"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/logger/logger.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "defaultLoggerOptions",
-          "type": {
-            "text": "LoggerOptions"
-          },
-          "default": "{\n  level: logLevelDebug,\n}",
-          "description": "The default logger options.",
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "createLogger",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "description": "The name to give the logger."
-            },
-            {
-              "name": "options",
-              "default": "defaultLoggerOptions",
-              "type": {
-                "text": "LoggerOptions"
-              },
-              "description": "The options to use when creating the logger."
-            }
-          ],
-          "description": "Creates a logger with the given name and options.",
-          "deprecated": "- Use `createLogger` from `@genesislcap/foundation-logger` instead.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LogLevel",
-          "declaration": {
-            "name": "LogLevel",
-            "package": "consola"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultLoggerOptions",
-          "declaration": {
-            "name": "defaultLoggerOptions",
-            "module": "src/logger/logger.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "createLogger",
-          "declaration": {
-            "name": "createLogger",
-            "module": "src/logger/logger.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/env/index.ts",
-      "declarations": [],
+              "name": "_group",
+              "default": "new RegExp(`[${parts.find((d) => d.type === 'group').value}]`, 'g')"
+            }
+          ]
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./is-dev"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
+          "name": "NumberParser",
           "declaration": {
-            "name": "*",
-            "package": "./variables"
+            "name": "NumberParser",
+            "module": "src/formatters/localeNumberParser.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/env/is-dev.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "isDev",
-          "description": "Determines if the current environment is a development environment.",
-          "privacy": "public"
-        }
-      ],
+      "path": "src/logger/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "isDev",
+          "name": "*",
           "declaration": {
-            "name": "isDev",
-            "module": "src/env/is-dev.ts"
+            "name": "*",
+            "package": "./logger"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/env/variables.ts",
+      "path": "src/logger/logger.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "SOCKET_EXT",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_SOCKET_EXT",
-          "type": {
-            "text": "string"
-          },
-          "default": "'gwf'",
-          "description": "The sub-path used for WebSocket connections when API_HOST is not set",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "FORCE_HTTP",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_FORCE_HTTP",
-          "type": {
-            "text": "string"
-          },
-          "description": "The path to a JSON config file for the HTTP mode.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "API_HOST",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_API_HOST",
-          "type": {
-            "text": "string"
-          },
-          "default": "`${PROTOCOL}//${location.host}/${_SOCKET_EXT}/`",
-          "description": "The Genesis Server URL (WebSocket or HTTP).",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "HTTP_CONFIG",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_HTTP_CONFIG",
-          "type": {
-            "text": "string"
-          },
-          "description": "Configuration settings for HTTP, used in http connect flow [`genesislcap-foundation-comms.HttpConnectConfig`](https://link-to-docs).",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "DEFAULT_ORGANISATION",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_DEFAULT_ORGANISATION",
-          "type": {
-            "text": "string"
-          },
-          "description": "The default Organisation value, used in auth/login flow [`genesislcap-foundation-login`](https://link-to-docs).",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "DEFAULT_PASSWORD",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_DEFAULT_PASSWORD",
+          "name": "defaultLoggerOptions",
           "type": {
-            "text": "string"
+            "text": "LoggerOptions"
           },
-          "description": "The default Password value, used in auth/login flow [`genesislcap-foundation-login`](https://link-to-docs).",
+          "default": "{\n  level: logLevelDebug,\n}",
+          "description": "The default logger options.",
           "privacy": "public"
         },
         {
-          "kind": "variable",
-          "name": "DEFAULT_USER",
-          "type": {
-            "text": "string"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "_DEFAULT_USER",
-          "type": {
-            "text": "string"
+          "kind": "function",
+          "name": "createLogger",
+          "return": {
+            "type": {
+              "text": ""
+            }
           },
-          "description": "The default Username value, used in auth/login flow [`genesislcap-foundation-login`](https://link-to-docs).",
+          "parameters": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name to give the logger."
+            },
+            {
+              "name": "options",
+              "default": "defaultLoggerOptions",
+              "type": {
+                "text": "LoggerOptions"
+              },
+              "description": "The options to use when creating the logger."
+            }
+          ],
+          "description": "Creates a logger with the given name and options.",
+          "deprecated": "- Use `createLogger` from `@genesislcap/foundation-logger` instead.",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SOCKET_EXT",
-          "declaration": {
-            "name": "_SOCKET_EXT",
-            "module": "src/env/variables.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FORCE_HTTP",
-          "declaration": {
-            "name": "_FORCE_HTTP",
-            "module": "src/env/variables.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "API_HOST",
-          "declaration": {
-            "name": "_API_HOST",
-            "module": "src/env/variables.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HTTP_CONFIG",
-          "declaration": {
-            "name": "_HTTP_CONFIG",
-            "module": "src/env/variables.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DEFAULT_ORGANISATION",
+          "name": "LogLevel",
           "declaration": {
-            "name": "_DEFAULT_ORGANISATION",
-            "module": "src/env/variables.ts"
+            "name": "LogLevel",
+            "package": "consola"
           }
         },
         {
           "kind": "js",
-          "name": "DEFAULT_PASSWORD",
+          "name": "defaultLoggerOptions",
           "declaration": {
-            "name": "_DEFAULT_PASSWORD",
-            "module": "src/env/variables.ts"
+            "name": "defaultLoggerOptions",
+            "module": "src/logger/logger.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DEFAULT_USER",
+          "name": "createLogger",
           "declaration": {
-            "name": "_DEFAULT_USER",
-            "module": "src/env/variables.ts"
+            "name": "createLogger",
+            "module": "src/logger/logger.ts"
           }
         }
       ]
@@ -1471,6 +1471,14 @@
             "name": "*",
             "package": "./typography"
           }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./toElementStyles"
+          }
         }
       ]
     },
@@ -1545,6 +1553,42 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/toElementStyles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "toElementStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "styles",
+              "type": {
+                "text": "ComposableStyles | ComposableStyles[]"
+              },
+              "description": "ComposableStyles or a ComposableStyles array."
+            }
+          ],
+          "description": "toElementStyles.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "toElementStyles",
+          "declaration": {
+            "name": "toElementStyles",
+            "module": "src/styles/toElementStyles.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/styles/typography.ts",

package/dist/dts/styles/index.d.ts

@@ -2,4 +2,5 @@ export * from './color';
 export * from './dom';
 export * from './slotted-styles';
 export * from './typography';
+export * from './toElementStyles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

package/dist/dts/styles/toElementStyles.d.ts

@@ -0,0 +1,10 @@
+import { ComposableStyles, ElementStyles } from '@microsoft/fast-element';
+/**
+ * toElementStyles.
+ * @remarks
+ * Converts {@link @microsoft/fast-element#ComposableStyles} or a ComposableStyles array to {@link @microsoft/fast-element#ElementStyles}.
+ * @param styles - ComposableStyles or a ComposableStyles array.
+ * @public
+ */
+export declare function toElementStyles(styles: ComposableStyles | ComposableStyles[]): ElementStyles;
+//# sourceMappingURL=toElementStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toElementStyles.d.ts","sourceRoot":"","sources":["../../../src/styles/toElementStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE1E;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,GAAG,aAAa,CAW5F"}

package/dist/esm/styles/index.js

@@ -2,3 +2,4 @@ export * from './color';
 export * from './dom';
 export * from './slotted-styles';
 export * from './typography';
+export * from './toElementStyles';

package/dist/esm/styles/toElementStyles.js

@@ -0,0 +1,20 @@
+import { ElementStyles } from '@microsoft/fast-element';
+/**
+ * toElementStyles.
+ * @remarks
+ * Converts {@link @microsoft/fast-element#ComposableStyles} or a ComposableStyles array to {@link @microsoft/fast-element#ElementStyles}.
+ * @param styles - ComposableStyles or a ComposableStyles array.
+ * @public
+ */
+export function toElementStyles(styles) {
+    if (!styles) {
+        return;
+    }
+    if (Array.isArray(styles)) {
+        return ElementStyles.create(styles);
+    }
+    if (styles instanceof ElementStyles) {
+        return styles;
+    }
+    return ElementStyles.create([styles]);
+}

package/dist/foundation-utils.api.json

@@ -12053,6 +12053,66 @@
           ],
           "name": "sync"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@genesislcap/foundation-utils!toElementStyles:function(1)",
+          "docComment": "/**\n * toElementStyles.\n *\n * @remarks\n *\n * Converts {@link @microsoft/fast-element#ComposableStyles} or a ComposableStyles array to {@link @microsoft/fast-element#ElementStyles}.\n *\n * @param styles - ComposableStyles or a ComposableStyles array.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function toElementStyles(styles: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ComposableStyles",
+              "canonicalReference": "@microsoft/fast-element!ComposableStyles:type"
+            },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "ComposableStyles",
+              "canonicalReference": "@microsoft/fast-element!ComposableStyles:type"
+            },
+            {
+              "kind": "Content",
+              "text": "[]"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementStyles",
+              "canonicalReference": "@microsoft/fast-element!ElementStyles:class"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/styles/toElementStyles.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 6,
+            "endIndex": 7
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "styles",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "toElementStyles"
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@genesislcap/foundation-utils!TypeRampValues:var",

package/dist/foundation-utils.d.ts

@@ -1,5 +1,6 @@
 import { Binding } from '@microsoft/fast-element';
 import { CaptureType } from '@microsoft/fast-element';
+import { ComposableStyles } from '@microsoft/fast-element';
 import { Consola } from 'consola';
 import { ConsolaOptions } from 'consola';
 import { Constructable } from '@microsoft/fast-element';
@@ -1601,6 +1602,15 @@ export declare type Subscribe<EventType> = (listener: Listener<EventType>) => ()
  */
 export declare function sync<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, conversionType?: ConversionType, eventName?: EventName, keyAttr?: string): CaptureType<TSource>;
 
+/**
+ * toElementStyles.
+ * @remarks
+ * Converts {@link @microsoft/fast-element#ComposableStyles} or a ComposableStyles array to {@link @microsoft/fast-element#ElementStyles}.
+ * @param styles - ComposableStyles or a ComposableStyles array.
+ * @public
+ */
+export declare function toElementStyles(styles: ComposableStyles | ComposableStyles[]): ElementStyles;
+
 /**
  * An object containing type ramp values.
  * @public

package/docs/api/foundation-utils.md

@@ -36,6 +36,7 @@
 |  [JSONReviver(key, value)](./foundation-utils.jsonreviver.md) | JSON reviver function. |
 |  [renderOnChange(target, name)](./foundation-utils.renderonchange.md) | Defines a property changed handler that calls a render() method on the target as an internal observation enhancement. |
 |  [sync(binding, conversionType, eventName, keyAttr)](./foundation-utils.sync.md) | Creates a synchronization directive that binds a data source to an HTML element, |
+|  [toElementStyles(styles)](./foundation-utils.toelementstyles.md) | toElementStyles. |
 |  [whenElse(binding, trueTemplateOrTemplateBinding, falseTemplateOrTemplateBinding)](./foundation-utils.whenelse.md) | Directive that allows supplying an "else" template to the traditional [https://www.fast.design/docs/api/fast-element.when/\#when-function](https://www.fast.design/docs/api/fast-element.when/#when-function) directive |
 
 ## Interfaces

package/docs/api/foundation-utils.toelementstyles.md

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-utils](./foundation-utils.md) &gt; [toElementStyles](./foundation-utils.toelementstyles.md)
+
+## toElementStyles() function
+
+toElementStyles.
+
+**Signature:**
+
+```typescript
+export declare function toElementStyles(styles: ComposableStyles | ComposableStyles[]): ElementStyles;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  styles | ComposableStyles \| ComposableStyles\[\] | ComposableStyles or a ComposableStyles array. |
+
+**Returns:**
+
+ElementStyles
+
+## Remarks
+
+Converts  or a ComposableStyles array to .
+

package/docs/api-report.md

@@ -6,6 +6,7 @@
 
 import { Binding } from '@microsoft/fast-element';
 import { CaptureType } from '@microsoft/fast-element';
+import { ComposableStyles } from '@microsoft/fast-element';
 import { Consola } from 'consola';
 import { ConsolaOptions } from 'consola';
 import { Constructable } from '@microsoft/fast-element';
@@ -1112,6 +1113,9 @@ export type Subscribe<EventType> = (listener: Listener<EventType>) => () => void
 // @public
 export function sync<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, conversionType?: ConversionType, eventName?: EventName, keyAttr?: string): CaptureType<TSource>;
 
+// @public
+export function toElementStyles(styles: ComposableStyles | ComposableStyles[]): ElementStyles;
+
 // @public
 export const TypeRampValues: {
     readonly minusOne: -1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-utils",
   "description": "Genesis Foundation Utils",
-  "version": "14.95.0",
+  "version": "14.96.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -19,12 +19,12 @@
     "test": "genx test"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.95.0",
-    "@genesislcap/genx": "14.95.0",
+    "@genesislcap/foundation-testing": "14.96.1",
+    "@genesislcap/genx": "14.96.1",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.95.0",
+    "@genesislcap/foundation-logger": "14.96.1",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-foundation": "^2.33.2",
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "c104bd1dbc712b08c2e279f71f1f3ba2fca5c34c"
+  "gitHead": "48d09fe0db8cfe16fa806a5f098a0fb0405ffcbb"
 }