@skedulo/breeze-ui 0.10.2 → 0.10.4

package/dist/custom-elements.json

@@ -178,279 +178,939 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/helpers/css-helpers.ts",
+      "path": "src/layout/flex.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "getFocusStyles",
-          "parameters": [
+          "kind": "variable",
+          "name": "ROW"
+        },
+        {
+          "kind": "variable",
+          "name": "COLUMN"
+        },
+        {
+          "kind": "class",
+          "description": "Row layout.",
+          "name": "Row",
+          "members": [
             {
-              "name": "selector",
+              "kind": "field",
+              "name": "verticalAlign",
               "type": {
-                "text": "string"
+                "text": "'top' | 'middle' | 'bottom'"
               },
-              "description": "A CSS selector targeting an interactive element."
-            },
+              "default": "'top'",
+              "attribute": "vertical-align",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
+              "name": "vertical-align",
+              "type": {
+                "text": "'top' | 'middle' | 'bottom'"
+              },
+              "default": "'top'",
+              "fieldName": "verticalAlign"
             }
           ],
-          "description": "Returns a CSSResult applying focus outline styles to a given interactive\nelement. Reduces repetition throughout multiple components.\n\nTargets modern `:focus-visible` by default and includes a `:focus` fallback\nfor older browsers."
-        },
-        {
-          "kind": "variable",
-          "name": "invisibleButtonRules",
-          "default": "css`\n  background: none;\n  border: 0;\n  border-radius: var(--brz-border-radius-default);\n  color: var(--brz-color-neutral-750);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n`",
-          "description": "CSS rules to apply invisible styles to buttons. Use within a CSS declaration\nblock."
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-row",
+          "customElement": true
         },
         {
-          "kind": "function",
-          "name": "getInvisibleButtonStyles",
-          "parameters": [
+          "kind": "class",
+          "description": "Column layout.",
+          "name": "Column",
+          "members": [
             {
-              "name": "selector",
+              "kind": "field",
+              "name": "align",
               "type": {
-                "text": "string"
+                "text": "'left' | 'center' | 'right'"
               },
-              "description": "A CSS selector targeting a button"
-            },
+              "default": "'left'",
+              "attribute": "align"
+            }
+          ],
+          "attributes": [
             {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
+              "name": "align",
+              "type": {
+                "text": "'left' | 'center' | 'right'"
+              },
+              "default": "'left'",
+              "fieldName": "align"
             }
           ],
-          "description": "Returns a CSSResult applying invisible styles to a button matching the given\nselector. Invisible buttons are a common pattern for icon-only close buttons.\n\nSince this applies to buttons, default focus styles are also automatically\nincluded for the selector. If you don't need them, or need to customise them,\nuse `invisibleButtonStyles` and `getFocusStyles()` separately instead."
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-column",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "getFocusStyles",
+          "name": "ROW",
           "declaration": {
-            "name": "getFocusStyles",
-            "module": "src/helpers/css-helpers.ts"
+            "name": "ROW",
+            "module": "src/layout/flex.ts"
           }
         },
         {
           "kind": "js",
-          "name": "invisibleButtonRules",
+          "name": "COLUMN",
           "declaration": {
-            "name": "invisibleButtonRules",
-            "module": "src/helpers/css-helpers.ts"
+            "name": "COLUMN",
+            "module": "src/layout/flex.ts"
           }
         },
         {
           "kind": "js",
-          "name": "getInvisibleButtonStyles",
+          "name": "Row",
           "declaration": {
-            "name": "getInvisibleButtonStyles",
-            "module": "src/helpers/css-helpers.ts"
+            "name": "Row",
+            "module": "src/layout/flex.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "Row",
+            "module": "src/layout/flex.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Column",
+          "declaration": {
+            "name": "Column",
+            "module": "src/layout/flex.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "Column",
+            "module": "src/layout/flex.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/helpers/index.ts",
-      "declarations": [],
+      "path": "src/layout/footer.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FOOTER"
+        },
+        {
+          "kind": "class",
+          "description": "Footer layout.",
+          "name": "Footer",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-footer",
+          "customElement": true
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "FOOTER",
           "declaration": {
-            "name": "*",
-            "package": "./css-helpers"
+            "name": "FOOTER",
+            "module": "src/layout/footer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Footer",
+          "declaration": {
+            "name": "Footer",
+            "module": "src/layout/footer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "Footer",
+            "module": "src/layout/footer.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/alert.ts",
+      "path": "src/layout/header-footer-page.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "alertTypes",
-          "type": {
-            "text": "['info', 'success', 'warning', 'error']"
+          "name": "HEADER_FOOTER_PAGE"
+        },
+        {
+          "kind": "class",
+          "description": "Header footer page layout.",
+          "name": "HeaderFooterPage",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
           },
-          "default": "['info', 'success', 'warning', 'error']"
+          "tagName": "brz-header-footer-page",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HEADER_FOOTER_PAGE",
+          "declaration": {
+            "name": "HEADER_FOOTER_PAGE",
+            "module": "src/layout/header-footer-page.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HeaderFooterPage",
+          "declaration": {
+            "name": "HeaderFooterPage",
+            "module": "src/layout/header-footer-page.ts"
+          }
         },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "HeaderFooterPage",
+            "module": "src/layout/header-footer-page.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/header.ts",
+      "declarations": [
         {
           "kind": "variable",
-          "name": "ALERT"
+          "name": "HEADER"
         },
         {
           "kind": "class",
-          "description": "",
-          "name": "AlertEvent",
+          "description": "Header layout.",
+          "name": "Header",
+          "members": [],
           "superclass": {
-            "name": "CustomEvent",
-            "module": "src/components/alert.ts"
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "deprecated": "Use PageHeader component instead",
+          "tagName": "brz-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HEADER",
+          "declaration": {
+            "name": "HEADER",
+            "module": "src/layout/header.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/layout/header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "Header",
+            "module": "src/layout/header.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./header"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./flex"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./split-row"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./header-footer-page"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./responsive-columns"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./footer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./page-header"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./grid"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/page-header.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PAGE_HEADER"
+        },
         {
           "kind": "class",
-          "description": "Alerts provide urgent contextual feedback in response to user action or\nsystem activity.",
-          "name": "Alert",
-          "members": [
+          "description": "Use a Page Header to apply a consistent look and feel across all application\npages. It exposes several flexible content slots to support designs across\nvarious feature areas.",
+          "name": "PageHeader",
+          "slots": [
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "AlertType"
-              },
-              "default": "'info'",
-              "description": "An alert type correlating with its severity.",
-              "attribute": "type",
-              "reflects": true
+              "description": "Supply a title as HTML if needed. Will be wrapped in a Level 1 heading. Ignores `pageTitle` property.",
+              "name": "title"
             },
             {
-              "kind": "field",
-              "name": "clearable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds the ability to dismiss the alert",
-              "attribute": "clearable"
+              "description": "An area to the left of the title, often used for avatars",
+              "name": "decorator"
             },
             {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Optional alert title text",
-              "attribute": "title"
+              "description": "A subtitle provides additional context to the title",
+              "name": "subtitle"
             },
             {
-              "kind": "method",
-              "name": "getIcon"
+              "description": "A flexible area for tags and other descriptive content",
+              "name": "description"
             },
             {
-              "kind": "method",
-              "name": "clear"
+              "description": "An area to the right of the title, often used for status labels",
+              "name": "info"
+            },
+            {
+              "description": "Typically used for one or more action buttons",
+              "name": "actions"
             }
           ],
-          "events": [
+          "members": [
             {
-              "name": "brz-alert-cleared",
+              "kind": "field",
+              "name": "pageTitle",
               "type": {
-                "text": "AlertEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired when the alert is dismissed"
+              "description": "The main page title. Will be rendered to a Level 1 heading.\n\nIf you need more control and want to set the title with HTML, use the\n`title` slot instead, which ignores this property.",
+              "attribute": "page-title"
             }
           ],
           "attributes": [
             {
-              "name": "type",
-              "type": {
-                "text": "AlertType"
-              },
-              "default": "'info'",
-              "description": "An alert type correlating with its severity.",
-              "fieldName": "type"
-            },
-            {
-              "name": "clearable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds the ability to dismiss the alert",
-              "fieldName": "clearable"
-            },
-            {
-              "name": "title",
+              "name": "page-title",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Optional alert title text",
-              "fieldName": "title"
+              "description": "The main page title. Will be rendered to a Level 1 heading.\n\nIf you need more control and want to set the title with HTML, use the\n`title` slot instead, which ignores this property.",
+              "fieldName": "pageTitle"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "brz-alert",
+          "tagName": "brz-page-header",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "alertTypes",
+          "name": "PAGE_HEADER",
           "declaration": {
-            "name": "alertTypes",
-            "module": "src/components/alert.ts"
+            "name": "PAGE_HEADER",
+            "module": "src/layout/page-header.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ALERT",
+          "name": "PageHeader",
           "declaration": {
-            "name": "ALERT",
-            "module": "src/components/alert.ts"
+            "name": "PageHeader",
+            "module": "src/layout/page-header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "PageHeader",
+            "module": "src/layout/page-header.ts"
           }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/responsive-columns.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "RESPONSIVE_COLUMNS"
         },
+        {
+          "kind": "class",
+          "description": "Responsive columns layout.",
+          "name": "ResponsiveColumns",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-responsive-columns",
+          "customElement": true
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "AlertEvent",
+          "name": "RESPONSIVE_COLUMNS",
           "declaration": {
-            "name": "AlertEvent",
-            "module": "src/components/alert.ts"
+            "name": "RESPONSIVE_COLUMNS",
+            "module": "src/layout/responsive-columns.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Alert",
+          "name": "ResponsiveColumns",
           "declaration": {
-            "name": "Alert",
-            "module": "src/components/alert.ts"
+            "name": "ResponsiveColumns",
+            "module": "src/layout/responsive-columns.ts"
           }
         },
         {
           "kind": "custom-element-definition",
           "declaration": {
-            "name": "Alert",
-            "module": "src/components/alert.ts"
+            "name": "ResponsiveColumns",
+            "module": "src/layout/responsive-columns.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/avatar.ts",
+      "path": "src/layout/split-row.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "AVATAR"
+          "name": "SPLIT_ROW"
         },
         {
           "kind": "variable",
-          "name": "AVATAR_GROUP"
+          "name": "ACTION_BAR"
         },
         {
           "kind": "class",
-          "description": "Avatar component.",
-          "name": "Avatar",
+          "description": "Split row layout.",
+          "name": "SplitRow",
+          "slots": [
+            {
+              "description": "Content to populate the left side",
+              "name": "left"
+            },
+            {
+              "description": "Content to populate the right side",
+              "name": "right"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "hasOuterBorder",
+              "name": "verticalAlign",
               "type": {
-                "text": "boolean"
+                "text": "'top' | 'middle' | 'bottom'"
               },
-              "default": "false",
-              "description": "If set adds 1px white border around the avatar",
-              "attribute": "has-outer-border",
+              "default": "'top'",
+              "description": "Sets the vertical alignment of the content in the row",
+              "attribute": "vertical-align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "leftExpand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the left slot to fill the remaining space",
+              "attribute": "left-expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rightExpand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the right slot to fill the remaining space",
+              "attribute": "right-expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "noGap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the spacing between the left and right slots",
+              "attribute": "no-gap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expandY",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the row vertically to fill in its parent's height",
+              "attribute": "expand-y"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "vertical-align",
+              "type": {
+                "text": "'top' | 'middle' | 'bottom'"
+              },
+              "default": "'top'",
+              "description": "Sets the vertical alignment of the content in the row",
+              "fieldName": "verticalAlign"
+            },
+            {
+              "name": "left-expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the left slot to fill the remaining space",
+              "fieldName": "leftExpand"
+            },
+            {
+              "name": "right-expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the right slot to fill the remaining space",
+              "fieldName": "rightExpand"
+            },
+            {
+              "name": "no-gap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the spacing between the left and right slots",
+              "fieldName": "noGap"
+            },
+            {
+              "name": "expand-y",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the row vertically to fill in its parent's height",
+              "fieldName": "expandY"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-split-row",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "Action bar layout.",
+          "name": "ActionBar",
+          "slots": [
+            {
+              "description": "Content to populate the left side",
+              "name": "left"
+            },
+            {
+              "description": "Content to populate the right side",
+              "name": "right"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "noBorder",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the border (e.g. if you have an element below that has a border)",
+              "attribute": "no-border",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "leftExpand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the left slot to fill the remaining space",
+              "attribute": "left-expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rightExpand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the right slot to fill the remaining space",
+              "attribute": "right-expand",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "no-border",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the border (e.g. if you have an element below that has a border)",
+              "fieldName": "noBorder"
+            },
+            {
+              "name": "left-expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the left slot to fill the remaining space",
+              "fieldName": "leftExpand"
+            },
+            {
+              "name": "right-expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands the right slot to fill the remaining space",
+              "fieldName": "rightExpand"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-action-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SPLIT_ROW",
+          "declaration": {
+            "name": "SPLIT_ROW",
+            "module": "src/layout/split-row.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ACTION_BAR",
+          "declaration": {
+            "name": "ACTION_BAR",
+            "module": "src/layout/split-row.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SplitRow",
+          "declaration": {
+            "name": "SplitRow",
+            "module": "src/layout/split-row.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "SplitRow",
+            "module": "src/layout/split-row.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ActionBar",
+          "declaration": {
+            "name": "ActionBar",
+            "module": "src/layout/split-row.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "ActionBar",
+            "module": "src/layout/split-row.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "alertTypes",
+          "type": {
+            "text": "['info', 'success', 'warning', 'error']"
+          },
+          "default": "['info', 'success', 'warning', 'error']"
+        },
+        {
+          "kind": "variable",
+          "name": "ALERT"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AlertEvent",
+          "superclass": {
+            "name": "CustomEvent",
+            "module": "src/components/alert.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "Alerts provide urgent contextual feedback in response to user action or\nsystem activity.",
+          "name": "Alert",
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "AlertType"
+              },
+              "default": "'info'",
+              "description": "An alert type correlating with its severity.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the ability to dismiss the alert",
+              "attribute": "clearable"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional alert title text",
+              "attribute": "title"
+            },
+            {
+              "kind": "method",
+              "name": "getIcon"
+            },
+            {
+              "kind": "method",
+              "name": "clear"
+            }
+          ],
+          "events": [
+            {
+              "name": "brz-alert-cleared",
+              "type": {
+                "text": "AlertEvent"
+              },
+              "description": "Fired when the alert is dismissed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "AlertType"
+              },
+              "default": "'info'",
+              "description": "An alert type correlating with its severity.",
+              "fieldName": "type"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the ability to dismiss the alert",
+              "fieldName": "clearable"
+            },
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional alert title text",
+              "fieldName": "title"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-alert",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "alertTypes",
+          "declaration": {
+            "name": "alertTypes",
+            "module": "src/components/alert.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ALERT",
+          "declaration": {
+            "name": "ALERT",
+            "module": "src/components/alert.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AlertEvent",
+          "declaration": {
+            "name": "AlertEvent",
+            "module": "src/components/alert.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Alert",
+          "declaration": {
+            "name": "Alert",
+            "module": "src/components/alert.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "Alert",
+            "module": "src/components/alert.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/avatar.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "AVATAR"
+        },
+        {
+          "kind": "variable",
+          "name": "AVATAR_GROUP"
+        },
+        {
+          "kind": "class",
+          "description": "Avatar component.",
+          "name": "Avatar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasOuterBorder",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If set adds 1px white border around the avatar",
+              "attribute": "has-outer-border",
               "reflects": true
             },
             {
@@ -691,6 +1351,22 @@
           "kind": "variable",
           "name": "BADGE"
         },
+        {
+          "kind": "variable",
+          "name": "BADGE_CHARACTER_LIMIT_DEFAULT",
+          "type": {
+            "text": "number"
+          },
+          "default": "5"
+        },
+        {
+          "kind": "variable",
+          "name": "BADGE_NUMBER_LIMIT_DEFAULT",
+          "type": {
+            "text": "number"
+          },
+          "default": "99"
+        },
         {
           "kind": "class",
           "description": "Badge component.",
@@ -714,32 +1390,22 @@
               },
               "default": "0",
               "description": "Sets the content limit. For numbers it defaults to 99, characters 5.",
-              "attribute": "limit",
-              "reflects": true
+              "attribute": "limit"
             },
             {
               "kind": "field",
               "name": "content",
               "type": {
-                "text": "string"
+                "text": "string | number"
               },
               "default": "''",
               "description": "Content you want to show inside the badge.",
-              "attribute": "content",
-              "reflects": true
+              "attribute": "content"
             },
             {
               "kind": "method",
-              "name": "isNumeric",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "setDefaultLimit",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -768,7 +1434,7 @@
             {
               "name": "content",
               "type": {
-                "text": "string"
+                "text": "string | number"
               },
               "default": "''",
               "description": "Content you want to show inside the badge.",
@@ -792,6 +1458,22 @@
             "module": "src/components/badge.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "BADGE_CHARACTER_LIMIT_DEFAULT",
+          "declaration": {
+            "name": "BADGE_CHARACTER_LIMIT_DEFAULT",
+            "module": "src/components/badge.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BADGE_NUMBER_LIMIT_DEFAULT",
+          "declaration": {
+            "name": "BADGE_NUMBER_LIMIT_DEFAULT",
+            "module": "src/components/badge.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Badge",
@@ -3559,7 +4241,7 @@
             {
               "name": "content",
               "type": {
-                "text": "string"
+                "text": "string | number"
               },
               "default": "''",
               "description": "Content you want to show inside the badge.",
@@ -3594,7 +4276,6 @@
               "default": "0",
               "description": "Sets the content limit. For numbers it defaults to 99, characters 5.",
               "attribute": "limit",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Badge",
                 "module": "src/components/badge.ts"
@@ -3604,12 +4285,11 @@
               "kind": "field",
               "name": "content",
               "type": {
-                "text": "string"
+                "text": "string | number"
               },
               "default": "''",
               "description": "Content you want to show inside the badge.",
               "attribute": "content",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Badge",
                 "module": "src/components/badge.ts"
@@ -3617,16 +4297,8 @@
             },
             {
               "kind": "method",
-              "name": "isNumeric",
+              "name": "setDefaultLimit",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
               "inheritedFrom": {
                 "name": "Badge",
                 "module": "src/components/badge.ts"
@@ -18130,1587 +18802,806 @@
               },
               "fieldName": "popoverRole",
               "inheritedFrom": {
-                "name": "PurePopover",
-                "module": "src/components/popover.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Stops the popover content from showing",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "PurePopover",
-                "module": "src/components/popover.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "PurePopover",
-            "module": "src/components/popover.ts"
-          },
-          "tagName": "brz-popover",
-          "customElement": true,
-          "events": [
-            {
-              "name": "eventType",
-              "type": {
-                "text": "PopoverEvent"
-              },
-              "inheritedFrom": {
-                "name": "PurePopover",
-                "module": "src/components/popover.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "POPOVER",
-          "declaration": {
-            "name": "POPOVER",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PURE_POPOVER",
-          "declaration": {
-            "name": "PURE_POPOVER",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "POPOVER_TRIGGERS",
-          "declaration": {
-            "name": "POPOVER_TRIGGERS",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "[click, hover, focus]",
-          "declaration": {
-            "name": "[click, hover, focus]",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "POPOVER_ROLES",
-          "declaration": {
-            "name": "POPOVER_ROLES",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PopoverEvent",
-          "declaration": {
-            "name": "PopoverEvent",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PurePopover",
-          "declaration": {
-            "name": "PurePopover",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "PurePopover",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "POPOVER_LISTENABLE_EVENT_TYPES",
-          "declaration": {
-            "name": "POPOVER_LISTENABLE_EVENT_TYPES",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Popover",
-          "declaration": {
-            "name": "Popover",
-            "module": "src/components/popover.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Popover",
-            "module": "src/components/popover.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/record-row.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "RECORD_ROW"
-        },
-        {
-          "kind": "variable",
-          "name": "RECORD_ROW_LABEL"
-        },
-        {
-          "kind": "class",
-          "description": "Record row component",
-          "name": "RecordRow",
-          "members": [
-            {
-              "kind": "field",
-              "name": "labelPosition",
-              "type": {
-                "text": "LabelPosition"
-              },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "RecordField",
-                "module": "src/components/record-field/record-field.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "InputSizes"
-              },
-              "default": "'medium'",
-              "description": "The size of the input",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "RecordField",
-                "module": "src/components/record-field/record-field.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setLabelState",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "RecordField",
-                "module": "src/components/record-field/record-field.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkIfMultiline",
-              "privacy": "private",
-              "description": "Attempts to evaluate whether the value element is a multiline text value.\nThis has the potential to be a bit flaky since anything could be slotted in\nthe value, but most other elements are not exact multiples of line height,\nso we use this as the basis for setting the multiline state.",
-              "inheritedFrom": {
-                "name": "RecordField",
-                "module": "src/components/record-field/record-field.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "RecordField",
-            "module": "/src/components/record-field"
-          },
-          "deprecated": "Use brz-record-field",
-          "tagName": "brz-record-row",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "label-position",
-              "type": {
-                "text": "LabelPosition"
-              },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
-              "inheritedFrom": {
-                "name": "RecordField",
-                "module": "src/components/record-field/record-field.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "InputSizes"
-              },
-              "default": "'medium'",
-              "description": "The size of the input",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "RecordField",
-                "module": "src/components/record-field/record-field.ts"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "class",
-          "description": "Record row label component",
-          "name": "RecordRowLabel",
-          "superclass": {
-            "name": "RecordFieldLabel",
-            "module": "/src/components/record-field"
-          },
-          "deprecated": "Use brz-field-label",
-          "tagName": "brz-record-row-label",
-          "customElement": true,
-          "members": [
-            {
-              "kind": "method",
-              "name": "setState",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "RecordFieldLabel",
-                "module": "src/components/record-field/record-field-label.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "RECORD_ROW",
-          "declaration": {
-            "name": "RECORD_ROW",
-            "module": "src/components/record-row.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "RECORD_ROW_LABEL",
-          "declaration": {
-            "name": "RECORD_ROW_LABEL",
-            "module": "src/components/record-row.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "RecordRow",
-          "declaration": {
-            "name": "RecordRow",
-            "module": "src/components/record-row.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "RecordRow",
-            "module": "src/components/record-row.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "RecordRowLabel",
-          "declaration": {
-            "name": "RecordRowLabel",
-            "module": "src/components/record-row.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "RecordRowLabel",
-            "module": "src/components/record-row.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/tooltip.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "TOOLTIP"
-        },
-        {
-          "kind": "class",
-          "description": "Tooltip component",
-          "name": "Tooltip",
-          "members": [
-            {
-              "kind": "field",
-              "name": "delayOnClose",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Time delay before hiding tooltip",
-              "attribute": "delay-on-close"
-            },
-            {
-              "kind": "field",
-              "name": "delayOnOpen",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Time delay before showing tooltip",
-              "attribute": "delay-on-open"
-            },
-            {
-              "kind": "field",
-              "name": "isFixed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Uses fixed positioning",
-              "attribute": "is-fixed"
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "PopoverProps['placement']"
-              },
-              "default": "'top'",
-              "description": "Placement of tooltip in relation to reference element",
-              "attribute": "placement"
-            },
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "PopoverProps['trigger']"
-              },
-              "default": "'hover focus'",
-              "description": "Trigger states for tooltip",
-              "attribute": "trigger"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Stops tooltip for showing",
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Content to be shown in tooltip",
-              "attribute": "content"
-            },
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "Theme"
-              },
-              "default": "'dark'",
-              "description": "The tooltip theme",
-              "attribute": "theme",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "delay-on-close",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Time delay before hiding tooltip",
-              "fieldName": "delayOnClose"
-            },
-            {
-              "name": "delay-on-open",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "Time delay before showing tooltip",
-              "fieldName": "delayOnOpen"
-            },
-            {
-              "name": "is-fixed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Uses fixed positioning",
-              "fieldName": "isFixed"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "PopoverProps['placement']"
-              },
-              "default": "'top'",
-              "description": "Placement of tooltip in relation to reference element",
-              "fieldName": "placement"
-            },
-            {
-              "name": "trigger",
-              "type": {
-                "text": "PopoverProps['trigger']"
-              },
-              "default": "'hover focus'",
-              "description": "Trigger states for tooltip",
-              "fieldName": "trigger"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Stops tooltip for showing",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Content to be shown in tooltip",
-              "fieldName": "content"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "Theme"
-              },
-              "default": "'dark'",
-              "description": "The tooltip theme",
-              "fieldName": "theme"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-tooltip",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TOOLTIP",
-          "declaration": {
-            "name": "TOOLTIP",
-            "module": "src/components/tooltip.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Tooltip",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "src/components/tooltip.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "src/components/tooltip.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/virtual-list.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "VIRTUAL_LIST"
-        },
-        {
-          "kind": "class",
-          "description": "VirtualList is helper component for high-volume lists. It eases the strain on\nthe browser by only rendering a small slice of the list at a time, while the\nsize of the list container is estimated and padded out to help normalize\nscroll behaviour.",
-          "name": "VirtualList",
-          "members": [
-            {
-              "kind": "field",
-              "name": "items",
-              "type": {
-                "text": "ItemType[]"
-              },
-              "default": "[]",
-              "description": "List of items to be virtualized. Usually an array of data objects.",
-              "attribute": "items"
-            },
-            {
-              "kind": "field",
-              "name": "itemMinHeight",
-              "type": {
-                "text": "number"
-              },
-              "default": "32",
-              "description": "Fixed or minimum height of each list item in pixels. Defaults to 32.\nSetting a known min-height of each list item significantly improves\nperformance.",
-              "attribute": "item-min-height"
-            },
-            {
-              "kind": "field",
-              "name": "overscan",
-              "type": {
-                "text": "number"
-              },
-              "default": "50",
-              "description": "Number of items to render before and after the current item index. This\nhelps the virtual scroll feel more natural by avoiding flashes of \"blank\"\nitems or badly estimated offsets. However, be aware that a higher value\nmeans more elements are rendered to the DOM so can eventually lead to worse\noverall performance.",
-              "attribute": "overscan"
-            },
-            {
-              "kind": "field",
-              "name": "renderItem"
-            },
-            {
-              "kind": "method",
-              "name": "sync",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "resetItems",
-              "privacy": "private",
-              "description": "Resets the current list of virtualized items and associated properties"
-            },
-            {
-              "kind": "method",
-              "name": "canSync",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "changedProperties",
-                  "type": {
-                    "text": "PropertyValues"
-                  }
-                }
-              ],
-              "description": "Returns true if a property has changed that should trigger a sync"
-            },
-            {
-              "kind": "method",
-              "name": "sumOfHeightsToIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "description": "Adds up the item heights up to the current item index. Used to set the top\noffset for each item in the scroll container."
-            },
-            {
-              "kind": "method",
-              "name": "syncVisibleItems",
-              "privacy": "private",
-              "description": "Syncs the rolling render window. Usually triggered by scroll or changed\nproperties requiring the list to re-render."
-            },
-            {
-              "kind": "method",
-              "name": "emitUpdate",
-              "privacy": "private",
-              "description": "Dispatches an event containing a list of references to the rendered item\nelements. This saves extensive DOM-querying by parents to access them."
-            },
-            {
-              "kind": "method",
-              "name": "updateItemHeights",
-              "privacy": "private",
-              "description": "Reads the actual item heights as they are rendered into the rolling render\nwindow and tracks them in the item heights array. This helps variable item\nheights to become more predictable over time and reduce potentially janky\nbehaviour while scrolling."
-            },
-            {
-              "kind": "method",
-              "name": "handleScroll",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Updates the current scrollTop value as the user scrolls the list container,\nthen syncs up the visible items."
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "VirtualListUpdateEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "overscan",
-              "type": {
-                "text": "number"
-              },
-              "default": "50",
-              "description": "Number of items to render before and after the current item index. This\nhelps the virtual scroll feel more natural by avoiding flashes of \"blank\"\nitems or badly estimated offsets. However, be aware that a higher value\nmeans more elements are rendered to the DOM so can eventually lead to worse\noverall performance.",
-              "fieldName": "overscan",
-              "attribute": "overscan"
-            },
-            {
-              "name": "items",
-              "type": {
-                "text": "ItemType[]"
-              },
-              "default": "[]",
-              "description": "List of items to be virtualized. Usually an array of data objects.",
-              "fieldName": "items"
-            },
-            {
-              "name": "item-min-height",
-              "type": {
-                "text": "number"
-              },
-              "default": "32",
-              "description": "Fixed or minimum height of each list item in pixels. Defaults to 32.\nSetting a known min-height of each list item significantly improves\nperformance.",
-              "fieldName": "itemMinHeight"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-virtual-list",
-          "customElement": true
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "VirtualListUpdateEvent",
-          "superclass": {
-            "name": "CustomEvent",
-            "module": "src/components/virtual-list.ts"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "VIRTUAL_LIST",
-          "declaration": {
-            "name": "VIRTUAL_LIST",
-            "module": "src/components/virtual-list.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "VirtualList",
-          "declaration": {
-            "name": "VirtualList",
-            "module": "src/components/virtual-list.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "VirtualList",
-            "module": "src/components/virtual-list.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "VirtualListUpdateEvent",
-          "declaration": {
-            "name": "VirtualListUpdateEvent",
-            "module": "src/components/virtual-list.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/flex.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ROW"
-        },
-        {
-          "kind": "variable",
-          "name": "COLUMN"
-        },
-        {
-          "kind": "class",
-          "description": "Row layout.",
-          "name": "Row",
-          "members": [
-            {
-              "kind": "field",
-              "name": "verticalAlign",
-              "type": {
-                "text": "'top' | 'middle' | 'bottom'"
-              },
-              "default": "'top'",
-              "attribute": "vertical-align",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "vertical-align",
-              "type": {
-                "text": "'top' | 'middle' | 'bottom'"
-              },
-              "default": "'top'",
-              "fieldName": "verticalAlign"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-row",
-          "customElement": true
-        },
-        {
-          "kind": "class",
-          "description": "Column layout.",
-          "name": "Column",
-          "members": [
-            {
-              "kind": "field",
-              "name": "align",
-              "type": {
-                "text": "'left' | 'center' | 'right'"
-              },
-              "default": "'left'",
-              "attribute": "align"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "align",
-              "type": {
-                "text": "'left' | 'center' | 'right'"
-              },
-              "default": "'left'",
-              "fieldName": "align"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-column",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ROW",
-          "declaration": {
-            "name": "ROW",
-            "module": "src/layout/flex.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "COLUMN",
-          "declaration": {
-            "name": "COLUMN",
-            "module": "src/layout/flex.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Row",
-          "declaration": {
-            "name": "Row",
-            "module": "src/layout/flex.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Row",
-            "module": "src/layout/flex.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Column",
-          "declaration": {
-            "name": "Column",
-            "module": "src/layout/flex.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Column",
-            "module": "src/layout/flex.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/footer.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "FOOTER"
-        },
-        {
-          "kind": "class",
-          "description": "Footer layout.",
-          "name": "Footer",
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-footer",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FOOTER",
-          "declaration": {
-            "name": "FOOTER",
-            "module": "src/layout/footer.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Footer",
-          "declaration": {
-            "name": "Footer",
-            "module": "src/layout/footer.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Footer",
-            "module": "src/layout/footer.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/header-footer-page.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "HEADER_FOOTER_PAGE"
-        },
-        {
-          "kind": "class",
-          "description": "Header footer page layout.",
-          "name": "HeaderFooterPage",
-          "members": [],
+                "name": "PurePopover",
+                "module": "src/components/popover.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stops the popover content from showing",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "PurePopover",
+                "module": "src/components/popover.ts"
+              }
+            }
+          ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PurePopover",
+            "module": "src/components/popover.ts"
           },
-          "tagName": "brz-header-footer-page",
-          "customElement": true
+          "tagName": "brz-popover",
+          "customElement": true,
+          "events": [
+            {
+              "name": "eventType",
+              "type": {
+                "text": "PopoverEvent"
+              },
+              "inheritedFrom": {
+                "name": "PurePopover",
+                "module": "src/components/popover.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "HEADER_FOOTER_PAGE",
-          "declaration": {
-            "name": "HEADER_FOOTER_PAGE",
-            "module": "src/layout/header-footer-page.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HeaderFooterPage",
-          "declaration": {
-            "name": "HeaderFooterPage",
-            "module": "src/layout/header-footer-page.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
+          "name": "POPOVER",
           "declaration": {
-            "name": "HeaderFooterPage",
-            "module": "src/layout/header-footer-page.ts"
+            "name": "POPOVER",
+            "module": "src/components/popover.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/header.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "HEADER"
         },
-        {
-          "kind": "class",
-          "description": "Header layout.",
-          "name": "Header",
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "deprecated": "Use PageHeader component instead",
-          "tagName": "brz-header",
-          "customElement": true
-        }
-      ],
-      "exports": [
         {
           "kind": "js",
-          "name": "HEADER",
+          "name": "PURE_POPOVER",
           "declaration": {
-            "name": "HEADER",
-            "module": "src/layout/header.ts"
+            "name": "PURE_POPOVER",
+            "module": "src/components/popover.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Header",
+          "name": "POPOVER_TRIGGERS",
           "declaration": {
-            "name": "Header",
-            "module": "src/layout/header.ts"
+            "name": "POPOVER_TRIGGERS",
+            "module": "src/components/popover.ts"
           }
         },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Header",
-            "module": "src/layout/header.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/index.ts",
-      "declarations": [],
-      "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "[click, hover, focus]",
           "declaration": {
-            "name": "*",
-            "package": "./header"
+            "name": "[click, hover, focus]",
+            "module": "src/components/popover.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "POPOVER_ROLES",
           "declaration": {
-            "name": "*",
-            "package": "./flex"
+            "name": "POPOVER_ROLES",
+            "module": "src/components/popover.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "PopoverEvent",
           "declaration": {
-            "name": "*",
-            "package": "./split-row"
+            "name": "PopoverEvent",
+            "module": "src/components/popover.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "PurePopover",
           "declaration": {
-            "name": "*",
-            "package": "./header-footer-page"
+            "name": "PurePopover",
+            "module": "src/components/popover.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "*",
+          "kind": "custom-element-definition",
           "declaration": {
-            "name": "*",
-            "package": "./responsive-columns"
+            "name": "PurePopover",
+            "module": "src/components/popover.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "POPOVER_LISTENABLE_EVENT_TYPES",
           "declaration": {
-            "name": "*",
-            "package": "./footer"
+            "name": "POPOVER_LISTENABLE_EVENT_TYPES",
+            "module": "src/components/popover.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "Popover",
           "declaration": {
-            "name": "*",
-            "package": "./page-header"
+            "name": "Popover",
+            "module": "src/components/popover.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "*",
+          "kind": "custom-element-definition",
           "declaration": {
-            "name": "*",
-            "package": "./grid"
+            "name": "Popover",
+            "module": "src/components/popover.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/layout/page-header.ts",
+      "path": "src/components/record-row.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "PAGE_HEADER"
+          "name": "RECORD_ROW"
+        },
+        {
+          "kind": "variable",
+          "name": "RECORD_ROW_LABEL"
         },
         {
           "kind": "class",
-          "description": "Use a Page Header to apply a consistent look and feel across all application\npages. It exposes several flexible content slots to support designs across\nvarious feature areas.",
-          "name": "PageHeader",
-          "slots": [
-            {
-              "description": "Supply a title as HTML if needed. Will be wrapped in a Level 1 heading. Ignores `pageTitle` property.",
-              "name": "title"
-            },
-            {
-              "description": "An area to the left of the title, often used for avatars",
-              "name": "decorator"
-            },
+          "description": "Record row component",
+          "name": "RecordRow",
+          "members": [
             {
-              "description": "A subtitle provides additional context to the title",
-              "name": "subtitle"
+              "kind": "field",
+              "name": "labelPosition",
+              "type": {
+                "text": "LabelPosition"
+              },
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "RecordField",
+                "module": "src/components/record-field/record-field.ts"
+              }
             },
             {
-              "description": "A flexible area for tags and other descriptive content",
-              "name": "description"
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "InputSizes"
+              },
+              "default": "'medium'",
+              "description": "The size of the input",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "RecordField",
+                "module": "src/components/record-field/record-field.ts"
+              }
             },
             {
-              "description": "An area to the right of the title, often used for status labels",
-              "name": "info"
+              "kind": "method",
+              "name": "setLabelState",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "RecordField",
+                "module": "src/components/record-field/record-field.ts"
+              }
             },
             {
-              "description": "Typically used for one or more action buttons",
-              "name": "actions"
+              "kind": "method",
+              "name": "checkIfMultiline",
+              "privacy": "private",
+              "description": "Attempts to evaluate whether the value element is a multiline text value.\nThis has the potential to be a bit flaky since anything could be slotted in\nthe value, but most other elements are not exact multiples of line height,\nso we use this as the basis for setting the multiline state.",
+              "inheritedFrom": {
+                "name": "RecordField",
+                "module": "src/components/record-field/record-field.ts"
+              }
             }
           ],
-          "members": [
+          "superclass": {
+            "name": "RecordField",
+            "module": "/src/components/record-field"
+          },
+          "deprecated": "Use brz-record-field",
+          "tagName": "brz-record-row",
+          "customElement": true,
+          "attributes": [
             {
-              "kind": "field",
-              "name": "pageTitle",
+              "name": "label-position",
               "type": {
-                "text": "string | undefined"
+                "text": "LabelPosition"
               },
-              "description": "The main page title. Will be rendered to a Level 1 heading.\n\nIf you need more control and want to set the title with HTML, use the\n`title` slot instead, which ignores this property.",
-              "attribute": "page-title"
-            }
-          ],
-          "attributes": [
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
+              "inheritedFrom": {
+                "name": "RecordField",
+                "module": "src/components/record-field/record-field.ts"
+              }
+            },
             {
-              "name": "page-title",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "InputSizes"
               },
-              "description": "The main page title. Will be rendered to a Level 1 heading.\n\nIf you need more control and want to set the title with HTML, use the\n`title` slot instead, which ignores this property.",
-              "fieldName": "pageTitle"
+              "default": "'medium'",
+              "description": "The size of the input",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "RecordField",
+                "module": "src/components/record-field/record-field.ts"
+              }
             }
-          ],
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "Record row label component",
+          "name": "RecordRowLabel",
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "RecordFieldLabel",
+            "module": "/src/components/record-field"
           },
-          "tagName": "brz-page-header",
-          "customElement": true
+          "deprecated": "Use brz-field-label",
+          "tagName": "brz-record-row-label",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "method",
+              "name": "setState",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "RecordFieldLabel",
+                "module": "src/components/record-field/record-field-label.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PAGE_HEADER",
+          "name": "RECORD_ROW",
           "declaration": {
-            "name": "PAGE_HEADER",
-            "module": "src/layout/page-header.ts"
+            "name": "RECORD_ROW",
+            "module": "src/components/record-row.ts"
           }
         },
         {
           "kind": "js",
-          "name": "PageHeader",
+          "name": "RECORD_ROW_LABEL",
           "declaration": {
-            "name": "PageHeader",
-            "module": "src/layout/page-header.ts"
+            "name": "RECORD_ROW_LABEL",
+            "module": "src/components/record-row.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
+          "kind": "js",
+          "name": "RecordRow",
           "declaration": {
-            "name": "PageHeader",
-            "module": "src/layout/page-header.ts"
+            "name": "RecordRow",
+            "module": "src/components/record-row.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/responsive-columns.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "RESPONSIVE_COLUMNS"
         },
         {
-          "kind": "class",
-          "description": "Responsive columns layout.",
-          "name": "ResponsiveColumns",
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-responsive-columns",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "RESPONSIVE_COLUMNS",
+          "kind": "custom-element-definition",
           "declaration": {
-            "name": "RESPONSIVE_COLUMNS",
-            "module": "src/layout/responsive-columns.ts"
+            "name": "RecordRow",
+            "module": "src/components/record-row.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ResponsiveColumns",
+          "name": "RecordRowLabel",
           "declaration": {
-            "name": "ResponsiveColumns",
-            "module": "src/layout/responsive-columns.ts"
+            "name": "RecordRowLabel",
+            "module": "src/components/record-row.ts"
           }
         },
         {
           "kind": "custom-element-definition",
           "declaration": {
-            "name": "ResponsiveColumns",
-            "module": "src/layout/responsive-columns.ts"
+            "name": "RecordRowLabel",
+            "module": "src/components/record-row.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/layout/split-row.ts",
+      "path": "src/components/tooltip.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "SPLIT_ROW"
-        },
-        {
-          "kind": "variable",
-          "name": "ACTION_BAR"
+          "name": "TOOLTIP"
         },
         {
           "kind": "class",
-          "description": "Split row layout.",
-          "name": "SplitRow",
-          "slots": [
-            {
-              "description": "Content to populate the left side",
-              "name": "left"
-            },
-            {
-              "description": "Content to populate the right side",
-              "name": "right"
-            }
-          ],
+          "description": "Tooltip component",
+          "name": "Tooltip",
           "members": [
             {
               "kind": "field",
-              "name": "verticalAlign",
-              "type": {
-                "text": "'top' | 'middle' | 'bottom'"
-              },
-              "default": "'top'",
-              "description": "Sets the vertical alignment of the content in the row",
-              "attribute": "vertical-align",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "leftExpand",
+              "name": "delayOnClose",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Expands the left slot to fill the remaining space",
-              "attribute": "left-expand",
-              "reflects": true
+              "default": "100",
+              "description": "Time delay before hiding tooltip",
+              "attribute": "delay-on-close"
             },
             {
               "kind": "field",
-              "name": "rightExpand",
+              "name": "delayOnOpen",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Expands the right slot to fill the remaining space",
-              "attribute": "right-expand",
-              "reflects": true
+              "default": "100",
+              "description": "Time delay before showing tooltip",
+              "attribute": "delay-on-open"
             },
             {
               "kind": "field",
-              "name": "noGap",
+              "name": "isFixed",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the spacing between the left and right slots",
-              "attribute": "no-gap",
-              "reflects": true
+              "description": "Uses fixed positioning",
+              "attribute": "is-fixed"
             },
             {
               "kind": "field",
-              "name": "expandY",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Expands the row vertically to fill in its parent's height",
-              "attribute": "expand-y"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "vertical-align",
+              "name": "placement",
               "type": {
-                "text": "'top' | 'middle' | 'bottom'"
+                "text": "PopoverProps['placement']"
               },
               "default": "'top'",
-              "description": "Sets the vertical alignment of the content in the row",
-              "fieldName": "verticalAlign"
+              "description": "Placement of tooltip in relation to reference element",
+              "attribute": "placement"
             },
             {
-              "name": "left-expand",
+              "kind": "field",
+              "name": "trigger",
               "type": {
-                "text": "boolean"
+                "text": "PopoverProps['trigger']"
               },
-              "default": "false",
-              "description": "Expands the left slot to fill the remaining space",
-              "fieldName": "leftExpand"
+              "default": "'hover focus'",
+              "description": "Trigger states for tooltip",
+              "attribute": "trigger"
             },
             {
-              "name": "right-expand",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Expands the right slot to fill the remaining space",
-              "fieldName": "rightExpand"
+              "description": "Stops tooltip for showing",
+              "attribute": "disabled"
             },
             {
-              "name": "no-gap",
+              "kind": "field",
+              "name": "content",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Removes the spacing between the left and right slots",
-              "fieldName": "noGap"
+              "default": "''",
+              "description": "Content to be shown in tooltip",
+              "attribute": "content"
             },
             {
-              "name": "expand-y",
+              "kind": "field",
+              "name": "theme",
               "type": {
-                "text": "boolean"
+                "text": "Theme"
               },
-              "default": "false",
-              "description": "Expands the row vertically to fill in its parent's height",
-              "fieldName": "expandY"
+              "default": "'dark'",
+              "description": "The tooltip theme",
+              "attribute": "theme",
+              "reflects": true
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-split-row",
-          "customElement": true
-        },
-        {
-          "kind": "class",
-          "description": "Action bar layout.",
-          "name": "ActionBar",
-          "slots": [
+          "attributes": [
             {
-              "description": "Content to populate the left side",
-              "name": "left"
+              "name": "delay-on-close",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Time delay before hiding tooltip",
+              "fieldName": "delayOnClose"
             },
             {
-              "description": "Content to populate the right side",
-              "name": "right"
-            }
-          ],
-          "members": [
+              "name": "delay-on-open",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Time delay before showing tooltip",
+              "fieldName": "delayOnOpen"
+            },
             {
-              "kind": "field",
-              "name": "noBorder",
+              "name": "is-fixed",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the border (e.g. if you have an element below that has a border)",
-              "attribute": "no-border",
-              "reflects": true
+              "description": "Uses fixed positioning",
+              "fieldName": "isFixed"
             },
             {
-              "kind": "field",
-              "name": "leftExpand",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "PopoverProps['placement']"
               },
-              "default": "false",
-              "description": "Expands the left slot to fill the remaining space",
-              "attribute": "left-expand",
-              "reflects": true
+              "default": "'top'",
+              "description": "Placement of tooltip in relation to reference element",
+              "fieldName": "placement"
             },
             {
-              "kind": "field",
-              "name": "rightExpand",
+              "name": "trigger",
               "type": {
-                "text": "boolean"
+                "text": "PopoverProps['trigger']"
               },
-              "default": "false",
-              "description": "Expands the right slot to fill the remaining space",
-              "attribute": "right-expand",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "'hover focus'",
+              "description": "Trigger states for tooltip",
+              "fieldName": "trigger"
+            },
             {
-              "name": "no-border",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the border (e.g. if you have an element below that has a border)",
-              "fieldName": "noBorder"
+              "description": "Stops tooltip for showing",
+              "fieldName": "disabled"
             },
             {
-              "name": "left-expand",
+              "name": "content",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Expands the left slot to fill the remaining space",
-              "fieldName": "leftExpand"
+              "default": "''",
+              "description": "Content to be shown in tooltip",
+              "fieldName": "content"
             },
             {
-              "name": "right-expand",
+              "name": "theme",
               "type": {
-                "text": "boolean"
+                "text": "Theme"
               },
-              "default": "false",
-              "description": "Expands the right slot to fill the remaining space",
-              "fieldName": "rightExpand"
+              "default": "'dark'",
+              "description": "The tooltip theme",
+              "fieldName": "theme"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "brz-action-bar",
+          "tagName": "brz-tooltip",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SPLIT_ROW",
-          "declaration": {
-            "name": "SPLIT_ROW",
-            "module": "src/layout/split-row.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ACTION_BAR",
-          "declaration": {
-            "name": "ACTION_BAR",
-            "module": "src/layout/split-row.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SplitRow",
-          "declaration": {
-            "name": "SplitRow",
-            "module": "src/layout/split-row.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
+          "name": "TOOLTIP",
           "declaration": {
-            "name": "SplitRow",
-            "module": "src/layout/split-row.ts"
+            "name": "TOOLTIP",
+            "module": "src/components/tooltip.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ActionBar",
+          "name": "Tooltip",
           "declaration": {
-            "name": "ActionBar",
-            "module": "src/layout/split-row.ts"
+            "name": "Tooltip",
+            "module": "src/components/tooltip.ts"
           }
         },
         {
           "kind": "custom-element-definition",
           "declaration": {
-            "name": "ActionBar",
-            "module": "src/layout/split-row.ts"
+            "name": "Tooltip",
+            "module": "src/components/tooltip.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/storybook/colors.stories.ts",
+      "path": "src/components/virtual-list.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "VIRTUAL_LIST"
+        },
         {
           "kind": "class",
-          "description": "Story component to render a colour swatch.\nWill extract the hex code from a supplied color var and use it as the background.",
-          "name": "ColorSwatch",
+          "description": "VirtualList is helper component for high-volume lists. It eases the strain on\nthe browser by only rendering a small slice of the list at a time, while the\nsize of the list container is estimated and padded out to help normalize\nscroll behaviour.",
+          "name": "VirtualList",
           "members": [
             {
               "kind": "field",
-              "name": "colorVar",
+              "name": "items",
               "type": {
-                "text": "string"
+                "text": "ItemType[]"
               },
-              "default": "''",
-              "attribute": "colorVar"
+              "default": "[]",
+              "description": "List of items to be virtualized. Usually an array of data objects.",
+              "attribute": "items"
             },
             {
               "kind": "field",
-              "name": "lightText",
+              "name": "itemMinHeight",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "attribute": "light-text"
+              "default": "32",
+              "description": "Fixed or minimum height of each list item in pixels. Defaults to 32.\nSetting a known min-height of each list item significantly improves\nperformance.",
+              "attribute": "item-min-height"
+            },
+            {
+              "kind": "field",
+              "name": "overscan",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "Number of items to render before and after the current item index. This\nhelps the virtual scroll feel more natural by avoiding flashes of \"blank\"\nitems or badly estimated offsets. However, be aware that a higher value\nmeans more elements are rendered to the DOM so can eventually lead to worse\noverall performance.",
+              "attribute": "overscan"
+            },
+            {
+              "kind": "field",
+              "name": "renderItem"
+            },
+            {
+              "kind": "method",
+              "name": "sync",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "resetItems",
+              "privacy": "private",
+              "description": "Resets the current list of virtualized items and associated properties"
+            },
+            {
+              "kind": "method",
+              "name": "canSync",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ],
+              "description": "Returns true if a property has changed that should trigger a sync"
+            },
+            {
+              "kind": "method",
+              "name": "sumOfHeightsToIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Adds up the item heights up to the current item index. Used to set the top\noffset for each item in the scroll container."
+            },
+            {
+              "kind": "method",
+              "name": "syncVisibleItems",
+              "privacy": "private",
+              "description": "Syncs the rolling render window. Usually triggered by scroll or changed\nproperties requiring the list to re-render."
+            },
+            {
+              "kind": "method",
+              "name": "emitUpdate",
+              "privacy": "private",
+              "description": "Dispatches an event containing a list of references to the rendered item\nelements. This saves extensive DOM-querying by parents to access them."
+            },
+            {
+              "kind": "method",
+              "name": "updateItemHeights",
+              "privacy": "private",
+              "description": "Reads the actual item heights as they are rendered into the rolling render\nwindow and tracks them in the item heights array. This helps variable item\nheights to become more predictable over time and reduce potentially janky\nbehaviour while scrolling."
+            },
+            {
+              "kind": "method",
+              "name": "handleScroll",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Updates the current scrollTop value as the user scrolls the list container,\nthen syncs up the visible items."
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "VirtualListUpdateEvent"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "colorVar",
+              "name": "overscan",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "fieldName": "colorVar"
+              "default": "50",
+              "description": "Number of items to render before and after the current item index. This\nhelps the virtual scroll feel more natural by avoiding flashes of \"blank\"\nitems or badly estimated offsets. However, be aware that a higher value\nmeans more elements are rendered to the DOM so can eventually lead to worse\noverall performance.",
+              "fieldName": "overscan",
+              "attribute": "overscan"
             },
             {
-              "name": "light-text",
+              "name": "items",
               "type": {
-                "text": "boolean"
+                "text": "ItemType[]"
               },
-              "default": "false",
-              "fieldName": "lightText"
+              "default": "[]",
+              "description": "List of items to be virtualized. Usually an array of data objects.",
+              "fieldName": "items"
+            },
+            {
+              "name": "item-min-height",
+              "type": {
+                "text": "number"
+              },
+              "default": "32",
+              "description": "Fixed or minimum height of each list item in pixels. Defaults to 32.\nSetting a known min-height of each list item significantly improves\nperformance.",
+              "fieldName": "itemMinHeight"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "brz-sb-color-swatch",
+          "tagName": "brz-virtual-list",
           "customElement": true
         },
         {
           "kind": "class",
-          "description": "Story component for laying out a group of swatches",
-          "name": "ColorSwatchGroup",
-          "members": [
+          "description": "",
+          "name": "VirtualListUpdateEvent",
+          "superclass": {
+            "name": "CustomEvent",
+            "module": "src/components/virtual-list.ts"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VIRTUAL_LIST",
+          "declaration": {
+            "name": "VIRTUAL_LIST",
+            "module": "src/components/virtual-list.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VirtualList",
+          "declaration": {
+            "name": "VirtualList",
+            "module": "src/components/virtual-list.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "VirtualList",
+            "module": "src/components/virtual-list.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VirtualListUpdateEvent",
+          "declaration": {
+            "name": "VirtualListUpdateEvent",
+            "module": "src/components/virtual-list.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/helpers/css-helpers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getFocusStyles",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "stacked",
+              "name": "selector",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "stacked"
+              "description": "A CSS selector targeting an interactive element."
+            },
+            {
+              "name": "extraRules",
+              "default": "css``",
+              "description": "Optional rules to append. Useful for overrides."
             }
           ],
-          "attributes": [
+          "description": "Returns a CSSResult applying focus outline styles to a given interactive\nelement. Reduces repetition throughout multiple components.\n\nTargets modern `:focus-visible` by default and includes a `:focus` fallback\nfor older browsers."
+        },
+        {
+          "kind": "variable",
+          "name": "invisibleButtonRules",
+          "default": "css`\n  background: none;\n  border: 0;\n  border-radius: var(--brz-border-radius-default);\n  color: var(--brz-color-neutral-750);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n`",
+          "description": "CSS rules to apply invisible styles to buttons. Use within a CSS declaration\nblock."
+        },
+        {
+          "kind": "function",
+          "name": "getInvisibleButtonStyles",
+          "parameters": [
             {
-              "name": "stacked",
+              "name": "selector",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "stacked"
+              "description": "A CSS selector targeting a button"
+            },
+            {
+              "name": "extraRules",
+              "default": "css``",
+              "description": "Optional rules to append. Useful for overrides."
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-sb-color-swatch-group",
-          "customElement": true
+          "description": "Returns a CSSResult applying invisible styles to a button matching the given\nselector. Invisible buttons are a common pattern for icon-only close buttons.\n\nSince this applies to buttons, default focus styles are also automatically\nincluded for the selector. If you don't need them, or need to customise them,\nuse `invisibleButtonStyles` and `getFocusStyles()` separately instead."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorSwatch",
+          "name": "getFocusStyles",
           "declaration": {
-            "name": "ColorSwatch",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "getFocusStyles",
+            "module": "src/helpers/css-helpers.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-color-swatch",
+          "kind": "js",
+          "name": "invisibleButtonRules",
           "declaration": {
-            "name": "ColorSwatch",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "invisibleButtonRules",
+            "module": "src/helpers/css-helpers.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ColorSwatchGroup",
+          "name": "getInvisibleButtonStyles",
           "declaration": {
-            "name": "ColorSwatchGroup",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "getInvisibleButtonStyles",
+            "module": "src/helpers/css-helpers.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/helpers/index.ts",
+      "declarations": [],
+      "exports": [
         {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-color-swatch-group",
+          "kind": "js",
+          "name": "*",
           "declaration": {
-            "name": "ColorSwatchGroup",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "*",
+            "package": "./css-helpers"
           }
         }
       ]
@@ -19852,6 +19743,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/storybook/colors.stories.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Story component to render a colour swatch.\nWill extract the hex code from a supplied color var and use it as the background.",
+          "name": "ColorSwatch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "colorVar",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "colorVar"
+            },
+            {
+              "kind": "field",
+              "name": "lightText",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "light-text"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "colorVar",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "colorVar"
+            },
+            {
+              "name": "light-text",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "lightText"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-sb-color-swatch",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "Story component for laying out a group of swatches",
+          "name": "ColorSwatchGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "stacked"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "stacked"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-sb-color-swatch-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorSwatch",
+          "declaration": {
+            "name": "ColorSwatch",
+            "module": "src/storybook/colors.stories.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "brz-sb-color-swatch",
+          "declaration": {
+            "name": "ColorSwatch",
+            "module": "src/storybook/colors.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColorSwatchGroup",
+          "declaration": {
+            "name": "ColorSwatchGroup",
+            "module": "src/storybook/colors.stories.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "brz-sb-color-swatch-group",
+          "declaration": {
+            "name": "ColorSwatchGroup",
+            "module": "src/storybook/colors.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/styles/borders.ts",
@@ -20111,7 +20123,7 @@
         {
           "kind": "variable",
           "name": "typography",
-          "default": "css`\n  :host {\n    --brz-font-family-brand: Inter, sofiapro;\n    --brz-font-family-fallback: system-ui, BlinkMacSystemFont, -apple-system,\n      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',\n      'Helvetica Neue', sans-serif;\n\n    --brz-font-weight-bold: 700;\n    --brz-font-weight-semibold: 600;\n    --brz-font-weight-medium: 500;\n    --brz-font-weight-normal: 400;\n\n    --brz-font-size: 0.875rem;\n    --brz-line-height: 1.25rem;\n    --brz-font-size-heading: 1rem;\n    --brz-line-height-heading: 1.25rem;\n\n    --brz-font-size-heading-3xl: 1.875rem;\n    --brz-line-height-heading-3xl: 2rem;\n    --brz-font-size-heading-2xl: 1.5rem;\n    --brz-line-height-heading-2xl: 2rem;\n    --brz-font-size-heading-xl: 1.25rem;\n    --brz-line-height-heading-xl: 1.5rem;\n    --brz-font-size-heading-lg: 1.125rem;\n    --brz-line-height-heading-lg: 1.5rem;\n    --brz-font-size-heading-sm: 0.875rem;\n    --brz-line-height-heading-sm: 1.25rem;\n\n    --brz-font-size-lg: 1rem;\n    --brz-line-height-lg: 1.25rem;\n    --brz-font-size-sm: 0.8125rem;\n    --brz-line-height-sm: 1rem;\n    --brz-font-size-xs: 0.75rem;\n    --brz-line-height-xs: 0.9375rem;\n    --brz-font-size-2xs: 0.5625rem;\n    --brz-line-height-2xs: 0.75rem;\n\n    --brz-color-text: var(--brz-color-neutral-850);\n    --brz-color-text-light: var(--brz-color-neutral-700);\n    --brz-color-text-placeholder: var(--brz-color-neutral-600);\n\n    --brz-text-block-max-width: 44rem;\n  }\n`"
+          "default": "css`\n  :host {\n    --brz-font-family-brand: Inter, sofiapro;\n    --brz-font-family-fallback: system-ui, BlinkMacSystemFont, -apple-system,\n      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',\n      'Helvetica Neue', sans-serif;\n\n    --brz-font-weight-bold: 700;\n    --brz-font-weight-semibold: 600;\n    --brz-font-weight-medium: 500;\n    --brz-font-weight-normal: 400;\n\n    --brz-font-size: 0.875rem;\n    --brz-line-height: 1.25rem;\n    --brz-font-size-heading: 1rem;\n    --brz-line-height-heading: 1.25rem;\n\n    --brz-font-size-heading-3xl: 1.875rem;\n    --brz-line-height-heading-3xl: 2rem;\n    --brz-font-size-heading-2xl: 1.5rem;\n    --brz-line-height-heading-2xl: 2rem;\n    --brz-font-size-heading-xl: 1.25rem;\n    --brz-line-height-heading-xl: 1.5rem;\n    --brz-font-size-heading-lg: 1.125rem;\n    --brz-line-height-heading-lg: 1.5rem;\n    --brz-font-size-heading-sm: 0.875rem;\n    --brz-line-height-heading-sm: 1.25rem;\n\n    --brz-font-size-lg: 1rem;\n    --brz-line-height-lg: 1.25rem;\n    --brz-font-size-sm: 0.8125rem;\n    --brz-line-height-sm: 1rem;\n    --brz-font-size-xs: 0.75rem;\n    --brz-line-height-xs: 0.9375rem;\n    --brz-font-size-2xs: 0.5625rem;\n    --brz-line-height-2xs: 0.75rem;\n\n    --brz-color-text: var(--brz-color-neutral-850);\n    --brz-color-text-light: var(--brz-color-neutral-700);\n    --brz-color-text-placeholder: var(--brz-color-neutral-600);\n\n    --brz-text-block-max-width: 44rem;\n    --brz-list-block-max-width: 40rem;\n  }\n`"
         }
       ],
       "exports": [
@@ -20628,6 +20640,253 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/grid/grid-item.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "GRID_ITEM"
+        },
+        {
+          "kind": "variable",
+          "name": "columnSpans",
+          "type": {
+            "text": "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+          },
+          "default": "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+        },
+        {
+          "kind": "class",
+          "description": "Grid item component. To be used with brz-grid.\n\nSupports upto 12 columns.",
+          "name": "GridItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to span",
+              "attribute": "cols",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mdCols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to span on medium screens",
+              "attribute": "md-cols",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "smCols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to span on small screens",
+              "attribute": "sm-cols",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to span",
+              "fieldName": "cols"
+            },
+            {
+              "name": "md-cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to span on medium screens",
+              "fieldName": "mdCols"
+            },
+            {
+              "name": "sm-cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to span on small screens",
+              "fieldName": "smCols"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-grid-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GRID_ITEM",
+          "declaration": {
+            "name": "GRID_ITEM",
+            "module": "src/layout/grid/grid-item.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "columnSpans",
+          "declaration": {
+            "name": "columnSpans",
+            "module": "src/layout/grid/grid-item.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridItem",
+          "declaration": {
+            "name": "GridItem",
+            "module": "src/layout/grid/grid-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "GridItem",
+            "module": "src/layout/grid/grid-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/grid/grid.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "GRID"
+        },
+        {
+          "kind": "class",
+          "description": "Grid component.\n\nThis grid layout is setup with 12 flexible columns.\nColumns and row gaps are set to 20px, but can be changed using our spacing system.",
+          "name": "Grid",
+          "members": [
+            {
+              "kind": "field",
+              "name": "spacing",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Shorthand to set both row and column spacing",
+              "attribute": "spacing",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "colSpacing",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the column spacing between each grid item",
+              "attribute": "col-spacing",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rowSpacing",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the row spacing between each grid item",
+              "attribute": "row-spacing",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "spacing",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Shorthand to set both row and column spacing",
+              "fieldName": "spacing"
+            },
+            {
+              "name": "col-spacing",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the column spacing between each grid item",
+              "fieldName": "colSpacing"
+            },
+            {
+              "name": "row-spacing",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the row spacing between each grid item",
+              "fieldName": "rowSpacing"
+            }
+          ],
+          "superclass": {
+            "name": "LitElementWithUtils",
+            "module": "/src/mixins/component-utils"
+          },
+          "tagName": "brz-grid",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GRID",
+          "declaration": {
+            "name": "GRID",
+            "module": "src/layout/grid/grid.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Grid",
+          "declaration": {
+            "name": "Grid",
+            "module": "src/layout/grid/grid.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "Grid",
+            "module": "src/layout/grid/grid.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/grid/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./grid"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./grid-item"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/form-elements/code-theme.ts",
@@ -32718,253 +32977,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/grid/grid-item.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "GRID_ITEM"
-        },
-        {
-          "kind": "variable",
-          "name": "columnSpans",
-          "type": {
-            "text": "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
-          },
-          "default": "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
-        },
-        {
-          "kind": "class",
-          "description": "Grid item component. To be used with brz-grid.\n\nSupports upto 12 columns.",
-          "name": "GridItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Number of columns to span",
-              "attribute": "cols",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "mdCols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Number of columns to span on medium screens",
-              "attribute": "md-cols",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "smCols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Number of columns to span on small screens",
-              "attribute": "sm-cols",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Number of columns to span",
-              "fieldName": "cols"
-            },
-            {
-              "name": "md-cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Number of columns to span on medium screens",
-              "fieldName": "mdCols"
-            },
-            {
-              "name": "sm-cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Number of columns to span on small screens",
-              "fieldName": "smCols"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-grid-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GRID_ITEM",
-          "declaration": {
-            "name": "GRID_ITEM",
-            "module": "src/layout/grid/grid-item.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "columnSpans",
-          "declaration": {
-            "name": "columnSpans",
-            "module": "src/layout/grid/grid-item.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GridItem",
-          "declaration": {
-            "name": "GridItem",
-            "module": "src/layout/grid/grid-item.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "GridItem",
-            "module": "src/layout/grid/grid-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/grid/grid.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "GRID"
-        },
-        {
-          "kind": "class",
-          "description": "Grid component.\n\nThis grid layout is setup with 12 flexible columns.\nColumns and row gaps are set to 20px, but can be changed using our spacing system.",
-          "name": "Grid",
-          "members": [
-            {
-              "kind": "field",
-              "name": "spacing",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Shorthand to set both row and column spacing",
-              "attribute": "spacing",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "colSpacing",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Sets the column spacing between each grid item",
-              "attribute": "col-spacing",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "rowSpacing",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Sets the row spacing between each grid item",
-              "attribute": "row-spacing",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "spacing",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Shorthand to set both row and column spacing",
-              "fieldName": "spacing"
-            },
-            {
-              "name": "col-spacing",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Sets the column spacing between each grid item",
-              "fieldName": "colSpacing"
-            },
-            {
-              "name": "row-spacing",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Sets the row spacing between each grid item",
-              "fieldName": "rowSpacing"
-            }
-          ],
-          "superclass": {
-            "name": "LitElementWithUtils",
-            "module": "/src/mixins/component-utils"
-          },
-          "tagName": "brz-grid",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GRID",
-          "declaration": {
-            "name": "GRID",
-            "module": "src/layout/grid/grid.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Grid",
-          "declaration": {
-            "name": "Grid",
-            "module": "src/layout/grid/grid.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "Grid",
-            "module": "src/layout/grid/grid.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/grid/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./grid"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./grid-item"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/surfaces/card/card-footer.ts",