@solid-design-system/components 6.12.1 → 6.13.1

package/dist/vscode.html-custom-data.json

@@ -236,6 +236,10 @@
             { "name": "white" },
             { "name": "border-primary" },
             { "name": "border-white" },
+            { "name": "'primary" },
+            { "name": "80'" },
+            { "name": "'white" },
+            { "name": "80'" },
             { "name": "image" }
           ]
         },
@@ -696,82 +700,87 @@
       ]
     },
     {
-      "name": "sd-combobox",
-      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+      "name": "sd-datepicker",
+      "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
       "attributes": [
         {
-          "name": "name",
-          "description": "The name of the combobox, submitted as a name/value pair with form data.",
+          "name": "locale",
+          "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
           "values": []
         },
         {
           "name": "value",
-          "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-          "values": [{ "name": "string[]" }]
+          "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
+          "values": []
         },
         {
-          "name": "size",
-          "description": "The combobox's size.",
-          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+          "name": "range",
+          "description": "Enables date range selection when true.",
+          "values": []
         },
         {
-          "name": "placeholder",
-          "description": "Placeholder text to show as a hint when the combobox is empty.",
+          "name": "range-start",
+          "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
           "values": []
         },
         {
-          "name": "max-options-tag-label",
-          "description": "Label text shown on tag if max-options-visible is reached.",
+          "name": "range-end",
+          "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Disables the combobox control.",
+          "name": "allowSameDayRange",
+          "description": "Allows selecting the same start and end date when true.",
           "values": []
         },
         {
-          "name": "visually-disabled",
-          "description": "Styles the combobox as if it was disabled and enables aria-disabled",
-          "values": []
+          "name": "min",
+          "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
+          "values": [{ "name": "Date" }]
         },
         {
-          "name": "clearable",
-          "description": "Adds a clear button when the combobox is not empty.",
-          "values": []
+          "name": "max",
+          "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
+          "values": [{ "name": "Date" }]
         },
         {
-          "name": "open",
-          "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
-          "values": []
+          "name": "view-month",
+          "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
+          "values": [{ "name": "Date" }]
         },
         {
-          "name": "hoist",
-          "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "name": "firstDayOfWeek",
+          "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
           "values": []
         },
         {
-          "name": "label",
-          "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+          "name": "disabled-weekends",
+          "description": "When true, weekends (Saturday/Sunday) are disabled.",
           "values": []
         },
         {
-          "name": "placement",
-          "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
-          "values": [{ "name": "top" }, { "name": "bottom" }]
+          "name": "disabled-dates",
+          "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
+          "values": [{ "name": "string[]" }]
         },
         {
-          "name": "help-text",
-          "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
+          "name": "size",
+          "description": "Size of the input and calendar visuals.",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
         },
         {
-          "name": "form",
-          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+          "name": "alignment",
+          "description": "Horizontal alignment of the flyout relative to the input.",
+          "values": [{ "name": "left" }, { "name": "right" }]
+        },
+        {
+          "name": "label",
+          "description": "Text label for the input. Can be overridden with slot=\"label\".",
           "values": []
         },
         {
-          "name": "required",
-          "description": "The combobox's required attribute.",
+          "name": "help-text",
+          "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
           "values": []
         },
         {
@@ -780,50 +789,49 @@
           "values": []
         },
         {
-          "name": "type",
-          "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-          "values": [{ "name": "search" }, { "name": "text" }]
+          "name": "disabled",
+          "description": "Disables the control entirely when true.",
+          "values": []
         },
         {
-          "name": "getOption",
-          "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
-          "values": [{ "name": "OptionRenderer" }]
+          "name": "required",
+          "description": "Makes the input a required field.",
+          "values": []
         },
         {
-          "name": "multiple",
-          "description": "Allows more than one option to be selected.",
+          "name": "visually-disabled",
+          "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
           "values": []
         },
         {
-          "name": "useTags",
-          "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+          "name": "style-on-valid",
+          "description": "When true, applies success styling for valid selections.",
           "values": []
         },
         {
-          "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.",
+          "name": "readonly",
+          "description": "Makes the input read-only (non-editable) when true.",
           "values": []
         },
         {
-          "name": "style-on-valid",
-          "description": "Shows success styles if the validity of the input is valid.",
+          "name": "placement",
+          "description": "Preferred placement of the flyout relative to the input (top|bottom).",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text for the input when no date is selected.",
           "values": []
         },
         {
-          "name": "filter",
-          "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
-          "values": [
-            { "name": "(option: SdOption" },
-            { "name": "queryString: string) => boolean" }
-          ]
+          "name": "name",
+          "description": "The name of the datepicker, submitted as a name/value pair with form data.",
+          "values": []
         },
         {
-          "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.",
-          "values": [
-            { "name": "(option: SdOption, index: number) => TemplateResult" },
-            { "name": "HTMLElement" }
-          ]
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
+          "values": []
         },
         {
           "name": "dir",
@@ -839,92 +847,87 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-combobox--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-datepicker--docs"
         }
       ]
     },
     {
-      "name": "sd-datepicker",
-      "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+      "name": "sd-combobox",
+      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
       "attributes": [
         {
-          "name": "locale",
-          "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+          "name": "name",
+          "description": "The name of the combobox, submitted as a name/value pair with form data.",
           "values": []
         },
         {
           "name": "value",
-          "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
-          "values": []
+          "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+          "values": [{ "name": "string[]" }]
         },
         {
-          "name": "range",
-          "description": "Enables date range selection when true.",
-          "values": []
+          "name": "size",
+          "description": "The combobox's size.",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
         },
         {
-          "name": "range-start",
-          "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
+          "name": "placeholder",
+          "description": "Placeholder text to show as a hint when the combobox is empty.",
           "values": []
         },
         {
-          "name": "range-end",
-          "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
+          "name": "max-options-tag-label",
+          "description": "Label text shown on tag if max-options-visible is reached.",
           "values": []
         },
         {
-          "name": "allowSameDayRange",
-          "description": "Allows selecting the same start and end date when true.",
+          "name": "disabled",
+          "description": "Disables the combobox control.",
           "values": []
         },
         {
-          "name": "min",
-          "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
-          "values": [{ "name": "Date" }]
-        },
-        {
-          "name": "max",
-          "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
-          "values": [{ "name": "Date" }]
+          "name": "visually-disabled",
+          "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+          "values": []
         },
         {
-          "name": "view-month",
-          "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
-          "values": [{ "name": "Date" }]
+          "name": "clearable",
+          "description": "Adds a clear button when the combobox is not empty.",
+          "values": []
         },
         {
-          "name": "firstDayOfWeek",
-          "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+          "name": "open",
+          "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
           "values": []
         },
         {
-          "name": "disabled-weekends",
-          "description": "When true, weekends (Saturday/Sunday) are disabled.",
+          "name": "hoist",
+          "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
           "values": []
         },
         {
-          "name": "disabled-dates",
-          "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
-          "values": [{ "name": "string[]" }]
+          "name": "label",
+          "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
         },
         {
-          "name": "size",
-          "description": "Size of the input and calendar visuals.",
-          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+          "name": "placement",
+          "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
         },
         {
-          "name": "alignment",
-          "description": "Horizontal alignment of the flyout relative to the input.",
-          "values": [{ "name": "left" }, { "name": "right" }]
+          "name": "help-text",
+          "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
         },
         {
-          "name": "label",
-          "description": "Text label for the input. Can be overridden with slot=\"label\".",
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
           "values": []
         },
         {
-          "name": "help-text",
-          "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+          "name": "required",
+          "description": "The combobox's required attribute.",
           "values": []
         },
         {
@@ -933,49 +936,50 @@
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Disables the control entirely when true.",
-          "values": []
+          "name": "type",
+          "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+          "values": [{ "name": "search" }, { "name": "text" }]
         },
         {
-          "name": "required",
-          "description": "Makes the input a required field.",
-          "values": []
+          "name": "getOption",
+          "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+          "values": [{ "name": "OptionRenderer" }]
         },
         {
-          "name": "visually-disabled",
-          "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+          "name": "multiple",
+          "description": "Allows more than one option to be selected.",
           "values": []
         },
         {
-          "name": "style-on-valid",
-          "description": "When true, applies success styling for valid selections.",
+          "name": "useTags",
+          "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
           "values": []
         },
         {
-          "name": "readonly",
-          "description": "Makes the input read-only (non-editable) when true.",
+          "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.",
           "values": []
         },
         {
-          "name": "placement",
-          "description": "Preferred placement of the flyout relative to the input (top|bottom).",
-          "values": [{ "name": "top" }, { "name": "bottom" }]
-        },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text for the input when no date is selected.",
+          "name": "style-on-valid",
+          "description": "Shows success styles if the validity of the input is valid.",
           "values": []
         },
         {
-          "name": "name",
-          "description": "The name of the datepicker, submitted as a name/value pair with form data.",
-          "values": []
+          "name": "filter",
+          "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+          "values": [
+            { "name": "(option: SdOption" },
+            { "name": "queryString: string) => boolean" }
+          ]
         },
         {
-          "name": "form",
-          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
-          "values": []
+          "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.",
+          "values": [
+            { "name": "(option: SdOption, index: number) => TemplateResult" },
+            { "name": "HTMLElement" }
+          ]
         },
         {
           "name": "dir",
@@ -991,7 +995,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-datepicker--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-combobox--docs"
         }
       ]
     },
