@solid-design-system/components 1.31.0 → 1.33.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@solid-design-system/components",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -3179,6 +3179,135 @@
             }
           ]
         },
+        {
+          "name": "sd-option",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/option",
+          "js": {
+            "properties": [
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "cachedTextLabel",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "name": "current",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "selected",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "hasHover",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "size",
+                "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
+                "value": {
+                  "type": "'lg' | 'md' | 'sm'"
+                }
+              },
+              {
+                "name": "checkbox",
+                "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the option in a disabled state, preventing selection.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "value",
+                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "handleDefaultSlotChange",
+                "value": {}
+              },
+              {
+                "name": "handleMouseEnter",
+                "value": {}
+              },
+              {
+                "name": "handleMouseLeave",
+                "value": {}
+              },
+              {
+                "name": "handleDisabledChange",
+                "value": {}
+              },
+              {
+                "name": "handleSelectedChange",
+                "value": {}
+              },
+              {
+                "name": "handleValueChange",
+                "value": {}
+              },
+              {
+                "name": "getTextLabel",
+                "description": "Returns a plain text label based on the option's content.",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "size",
+              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
+              "value": {
+                "type": "'lg' | 'md' | 'sm'"
+              }
+            },
+            {
+              "name": "checkbox",
+              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "value": {
+                "type": "string"
+              }
+            }
+          ]
+        },
         {
           "name": "sd-popup",
           "description": "",
@@ -3191,6 +3320,12 @@
                   "type": "ReturnType<typeof autoUpdate> | undefined"
                 }
               },
+              {
+                "name": "mutationObserver",
+                "value": {
+                  "type": "MutationObserver | null"
+                }
+              },
               {
                 "name": "anchor",
                 "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.",
@@ -3338,6 +3473,14 @@
                   "type": "number"
                 }
               },
+              {
+                "name": "setupMutationObserver",
+                "value": {}
+              },
+              {
+                "name": "handleCurrentPlacementChange",
+                "value": {}
+              },
               {
                 "name": "handleAnchorChange",
                 "value": {}
@@ -3360,6 +3503,10 @@
               {
                 "name": "sd-reposition",
                 "description": "Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it."
+              },
+              {
+                "name": "sd-current-placement",
+                "description": "Emitted when the popup's placement changes automatically based on screen limitations."
               }
             ]
           },
