@synergy-design-system/components 1.0.0-main.8 → 1.0.0

package/dist/custom-elements.json

@@ -118,9 +118,9 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'default' | 'outline' | 'text'"
+                "text": "'filled' | 'outline' | 'text'"
               },
-              "default": "'default'",
+              "default": "'outline'",
               "description": "The button's theme variant.",
               "attribute": "variant",
               "reflects": true
@@ -435,9 +435,9 @@
             {
               "name": "variant",
               "type": {
-                "text": "'default' | 'outline' | 'text'"
+                "text": "'filled' | 'outline' | 'text'"
               },
-              "default": "'default'",
+              "default": "'outline'",
               "description": "The button's theme variant.",
               "fieldName": "variant"
             },
@@ -618,85 +618,39 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/icon/icon.js",
+      "path": "components/button-group/button-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynIcon",
+          "name": "SynButtonGroup",
           "cssParts": [
             {
-              "description": "The internal SVG element.",
-              "name": "svg"
-            },
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
             {
-              "description": "The <use> element generated when using `spriteSheet: true`",
-              "name": "use"
+              "description": "One or more `<syn-button>` elements to display in the button group.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "initialRender",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "resolveIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<SVGResult>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "library",
-                  "optional": true,
-                  "type": {
-                    "text": "IconLibrary"
-                  }
-                }
-              ],
-              "description": "Given a URL, this function returns the resulting SVG element or an appropriate error symbol."
-            },
-            {
-              "kind": "field",
-              "name": "svg",
-              "type": {
-                "text": "SVGElement | HTMLTemplateResult | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "name",
+              "name": "defaultSlot",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "attribute": "name",
-              "reflects": true
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "disableRole",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "attribute": "src"
+              "default": "false"
             },
             {
               "kind": "field",
@@ -705,99 +659,88 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
               "attribute": "label"
             },
             {
-              "kind": "field",
-              "name": "library",
-              "type": {
-                "text": "string"
-              },
-              "default": "'default'",
-              "description": "The name of a registered custom icon library.",
-              "attribute": "library",
-              "reflects": true
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "getIconSource",
+              "name": "handleBlur",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "IconSource"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
                 }
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleLabelChange"
+              "name": "handleMouseOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setIcon"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.",
-              "name": "syn-load",
-              "reactName": "onSynLoad",
-              "eventName": "SynLoadEvent"
+              "name": "handleMouseOut",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.",
-              "name": "syn-error",
-              "reactName": "onSynError",
-              "eventName": "SynErrorEvent"
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
             }
           ],
           "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "fieldName": "name"
-            },
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "fieldName": "src"
-            },
             {
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
               "fieldName": "label"
-            },
-            {
-              "name": "library",
-              "type": {
-                "text": "string"
-              },
-              "default": "'default'",
-              "description": "The name of a registered custom icon library.",
-              "fieldName": "library"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Icons are symbols that can be used to represent various options within an application.",
-          "tagNameWithoutPrefix": "icon",
-          "tagName": "syn-icon",
+          "summary": "Button groups can be used to group related buttons into sections.",
+          "tagNameWithoutPrefix": "button-group",
+          "tagName": "syn-button-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */",
-          "documentation": "https://synergy.style/components/icon",
+          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy.style/components/button-group",
           "status": "stable",
           "since": "2.0"
         }