@@ -1314,38 +1318,28 @@
       ]
     },
     {
-      "name": "sd-icon",
-      "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+      "name": "sd-include",
+      "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
       "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-          "values": []
-        },
         {
           "name": "src",
-          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
+          "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-          "values": []
+          "name": "mode",
+          "description": "The fetch mode to use.",
+          "values": [
+            { "name": "cors" },
+            { "name": "no-cors" },
+            { "name": "same-origin" }
+          ]
         },
         {
-          "name": "library",
-          "description": "The name of a registered custom icon library.",
+          "name": "allow-scripts",
+          "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
           "values": []
         },
-        {
-          "name": "color",
-          "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
-          "values": [
-            { "name": "currentColor" },
-            { "name": "primary" },
-            { "name": "white" }
-          ]
-        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -1360,33 +1354,43 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-icon--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-include--docs"
         }
       ]
     },
     {
-      "name": "sd-include",
-      "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+      "name": "sd-icon",
+      "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
       "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": []
+        },
         {
           "name": "src",
-          "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
           "values": []
         },
         {
-          "name": "mode",
-          "description": "The fetch mode to use.",
-          "values": [
-            { "name": "cors" },
-            { "name": "no-cors" },
-            { "name": "same-origin" }
-          ]
+          "name": "label",
+          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+          "values": []
         },
         {
-          "name": "allow-scripts",
-          "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+          "name": "library",
+          "description": "The name of a registered custom icon library.",
           "values": []
         },