@@ -3885,456 +4032,1461 @@
           ]
         },
         {
-          "name": "sd-spinner",
+          "name": "sd-select",
           "description": "",
-          "doc-url": "https://solid.union-investment.com/[storybook-link]/spinner",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/select",
           "js": {
             "properties": [
               {
-                "name": "color",
-                "description": "The color color of the spinner.",
+                "name": "dependencies",
                 "value": {
-                  "type": "'primary' | 'white' | 'currentColor'"
+                  "type": "object"
                 }
               },
               {
-                "name": "localize",
+                "name": "formControlController",
                 "value": {}
-              }
-            ],
-            "events": []
-          },
-          "attributes": [
-            {
-              "name": "color",
-              "description": "The color color of the spinner.",
-              "value": {
-                "type": "'primary' | 'white' | 'currentColor'"
-              }
-            }
-          ]
-        },
-        {
-          "name": "sd-switch",
-          "description": "",
-          "doc-url": "https://solid.union-investment.com/[storybook-link]/switch",
-          "js": {
-            "properties": [
+              },
               {
-                "name": "formControlController",
+                "name": "hasSlotController",
                 "value": {}
               },
               {
-                "name": "title",
-                "description": "The title of the switch adds a tooltip with title text.",
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "name": "typeToSelectString",
                 "value": {
                   "type": "string"
                 }
               },
               {
-                "name": "name",
-                "description": "The name of the switch, submitted as a name/value pair with form data.",
+                "name": "typeToSelectTimeout",
                 "value": {
-                  "type": "string"
+                  "type": "number"
                 }
               },
               {
-                "name": "value",
-                "description": "The current value of the switch, submitted as a name/value pair with form data.",
+                "name": "_optionsInDefaultSlot",
                 "value": {
-                  "type": "string"
+                  "type": "SdOption[]"
                 }
               },
               {
-                "name": "disabled",
-                "description": "Disables the switch.",
+                "name": "popup",
                 "value": {
-                  "type": "boolean"
+                  "type": "SdPopup"
                 }
               },
               {
-                "name": "checked",
-                "description": "Draws the switch in a checked state.",
+                "name": "hasFocus",
                 "value": {
                   "type": "boolean"
                 }
               },
               {
-                "name": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "name": "hasHover",
                 "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.",
+                "name": "displayLabel",
+                "description": "When `multiple` is `true` and `useTags` is `false`, the displayLabel sets the text shown in the display input. We use the localized string \"Options Selected (#)\" by default.",
                 "value": {
                   "type": "string"
                 }
               },
               {
-                "name": "required",
-                "description": "Makes the switch a required field.",
+                "name": "currentOption",
                 "value": {
-                  "type": "boolean"
+                  "type": "SdOption"
                 }
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object",
-                "value": {}
+                "name": "selectedOptions",
+                "value": {
+                  "type": "SdOption[]"
+                }
               },
               {
-                "name": "handleClick",
-                "value": {}
+                "name": "isValid",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller.",
+                "value": {
+                  "type": "boolean"
+                }
               },
               {
-                "name": "handleBlur",
-                "value": {}
+                "name": "isInvalid",
+                "value": {
+                  "type": "boolean"
+                }
               },
               {
-                "name": "handleInput",
-                "value": {}
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "value": {
+                  "type": "string | string[]"
+                }
               },
               {
-                "name": "handleInvalid",
-                "value": {}
+                "name": "open",
+                "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+                "value": {
+                  "type": "boolean"
+                }
               },
               {
-                "name": "handleFocus",
-                "value": {}
+                "name": "size",
+                "description": "The select's size.",
+                "value": {
+                  "type": "'lg' | 'md' | 'sm'"
+                }
               },
               {
-                "name": "handleDisabledChange",
-                "value": {}
+                "name": "label",
+                "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+                "value": {
+                  "type": "string"
+                }
               },
               {
-                "name": "handleStateChange",
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the select is empty.",
                 "value": {}
               },
               {
-                "name": "click",
-                "description": "Simulates a click on the switch.",
-                "value": {}
+                "name": "helpText",
+                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "value": {
+                  "type": "string"
+                }
               },
               {
-                "name": "focus",
-                "description": "Sets focus on the switch.",
-                "value": {}
+                "name": "placement",
+                "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+                "value": {
+                  "type": "'top' | 'bottom'"
+                }
               },
               {
-                "name": "blur",
-                "description": "Removes focus from the switch.",
+                "name": "currentPlacement",
+                "description": "The actual current placement of the select's menu sourced from `sd-popup`.",
                 "value": {}
               },
               {
-                "name": "checkValidity",
-                "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid.",
-                "value": {}
+                "name": "clearable",
+                "description": "Adds a clear button when the select is not empty.",
+                "value": {
+                  "type": "boolean"
+                }
               },
               {
-                "name": "getForm",
-                "description": "Gets the associated form, if one exists.",
-                "value": {}
+                "name": "disabled",
+                "description": "Disables the select control.",
+                "value": {
+                  "type": "boolean"
+                }
               },
               {
-                "name": "reportValidity",
-                "description": "Checks for validity and shows a validation message if the control is invalid.",
-                "value": {}
-              },
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "useTags",
+                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "maxOptionsVisible",
+                "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+                "value": {
+                  "type": "number"
+                }
+              },
+              {
+                "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": "name",
+                "description": "The name of the select, submitted as a name/value pair with form data.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "value",
+                "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+                "value": {
+                  "type": "string | string[]"
+                }
+              },
+              {
+                "name": "required",
+                "description": "The select's required attribute.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object",
+                "value": {}
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message",
+                "value": {}
+              },
+              {
+                "name": "addOpenListeners",
+                "value": {}
+              },
+              {
+                "name": "removeOpenListeners",
+                "value": {}
+              },
+              {
+                "name": "handleFocus",
+                "value": {}
+              },
+              {
+                "name": "handleBlur",
+                "value": {}
+              },
+              {
+                "name": "handleDocumentFocusIn",
+                "value": {}
+              },
+              {
+                "name": "handleDocumentKeyDown",
+                "value": {}
+              },
+              {
+                "name": "handleDocumentMouseDown",
+                "value": {}
+              },
+              {
+                "name": "handleLabelClick",
+                "value": {}
+              },
+              {
+                "name": "handleComboboxMouseDown",
+                "value": {}
+              },
+              {
+                "name": "handleComboboxKeyDown",
+                "value": {}
+              },
+              {
+                "name": "handleClearClick",
+                "value": {}
+              },
+              {
+                "name": "handleClearMouseDown",
+                "value": {}
+              },
+              {
+                "name": "handleOptionClick",
+                "value": {}
+              },
+              {
+                "name": "handleDefaultSlotChange",
+                "value": {}
+              },
+              {
+                "name": "handleTagRemove",
+                "value": {}
+              },
+              {
+                "name": "getAllOptions",
+                "value": {}
+              },
+              {
+                "name": "getFirstOption",
+                "value": {}
+              },
+              {
+                "name": "setCurrentOption",
+                "value": {}
+              },
+              {
+                "name": "setSelectedOptions",
+                "value": {}
+              },
+              {
+                "name": "toggleOptionSelection",
+                "value": {}
+              },
+              {
+                "name": "selectionChanged",
+                "value": {}
+              },
+              {
+                "name": "tags",
+                "value": {}
+              },
+              {
+                "name": "handleInvalid",
+                "value": {}
+              },
+              {
+                "name": "handleMouseEnter",
+                "value": {}
+              },
+              {
+                "name": "handleMouseLeave",
+                "value": {}
+              },
+              {
+                "name": "handleCurrentPlacement",
+                "description": "Receives incoming event detail from sd-popup and updates local state for conditional styling.",
+                "value": {}
+              },
+              {
+                "name": "handleUseTagsChange",
+                "value": {}
+              },
+              {
+                "name": "handleDisabledChange",
+                "value": {}
+              },
+              {
+                "name": "handleOpenChange",
+                "value": {}
+              },
+              {
+                "name": "applySizeToOptions",
+                "value": {}
+              },
+              {
+                "name": "handleValueChange",
+                "value": {}
+              },
+              {
+                "name": "show",
+                "description": "Shows the listbox.",
+                "value": {}
+              },
+              {
+                "name": "hide",
+                "description": "Hides the listbox.",
+                "value": {}
+              },
+              {
+                "name": "checkValidity",
+                "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.",
+                "value": {}
+              },
+              {
+                "name": "getForm",
+                "description": "Gets the associated form, if one exists.",
+                "value": {}
+              },
+              {
+                "name": "reportValidity",
+                "description": "Checks for validity and shows the browser's validation message if the control is invalid.",
+                "value": {}
+              },
+              {
+                "name": "setCustomValidity",
+                "description": "Sets a custom validation message. Pass an empty string to restore validity.",
+                "value": {}
+              },
+              {
+                "name": "focus",
+                "description": "Sets focus on the control.",
+                "value": {}
+              },
+              {
+                "name": "blur",
+                "description": "Removes focus from the control.",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-change",
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "sd-clear",
+                "description": "Emitted when the control's value is cleared."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sd-show",
+                "description": "Emitted when the select's menu opens."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the select's menu opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the select's menu closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the select's menu closes and all animations are complete."
+              },
+              {
+                "name": "sd-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          },
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The select's size.",
+              "value": {
+                "type": "'lg' | 'md' | 'sm'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "value": {}
+            },
+            {
+              "name": "help-text",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "placement",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "value": {
+                "type": "'top' | 'bottom'"
+              }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the select is not empty.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the select control.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "multiple",
+              "description": "Allows more than one option to be selected.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "useTags",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max-options-visible",
+              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "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": "name",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+              "value": {
+                "type": "string | string[]"
+              }
+            },
+            {
+              "name": "required",
+              "description": "The select's required attribute.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "getTag",
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "value": {
+                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-spinner",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/spinner",
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "The color color of the spinner.",
+                "value": {
+                  "type": "'primary' | 'white' | 'currentColor'"
+                }
+              },
+              {
+                "name": "localize",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The color color of the spinner.",
+              "value": {
+                "type": "'primary' | 'white' | 'currentColor'"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-switch",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/switch",
+          "js": {
+            "properties": [
+              {
+                "name": "formControlController",
+                "value": {}
+              },
+              {
+                "name": "title",
+                "description": "The title of the switch adds a tooltip with title text.",
+                "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": "disabled",
+                "description": "Disables the switch.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "checked",
+                "description": "Draws the switch in a checked state.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "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"
+                }
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object",
+                "value": {}
+              },
+              {
+                "name": "handleClick",
+                "value": {}
+              },
+              {
+                "name": "handleBlur",
+                "value": {}
+              },
+              {
+                "name": "handleInput",
+                "value": {}
+              },
+              {
+                "name": "handleInvalid",
+                "value": {}
+              },
+              {
+                "name": "handleFocus",
+                "value": {}
+              },
+              {
+                "name": "handleDisabledChange",
+                "value": {}
+              },
+              {
+                "name": "handleStateChange",
+                "value": {}
+              },
+              {
+                "name": "click",
+                "description": "Simulates a click on the switch.",
+                "value": {}
+              },
+              {
+                "name": "focus",
+                "description": "Sets focus on the switch.",
+                "value": {}
+              },
+              {
+                "name": "blur",
+                "description": "Removes focus from the switch.",
+                "value": {}
+              },
+              {
+                "name": "checkValidity",
+                "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid.",
+                "value": {}
+              },
+              {
+                "name": "getForm",
+                "description": "Gets the associated form, if one exists.",
+                "value": {}
+              },
+              {
+                "name": "reportValidity",
+                "description": "Checks for validity and shows a validation message if the control is invalid.",
+                "value": {}
+              },
+              {
+                "name": "setCustomValidity",
+                "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.",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the switch loses focus."
+              },
+              {
+                "name": "sd-change",
+                "description": "Emitted when the checked state changes."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the switch gains focus."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the switch receives input."
+              }
+            ]
+          },
+          "attributes": [
+            {
+              "name": "title",
+              "description": "The title of the switch adds a tooltip with title text.",
+              "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": "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"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-tag",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/tag",
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "value": {
+                  "type": "'lg' | 'sm'"
+                }
+              },
+              {
+                "name": "selected",
+                "description": "Displays the tag in a selected state.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "removable",
+                "description": "Displays the tag with a removability indicator.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "disabled",
+                "description": "Displays the tag in a disabled state.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "href",
+                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is present.",
+                "value": {
+                  "type": "'_blank' | '_parent' | '_self' | '_top'"
+                }
+              },
+              {
+                "name": "download",
+                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+                "value": {
+                  "type": "string | undefined"
+                }
+              },
+              {
+                "name": "handleBlur",
+                "value": {}
+              },
+              {
+                "name": "handleFocus",
+                "value": {}
+              },
+              {
+                "name": "handleRemoveClick",
+                "value": {}
+              },
+              {
+                "name": "isLink",
+                "value": {}
+              },
+              {
+                "name": "click",
+                "description": "Simulates a click on the tag.",
+                "value": {}
+              },
+              {
+                "name": "focus",
+                "description": "Sets focus on the tag.",
+                "value": {}
+              },
+              {
+                "name": "blur",
+                "description": "Removes focus from the tag.",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the tag loses focus."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the tag gains focus."
+              },
+              {
+                "name": "sd-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          },
+          "attributes": [
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'lg' | 'sm'"
+              }
+            },
+            {
+              "name": "selected",
+              "description": "Displays the tag in a selected state.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "removable",
+              "description": "Displays the tag with a removability indicator.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Displays the tag in a disabled state.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "href",
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is present.",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top'"
+              }
+            },
+            {
+              "name": "download",
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+              "value": {
+                "type": "string | undefined"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-teaser",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/teaser",
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "value": {
+                  "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
+                }
+              },
+              {
+                "name": "breakpoint",
+                "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+                "value": {
+                  "type": "number"
+                }
+              },
+              {
+                "name": "inset",
+                "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "_orientation",
+                "value": {
+                  "type": "'vertical' | 'horizontal'"
+                }
+              },
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "resizeObserver",
+                "value": {
+                  "type": "ResizeObserver"
+                }
+              },
+              {
+                "name": "updateOrientation",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
+              }
+            },
+            {
+              "name": "breakpoint",
+              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "inset",
+              "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-textarea",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/textarea",
+          "js": {
+            "properties": [
+              {
+                "name": "formControlController",
+                "value": {}
+              },
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "hasFocus",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "title",
+                "description": "An empty title prevents browser validation tooltips from appearing on hover",
+                "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": "'lg' | 'md' | 'sm'"
+                }
+              },
+              {
+                "name": "label",
+                "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "helpText",
+                "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": "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": "'off' | 'on'"
+                }
+              },
+              {
+                "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'"
+                }
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object",
+                "value": {}
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message",
+                "value": {}
+              },
+              {
+                "name": "handleBlur",
+                "value": {}
+              },
+              {
+                "name": "handleChange",
+                "value": {}
+              },
+              {
+                "name": "handleFocus",
+                "value": {}
+              },
+              {
+                "name": "handleInput",
+                "value": {}
+              },
+              {
+                "name": "handleInvalid",
+                "value": {}
+              },
+              {
+                "name": "setTextareaHeight",
+                "value": {}
+              },
+              {
+                "name": "handleDisabledChange",
+                "value": {}
+              },
+              {
+                "name": "handleRowsChange",
+                "value": {}
+              },
+              {
+                "name": "handleValueChange",
+                "value": {}
+              },
+              {
+                "name": "focus",
+                "description": "Sets focus on the textarea.",
+                "value": {}
+              },
+              {
+                "name": "blur",
+                "description": "Removes focus from the textarea.",
+                "value": {}
+              },
+              {
+                "name": "select",
+                "description": "Selects all the text in the textarea.",
+                "value": {}
+              },
+              {
+                "name": "scrollPosition",
+                "description": "Gets or sets the textarea's scroll position.",
+                "value": {}
+              },
+              {
+                "name": "setSelectionRange",
+                "description": "Sets the start and end positions of the text selection (0-based).",
+                "value": {}
+              },
+              {
+                "name": "setRangeText",
+                "description": "Replaces a range of text with a new string.",
+                "value": {}
+              },
+              {
+                "name": "checkValidity",
+                "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.",
+                "value": {}
+              },
+              {
+                "name": "getForm",
+                "description": "Gets the associated form, if one exists.",
+                "value": {}
+              },
+              {
+                "name": "reportValidity",
+                "description": "Checks for validity and shows the browser's validation message if the control is invalid.",
+                "value": {}
+              },
               {
                 "name": "setCustomValidity",
-                "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.",
+                "description": "Sets a custom validation message. Pass an empty string to restore validity.",
                 "value": {}
               }
             ],
             "events": [
               {
                 "name": "sd-blur",
-                "description": "Emitted when the switch loses focus."
+                "description": "Emitted when the control loses focus."
               },
               {
                 "name": "sd-change",
-                "description": "Emitted when the checked state changes."
+                "description": "Emitted when an alteration to the control's value is committed by the user."
               },
               {
                 "name": "sd-focus",
-                "description": "Emitted when the switch gains focus."
+                "description": "Emitted when the control gains focus."
               },
               {
                 "name": "sd-input",
-                "description": "Emitted when the switch receives input."
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "sd-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           },
           "attributes": [
             {
               "name": "title",
-              "description": "The title of the switch adds a tooltip with title text.",
+              "description": "An empty title prevents browser validation tooltips from appearing on hover",
               "value": {
                 "type": "string"
               }
             },
             {
               "name": "name",
-              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "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 switch, 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.",
               "value": {
                 "type": "string"
               }
             },
             {
-              "name": "disabled",
-              "description": "Disables the switch.",
+              "name": "size",
+              "description": "The textarea's size.",
               "value": {
-                "type": "boolean"
+                "type": "'lg' | 'md' | 'sm'"
               }
             },
             {
-              "name": "checked",
-              "description": "Draws the switch in a checked state.",
+              "name": "label",
+              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
               "value": {
-                "type": "boolean"
+                "type": "string"
               }
             },
             {
-              "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.",
+              "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": "required",
-              "description": "Makes the switch a required field.",
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the input is empty.",
               "value": {
-                "type": "boolean"
-              }
-            }
-          ]
-        },
-        {
-          "name": "sd-tag",
-          "description": "",
-          "doc-url": "https://solid.union-investment.com/[storybook-link]/tag",
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "The tag's size.",
-                "value": {
-                  "type": "'lg' | 'sm'"
-                }
-              },
-              {
-                "name": "selected",
-                "description": "Displays the tag in a selected state.",
-                "value": {
-                  "type": "boolean"
-                }
-              },
-              {
-                "name": "removable",
-                "description": "Displays the tag with a removability indicator.",
-                "value": {
-                  "type": "boolean"
-                }
-              },
-              {
-                "name": "disabled",
-                "description": "Displays the tag in a disabled state.",
-                "value": {
-                  "type": "boolean"
-                }
-              },
-              {
-                "name": "href",
-                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-                "value": {
-                  "type": "string"
-                }
-              },
-              {
-                "name": "target",
-                "description": "Tells the browser where to open the link. Only used when `href` is present.",
-                "value": {
-                  "type": "'_blank' | '_parent' | '_self' | '_top'"
-                }
-              },
-              {
-                "name": "download",
-                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
-                "value": {
-                  "type": "string | undefined"
-                }
-              },
-              {
-                "name": "handleBlur",
-                "value": {}
-              },
-              {
-                "name": "handleFocus",
-                "value": {}
-              },
-              {
-                "name": "isLink",
-                "value": {}
-              },
-              {
-                "name": "click",
-                "description": "Simulates a click on the tag.",
-                "value": {}
-              },
-              {
-                "name": "focus",
-                "description": "Sets focus on the tag.",
-                "value": {}
-              },
-              {
-                "name": "blur",
-                "description": "Removes focus from the tag.",
-                "value": {}
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-blur",
-                "description": "Emitted when the tag loses focus."
-              },
-              {
-                "name": "sd-focus",
-                "description": "Emitted when the tag gains focus."
+                "type": "string"
               }
-            ]
-          },
-          "attributes": [
+            },
             {
-              "name": "size",
-              "description": "The tag's size.",
+              "name": "rows",
+              "description": "The number of rows to display by default.",
               "value": {
-                "type": "'lg' | 'sm'"
+                "type": "number"
               }
             },
             {
-              "name": "selected",
-              "description": "Displays the tag in a selected state.",
+              "name": "disabled",
+              "description": "Disables the textarea.",
               "value": {
                 "type": "boolean"
               }
             },
             {
-              "name": "removable",
-              "description": "Displays the tag with a removability indicator.",
+              "name": "readonly",
+              "description": "Makes the textarea readonly.",
               "value": {
                 "type": "boolean"
               }
             },
             {
-              "name": "disabled",
-              "description": "Displays the tag in a disabled state.",
+              "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": "href",
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "name": "minlength",
+              "description": "The minimum length of input that will be considered valid.",
               "value": {
-                "type": "string"
+                "type": "number"
               }
             },
             {
-              "name": "target",
-              "description": "Tells the browser where to open the link. Only used when `href` is present.",
+              "name": "maxlength",
+              "description": "The maximum length of input that will be considered valid.",
               "value": {
-                "type": "'_blank' | '_parent' | '_self' | '_top'"
+                "type": "number"
               }
             },
             {
-              "name": "download",
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+              "name": "autocapitalize",
+              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "string | undefined"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               }
-            }
-          ]
-        },
-        {
-          "name": "sd-teaser",
-          "description": "",
-          "doc-url": "https://solid.union-investment.com/[storybook-link]/teaser",
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "value": {
-                  "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
-                }
-              },
-              {
-                "name": "breakpoint",
-                "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
-                "value": {
-                  "type": "number"
-                }
-              },
-              {
-                "name": "inset",
-                "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
-                "value": {
-                  "type": "boolean"
-                }
-              },
-              {
-                "name": "_orientation",
-                "value": {
-                  "type": "'vertical' | 'horizontal'"
-                }
-              },
-              {
-                "name": "hasSlotController",
-                "value": {}
-              },
-              {
-                "name": "resizeObserver",
-                "value": {
-                  "type": "ResizeObserver"
-                }
-              },
-              {
-                "name": "updateOrientation",
-                "value": {}
+            },
+            {
+              "name": "autocorrect",
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "value": {
+                "type": "'off' | 'on'"
               }
-            ],
-            "events": []
-          },
-          "attributes": [
+            },
             {
-              "name": "variant",
+              "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": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
+                "type": "string"
               }
             },
             {
-              "name": "breakpoint",
-              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+              "name": "autofocus",
+              "description": "Indicates that the input should receive focus on page load.",
               "value": {
-                "type": "number"
+                "type": "boolean"
               }
             },
             {
-              "name": "inset",
-              "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
+              "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'"
+              }
             }
           ]
         },