@solid-design-system/components 6.14.0 → 6.15.0

package/dist/custom-elements.json

@@ -4324,75 +4324,239 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox-group/checkbox-group.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdCheckboxGroup",
-          "slots": [
+          "name": "SdCheckbox",
+          "cssProperties": [
             {
-              "description": "The default slot where `<sd-checkbox>` elements are placed.",
-              "name": ""
+              "description": "The border width of the checkbox.",
+              "name": "--sd-checkbox-border-width"
             },
             {
-              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "The color border for form controls.",
+              "name": "--sd-form-control-color-border"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
             },
             {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
+            },
+            {
+              "description": "The checked icon, an `<sd-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The indeterminate icon, an `<sd-icon>` element.",
+              "name": "indeterminate-icon"
+            },
+            {
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The checkbox's label.",
+              "name": ""
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+              "attribute": "title",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'lg' | 'md' | 'sm'"
+                "text": "'sm' | 'md' | 'lg'"
               },
               "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "description": "The checkbox's size.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "disabled",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "attribute": "orientation",
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "visuallyDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "attribute": "label",
+              "default": "false",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows a validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+            },
             {
               "kind": "field",
               "name": "dir",
@@ -4472,42 +4636,113 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-              "fieldName": "size"
+              "description": "Emitted when the checkbox loses focus.",
+              "name": "sd-blur"
             },
             {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "fieldName": "orientation"
+              "description": "Emitted when the checked state changes.",
+              "name": "sd-change"
             },
             {
-              "name": "label",
+              "description": "Emitted when the checkbox gains focus.",
+              "name": "sd-focus"
+            },
+            {
+              "description": "Emitted when the checkbox receives input.",
+              "name": "sd-input"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "fieldName": "label"
+              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+              "fieldName": "title"
             },
             {
-              "name": "help-text",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'lg'",
+              "description": "The checkbox's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "visually-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "fieldName": "required"
             },
             {
               "name": "dir",
@@ -4538,11 +4773,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox-group",
+          "summary": "Checkboxes allow the user to toggle an option on or off.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox",
           "status": "stable",
           "since": "1.22.0",
-          "tagName": "sd-checkbox-group",
+          "dependencies": [
+            "sd-icon"
+          ],
+          "tagName": "sd-checkbox",
           "customElement": true
         }
       ],
@@ -4551,461 +4789,704 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-checkbox-group",
+          "name": "sd-checkbox",
           "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/combobox/combobox.js",