@@ -807,90 +750,54 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynIcon",
-            "module": "components/icon/icon.js"
+            "name": "SynButtonGroup",
+            "module": "components/button-group/button-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/input/input.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynInput",
+          "name": "SynCheckbox",
           "cssParts": [
-            {
-              "description": "The form control that wraps the label, input, and help text.",
-              "name": "form-control"
-            },
-            {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
-            },
-            {
-              "description": "The input's wrapper.",
-              "name": "form-control-input"
-            },
-            {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            },
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The internal `<input>` control.",
-              "name": "input"
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
             },
             {
-              "description": "The clear button.",
-              "name": "clear-button"
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
             },
             {
-              "description": "The password toggle button.",
-              "name": "password-toggle-button"
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "description": "The indeterminate icon, an `<syn-icon>` element.",
+              "name": "indeterminate-icon"
+            },
+            {
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
             }
           ],
           "slots": [
             {
-              "description": "The input's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
-            {
-              "description": "Used to prepend a presentational icon or similar element to the input.",
-              "name": "prefix"
-            },
-            {
-              "description": "Used to append a presentational icon or similar element to the input.",
-              "name": "suffix"
-            },
-            {
-              "description": "An icon to use in lieu of the default clear icon.",
-              "name": "clear-icon"
-            },
-            {
-              "description": "An icon to use in lieu of the default show password icon.",
-              "name": "show-password-icon"
-            },
-            {
-              "description": "An icon to use in lieu of the default hide password icon.",
-              "name": "hide-password-icon"
-            },
-            {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "description": "The checkbox's label.",
+              "name": ""
             }
           ],
           "members": [
@@ -908,21 +815,7 @@
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  })"
             },
             {
               "kind": "field",
@@ -951,53 +844,2965 @@
             },
             {
               "kind": "field",
-              "name": "__numberInput",
-              "privacy": "private"
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "__dateInput",
-              "privacy": "private"
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The checkbox's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleStateChange"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the checkbox loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the checked state changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when the checkbox gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the checkbox receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The checkbox's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "fieldName": "required"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Checkboxes allow the user to toggle an option on or off.",
+          "tagNameWithoutPrefix": "checkbox",
+          "tagName": "syn-checkbox",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */",
+          "documentation": "https://synergy.style/components/checkbox",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynCheckbox",
+            "module": "components/checkbox/checkbox.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynIcon",
+          "cssParts": [
+            {
+              "description": "The internal SVG element.",
+              "name": "svg"
+            },
+            {
+              "description": "The <use> element generated when using `spriteSheet: true`",
+              "name": "use"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "initialRender",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "resolveIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<SVGResult>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "library",
+                  "optional": true,
+                  "type": {
+                    "text": "IconLibrary"
+                  }
+                }
+              ],
+              "description": "Given a URL, this function returns the resulting SVG element or an appropriate error symbol."
+            },
+            {
+              "kind": "field",
+              "name": "svg",
+              "type": {
+                "text": "SVGElement | HTMLTemplateResult | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "library",
+              "type": {
+                "text": "string"
+              },
+              "default": "'default'",
+              "description": "The name of a registered custom icon library.",
+              "attribute": "library",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "IconSource"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelChange"
+            },
+            {
+              "kind": "method",
+              "name": "setIcon"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.",
+              "name": "syn-load",
+              "reactName": "onSynLoad",
+              "eventName": "SynLoadEvent"
+            },
+            {
+              "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.",
+              "name": "syn-error",
+              "reactName": "onSynError",
+              "eventName": "SynErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "fieldName": "name"
+            },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "fieldName": "src"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "fieldName": "label"
+            },
+            {
+              "name": "library",
+              "type": {
+                "text": "string"
+              },
+              "default": "'default'",
+              "description": "The name of a registered custom icon library.",
+              "fieldName": "library"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Icons are symbols that can be used to represent various options within an application.",
+          "tagNameWithoutPrefix": "icon",
+          "tagName": "syn-icon",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */",
+          "documentation": "https://synergy.style/components/icon",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynIcon",
+            "module": "components/icon/icon.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/input/input.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynInput",
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The internal `<input>` control.",
+              "name": "input"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The password toggle button.",
+              "name": "password-toggle-button"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Used to prepend a presentational icon or similar element to the input.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append a presentational icon or similar element to the input.",
+              "name": "suffix"
+            },
+            {
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
+            {
+              "description": "An icon to use in lieu of the default show password icon.",
+              "name": "show-password-icon"
+            },
+            {
+              "description": "An icon to use in lieu of the default hide password icon.",
+              "name": "hide-password-icon"
+            },
+            {
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "__numberInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "__dateInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
+              },
+              "default": "'text'",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The input's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the input is not empty.",
+              "attribute": "clearable"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the input.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "passwordToggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
+              "attribute": "password-toggle"
+            },
+            {
+              "kind": "field",
+              "name": "passwordVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
+              "attribute": "password-visible"
+            },
+            {
+              "kind": "field",
+              "name": "noSpinButtons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the browser's built-in increment/decrement spin buttons for number inputs.",
+              "attribute": "no-spin-buttons"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string"
+              },
+              "description": "A regular expression pattern to validate input against.",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum length of input that will be considered valid.",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum length of input that will be considered valid.",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's minimum value. Only applies to date and number input types.",
+              "attribute": "min"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's maximum value. Only applies to date and number input types.",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number | 'any'"
+              },
+              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              },
+              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+              "attribute": "autocapitalize"
+            },
+            {
+              "kind": "field",
+              "name": "autocorrect",
+              "type": {
+                "text": "'off' | 'on'"
+              },
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "attribute": "autocorrect"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+              "attribute": "autocomplete"
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Indicates that the input should receive focus on page load.",
+              "attribute": "autofocus"
+            },
+            {
+              "kind": "field",
+              "name": "enterkeyhint",
+              "type": {
+                "text": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+              },
+              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+              "attribute": "enterkeyhint"
+            },
+            {
+              "kind": "field",
+              "name": "spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Enables spell checking on the input.",
+              "attribute": "spellcheck"
+            },
+            {
+              "kind": "field",
+              "name": "inputmode",
+              "type": {
+                "text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+              },
+              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
+              "attribute": "inputmode"
+            },
+            {
+              "kind": "field",
+              "name": "valueAsDate",
+              "description": "Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type=\"{{type}}\">` implementation and may result in an error."
+            },
+            {
+              "kind": "field",
+              "name": "valueAsNumber",
+              "description": "Gets or sets the current value as a number. Returns `NaN` if the value can't be converted."
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handlePasswordToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleStepChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the input."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the input."
+            },
+            {
+              "kind": "method",
+              "name": "select",
+              "description": "Selects all the text in the input."
+            },
+            {
+              "kind": "method",
+              "name": "setSelectionRange",
+              "parameters": [
+                {
+                  "name": "selectionStart",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "selectionEnd",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "selectionDirection",
+                  "default": "'none'",
+                  "type": {
+                    "text": "'forward' | 'backward' | 'none'"
+                  }
+                }
+              ],
+              "description": "Sets the start and end positions of the text selection (0-based)."
+            },
+            {
+              "kind": "method",
+              "name": "setRangeText",
+              "parameters": [
+                {
+                  "name": "replacement",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "start",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "end",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "selectMode",
+                  "optional": true,
+                  "type": {
+                    "text": "'select' | 'start' | 'end' | 'preserve'"
+                  }
+                }
+              ],
+              "description": "Replaces a range of text with a new string."
+            },
+            {
+              "kind": "method",
+              "name": "showPicker",
+              "description": "Displays the browser picker for an input element (only works if the browser supports it for the input type)."
+            },
+            {
+              "kind": "method",
+              "name": "stepUp",
+              "description": "Increments the value of a numeric input type by the value of the step attribute."
+            },
+            {
+              "kind": "method",
+              "name": "stepDown",
+              "description": "Decrements the value of a numeric input type by the value of the step attribute."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when the clear button is activated.",
+              "name": "syn-clear",
+              "reactName": "onSynClear",
+              "eventName": "SynClearEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
+              },
+              "default": "'text'",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+              "fieldName": "type"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The input's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the input is not empty.",
+              "fieldName": "clearable"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the input.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input readonly.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "password-toggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
+              "fieldName": "passwordToggle"
+            },
+            {
+              "name": "password-visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
+              "fieldName": "passwordVisible"
+            },
+            {
+              "name": "no-spin-buttons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the browser's built-in increment/decrement spin buttons for number inputs.",
+              "fieldName": "noSpinButtons"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string"
+              },
+              "description": "A regular expression pattern to validate input against.",
+              "fieldName": "pattern"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum length of input that will be considered valid.",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum length of input that will be considered valid.",
+              "fieldName": "maxlength"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's minimum value. Only applies to date and number input types.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's maximum value. Only applies to date and number input types.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number | 'any'"
+              },
+              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
+              "fieldName": "step"
+            },
+            {
+              "name": "autocapitalize",
+              "type": {
+                "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              },
+              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+              "fieldName": "autocapitalize"
+            },
+            {
+              "name": "autocorrect",
+              "type": {
+                "text": "'off' | 'on'"
+              },
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "fieldName": "autocorrect"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Indicates that the input should receive focus on page load.",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "enterkeyhint",
+              "type": {
+                "text": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+              },
+              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+              "fieldName": "enterkeyhint"
+            },
+            {
+              "name": "spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Enables spell checking on the input.",
+              "fieldName": "spellcheck"
+            },
+            {
+              "name": "inputmode",
+              "type": {
+                "text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+              },
+              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
+              "fieldName": "inputmode"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Inputs collect data from the user.",
+          "tagNameWithoutPrefix": "input",
+          "tagName": "syn-input",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy.style/components/input\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://synergy.style/components/input",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynInput",
+            "module": "components/input/input.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio/radio.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadio",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The circular container that wraps the radio's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "The radio control when the radio is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The container that wraps the radio's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The radio's label.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setInitialAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Radios allow the user to select a single option from a group.",
+          "tagNameWithoutPrefix": "radio",
+          "tagName": "syn-radio",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
+          "documentation": "https://synergy.style/components/radio",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRadio",
+            "module": "components/radio/radio.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio-button/radio-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadioButton",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The internal `<button>` element.",
+              "name": "button"
+            },
+            {
+              "description": "The internal button element when the radio button is checked.",
+              "name": "button--checked"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the radio button's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The radio button's label.",
+              "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hiddenInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio button.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the radio button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the radio button."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the button loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the button gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio button.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Radios buttons allow the user to select a single option from a group using a button-like control.",
+          "tagNameWithoutPrefix": "radio-button",
+          "tagName": "syn-radio-button",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://synergy.style/components/radio-button",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRadioButton",
+            "module": "components/radio-button/radio-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio-group/radio-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadioGroup",
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The button group that wraps radio buttons.",
+              "name": "button-group"
+            },
+            {
+              "description": "The button group's `base` part.",
+              "name": "button-group__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.",
+              "name": ""
+            },
+            {
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-button-group': SynButtonGroup }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FormControlController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "customValidityMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "validationTimeout",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasButtonGroup",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "errorMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getAllRadios",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleRadioClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncRadioElements",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncRadios",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateCheckedRadio",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "default": "''"
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the radio group's selected value changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when the radio group receives user input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+              "fieldName": "size"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "fieldName": "required"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.",
+          "tagNameWithoutPrefix": "radio-group",
+          "tagName": "syn-radio-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */",
+          "documentation": "https://synergy.style/components/radio-group",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-button-group"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRadioGroup",
+            "module": "components/radio-group/radio-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/spinner/spinner.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynSpinner",
+          "cssProperties": [
+            {
+              "description": "The width of the track.",
+              "name": "--track-width"
+            },
+            {
+              "description": "The color of the track.",
+              "name": "--track-color"
+            },
+            {
+              "description": "The color of the spinner's indicator.",
+              "name": "--indicator-color"
+            },
+            {
+              "description": "The time it takes for the spinner to complete one animation cycle.",
+              "name": "--speed"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Spinners are used to show the progress of an indeterminate operation.",
+          "tagNameWithoutPrefix": "spinner",
+          "tagName": "syn-spinner",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
+          "documentation": "https://synergy.style/components/spinner",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynSpinner",
+            "module": "components/spinner/spinner.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/switch/switch.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynSwitch",
+          "cssProperties": [
+            {
+              "description": "The width of the switch.",
+              "name": "--width"
+            },
+            {
+              "description": "The height of the switch.",
+              "name": "--height"
+            },
+            {
+              "description": "The size of the thumb.",
+              "name": "--thumb-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The control that houses the switch's thumb.",
+              "name": "control"
+            },
+            {
+              "description": "The switch's thumb.",
+              "name": "thumb"
+            },
+            {
+              "description": "The switch's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The switch's label.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynSwitch) => control.defaultChecked,\n    setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked)\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the switch, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The switch's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the switch.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the switch in a checked state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the switch a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the switch."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the switch."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the switch."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the control's checked state changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the switch, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The switch's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the switch.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the switch in a checked state.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the switch a required field.",
+              "fieldName": "required"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Switches allow the user to toggle an option on or off.",
+          "tagNameWithoutPrefix": "switch",
+          "tagName": "syn-switch",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */",
+          "documentation": "https://synergy.style/components/switch",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynSwitch",
+            "module": "components/switch/switch.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/textarea/textarea.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTextarea",
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The internal `<textarea>` control.",
+              "name": "textarea"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The textarea's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
               "type": {
-                "text": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
+                "text": "ResizeObserver"
               },
-              "default": "'text'",
-              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-              "attribute": "type",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "input",
+              "type": {
+                "text": "HTMLTextAreaElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the input, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the input, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "description": "The name of the textarea, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "defaultValue",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -1006,7 +3811,7 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The input's size.",
+              "description": "The textarea's size.",
               "attribute": "size",
               "reflects": true
             },
@@ -1017,7 +3822,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
               "attribute": "label"
             },
             {
@@ -1027,30 +3832,9 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
               "attribute": "help-text"
             },
-            {
-              "kind": "field",
-              "name": "clearable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds a clear button when the input is not empty.",
-              "attribute": "clearable"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the input.",
-              "attribute": "disabled",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -1063,44 +3847,45 @@
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "rows",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the input readonly.",
-              "attribute": "readonly",
-              "reflects": true
+              "default": "4",
+              "description": "The number of rows to display by default.",
+              "attribute": "rows"
             },
             {
               "kind": "field",
-              "name": "passwordToggle",
+              "name": "resize",
               "type": {
-                "text": "boolean"
+                "text": "'none' | 'vertical' | 'auto'"
               },
-              "default": "false",
-              "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
-              "attribute": "password-toggle"
+              "default": "'vertical'",
+              "description": "Controls how the textarea can be resized.",
+              "attribute": "resize"
             },
             {
               "kind": "field",
-              "name": "passwordVisible",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
-              "attribute": "password-visible"
+              "description": "Disables the textarea.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "noSpinButtons",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hides the browser's built-in increment/decrement spin buttons for number inputs.",
-              "attribute": "no-spin-buttons"
+              "description": "Makes the textarea readonly.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1120,19 +3905,10 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the input a required field.",
+              "description": "Makes the textarea a required field.",
               "attribute": "required",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "pattern",
-              "type": {
-                "text": "string"
-              },
-              "description": "A regular expression pattern to validate input against.",
-              "attribute": "pattern"
-            },
             {
               "kind": "field",
               "name": "minlength",
@@ -1140,43 +3916,16 @@
                 "text": "number"
               },
               "description": "The minimum length of input that will be considered valid.",
-              "attribute": "minlength"
-            },
-            {
-              "kind": "field",
-              "name": "maxlength",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum length of input that will be considered valid.",
-              "attribute": "maxlength"
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number | string"
-              },
-              "description": "The input's minimum value. Only applies to date and number input types.",
-              "attribute": "min"
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number | string"
-              },
-              "description": "The input's maximum value. Only applies to date and number input types.",
-              "attribute": "max"
+              "attribute": "minlength"
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "maxlength",
               "type": {
-                "text": "number | 'any'"
+                "text": "number"
               },
-              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
-              "attribute": "step"
+              "description": "The maximum length of input that will be considered valid.",
+              "attribute": "maxlength"
             },
             {
               "kind": "field",
@@ -1191,7 +3940,7 @@
               "kind": "field",
               "name": "autocorrect",
               "type": {
-                "text": "'off' | 'on'"
+                "text": "string"
               },
               "description": "Indicates whether the browser's autocorrect feature is on or off.",
               "attribute": "autocorrect"
@@ -1230,7 +3979,7 @@
                 "text": "boolean"
               },
               "default": "true",
-              "description": "Enables spell checking on the input.",
+              "description": "Enables spell checking on the textarea.",
               "attribute": "spellcheck"
             },
             {
@@ -1244,13 +3993,12 @@
             },
             {
               "kind": "field",
-              "name": "valueAsDate",
-              "description": "Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type=\"{{type}}\">` implementation and may result in an error."
-            },
-            {
-              "kind": "field",
-              "name": "valueAsNumber",
-              "description": "Gets or sets the current value as a number. Returns `NaN` if the value can't be converted."
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
@@ -1274,19 +4022,6 @@
               "name": "handleChange",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "handleClearClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "handleFocus",
@@ -1312,20 +4047,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handlePasswordToggle",
+              "name": "setTextareaHeight",
               "privacy": "private"
             },
             {
@@ -1334,7 +4056,7 @@
             },
             {
               "kind": "method",
-              "name": "handleStepChange"
+              "name": "handleRowsChange"
             },
             {
               "kind": "method",
@@ -1352,17 +4074,36 @@
                   }
                 }
               ],