+        {
+          "name": "color",
+          "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+          "values": [
+            { "name": "currentColor" },
+            { "name": "primary" },
+            { "name": "white" }
+          ]
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -1401,7 +1405,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-include--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-icon--docs"
         }
       ]
     },
@@ -1625,6 +1629,37 @@
         }
       ]
     },
+    {
+      "name": "sd-loader",
+      "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color of the loader.",
+          "values": [
+            { "name": "primary" },
+            { "name": "white" },
+            { "name": "currentColor" }
+          ]
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-loader--docs"
+        }
+      ]
+    },
     {
       "name": "sd-link",
       "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Properties:**\n - **--sd-interactive--active-color-text** - The link's text color when active. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
@@ -1687,37 +1722,6 @@
         }
       ]
     },
-    {
-      "name": "sd-loader",
-      "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "The color of the loader.",
-          "values": [
-            { "name": "primary" },
-            { "name": "white" },
-            { "name": "currentColor" }
-          ]
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-loader--docs"
-        }
-      ]
-    },
     {
       "name": "sd-map-marker",
       "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-icon-fill** - The icon fill color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker-cluster-color-icon-fill** - The default icon fill color for map marker clusters. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -1998,38 +2002,6 @@
         }
       ]
     },
-    {
-      "name": "sd-optgroup",
-      "description": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Disables all options in the optgroup.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-optgroup--docs"
-        }
-      ]
-    },
     {
       "name": "sd-option",
       "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The option's label.\n- **left** - Used to prepend an icon or similar element to the menu item.\n- **right** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--sd-option--disabled-color-border** - The border color of checkboxes for the disabled options. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **left** - The container that wraps the left.\n- **right** - The container that wraps the right.",
@@ -2227,6 +2199,38 @@
         }
       ]
     },
