@skedulo/breeze-ui 0.9.4 → 0.9.6

package/dist/custom-elements.json

@@ -72,109 +72,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/animation/fade-in-out.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "FADE_IN_OUT"
-        },
-        {
-          "kind": "class",
-          "description": "Fade in out animation.",
-          "name": "FadeInOut",
-          "members": [
-            {
-              "kind": "field",
-              "name": "shown",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "shown"
-            },
-            {
-              "kind": "field",
-              "name": "removed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "!this.shown"
-            },
-            {
-              "kind": "method",
-              "name": "_handleTransitionEnd",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "shown",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "shown"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-fade-in-out",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FADE_IN_OUT",
-          "declaration": {
-            "name": "FADE_IN_OUT",
-            "module": "src/animation/fade-in-out.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FadeInOut",
-          "declaration": {
-            "name": "FadeInOut",
-            "module": "src/animation/fade-in-out.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "declaration": {
-            "name": "FadeInOut",
-            "module": "src/animation/fade-in-out.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/animation/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./fade-in-out"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/layout/flex.ts",
@@ -890,97 +787,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/helpers/css-helpers.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getFocusStyles",
-          "parameters": [
-            {
-              "name": "selector",
-              "type": {
-                "text": "string"
-              },
-              "description": "A CSS selector targeting an interactive element."
-            },
-            {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
-            }
-          ],
-          "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": "selector",
-              "type": {
-                "text": "string"
-              },
-              "description": "A CSS selector targeting a button"
-            },
-            {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
-            }
-          ],
-          "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": "getFocusStyles",
-          "declaration": {
-            "name": "getFocusStyles",
-            "module": "src/helpers/css-helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "invisibleButtonRules",
-          "declaration": {
-            "name": "invisibleButtonRules",
-            "module": "src/helpers/css-helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getInvisibleButtonStyles",
-          "declaration": {
-            "name": "getInvisibleButtonStyles",
-            "module": "src/helpers/css-helpers.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/helpers/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./css-helpers"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/alert.ts",
@@ -7463,6 +7269,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows and hides slotted content",
               "fieldName": "shown",
               "inheritedFrom": {
                 "name": "FadeInOut",
@@ -7478,24 +7285,13 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows and hides slotted content",
               "attribute": "shown",
               "inheritedFrom": {
                 "name": "FadeInOut",
                 "module": "src/animation/fade-in-out.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "removed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "!this.shown",
-              "inheritedFrom": {
-                "name": "FadeInOut",
-                "module": "src/animation/fade-in-out.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "_handleTransitionEnd",
@@ -8914,6 +8710,19 @@
                 "module": "src/components/form-elements/input-checkbox.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -9070,12 +8879,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "required",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -9270,26 +9081,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -9308,6 +9119,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -9515,28 +9339,28 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
+              "reflects": true,
+              "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -9566,12 +9390,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -9579,13 +9405,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -9881,26 +9707,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -9919,6 +9745,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -10516,13 +10355,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -10531,13 +10370,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -10567,12 +10406,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -10580,13 +10421,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -10815,19 +10656,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -10854,6 +10682,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -10867,6 +10708,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -11126,21 +10980,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "labelPosition",
@@ -11171,6 +11010,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -11194,12 +11048,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -11207,13 +11063,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -11372,26 +11228,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -11410,6 +11266,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -11542,13 +11411,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -11557,13 +11426,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -11602,12 +11471,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -11615,13 +11486,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -12564,19 +12435,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -12603,6 +12461,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -12616,6 +12487,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -12805,8 +12689,8 @@
               "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
               }
             },
             {
@@ -13193,8 +13077,15 @@
               }
             },
             {
-              "kind": "method",
-              "name": "handleErrorChange",
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -13202,28 +13093,23 @@
             },
             {
               "kind": "method",
-              "name": "renderGuide",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | null"
-                }
-              },
+              "name": "handleErrorChange",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
+              "kind": "method",
+              "name": "renderGuide",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | null"
+                }
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
               "inheritedFrom": {
-                "name": "InputBase",
-                "module": "src/components/form-elements/input-base.ts"
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
@@ -13460,26 +13346,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -13498,6 +13384,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -13662,13 +13561,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -13677,13 +13576,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -13713,12 +13612,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -13726,13 +13627,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -13938,26 +13839,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -13976,6 +13877,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -14153,13 +14067,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -14168,13 +14082,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -14191,12 +14105,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -14204,13 +14120,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -14483,19 +14399,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -14522,6 +14425,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -14535,6 +14451,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -14874,8 +14803,8 @@
               "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
               }
             },
             {
@@ -15190,6 +15119,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -15211,19 +15155,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
-              "inheritedFrom": {
-                "name": "InputBase",
-                "module": "src/components/form-elements/input-base.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -15393,19 +15324,6 @@
           "tagName": "sp-labeled-input",
           "customElement": true,
           "attributes": [
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -15432,6 +15350,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -15445,6 +15376,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -15498,21 +15442,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "labelPosition",
@@ -15543,6 +15472,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -15588,26 +15532,28 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
-              "inheritedFrom": {
-                "name": "InputBase",
-                "module": "src/components/form-elements/input-base.ts"
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -19304,181 +19250,194 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/storybook/colors.stories.ts",
+      "path": "src/animation/fade-in-out.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "FADE_IN_OUT"
+        },
         {
           "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"
-            },
+          "description": "Fade in out animation.",
+          "name": "FadeInOut",
+          "slots": [
             {
-              "name": "light-text",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "lightText"
+              "description": "The content to be animated",
+              "name": "children"
             }
           ],
-          "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",
+              "name": "shown",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "stacked"
+              "description": "Shows and hides slotted content",
+              "attribute": "shown"
+            },
+            {
+              "kind": "method",
+              "name": "_handleTransitionEnd",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [
             {
-              "name": "stacked",
+              "name": "shown",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "stacked"
+              "description": "Shows and hides slotted content",
+              "fieldName": "shown"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "brz-sb-color-swatch-group",
+          "tagName": "brz-fade-in-out",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorSwatch",
+          "name": "FADE_IN_OUT",
           "declaration": {
-            "name": "ColorSwatch",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "FADE_IN_OUT",
+            "module": "src/animation/fade-in-out.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-color-swatch",
+          "kind": "js",
+          "name": "FadeInOut",
           "declaration": {
-            "name": "ColorSwatch",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "FadeInOut",
+            "module": "src/animation/fade-in-out.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "ColorSwatchGroup",
+          "kind": "custom-element-definition",
           "declaration": {
-            "name": "ColorSwatchGroup",
-            "module": "src/storybook/colors.stories.ts"
+            "name": "FadeInOut",
+            "module": "src/animation/fade-in-out.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/animation/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": "./fade-in-out"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/storybook/fade-in-out.stories.ts",
+      "path": "src/helpers/css-helpers.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "FadeInOutStory",
-          "members": [
+          "kind": "function",
+          "name": "getFocusStyles",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "shown",
+              "name": "selector",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "shown"
+              "description": "A CSS selector targeting an interactive element."
             },
             {
-              "kind": "method",
-              "name": "handleToggle"
+              "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": "shown",
+              "name": "selector",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "shown"
+              "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-fade-in-out",
-          "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": "FadeInOutStory",
+          "name": "getFocusStyles",
           "declaration": {
-            "name": "FadeInOutStory",
-            "module": "src/storybook/fade-in-out.stories.ts"
+            "name": "getFocusStyles",
+            "module": "src/helpers/css-helpers.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-fade-in-out",
+          "kind": "js",
+          "name": "invisibleButtonRules",
           "declaration": {
-            "name": "FadeInOutStory",
-            "module": "src/storybook/fade-in-out.stories.ts"
+            "name": "invisibleButtonRules",
+            "module": "src/helpers/css-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getInvisibleButtonStyles",
+          "declaration": {
+            "name": "getInvisibleButtonStyles",
+            "module": "src/helpers/css-helpers.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/helpers/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./css-helpers"
           }
         }
       ]
@@ -19573,49 +19532,170 @@
         },
         {
           "kind": "js",
-          "name": "targetAxes",
+          "name": "targetAxes",
+          "declaration": {
+            "name": "targetAxes",
+            "module": "src/mixins/component-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "targetSides",
+          "declaration": {
+            "name": "targetSides",
+            "module": "src/mixins/component-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithUtils",
+          "declaration": {
+            "name": "WithUtils",
+            "module": "src/mixins/component-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitElementWithUtils",
+          "declaration": {
+            "name": "LitElementWithUtils",
+            "module": "src/mixins/component-utils.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/mixins/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./component-utils"
+          }
+        }
+      ]
+    },
+    {
+      "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": "targetAxes",
-            "module": "src/mixins/component-utils.ts"
+            "name": "ColorSwatch",
+            "module": "src/storybook/colors.stories.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "targetSides",
+          "kind": "custom-element-definition",
+          "name": "brz-sb-color-swatch",
           "declaration": {
-            "name": "targetSides",
-            "module": "src/mixins/component-utils.ts"
+            "name": "ColorSwatch",
+            "module": "src/storybook/colors.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithUtils",
+          "name": "ColorSwatchGroup",
           "declaration": {
-            "name": "WithUtils",
-            "module": "src/mixins/component-utils.ts"
+            "name": "ColorSwatchGroup",
+            "module": "src/storybook/colors.stories.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "LitElementWithUtils",
-          "declaration": {
-            "name": "LitElementWithUtils",
-            "module": "src/mixins/component-utils.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/mixins/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
+          "kind": "custom-element-definition",
+          "name": "brz-sb-color-swatch-group",
           "declaration": {
-            "name": "*",
-            "package": "./component-utils"
+            "name": "ColorSwatchGroup",
+            "module": "src/storybook/colors.stories.ts"
           }
         }
       ]
@@ -20641,22 +20721,24 @@
           "members": [
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }"
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true
             },
             {
@@ -20746,6 +20828,15 @@
               "description": "Disables the input field",
               "fieldName": "disabled"
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required"
+            },
             {
               "name": "invalid",
               "type": {
@@ -20912,12 +21003,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "required",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -21043,6 +21136,19 @@
               "description": "Puts the checkbox into indeterminate state",
               "fieldName": "indeterminate"
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -21286,13 +21392,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -21301,13 +21407,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -21337,12 +21443,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -21350,13 +21458,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -21554,26 +21662,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -21592,6 +21700,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -22336,13 +22457,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -22351,13 +22472,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -22387,12 +22508,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -22400,13 +22523,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -22663,26 +22786,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -22701,6 +22824,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -22968,21 +23104,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "labelPosition",
@@ -23013,6 +23134,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -23036,12 +23172,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -23049,13 +23187,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -23246,19 +23384,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -23285,6 +23410,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -23298,6 +23436,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -23495,13 +23646,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -23510,13 +23661,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -23555,12 +23706,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -23568,13 +23721,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -23705,26 +23858,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -23743,6 +23896,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -24260,21 +24426,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "labelPosition",
@@ -24305,6 +24456,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -24328,12 +24494,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -24341,13 +24509,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -24566,19 +24734,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -24605,6 +24760,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -24618,6 +24786,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -24863,8 +25044,8 @@
               "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
               }
             },
             {
@@ -25250,6 +25431,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -25271,19 +25467,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
-              "inheritedFrom": {
-                "name": "InputBase",
-                "module": "src/components/form-elements/input-base.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -25502,19 +25685,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -25541,6 +25711,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -25554,6 +25737,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -25720,21 +25916,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "labelPosition",
@@ -25765,6 +25946,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -25801,12 +25997,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -25814,13 +26012,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -25954,25 +26152,12 @@
               "fieldName": "leadingIcon"
             },
             {
-              "name": "trailing-icon",
-              "type": {
-                "text": "IconKey | undefined"
-              },
-              "description": "Puts the supplied icon inside of the input at the trailing edge",
-              "fieldName": "trailingIcon"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
+              "name": "trailing-icon",
+              "type": {
+                "text": "IconKey | undefined"
+              },
+              "description": "Puts the supplied icon inside of the input at the trailing edge",
+              "fieldName": "trailingIcon"
             },
             {
               "name": "label-position",
@@ -26000,6 +26185,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -26013,6 +26211,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -26237,13 +26448,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -26252,13 +26463,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -26288,12 +26499,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -26301,13 +26514,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -26485,26 +26698,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -26523,6 +26736,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -26765,13 +26991,13 @@
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "labelPosition",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "attribute": "label-position",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -26780,13 +27006,13 @@
             },
             {
               "kind": "field",
-              "name": "labelPosition",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "attribute": "label-position",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
               "reflects": true,
               "inheritedFrom": {
                 "name": "LabeledInput",
@@ -26803,12 +27029,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -26816,13 +27044,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -27000,26 +27228,26 @@
               }
             },
             {
-              "name": "required",
+              "name": "label-position",
               "type": {
-                "text": "boolean"
+                "text": "LabelPosition"
               },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
+              "default": "'top'",
+              "description": "The position of the supplied label",
+              "fieldName": "labelPosition",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
             {
-              "name": "label-position",
+              "name": "optional",
               "type": {
-                "text": "LabelPosition"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The position of the supplied label",
-              "fieldName": "labelPosition",
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
               "inheritedFrom": {
                 "name": "LabeledInput",
                 "module": "src/components/form-elements/labeled-input.ts"
@@ -27038,6 +27266,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -27453,8 +27694,8 @@
               "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
               }
             },
             {
@@ -27769,6 +28010,21 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "handleErrorChange",
@@ -27790,19 +28046,6 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
-              "inheritedFrom": {
-                "name": "InputBase",
-                "module": "src/components/form-elements/input-base.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -28048,19 +28291,6 @@
                 "module": "src/components/form-elements/input-text-base.ts"
               }
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "LabeledInput",
-                "module": "src/components/form-elements/labeled-input.ts"
-              }
-            },
             {
               "name": "label-position",
               "type": {
@@ -28087,6 +28317,19 @@
                 "module": "src/components/form-elements/labeled-input.ts"
               }
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional",
+              "inheritedFrom": {
+                "name": "LabeledInput",
+                "module": "src/components/form-elements/labeled-input.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -28100,6 +28343,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {
@@ -28278,17 +28534,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "attribute": "required",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "labelPosition",
@@ -28311,6 +28556,17 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "attribute": "optional",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "handleErrorChange"
@@ -28340,12 +28596,14 @@
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "disabled",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{\n    mode: 'open',\n    delegatesFocus: true,\n  }",
+              "default": "false",
+              "description": "Disables the input field",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
                 "module": "src/components/form-elements/input-base.ts"
@@ -28353,13 +28611,13 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input field",
-              "attribute": "disabled",
+              "description": "Indicates that the input requires a value",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "InputBase",
@@ -28467,15 +28725,6 @@
             }
           ],
           "attributes": [
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the field go into a required state",
-              "fieldName": "required"
-            },
             {
               "name": "label-position",
               "type": {
@@ -28494,6 +28743,15 @@
               "description": "The size of the input",
               "fieldName": "size"
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input value is optional. Appends \"(optional)\" text to\nthe label.\n\nIf the input is already `required`, this does nothing.",
+              "fieldName": "optional"
+            },
             {
               "name": "disabled",
               "type": {
@@ -28507,6 +28765,19 @@
                 "module": "src/components/form-elements/input-base.ts"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the input requires a value",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "InputBase",
+                "module": "src/components/form-elements/input-base.ts"
+              }
+            },
             {
               "name": "invalid",
               "type": {