-              "description": "Sets focus on the input."
+              "description": "Sets focus on the textarea."
             },
             {
               "kind": "method",
               "name": "blur",
-              "description": "Removes focus from the input."
+              "description": "Removes focus from the textarea."
             },
             {
               "kind": "method",
               "name": "select",
-              "description": "Selects all the text in the input."
+              "description": "Selects all the text in the textarea."
+            },
+            {
+              "kind": "method",
+              "name": "scrollPosition",
+              "return": {
+                "type": {
+                  "text": "{ top: number; left: number } | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "position",
+                  "optional": true,
+                  "type": {
+                    "text": "{ top?: number; left?: number }"
+                  }
+                }
+              ],
+              "description": "Gets or sets the textarea's scroll position."
             },
             {
               "kind": "method",
@@ -1424,21 +4165,6 @@
               ],
               "description": "Replaces a range of text with a new string."
             },
-            {
-              "kind": "method",
-              "name": "showPicker",
-              "description": "Displays the browser picker for an input element (only works if the browser supports it for the input type)."
-            },
-            {
-              "kind": "method",
-              "name": "stepUp",
-              "description": "Increments the value of a numeric input type by the value of the step attribute."
-            },
-            {
-              "kind": "method",
-              "name": "stepDown",
-              "description": "Decrements the value of a numeric input type by the value of the step attribute."
-            },
             {
               "kind": "method",
               "name": "checkValidity",
@@ -1486,12 +4212,6 @@
               "reactName": "onSynChange",
               "eventName": "SynChangeEvent"
             },