+    {
+      "name": "sd-optgroup",
+      "description": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables all options in the optgroup.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-optgroup--docs"
+        }
+      ]
+    },
     {
       "name": "sd-quickfact",
       "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-quickfact--expandable-color-text** - The text color for expandable quickfact. _(default: undefined)_\n- **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-background** - The accordion background color. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - The accordion chevron color. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
@@ -2265,22 +2269,22 @@
       ]
     },
     {
-      "name": "sd-radio",
-      "description": "A radio allows to select only one value from a set of options. Clicking on an unchecked radio will deselect the other one(s).\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-focus** - Emitted when the control gains focus.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Properties:**\n - **--sd-radio--checked--default-color-background** - The background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--hover-color-background** - The background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--hover__icon-color-background** - The icon background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default-color-background** - The background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default__icon-color-background** - The icon background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--hover__icon-color-background** - The icon background color for checked invalid radios in hover state. _(default: undefined)_\n- **--sd-radio--default--invalid-color-background** - The background color for invalid radios in default state. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control--unchecked** - The radio control when the radio is unchecked.\n- **control--checked** - The radio control when the radio is checked.\n- **checked** - The dot inside the radio component when the radio is checked.\n- **label** - The container that wraps the radio's label.",
+      "name": "sd-radio-button",
+      "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-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- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\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- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
       "attributes": [
         {
           "name": "size",
-          "description": "The radio's size.",
+          "description": "The radio button's size.",
           "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
         },
         {
           "name": "disabled",
-          "description": "A Boolean attribute which, if present, disables the radio.",
+          "description": "Disables the radio button.",
           "values": []
         },
         {
           "name": "visually-disabled",
-          "description": "A Boolean attribute which, if present, disables the radio.",
+          "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
           "values": []
         },
         {
@@ -2288,11 +2292,6 @@
           "description": "The radio's value. When selected, the radio group will receive this value.",
           "values": []
         },
-        {
-          "name": "invalid",
-          "description": "A Boolean attribute which, if present, marks the radio Button valid or invalid",
-          "values": []
-        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -2307,27 +2306,27 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-radio--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-radio-button--docs"
         }
       ]
     },
     {
-      "name": "sd-radio-button",
-      "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-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- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\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- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
+      "name": "sd-radio",
+      "description": "A radio allows to select only one value from a set of options. Clicking on an unchecked radio will deselect the other one(s).\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-focus** - Emitted when the control gains focus.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Properties:**\n - **--sd-radio--checked--default-color-background** - The background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--hover-color-background** - The background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--hover__icon-color-background** - The icon background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default-color-background** - The background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default__icon-color-background** - The icon background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--hover__icon-color-background** - The icon background color for checked invalid radios in hover state. _(default: undefined)_\n- **--sd-radio--default--invalid-color-background** - The background color for invalid radios in default state. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control--unchecked** - The radio control when the radio is unchecked.\n- **control--checked** - The radio control when the radio is checked.\n- **checked** - The dot inside the radio component when the radio is checked.\n- **label** - The container that wraps the radio's label.",
       "attributes": [
         {
           "name": "size",
-          "description": "The radio button's size.",
+          "description": "The radio's size.",
           "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
         },
         {
           "name": "disabled",
-          "description": "Disables the radio button.",
+          "description": "A Boolean attribute which, if present, disables the radio.",
           "values": []
         },
         {
           "name": "visually-disabled",
-          "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+          "description": "A Boolean attribute which, if present, disables the radio.",
           "values": []
         },
         {
@@ -2335,6 +2334,11 @@
           "description": "The radio's value. When selected, the radio group will receive this value.",
           "values": []
         },
+        {
+          "name": "invalid",
+          "description": "A Boolean attribute which, if present, marks the radio Button valid or invalid",
+          "values": []
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -2349,7 +2353,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-radio-button--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-radio--docs"
         }
       ]
     },