+      "path": "components/checkbox-group/checkbox-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdCombobox",
-          "cssProperties": [
-            {
-              "description": "Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\"",
-              "name": "--tag-max-width"
-            },
-            {
-              "description": "The background color for form controls in invalid state.",
-              "name": "--sd-form-control--invalid-color-background"
-            },
-            {
-              "description": "The text color for form controls.",
-              "name": "--sd-form-control-color-text"
-            },
-            {
-              "description": "The border radius for form controls.",
-              "name": "--sd-form-control-border-radius"
-            },
-            {
-              "description": "The border color for default and readonly form controls.",
-              "name": "--sd-form-control-color-border"
-            },
-            {
-              "description": "The text color for the floating label when the input is filled.",
-              "name": "--sd-form-control--filled__floating-label-color-text"
-            },
-            {
-              "description": "The border radius for the bottom left corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-bottom-left-radius"
-            },
-            {
-              "description": "The border radius for the bottom right corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-bottom-right-radius"
-            },
-            {
-              "description": "The border radius for the top left corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-top-left-radius"
-            },
-            {
-              "description": "The border radius for the top right corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-top-right-radius"
-            },
-            {
-              "description": "The border width for the tags for multiple options combobox.",
-              "name": "--sd-combobox__tag-border-width"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The form control that wraps the label, combobox, and help text.",
-              "name": "form-control"
-            },
-            {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
-            },
-            {
-              "description": "The combobox's wrapper.",
-              "name": "form-control-input"
-            },
-            {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            },
-            {
-              "description": "The container that wraps the prefix, combobox, clear icon, and expand button.",
-              "name": "combobox"
-            },
-            {
-              "description": "The container that wraps the left icon slot.",
-              "name": "left"
-            },
-            {
-              "description": "The container that wraps the right icon slot.",
-              "name": "right"
-            },
-            {
-              "description": "The element that displays the selected option's label, an `<input>` element.",
-              "name": "display-input"
-            },
-            {
-              "description": "The listbox container where the options are slotted and the filtered options list exists.",
-              "name": "listbox"
-            },
-            {
-              "description": "The container that wraps the filtered options.",
-              "name": "filtered-listbox"
-            },
-            {
-              "description": "The clear button.",
-              "name": "clear-button"
-            },
-            {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
-            }
-          ],
+          "name": "SdCheckboxGroup",
           "slots": [
             {
-              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.",
+              "description": "The default slot where `<sd-checkbox>` elements are placed.",
               "name": ""
             },
             {
-              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
+              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
               "name": "label"
             },
             {
-              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            },
-            {
-              "description": "Used to prepend a presentational icon or similar element to the combobox.",
-              "name": "left"
-            },
-            {
-              "description": "Used to append a presentational icon or similar element to the combobox.",
-              "name": "right"
-            },
-            {
-              "description": "An icon to use in lieu of the default clear icon.",
-              "name": "clear-icon"
+              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
             },
             {
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
-              "name": "expand-icon"
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "popup",
+              "name": "size",
               "type": {
-                "text": "SdPopup"
-              }
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "displayInputValue",
+              "name": "orientation",
               "type": {
-                "text": "string"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "''"
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "attribute": "orientation",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "selectedTextLabel",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "''",
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "selectedOptions",
+              "name": "helpText",
               "type": {
-                "text": "(SdOption | undefined)[]"
+                "text": "string"
               },
-              "default": "[]"
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "filteredOptions",
+              "name": "dir",
               "type": {
-                "text": "(SdOption | SdOptgroup | undefined)[]"
+                "text": "'ltr' | 'rtl' | 'auto'"
               },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "allOptions",
-              "type": {
-                "text": "(SdOption | SdOptgroup | undefined)[]"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "lastOption",
-              "type": {
-                "text": "SdOption | undefined"
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "lang",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The name of the combobox, submitted as a name/value pair with form data.",
-              "attribute": "name",
-              "reflects": true
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | string[]"
-              },
-              "default": "''",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
               },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
-            },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The combobox's size.",
-              "attribute": "size",
-              "reflects": true
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "orientation",
               "type": {
-                "text": "string"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the combobox is empty.",
-              "attribute": "placeholder",
-              "reflects": true
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "fieldName": "orientation"
             },
             {
-              "kind": "field",
-              "name": "maxOptionsTagLabel",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Label text shown on tag if max-options-visible is reached.",
-              "attribute": "max-options-tag-label",
-              "reflects": true
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the combobox control.",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             },
             {
-              "kind": "field",
-              "name": "visuallyDisabled",
+              "name": "dir",
               "type": {
-                "text": "boolean"
+                "text": "'ltr' | 'rtl' | 'auto'"
               },
-              "default": "false",
-              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
-              "reflects": true
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "clearable",
+              "name": "lang",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Adds a clear button when the combobox is not empty.",
-              "attribute": "clearable",
-              "reflects": true
+              "description": "The element's language.",
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox-group",
+          "status": "stable",
+          "since": "1.22.0",
+          "tagName": "sd-checkbox-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-checkbox-group",
+          "declaration": {
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/combobox/combobox.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdCombobox",
+          "cssProperties": [
+            {
+              "description": "Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\"",
+              "name": "--tag-max-width"
             },
             {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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.",
-              "attribute": "open",
-              "reflects": true
+              "description": "The background color for form controls in invalid state.",
+              "name": "--sd-form-control--invalid-color-background"
             },
             {
-              "kind": "field",
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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.",
-              "attribute": "hoist",
-              "reflects": true
+              "description": "The text color for form controls.",
+              "name": "--sd-form-control-color-text"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label",
-              "reflects": true
+              "description": "The border radius for form controls.",
+              "name": "--sd-form-control-border-radius"
             },
             {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "'top' | 'bottom'"
-              },
-              "default": "'bottom'",
-              "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.",
-              "attribute": "placement",
-              "reflects": true
+              "description": "The border color for default and readonly form controls.",
+              "name": "--sd-form-control-color-border"
             },
             {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
+              "description": "The text color for the floating label when the input is filled.",
+              "name": "--sd-form-control--filled__floating-label-color-text"
+            },
+            {
+              "description": "The border radius for the bottom left corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-bottom-left-radius"
+            },
+            {
+              "description": "The border radius for the bottom right corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-bottom-right-radius"
+            },
+            {
+              "description": "The border radius for the top left corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-top-left-radius"
+            },
+            {
+              "description": "The border radius for the top right corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-top-right-radius"
+            },
+            {
+              "description": "The border width for the tags for multiple options combobox.",
+              "name": "--sd-combobox__tag-border-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, combobox, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The combobox's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The container that wraps the prefix, combobox, clear icon, and expand button.",
+              "name": "combobox"
+            },
+            {
+              "description": "The container that wraps the left icon slot.",
+              "name": "left"
+            },
+            {
+              "description": "The container that wraps the right icon slot.",
+              "name": "right"
+            },
+            {
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
+            },
+            {
+              "description": "The listbox container where the options are slotted and the filtered options list exists.",
+              "name": "listbox"
+            },
+            {
+              "description": "The container that wraps the filtered options.",
+              "name": "filtered-listbox"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.",
+              "name": ""
+            },
+            {
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            },
+            {
+              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "name": "left"
+            },
+            {
+              "description": "Used to append a presentational icon or similar element to the combobox.",
+              "name": "right"
+            },
+            {
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
+            {
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
+              "name": "expand-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "SdPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "displayInputValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "selectedTextLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "selectedOptions",
+              "type": {
+                "text": "(SdOption | undefined)[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "filteredOptions",
+              "type": {
+                "text": "(SdOption | SdOptgroup | undefined)[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "allOptions",
+              "type": {
+                "text": "(SdOption | SdOptgroup | undefined)[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "lastOption",
+              "type": {
+                "text": "SdOption | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "''",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "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.",
-              "attribute": "form",
-              "reflects": true
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'lg' | 'md' | 'sm'"
               },
-              "default": "false",
-              "description": "The combobox's required attribute.",
-              "attribute": "required",
+              "default": "'lg'",
+              "description": "The combobox's size.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "floatingLabel",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Enables the floating label behavior for the input.",
-              "attribute": "floating-label",
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "attribute": "placeholder",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "maxOptionsTagLabel",
               "type": {
-                "text": "'search' | 'text'"
+                "text": "string"
               },
-              "default": "'text'",
-              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-              "attribute": "type",
+              "default": "''",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "attribute": "max-options-tag-label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "getOption",
+              "name": "disabled",
               "type": {
-                "text": "OptionRenderer"
+                "text": "boolean"
               },
-              "default": "defaultOptionRenderer",
-              "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.",
-              "attribute": "getOption"
+              "default": "false",
+              "description": "Disables the combobox control.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "multiple",
+              "name": "visuallyDisabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Allows more than one option to be selected.",
-              "attribute": "multiple",
+              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "useTags",
+              "name": "clearable",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
-              "attribute": "useTags",
+              "default": "false",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "attribute": "clearable",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxOptionsVisible",
+              "name": "open",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "3",
-              "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.",
-              "attribute": "max-options-visible",
+              "default": "false",
+              "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.",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "styleOnValid",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Shows success styles if the validity of the input is valid.",
-              "attribute": "style-on-valid",
+              "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.",
+              "attribute": "hoist",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "filter",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "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.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The combobox's required attribute.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "floatingLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables the floating label behavior for the input.",
+              "attribute": "floating-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'search' | 'text'"
+              },
+              "default": "'text'",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "getOption",
+              "type": {
+                "text": "OptionRenderer"
+              },
+              "default": "defaultOptionRenderer",
+              "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.",
+              "attribute": "getOption"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "useTags",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+              "attribute": "useTags",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxOptionsVisible",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "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.",
+              "attribute": "max-options-visible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "styleOnValid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "attribute": "style-on-valid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filter",
               "type": {
                 "text": "(option: SdOption, queryString: string) => boolean"
               },
@@ -5661,560 +6142,79 @@
             }
           ],
           "description": "Get a list of only Optgroup elements",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        },
-        {
-          "kind": "function",
-          "name": "normalizeString",
-          "parameters": [
-            {
-              "name": "str",
-              "type": {
-                "text": "string"
-              },
-              "description": "The string to normalize"
-            }
-          ],
-          "description": "Normalize a string by removing accents and converting to lowercase",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getAssignedElementsForSlot",
-          "declaration": {
-            "name": "getAssignedElementsForSlot",
-            "module": "components/combobox/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getOptionOrNestedOptions",
-          "declaration": {
-            "name": "getOptionOrNestedOptions",
-            "module": "components/combobox/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isOptgroup",
-          "declaration": {
-            "name": "isOptgroup",
-            "module": "components/combobox/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getAllOptions",
-          "declaration": {
-            "name": "getAllOptions",
-            "module": "components/combobox/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "filterOnlyOptgroups",
-          "declaration": {
-            "name": "filterOnlyOptgroups",
-            "module": "components/combobox/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "normalizeString",
-          "declaration": {
-            "name": "normalizeString",
-            "module": "components/combobox/utils.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdCheckbox",
-          "cssProperties": [
-            {
-              "description": "The border width of the checkbox.",
-              "name": "--sd-checkbox-border-width"
-            },
-            {
-              "description": "The color border for form controls.",
-              "name": "--sd-form-control-color-border"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
-            },
-            {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
-            },
-            {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
-            },
-            {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The indeterminate icon, an `<sd-icon>` element.",
-              "name": "indeterminate-icon"
-            },
-            {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
-              "attribute": "title",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox's size.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "visuallyDisabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "attribute": "indeterminate",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "defaultChecked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the checkbox."
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the checkbox."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the checkbox."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid."
-            },
-            {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows a validation message if the control is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "attribute": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "token",
-              "return": {
-                "type": {
-                  "text": "T"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "fallback",
-                  "type": {
-                    "text": "T"
-                  }
-                }
-              ],
-              "description": "Retrieves the value of a css variable token.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the checkbox loses focus.",
-              "name": "sd-blur"
-            },
-            {
-              "description": "Emitted when the checked state changes.",
-              "name": "sd-change"
-            },
-            {
-              "description": "Emitted when the checkbox gains focus.",
-              "name": "sd-focus"
-            },
-            {
-              "description": "Emitted when the checkbox receives input.",
-              "name": "sd-input"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
-              "fieldName": "title"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "value"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "visually-disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "fieldName": "visuallyDisabled"
-            },
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "fieldName": "indeterminate"
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "fieldName": "required"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            },
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        },
+        {
+          "kind": "function",
+          "name": "normalizeString",
+          "parameters": [
             {
-              "name": "lang",
+              "name": "str",
               "type": {
                 "text": "string"
               },
-              "description": "The element's language.",
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
+              "description": "The string to normalize"
             }
           ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "Checkboxes allow the user to toggle an option on or off.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox",
-          "status": "stable",
-          "since": "1.22.0",
-          "dependencies": [
-            "sd-icon"
-          ],
-          "tagName": "sd-checkbox",
-          "customElement": true
+          "description": "Normalize a string by removing accents and converting to lowercase",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "getAssignedElementsForSlot",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "getAssignedElementsForSlot",
+            "module": "components/combobox/utils.js"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "sd-checkbox",
+          "kind": "js",
+          "name": "getOptionOrNestedOptions",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "getOptionOrNestedOptions",
+            "module": "components/combobox/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isOptgroup",
+          "declaration": {
+            "name": "isOptgroup",
+            "module": "components/combobox/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getAllOptions",
+          "declaration": {
+            "name": "getAllOptions",
+            "module": "components/combobox/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "filterOnlyOptgroups",
+          "declaration": {
+            "name": "filterOnlyOptgroups",
+            "module": "components/combobox/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "normalizeString",
+          "declaration": {
+            "name": "normalizeString",
+            "module": "components/combobox/utils.js"
           }
         }
       ]
@@ -11831,17 +11831,185 @@
                 "module": "src/internal/solid-element.ts"
               }
             }
-          ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "A marker identifies a location on google map",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/components-sd-map-marker--docs",
-          "status": "stable",
-          "since": "2.12",
-          "tagName": "sd-map-marker",
-          "customElement": true
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "A marker identifies a location on google map",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/components-sd-map-marker--docs",
+          "status": "stable",
+          "since": "2.12",
+          "tagName": "sd-map-marker",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdMapMarker",
+            "module": "components/map-marker/map-marker.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-map-marker",
+          "declaration": {
+            "name": "SdMapMarker",
+            "module": "components/map-marker/map-marker.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/menu/menu.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdMenu",
+          "slots": [
+            {
+              "description": "The menu's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when a menu item is selected.",
+              "name": "sd-select"
+            }
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "Used as a list of choices to the user, such as a set of actions or functions.",
+          "status": "experimental",
+          "since": "5.9.0",
+          "dependencies": [
+            "sd-menu-item",
+            "sd-divider",
+            "sd-icon",
+            "sd-dropdown"
+          ],
+          "tagName": "sd-menu",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -11849,16 +12017,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdMapMarker",
-            "module": "components/map-marker/map-marker.js"
+            "name": "SdMenu",
+            "module": "components/menu/menu.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-map-marker",
+          "name": "sd-menu",
           "declaration": {
-            "name": "SdMapMarker",
-            "module": "components/map-marker/map-marker.js"
+            "name": "SdMenu",
+            "module": "components/menu/menu.js"
           }
         }
       ]
@@ -12111,234 +12279,31 @@
               "fieldName": "checked"
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the menu item in a disabled state, preventing selection.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
-              "fieldName": "value"
-            },
-            {
-              "name": "chevron",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "chevron"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "Menu items provide options for the user to pick from in a menu.",
-          "status": "experimental",
-          "since": "5.9.0",
-          "dependencies": [
-            "sd-icon",
-            "sd-popup"
-          ],
-          "tagName": "sd-menu-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdMenuItem",
-            "module": "components/menu-item/menu-item.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-menu-item",
-          "declaration": {
-            "name": "SdMenuItem",
-            "module": "components/menu-item/menu-item.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/menu-item/submenu-controller.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A reactive controller to manage the registration of event listeners for submenus.",
-          "name": "SubmenuController",
-          "members": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SubmenuController",
-          "declaration": {
-            "name": "SubmenuController",
-            "module": "components/menu-item/submenu-controller.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/menu/menu.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdMenu",
-          "slots": [
-            {
-              "description": "The menu's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "attribute": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "token",
-              "return": {
-                "type": {
-                  "text": "T"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "fallback",
-                  "type": {
-                    "text": "T"
-                  }
-                }
-              ],
-              "description": "Retrieves the value of a css variable token.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when a menu item is selected.",
-              "name": "sd-select"
-            }
-          ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "Used as a list of choices to the user, such as a set of actions or functions.",
-          "status": "experimental",
-          "since": "5.9.0",
-          "dependencies": [
-            "sd-menu-item",
-            "sd-divider",
-            "sd-icon",
-            "sd-dropdown"
-          ],
-          "tagName": "sd-menu",
-          "customElement": true,
-          "attributes": [
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the menu item in a disabled state, preventing selection.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
+              "fieldName": "value"
+            },
+            {
+              "name": "chevron",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "chevron"
+            },
             {
               "name": "dir",
               "type": {
@@ -12363,7 +12328,20 @@
                 "module": "src/internal/solid-element.ts"
               }
             }
-          ]
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "Menu items provide options for the user to pick from in a menu.",
+          "status": "experimental",
+          "since": "5.9.0",
+          "dependencies": [
+            "sd-icon",
+            "sd-popup"
+          ],
+          "tagName": "sd-menu-item",
+          "customElement": true
         }
       ],
       "exports": [
@@ -12371,16 +12349,38 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdMenu",
-            "module": "components/menu/menu.js"
+            "name": "SdMenuItem",
+            "module": "components/menu-item/menu-item.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-menu",
+          "name": "sd-menu-item",
           "declaration": {
-            "name": "SdMenu",
-            "module": "components/menu/menu.js"
+            "name": "SdMenuItem",
+            "module": "components/menu-item/menu-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/menu-item/submenu-controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A reactive controller to manage the registration of event listeners for submenus.",
+          "name": "SubmenuController",
+          "members": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SubmenuController",
+          "declaration": {
+            "name": "SubmenuController",
+            "module": "components/menu-item/submenu-controller.js"
           }
         }
       ]
@@ -15119,64 +15119,72 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-group/radio-group.js",
+      "path": "components/radio-button/radio-button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRadioGroup",
+          "name": "SdRadioButton",
           "cssProperties": [
             {
-              "description": "The border radius for radio button groups.",
-              "name": "--sd-radio-button-group-border-radius"
+              "description": "The background color of radio-button when checked.",
+              "name": "--sd-button--primary--default-color-background"
             },
             {
-              "description": "The border width for radio button groups.",
-              "name": "--sd-radio-button-group-border-width"
+              "description": "The text color of radio-button when checked.",
+              "name": "--sd-button--primary--default-color-text"
             },
             {
-              "description": "The padding for radio button groups.",
-              "name": "--sd-radio-button-group-padding"
+              "description": "The background color of radio-button on hover when checked.",
+              "name": "--sd-button--primary--hover-color-background"
+            },
+            {
+              "description": "The border radius of the radio-button.",
+              "name": "--sd-radio-button-border-radius"
+            },
+            {
+              "description": "The text color of the radio-button.",
+              "name": "--sd-radio-button-color-text"
+            },
+            {
+              "description": "The background color of the radio-button on hover.",
+              "name": "--sd-radio-button--hover-color-background"
+            },
+            {
+              "description": "The font weight for the radio button.",
+              "name": "--sd-choice-control-font-weight"
             }
           ],
           "cssParts": [
             {
-              "description": "The form control that wraps the label, input, and error text.",
-              "name": "form-control"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "description": "The internal `<button>` element.",
+              "name": "button"
             },
             {
-              "description": "The input's wrapper.",
-              "name": "form-control-input"
+              "description": "The internal button element when the radio button is checked.",
+              "name": "button--checked"
             },
             {
-              "description": "The button group that wraps radio buttons.",
-              "name": "button-group"
+              "description": "The container that wraps the icon.",
+              "name": "icon"
             },
             {
-              "description": "The button group's `base` part.",
-              "name": "button-group__base"
+              "description": "The container that wraps the radio button's label.",
+              "name": "label"
             }
           ],
           "slots": [
             {
-              "description": "The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.",
+              "description": "The radio button's label.",
               "name": ""
             },
             {
-              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
-            {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            },
-            {
-              "description": "An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
+              "description": "A presentational icon.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -15187,63 +15195,30 @@
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The radio group's size. This size will be applied to the label, all child radios and radio buttons.",
+              "description": "The radio button's size.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
+              "description": "Disables the radio button.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "visuallyDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "attribute": "name",
+              "default": "false",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
@@ -15252,73 +15227,27 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "focus",
-              "description": "Move focus to the checked radio (or the first one if none are checked)"
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
-            },
-            {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
               "parameters": [
                 {
-                  "name": "message",
-                  "default": "''"
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
                 }
               ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              "description": "Sets focus on the radio button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the radio button."
             },
             {
               "kind": "field",
@@ -15401,16 +15330,12 @@
           ],
           "events": [
             {
-              "description": "Emitted when the radio group's selected value changes.",
-              "name": "sd-change"
-            },
-            {
-              "description": "Emitted when the radio group receives user input.",
-              "name": "sd-input"
+              "description": "Emitted when the button loses focus.",
+              "name": "sd-blur"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "sd-invalid"
+              "description": "Emitted when the button gains focus.",
+              "name": "sd-focus"
             }
           ],
           "attributes": [
@@ -15420,72 +15345,35 @@
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The radio group's size. This size will be applied to the label, all child radios and radio buttons.",
+              "description": "The radio button's size.",
               "fieldName": "size"
             },
             {
-              "name": "required",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "fieldName": "required"
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "Disables the radio button.",
+              "fieldName": "disabled"
             },
             {
-              "name": "name",
+              "name": "visually-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "false",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
             },
             {
               "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
               "fieldName": "value"
             },
-            {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
-            },
             {
               "name": "dir",
               "type": {
@@ -15515,14 +15403,11 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/radio-group",
+          "summary": "Radio buttons allow the user to select a single option from a group using a button-like control.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/radio-button",
           "status": "stable",
-          "since": "1.20.0",
-          "dependencies": [
-            "sd-button-group"
-          ],
-          "tagName": "sd-radio-group",
+          "since": "1.36.0",
+          "tagName": "sd-radio-button",
           "customElement": true
         }
       ],
@@ -15531,88 +15416,80 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRadioGroup",
-            "module": "components/radio-group/radio-group.js"
+            "name": "SdRadioButton",
+            "module": "components/radio-button/radio-button.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-radio-group",
+          "name": "sd-radio-button",
           "declaration": {
-            "name": "SdRadioGroup",
-            "module": "components/radio-group/radio-group.js"
+            "name": "SdRadioButton",
+            "module": "components/radio-button/radio-button.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-button/radio-button.js",
+      "path": "components/radio-group/radio-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRadioButton",
+          "name": "SdRadioGroup",
           "cssProperties": [
             {
-              "description": "The background color of radio-button when checked.",
-              "name": "--sd-button--primary--default-color-background"
-            },
-            {
-              "description": "The text color of radio-button when checked.",
-              "name": "--sd-button--primary--default-color-text"
-            },
-            {
-              "description": "The background color of radio-button on hover when checked.",
-              "name": "--sd-button--primary--hover-color-background"
-            },
-            {
-              "description": "The border radius of the radio-button.",
-              "name": "--sd-radio-button-border-radius"
-            },
-            {
-              "description": "The text color of the radio-button.",
-              "name": "--sd-radio-button-color-text"
+              "description": "The border radius for radio button groups.",
+              "name": "--sd-radio-button-group-border-radius"
             },
             {
-              "description": "The background color of the radio-button on hover.",
-              "name": "--sd-radio-button--hover-color-background"
+              "description": "The border width for radio button groups.",
+              "name": "--sd-radio-button-group-border-width"
             },
             {
-              "description": "The font weight for the radio button.",
-              "name": "--sd-choice-control-font-weight"
+              "description": "The padding for radio button groups.",
+              "name": "--sd-radio-button-group-padding"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The form control that wraps the label, input, and error text.",
+              "name": "form-control"
             },
             {
-              "description": "The internal `<button>` element.",
-              "name": "button"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The internal button element when the radio button is checked.",
-              "name": "button--checked"
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The container that wraps the icon.",
-              "name": "icon"
+              "description": "The button group that wraps radio buttons.",
+              "name": "button-group"
             },
             {
-              "description": "The container that wraps the radio button's label.",
-              "name": "label"
+              "description": "The button group's `base` part.",
+              "name": "button-group__base"
             }
           ],
           "slots": [
             {
-              "description": "The radio button's label.",
+              "description": "The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.",
               "name": ""
             },
             {
-              "description": "A presentational icon.",
-              "name": "icon"
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            },
+            {
+              "description": "An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
             }
           ],
           "members": [
@@ -15623,59 +15500,138 @@
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The radio button's size.",
+              "description": "The radio group's size. This size will be applied to the label, all child radios and radio buttons.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio button.",
-              "attribute": "disabled",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "visuallyDisabled",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "description": "Move focus to the checked radio (or the first one if none are checked)"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "false",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
-              "reflects": true
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "attribute": "value"
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "setCustomValidity",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
+                  "name": "message",
+                  "default": "''"
                 }
               ],
-              "description": "Sets focus on the radio button."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the radio button."
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
               "kind": "field",
@@ -15758,12 +15714,16 @@
           ],
           "events": [
             {
-              "description": "Emitted when the button loses focus.",
-              "name": "sd-blur"
+              "description": "Emitted when the radio group's selected value changes.",
+              "name": "sd-change"
             },
             {
-              "description": "Emitted when the button gains focus.",
-              "name": "sd-focus"
+              "description": "Emitted when the radio group receives user input.",
+              "name": "sd-input"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "sd-invalid"
             }
           ],
           "attributes": [
@@ -15773,35 +15733,72 @@
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The radio button's size.",
+              "description": "The radio group's size. This size will be applied to the label, all child radios and radio buttons.",
               "fieldName": "size"
             },
             {
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio button.",
-              "fieldName": "disabled"
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "fieldName": "required"
             },
             {
-              "name": "visually-disabled",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "false",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
-              "fieldName": "visuallyDisabled"
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
               "name": "value",
               "type": {
                 "text": "string"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
               "fieldName": "value"
             },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
             {
               "name": "dir",
               "type": {
@@ -15831,11 +15828,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Radio buttons allow the user to select a single option from a group using a button-like control.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/radio-button",
+          "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/radio-group",
           "status": "stable",
-          "since": "1.36.0",
-          "tagName": "sd-radio-button",
+          "since": "1.20.0",
+          "dependencies": [
+            "sd-button-group"
+          ],
+          "tagName": "sd-radio-group",
           "customElement": true
         }
       ],
@@ -15844,16 +15844,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRadioButton",
-            "module": "components/radio-button/radio-button.js"
+            "name": "SdRadioGroup",
+            "module": "components/radio-group/radio-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-radio-button",
+          "name": "sd-radio-group",
           "declaration": {
-            "name": "SdRadioButton",
-            "module": "components/radio-button/radio-button.js"
+            "name": "SdRadioGroup",
+            "module": "components/radio-group/radio-group.js"
           }
         }
       ]
@@ -19392,13 +19392,17 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/tab-group/tab-group.js",
+      "path": "components/tab/tab.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdTabGroup",
+          "name": "SdTab",
           "cssProperties": [
+            {
+              "description": "The tab border radius on hover.",
+              "name": "--sd-navigable-border-radius:"
+            },
             {
               "description": "The tab current indicator height.",
               "name": "--sd-navigable__current-indicator-height:"
@@ -19406,54 +19410,50 @@
             {
               "description": "The tab current indicator border radius value.",
               "name": "--sd-navigable__current-indicator-border-radius:"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
             },
             {
-              "description": "The tab group's navigation container where tabs are slotted in.",
-              "name": "nav"
+              "description": "The background color when on hover state.",
+              "name": "--sd-tab--hover-color-background"
             },
             {
-              "description": "The container that wraps the tabs and active-tab-indicator.",
-              "name": "scroll-container"
+              "description": "The border color for the tab.",
+              "name": "--sd-tab-color-border"
             },
             {
-              "description": "The container that wraps the tabs.",
-              "name": "tabs"
+              "description": "The font weight for the active tab.",
+              "name": "--sd-choice-control-font-weight"
             },
             {
-              "description": "The line that separates tabs from panels.",
-              "name": "separation"
+              "description": "The text color for the active tab.",
+              "name": "--sd-tab--active-color-text"
             },
             {
-              "description": "The tab group's body where tab panels are slotted in.",
-              "name": "body"
-            },
+              "description": "The text color for the tabs.",
+              "name": "--sd-tab-color-text"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The starting scroll button.",
-              "name": "scroll-button--start"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The ending scroll button.",
-              "name": "scroll-button--end"
+              "description": "The active tab indicator.",
+              "name": "active-tab-indicator"
             },
             {
-              "description": "The scroll button's exported `base` part.",
-              "name": "scroll-button__base"
+              "description": "The bottom border that appears when the tab is hovered.",
+              "name": "hover-bottom-border"
             }
           ],
           "slots": [
             {
-              "description": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.",
+              "description": "The tab's label.",
               "name": ""
             },
             {
-              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.",
-              "name": "nav"
+              "description": "Optional element (eg. icon) positioned to the left of the label.",
+              "name": "left"
             }
           ],
           "members": [
@@ -19465,27 +19465,77 @@
             },
             {
               "kind": "field",
-              "name": "activation",
+              "name": "variant",
               "type": {
-                "text": "'auto' | 'manual'"
+                "text": "'default' | 'container'"
               },
-              "default": "'auto'",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "attribute": "activation",
+              "default": "'default'",
+              "description": "When set to container, a border appears around the current tab and tab-panel.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the tab in an active state.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the tab and prevents selection.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "visuallyDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the tab as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "panel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+              "attribute": "panel",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "show",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "panel",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "string"
+                    "text": "FocusOptions"
                   }
                 }
               ],
-              "description": "Shows the specified tab panel."
+              "description": "Sets focus to the tab."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the tab."
             },
             {
               "kind": "field",
@@ -19566,31 +19616,51 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'container'"
+              },
+              "default": "'default'",
+              "description": "When set to container, a border appears around the current tab and tab-panel.",
+              "fieldName": "variant"
+            },
             {
+              "name": "active",
               "type": {
-                "text": "{ name: String }"
+                "text": "boolean"
               },
-              "description": "Emitted when a tab is shown.",
-              "name": "sd-tab-show"
+              "default": "false",
+              "description": "Draws the tab in an active state.",
+              "fieldName": "active"
             },
             {
+              "name": "disabled",
               "type": {
-                "text": "{ name: String }"
+                "text": "boolean"
               },
-              "description": "Emitted when a tab is hidden.",
-              "name": "sd-tab-hide"
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Disables the tab and prevents selection.",
+              "fieldName": "disabled"
+            },
             {
-              "name": "activation",
+              "name": "visually-disabled",
               "type": {
-                "text": "'auto' | 'manual'"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "fieldName": "activation"
+              "default": "false",
+              "description": "Styles the tab as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
+            },
+            {
+              "name": "panel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+              "fieldName": "panel"
             },
             {
               "name": "dir",
@@ -19621,14 +19691,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Tab groups organize content into a container that shows one section at a time.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/tab-group",
+          "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/tab",
           "status": "stable",
           "since": "2.6.0",
           "dependencies": [
-            "sd-tab"
+            "sd-button"
           ],
-          "tagName": "sd-tab-group",
+          "tagName": "sd-tab",
           "customElement": true
         }
       ],
@@ -19637,33 +19707,29 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTabGroup",
-            "module": "components/tab-group/tab-group.js"
+            "name": "SdTab",
+            "module": "components/tab/tab.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-tab-group",
+          "name": "sd-tab",
           "declaration": {
-            "name": "SdTabGroup",
-            "module": "components/tab-group/tab-group.js"
+            "name": "SdTab",
+            "module": "components/tab/tab.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/tab/tab.js",
+      "path": "components/tab-group/tab-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdTab",
+          "name": "SdTabGroup",
           "cssProperties": [
-            {
-              "description": "The tab border radius on hover.",
-              "name": "--sd-navigable-border-radius:"
-            },
             {
               "description": "The tab current indicator height.",
               "name": "--sd-navigable__current-indicator-height:"
@@ -19671,50 +19737,54 @@
             {
               "description": "The tab current indicator border radius value.",
               "name": "--sd-navigable__current-indicator-border-radius:"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The background color when on hover state.",
-              "name": "--sd-tab--hover-color-background"
+              "description": "The tab group's navigation container where tabs are slotted in.",
+              "name": "nav"
             },
             {
-              "description": "The border color for the tab.",
-              "name": "--sd-tab-color-border"
+              "description": "The container that wraps the tabs and active-tab-indicator.",
+              "name": "scroll-container"
             },
             {
-              "description": "The font weight for the active tab.",
-              "name": "--sd-choice-control-font-weight"
+              "description": "The container that wraps the tabs.",
+              "name": "tabs"
             },
             {
-              "description": "The text color for the active tab.",
-              "name": "--sd-tab--active-color-text"
+              "description": "The line that separates tabs from panels.",
+              "name": "separation"
             },
             {
-              "description": "The text color for the tabs.",
-              "name": "--sd-tab-color-text"
-            }
-          ],
-          "cssParts": [
+              "description": "The tab group's body where tab panels are slotted in.",
+              "name": "body"
+            },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The starting scroll button.",
+              "name": "scroll-button--start"
             },
             {
-              "description": "The active tab indicator.",
-              "name": "active-tab-indicator"
+              "description": "The ending scroll button.",
+              "name": "scroll-button--end"
             },
             {
-              "description": "The bottom border that appears when the tab is hovered.",
-              "name": "hover-bottom-border"
+              "description": "The scroll button's exported `base` part.",
+              "name": "scroll-button__base"
             }
           ],
           "slots": [
             {
-              "description": "The tab's label.",
+              "description": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.",
               "name": ""
             },
             {
-              "description": "Optional element (eg. icon) positioned to the left of the label.",
-              "name": "left"
+              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.",
+              "name": "nav"
             }
           ],
           "members": [
@@ -19726,77 +19796,27 @@
             },
             {
               "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'default' | 'container'"
-              },
-              "default": "'default'",
-              "description": "When set to container, a border appears around the current tab and tab-panel.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the tab in an active state.",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the tab and prevents selection.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "visuallyDisabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Styles the tab as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "panel",
+              "name": "activation",
               "type": {
-                "text": "string"
+                "text": "'auto' | 'manual'"
               },
-              "default": "''",
-              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
-              "attribute": "panel",
+              "default": "'auto'",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "attribute": "activation",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "show",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "panel",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "string"
                   }
                 }
               ],
-              "description": "Sets focus to the tab."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the tab."
+              "description": "Shows the specified tab panel."
             },
             {
               "kind": "field",
@@ -19877,51 +19897,31 @@
               }
             }
           ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'default' | 'container'"
-              },
-              "default": "'default'",
-              "description": "When set to container, a border appears around the current tab and tab-panel.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the tab in an active state.",
-              "fieldName": "active"
-            },
+          "events": [
             {
-              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "{ name: String }"
               },
-              "default": "false",
-              "description": "Disables the tab and prevents selection.",
-              "fieldName": "disabled"
+              "description": "Emitted when a tab is shown.",
+              "name": "sd-tab-show"
             },
             {
-              "name": "visually-disabled",
               "type": {
-                "text": "boolean"
+                "text": "{ name: String }"
               },
-              "default": "false",
-              "description": "Styles the tab as if it was disabled and enables aria-disabled",
-              "fieldName": "visuallyDisabled"
-            },
+              "description": "Emitted when a tab is hidden.",
+              "name": "sd-tab-hide"
+            }
+          ],
+          "attributes": [
             {
-              "name": "panel",
+              "name": "activation",
               "type": {
-                "text": "string"
+                "text": "'auto' | 'manual'"
               },
-              "default": "''",
-              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
-              "fieldName": "panel"
+              "default": "'auto'",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "fieldName": "activation"
             },
             {
               "name": "dir",
@@ -19952,14 +19952,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/tab",
+          "summary": "Tab groups organize content into a container that shows one section at a time.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/tab-group",
           "status": "stable",
           "since": "2.6.0",
           "dependencies": [
-            "sd-button"
+            "sd-tab"
           ],
-          "tagName": "sd-tab",
+          "tagName": "sd-tab-group",
           "customElement": true
         }
       ],
@@ -19968,16 +19968,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTab",
-            "module": "components/tab/tab.js"
+            "name": "SdTabGroup",
+            "module": "components/tab-group/tab-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-tab",
+          "name": "sd-tab-group",
           "declaration": {
-            "name": "SdTab",
-            "module": "components/tab/tab.js"
+            "name": "SdTabGroup",
+            "module": "components/tab-group/tab-group.js"
           }
         }
       ]
@@ -22867,7 +22867,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.14.0",
+    "version": "6.15.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"