-            {
-              "description": "Emitted when the clear button is activated.",
-              "name": "syn-clear",
-              "reactName": "onSynClear",
-              "eventName": "SynClearEvent"
-            },
             {
               "description": "Emitted when the control gains focus.",
               "name": "syn-focus",
@@ -1520,22 +4240,13 @@
               "default": "''",
               "fieldName": "title"
             },
-            {
-              "name": "type",
-              "type": {
-                "text": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
-              },
-              "default": "'text'",
-              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-              "fieldName": "type"
-            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "description": "The name of the textarea, submitted as a name/value pair with form data.",
               "fieldName": "name"
             },
             {
@@ -1544,7 +4255,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
               "fieldName": "value"
             },
             {
@@ -1553,7 +4264,7 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The input's size.",
+              "description": "The textarea's size.",
               "fieldName": "size"
             },
             {
@@ -1562,7 +4273,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
               "fieldName": "label"
             },
             {
@@ -1571,27 +4282,9 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
               "fieldName": "helpText"
             },
-            {
-              "name": "clearable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds a clear button when the input is not empty.",
-              "fieldName": "clearable"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the input.",
-              "fieldName": "disabled"
-            },
             {
               "name": "placeholder",
               "type": {
@@ -1602,40 +4295,40 @@
               "fieldName": "placeholder"
             },
             {
-              "name": "readonly",
+              "name": "rows",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the input readonly.",
-              "fieldName": "readonly"
+              "default": "4",
+              "description": "The number of rows to display by default.",
+              "fieldName": "rows"
             },
             {
-              "name": "password-toggle",
+              "name": "resize",
               "type": {
-                "text": "boolean"
+                "text": "'none' | 'vertical' | 'auto'"
               },
-              "default": "false",
-              "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
-              "fieldName": "passwordToggle"
+              "default": "'vertical'",
+              "description": "Controls how the textarea can be resized.",
+              "fieldName": "resize"
             },
             {
-              "name": "password-visible",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
-              "fieldName": "passwordVisible"
+              "description": "Disables the textarea.",
+              "fieldName": "disabled"
             },
             {
-              "name": "no-spin-buttons",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hides the browser's built-in increment/decrement spin buttons for number inputs.",
-              "fieldName": "noSpinButtons"
+              "description": "Makes the textarea readonly.",
+              "fieldName": "readonly"
             },
             {
               "name": "form",
@@ -1652,17 +4345,9 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the input a required field.",
+              "description": "Makes the textarea a required field.",
               "fieldName": "required"
             },
-            {
-              "name": "pattern",
-              "type": {
-                "text": "string"
-              },
-              "description": "A regular expression pattern to validate input against.",
-              "fieldName": "pattern"
-            },
             {
               "name": "minlength",
               "type": {
@@ -1679,30 +4364,6 @@
               "description": "The maximum length of input that will be considered valid.",
               "fieldName": "maxlength"
             },
-            {
-              "name": "min",
-              "type": {
-                "text": "number | string"
-              },
-              "description": "The input's minimum value. Only applies to date and number input types.",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number | string"
-              },
-              "description": "The input's maximum value. Only applies to date and number input types.",
-              "fieldName": "max"
-            },
-            {
-              "name": "step",
-              "type": {
-                "text": "number | 'any'"
-              },
-              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
-              "fieldName": "step"
-            },
             {
               "name": "autocapitalize",
               "type": {
@@ -1714,7 +4375,7 @@
             {
               "name": "autocorrect",
               "type": {
-                "text": "'off' | 'on'"
+                "text": "string"
               },
               "description": "Indicates whether the browser's autocorrect feature is on or off.",
               "fieldName": "autocorrect"
@@ -1749,7 +4410,7 @@
                 "text": "boolean"
               },
               "default": "true",
-              "description": "Enables spell checking on the input.",
+              "description": "Enables spell checking on the textarea.",
               "fieldName": "spellcheck"
             },
             {
@@ -1765,81 +4426,12 @@
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Inputs collect data from the user.",
-          "tagNameWithoutPrefix": "input",
-          "tagName": "syn-input",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy.style/components/input\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n */",
-          "documentation": "https://synergy.style/components/input",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "syn-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynInput",
-            "module": "components/input/input.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/spinner/spinner.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynSpinner",
-          "cssProperties": [
-            {
-              "description": "The width of the track.",
-              "name": "--track-width"
-            },
-            {
-              "description": "The color of the track.",
-              "name": "--track-color"
-            },
-            {
-              "description": "The color of the spinner's indicator.",
-              "name": "--indicator-color"
-            },
-            {
-              "description": "The time it takes for the spinner to complete one animation cycle.",
-              "name": "--speed"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Spinners are used to show the progress of an indeterminate operation.",
-          "tagNameWithoutPrefix": "spinner",
-          "tagName": "syn-spinner",
+          "summary": "Textareas collect data from the user and allow multiple lines of text.",
+          "tagNameWithoutPrefix": "textarea",
+          "tagName": "syn-textarea",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
-          "documentation": "https://synergy.style/components/spinner",
+          "jsDoc": "/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */",
+          "documentation": "https://synergy.style/components/textarea",
           "status": "stable",
           "since": "2.0"
         }
@@ -1849,8 +4441,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynSpinner",
-            "module": "components/spinner/spinner.js"
+            "name": "SynTextarea",
+            "module": "components/textarea/textarea.js"
           }
         }
       ]
@@ -1859,12 +4451,12 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.0.0-main.8",
+    "version": "1.0.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"
     },
-    "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/components",
-    "license": "ISC"
+    "homepage": "https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/components",
+    "license": "MIT"
   }
 }