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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@synergy-design-system/components",
-  "version": "1.0.0-main.9",
+  "version": "1.0.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -17,7 +17,7 @@
               "description": "The button's theme variant.",
               "value": {
                 "type": "'filled' | 'outline' | 'text'",
-                "default": "'filled'"
+                "default": "'outline'"
               }
             },
             {
@@ -255,6 +255,176 @@
             ]
           }
         },
+        {
+          "name": "syn-button-group",
+          "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<syn-button>` elements to display in the button group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "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.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "syn-checkbox",
+          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the checkbox loses focus.\n- **syn-change** - Emitted when the checked state changes.\n- **syn-focus** - Emitted when the checkbox gains focus.\n- **syn-input** - Emitted when the checkbox receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - 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.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<syn-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The checkbox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "indeterminate",
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The checkbox's label." }],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the checkbox loses focus."
+            },
+            {
+              "name": "syn-change",
+              "description": "Emitted when the checked state changes."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the checkbox gains focus."
+            },
+            {
+              "name": "syn-input",
+              "description": "Emitted when the checkbox receives input."
+            },
+            {
+              "name": "syn-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "title", "value": { "type": "string" } },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "indeterminate",
+                "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.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "form",
+                "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.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the checkbox loses focus."
+              },
+              {
+                "name": "syn-change",
+                "description": "Emitted when the checked state changes."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the checkbox gains focus."
+              },
+              {
+                "name": "syn-input",
+                "description": "Emitted when the checkbox receives input."
+              },
+              {
+                "name": "syn-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
         {
           "name": "syn-icon",
           "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **syn-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **syn-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",
@@ -722,14 +892,702 @@
           }
         },
         {
-          "name": "syn-spinner",
-          "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "syn-radio",
+          "description": "Radios allow the user to select a single option from a group.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **label** - The container that wraps the radio's label.",
           "doc-url": "",
-          "attributes": [],
-          "events": [],
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "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.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The radio's label." }],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the control gains focus."
+            }
+          ],
           "js": {
-            "properties": [{ "name": "localize", "value": {} }],
-            "events": []
+            "properties": [
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "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.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the control gains focus."
+              }
+            ]
+          }
+        },
+        {
+          "name": "syn-radio-button",
+          "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **prefix** - The container that wraps the prefix.\n- **label** - The container that wraps the radio button's label.\n- **suffix** - The container that wraps the suffix.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "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.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The radio button's label." },
+            {
+              "name": "prefix",
+              "description": "A presentational prefix icon or similar element."
+            },
+            {
+              "name": "suffix",
+              "description": "A presentational suffix icon or similar element."
+            }
+          ],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the button loses focus."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the button gains focus."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "size",
+                "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.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the button loses focus."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the button gains focus."
+              }
+            ]
+          }
+        },
+        {
+          "name": "syn-radio-group",
+          "description": "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---\n\n\n### **Events:**\n - **syn-change** - Emitted when the radio group's selected value changes.\n- **syn-input** - Emitted when the radio group receives user input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "'option'" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "form",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed."
+            },
+            {
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "syn-change",
+              "description": "Emitted when the radio group's selected value changes."
+            },
+            {
+              "name": "syn-input",
+              "description": "Emitted when the radio group receives user input."
+            },
+            {
+              "name": "syn-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "help-text",
+                "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "name",
+                "description": "The name of the radio group, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "value",
+                "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "form",
+                "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.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "required",
+                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-change",
+                "description": "Emitted when the radio group's selected value changes."
+              },
+              {
+                "name": "syn-input",
+                "description": "Emitted when the radio group receives user input."
+              },
+              {
+                "name": "syn-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
+        {
+          "name": "syn-spinner",
+          "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "localize", "value": {} }],
+            "events": []
+          }
+        },
+        {
+          "name": "syn-switch",
+          "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when the control's checked state changes.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the switch, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The switch's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the switch.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Draws the switch in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the switch a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The switch's label." }],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "syn-change",
+              "description": "Emitted when the control's checked state changes."
+            },
+            {
+              "name": "syn-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "syn-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "title", "value": { "type": "string" } },
+              {
+                "name": "name",
+                "description": "The name of the switch, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "value",
+                "description": "The current value of the switch, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "description": "The switch's size.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the switch.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "checked",
+                "description": "Draws the switch in a checked state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "form",
+                "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.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "required",
+                "description": "Makes the switch a required field.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "syn-change",
+                "description": "Emitted when the control's checked state changes."
+              },
+              {
+                "name": "syn-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "syn-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
+        {
+          "name": "syn-textarea",
+          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the textarea, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The textarea's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "rows",
+              "description": "The number of rows to display by default.",
+              "value": { "type": "number", "default": "4" }
+            },
+            {
+              "name": "resize",
+              "description": "Controls how the textarea can be resized.",
+              "value": {
+                "type": "'none' | 'vertical' | 'auto'",
+                "default": "'vertical'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the textarea.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the textarea readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the textarea a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "minlength",
+              "description": "The minimum length of input that will be considered valid.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "maxlength",
+              "description": "The maximum length of input that will be considered valid.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "autocapitalize",
+              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+              "value": {
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              }
+            },
+            {
+              "name": "autocorrect",
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "autocomplete",
+              "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.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "autofocus",
+              "description": "Indicates that the input should receive focus on page load.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "enterkeyhint",
+              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+              "value": {
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+              }
+            },
+            {
+              "name": "spellcheck",
+              "description": "Enables spell checking on the textarea.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "inputmode",
+              "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.",
+              "value": {
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "The textarea's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "syn-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "syn-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "syn-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "title", "value": { "type": "string" } },
+              {
+                "name": "name",
+                "description": "The name of the textarea, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "value",
+                "description": "The current value of the textarea, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "description": "The textarea's size.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "label",
+                "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "help-text",
+                "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the input is empty.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "rows",
+                "description": "The number of rows to display by default.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "resize",
+                "description": "Controls how the textarea can be resized.",
+                "value": { "type": "'none' | 'vertical' | 'auto'" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the textarea.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the textarea readonly.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "form",
+                "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.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "required",
+                "description": "Makes the textarea a required field.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "minlength",
+                "description": "The minimum length of input that will be considered valid.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "maxlength",
+                "description": "The maximum length of input that will be considered valid.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "autocapitalize",
+                "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+                "value": {
+                  "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+                }
+              },
+              {
+                "name": "autocorrect",
+                "description": "Indicates whether the browser's autocorrect feature is on or off.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "autocomplete",
+                "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.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "autofocus",
+                "description": "Indicates that the input should receive focus on page load.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "enterkeyhint",
+                "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+                "value": {
+                  "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+                }
+              },
+              {
+                "name": "spellcheck",
+                "description": "Enables spell checking on the textarea.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "inputmode",
+                "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.",
+                "value": {
+                  "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "syn-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "syn-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "syn-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
           }
         }
       ]