@solid-design-system/components 6.13.0 → 6.14.0

package/cdn/custom-elements.json

@@ -15,10 +15,6 @@
               "description": "The accordion border width.",
               "name": "--sd-accordion-border-width"
             },
-            {
-              "description": "The accordion background color.",
-              "name": "--sd-accordion-color-background"
-            },
             {
               "description": "The accordion color text.",
               "name": "--sd-accordion-color-text"
@@ -27,13 +23,17 @@
               "description": "The accordion vertical padding value.",
               "name": "--sd-accordion-padding-block"
             },
-            {
-              "description": "The accordion chevron color.",
-              "name": "--sd-accordion__chevron-color-text"
-            },
             {
               "description": "The accordion indicator color.",
               "name": "--sd-accordion__indicator-color"
+            },
+            {
+              "description": "The accordion icon color.",
+              "name": "--sd-accordion-color-icon-fill"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead.",
+              "name": "--sd-accordion__chevron-color-text"
             }
           ],
           "cssParts": [
@@ -321,6 +321,12 @@
           "kind": "class",
           "description": "",
           "name": "SdAccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The accordion border width.",
+              "name": "--sd-accordion-border-width"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -945,6 +951,20 @@
           "kind": "class",
           "description": "",
           "name": "SdAudio",
+          "cssProperties": [
+            {
+              "description": "The background color for the progress slider when the component is inverted.",
+              "name": "--sd-audio__slide-bar--inverted-color-background"
+            },
+            {
+              "description": "The background color for the active part of the progress slider when the component is inverted.",
+              "name": "--sd-audio__track-bar--inverted-color-background"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-color-text-neutral-700` instead.",
+              "name": "--sd-audio__timestamp-color-text"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -1551,6 +1571,10 @@
               "description": "The text color for the blue badge in its inverted state.",
               "name": "--sd-badge--blue--inverted-color-text"
             },
+            {
+              "description": "The background color for the blue badge in its standard state.",
+              "name": "--sd-badge--blue-color-background"
+            },
             {
               "description": "The background color for the green badge in its inverted state.",
               "name": "--sd-badge--green-color--inverted-background"
@@ -2035,6 +2059,10 @@
             {
               "description": "The color of the breadcrumb separators.",
               "name": "--sd-breadcrumb__separator-color"
+            },
+            {
+              "description": "The color of the current breadcrumb separators.",
+              "name": "--sd-breadcrumb__separator--current-color"
             }
           ],
           "cssParts": [
@@ -2475,22 +2503,6 @@
           "description": "",
           "name": "SdButton",
           "cssProperties": [
-            {
-              "description": "The background color for inverted buttons in disabled state.",
-              "name": "--sd-button--inverted--disabled-color-background"
-            },
-            {
-              "description": "The border color for inverted buttons in disabled state.",
-              "name": "--sd-button--inverted--disabled-color-border"
-            },
-            {
-              "description": "The text color for inverted buttons in disabled state.",
-              "name": "--sd-button--inverted--disabled-color-text"
-            },
-            {
-              "description": "The background color for inverted buttons in active state.",
-              "name": "--sd-button--inverted--active-color-background"
-            },
             {
               "description": "The text color for primary buttons in active state.",
               "name": "--sd-button--primary--active-color-text"
@@ -2508,8 +2520,8 @@
               "name": "--sd-button--primary--hover-color-background"
             },
             {
-              "description": "The text color for inverted primary buttons in active state.",
-              "name": "--sd-button--primary--inverted--active-color-text"
+              "description": "The text color for primary buttons in hover state.",
+              "name": "--sd-button--primary--hover-color-text"
             },
             {
               "description": "The background color for inverted primary buttons in default state.",
@@ -2527,61 +2539,113 @@
               "description": "The text color for inverted primary buttons in hover state.",
               "name": "--sd-button--primary--inverted--hover-color-text"
             },
+            {
+              "description": "The text color for inverted primary buttons in active state.",
+              "name": "--sd-button--primary--inverted--active-color-text"
+            },
+            {
+              "description": "The background color for inverted primary buttons in active state.",
+              "name": "--sd-button--primary--inverted--active-color-background"
+            },
+            {
+              "description": "The text color for secondary buttons in default state.",
+              "name": "--sd-button--secondary--default-color-text"
+            },
+            {
+              "description": "The text color for secondary buttons in disabled state.",
+              "name": "--sd-button--secondary--disabled-color-text"
+            },
+            {
+              "description": "The text color for secondary buttons in active state.",
+              "name": "--sd-button--secondary--active-color-text"
+            },
             {
               "description": "The background color for secondary buttons in active state.",
               "name": "--sd-button--secondary--active-color-background"
             },
             {
-              "description": "The background color for secondary buttons in hover state.",
-              "name": "--sd-button--secondary--hover-color-background"
+              "description": "The border color for inverted secondary buttons.",
+              "name": "--sd-button--secondary--inverted-color-border"
             },
             {
-              "description": "The background color for inverted secondary buttons in active state.",
-              "name": "--sd-button--secondary--inverted--active-color-background"
+              "description": "The text color for inverted secondary buttons.",
+              "name": "--sd-button--secondary--inverted-color-text"
             },
             {
               "description": "The text color for inverted secondary buttons in hover state.",
               "name": "--sd-button--secondary--inverted--hover-color-text"
             },
             {
-              "description": "The border color for inverted secondary buttons.",
-              "name": "--sd-button--secondary--inverted--color-border"
+              "description": "The background color for inverted secondary buttons in hover state.",
+              "name": "--sd-button--secondary--inverted--hover-color-background"
             },
             {
-              "description": "The text color for secondary buttons in disabled state.",
-              "name": "--sd-button--secondary--disabled-color-text"
+              "description": "The background color for inverted secondary buttons in active state.",
+              "name": "--sd-button--secondary--inverted--active-color-background"
             },
             {
-              "description": "The text color for tertiary buttons in disabled state.",
-              "name": "--sd-button--tertiary--disabled-color-text"
+              "description": "The text color for inverted secondary buttons in active state.",
+              "name": "--sd-button--secondary--inverted--active-color-text"
             },
             {
-              "description": "The background color for tertiary buttons in active state.",
-              "name": "--sd-button--tertiary--active-color-background"
+              "description": "The small secondary button vertical padding value.",
+              "name": "--sd-button--secondary--size-sm-padding-block"
+            },
+            {
+              "description": "The medium secondary button vertical padding value.",
+              "name": "--sd-button--secondary--size-md-padding-block"
+            },
+            {
+              "description": "The large secondary button vertical padding value.",
+              "name": "--sd-button--secondary--size-lg-padding-block"
+            },
+            {
+              "description": "The background color for secondary buttons in hover state.",
+              "name": "--sd-button--secondary--hover-color-background"
+            },
+            {
+              "description": "The horizontal padding for secondary buttons.",
+              "name": "--sd-button--secondary-padding-inline"
+            },
+            {
+              "description": "The text color for tertiary buttons in default state.",
+              "name": "--sd-button--tertiary--default-color-text"
             },
             {
               "description": "The background color for tertiary buttons in hover state.",
               "name": "--sd-button--tertiary--hover-color-background"
             },
             {
-              "description": "The background color for inverted tertiary buttons in hover state.",
-              "name": "--sd-button--tertiary--inverted--hover-color-background"
+              "description": "The text color for tertiary buttons in disabled state.",
+              "name": "--sd-button--tertiary--disabled-color-text"
+            },
+            {
+              "description": "The text color for tertiary buttons in active state.",
+              "name": "--sd-button--tertiary--active-color-text"
+            },
+            {
+              "description": "The background color for tertiary buttons in active state.",
+              "name": "--sd-button--tertiary--active-color-background"
+            },
+            {
+              "description": "The text color for inverted tertiary buttons.",
+              "name": "--sd-button--tertiary--inverted-color-text"
             },
             {
               "description": "The background color for inverted tertiary buttons in active state.",
               "name": "--sd-button--tertiary--inverted--active-color-background"
             },
             {
-              "description": "The text color for secondary buttons in default state.",
-              "name": "--sd-button--secondary--default-color-text"
+              "description": "The text color for inverted tertiary buttons in active state.",
+              "name": "--sd-button--tertiary--inverted--active-color-text"
             },
             {
-              "description": "The text color for inverted tertiary buttons in hover state.",
-              "name": "--sd-button--tertiary--inverted--hover-color-text"
+              "description": "The background color for inverted tertiary buttons in hover state.",
+              "name": "--sd-button--tertiary--inverted--hover-color-background"
             },
             {
-              "description": "The text color for tertiary buttons in default state.",
-              "name": "--sd-button--tertiary--default-color-text"
+              "description": "The text color for inverted tertiary buttons in hover state.",
+              "name": "--sd-button--tertiary--inverted--hover-color-text"
             },
             {
               "description": "The background color for inverted CTA buttons in default state.",
@@ -2608,44 +2672,84 @@
               "name": "--sd-button--cta--inverted--active-color-background"
             },
             {
-              "description": "The small button border radius.",
-              "name": "--sd-button--size-sm-font-size"
+              "description": "The background color for inverted buttons in disabled state.",
+              "name": "--sd-button--inverted--disabled-color-background"
             },
             {
-              "description": "The medium button text font size.",
-              "name": "--sd-button--size-md-font-size"
+              "description": "The border color for inverted buttons in disabled state.",
+              "name": "--sd-button--inverted--disabled-color-border"
+            },
+            {
+              "description": "The text color for inverted buttons in disabled state.",
+              "name": "--sd-button--inverted--disabled-color-text"
             },
             {
               "description": "The large button text font size.",
               "name": "--sd-button--size-lg-font-size"
             },
             {
-              "description": "The small button border radius.",
-              "name": "--sd-button--size-sm-border-radius"
+              "description": "The height for large icon-only and loading buttons.",
+              "name": "--sd-button--size-lg-height"
             },
             {
-              "description": "The medium button border radius.",
-              "name": "--sd-button--size-md-border-radius"
+              "description": "The height for icons in large buttons.",
+              "name": "--sd-button--size-lg-icon-height"
             },
             {
-              "description": "The large button border radius.",
-              "name": "--sd-button--size-lg-border-radius"
+              "description": "The large button vertical padding value.",
+              "name": "--sd-button--size-lg-padding-block"
             },
             {
-              "description": "The small button vertical padding value.",
-              "name": "--sd-button--size-sm-padding-block"
+              "description": "The medium button horizontal padding value for icon-only buttons.",
+              "name": "--sd-button--size-md--icon-only-padding-inline"
+            },
+            {
+              "description": "The medium button text font size.",
+              "name": "--sd-button--size-md-font-size"
+            },
+            {
+              "description": "The height for medium icon-only and loading buttons.",
+              "name": "--sd-button--size-md-height"
             },
             {
               "description": "The medium button vertical padding value.",
               "name": "--sd-button--size-md-padding-block"
             },
             {
-              "description": "The large button vertical padding value.",
-              "name": "--sd-button--size-lg-padding-block"
+              "description": "The small button font size.",
+              "name": "--sd-button--size-sm-font-size"
+            },
+            {
+              "description": "The small button vertical padding value.",
+              "name": "--sd-button--size-sm-padding-block"
+            },
+            {
+              "description": "The border radius for buttons.",
+              "name": "--sd-button-border-radius"
+            },
+            {
+              "description": "The border width for secondary buttons with borders.",
+              "name": "--sd-button-border-width"
             },
             {
               "description": "The text font weight for buttons.",
               "name": "--sd-button-font-weight"
+            },
+            {
+              "description": "The horizontal padding for buttons.",
+              "name": "--sd-button-padding-inline"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-button-border-radius` instead.",
+              "name": "--sd-button--size-sm-border-radius"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-button-border-radius` instead.",
+              "name": "--sd-button--size-md-border-radius"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-button-border-radius` instead.",
+              "name": "--sd-button--size-lg-border-radius"
             }
           ],
           "cssParts": [
@@ -4220,242 +4324,78 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
+      "path": "components/checkbox-group/checkbox-group.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"
-            },
+          "name": "SdCheckboxGroup",
+          "slots": [
             {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
+              "description": "The default slot where `<sd-checkbox>` elements are placed.",
+              "name": ""
             },
             {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
+              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "The indeterminate icon, an `<sd-icon>` element.",
-              "name": "indeterminate-icon"
+              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
             },
             {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'lg' | 'md' | 'sm'"
               },
-              "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",
+              "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": "name",
+              "name": "orientation",
               "type": {
-                "text": "string"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name",
+              "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": "value",
+              "name": "label",
               "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",
+              "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": "disabled",
+              "name": "helpText",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
+              "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": "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",
+              "name": "dir",
               "type": {
                 "text": "'ltr' | 'rtl' | 'auto'"
               },
@@ -4532,113 +4472,42 @@
               }
             }
           ],
-          "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'"
+                "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The checkbox's size.",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
               "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",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "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"
+              "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": "form",
+              "name": "label",
               "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"
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
             },
             {
-              "name": "required",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "fieldName": "required"
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             },
             {
               "name": "dir",
@@ -4669,14 +4538,11 @@
             "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",
+          "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",
-          "dependencies": [
-            "sd-icon"
-          ],
-          "tagName": "sd-checkbox",
+          "tagName": "sd-checkbox-group",
           "customElement": true
         }
       ],
@@ -4685,283 +4551,72 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-checkbox",
+          "name": "sd-checkbox-group",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox-group/checkbox-group.js",
+      "path": "components/combobox/combobox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdCheckboxGroup",
-          "slots": [
+          "name": "SdCombobox",
+          "cssProperties": [
             {
-              "description": "The default slot where `<sd-checkbox>` elements are placed.",
-              "name": ""
+              "description": "Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\"",
+              "name": "--tag-max-width"
             },
             {
-              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
-            {
-              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
-            },
-            {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "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.",
-              "attribute": "size",
-              "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 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": "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": "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"
-              }
+              "description": "The background color for form controls in invalid state.",
+              "name": "--sd-form-control--invalid-color-background"
             },
             {
-              "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"
-              }
+              "description": "The text color for form controls.",
+              "name": "--sd-form-control-color-text"
             },
             {
-              "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"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "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": "The border radius for form controls.",
+              "name": "--sd-form-control-border-radius"
             },
             {
-              "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": "The border color for default and readonly form controls.",
+              "name": "--sd-form-control-color-border"
             },
             {
-              "name": "label",
-              "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 text color for the floating label when the input is filled.",
+              "name": "--sd-form-control--filled__floating-label-color-text"
             },
             {
-              "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": "The border radius for the bottom left corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-bottom-left-radius"
             },
             {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
+              "description": "The border radius for the bottom right corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-bottom-right-radius"
             },
             {
-              "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": "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"
+              "description": "The border radius for the top left corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-top-left-radius"
             },
             {
-              "description": "The background color for form controls in invalid state.",
-              "name": "--sd-form-control--invalid-color-background"
+              "description": "The border radius for the top right corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-top-right-radius"
             },
             {
-              "description": "The text color for form controls.",
-              "name": "--sd-form-control-color-text"
+              "description": "The border width for the tags for multiple options combobox.",
+              "name": "--sd-combobox__tag-border-width"
             }
           ],
           "cssParts": [
@@ -6085,27 +5740,508 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/datepicker/datepicker.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdDatepicker",
-          "members": [
+          "name": "SdCheckbox",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)",
-              "description": "Localize controller used to fetch localized terms/labels."
+              "description": "The border width of the checkbox.",
+              "name": "--sd-checkbox-border-width"
             },
             {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en-US'",
+              "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"
+              }
+            },
+            {
+              "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": "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
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-checkbox",
+          "declaration": {
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/datepicker/datepicker.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdDatepicker",
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)",
+              "description": "Localize controller used to fetch localized terms/labels."
+            },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en-US'",
               "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
               "attribute": "locale",
               "reflects": true
@@ -7739,6 +7875,10 @@
             {
               "description": "The border color of the dropdown panel.",
               "name": "--sd-panel-color-border"
+            },
+            {
+              "description": "The background color of the dropdown panel.",
+              "name": "--sd-dropdown-color-background"
             }
           ],
           "cssParts": [
@@ -8487,6 +8627,10 @@
             {
               "description": "Use this property to set the height of the flipcard.",
               "name": "--height"
+            },
+            {
+              "description": "The color used in the gradient of the flipcard when the `gradient-dark` variant is used. By default, it uses the `--sd-color-primary-800` color.",
+              "name": "--sd-informational-gradient--primary-800-color-background"
             }
           ],
           "cssParts": [
@@ -8824,6 +8968,22 @@
             {
               "description": "The background color of the header.",
               "name": "--sd-header-color-background"
+            },
+            {
+              "description": "padding bottom of the header content",
+              "name": "--sd-header-padding-bottom"
+            },
+            {
+              "description": "the background color of the underlined background",
+              "name": "--sd-header__underline-color-background"
+            },
+            {
+              "description": "height of the underlined header",
+              "name": "--sd-header__underline-height"
+            },
+            {
+              "description": "height of the shadow when the header is fixed",
+              "name": "--sd-header__shadow-height"
             }
           ],
           "cssParts": [
@@ -9784,7 +9944,11 @@
             },
             {
               "description": "The icon color for form controls.",
-              "name": "--sd-form-control-color-icon"
+              "name": "--sd-form-control-color-icon-fill"
+            },
+            {
+              "description": "The border radius for form controls.",
+              "name": "--sd-form-control-border-radius"
             }
           ],
           "cssParts": [
@@ -10825,6 +10989,10 @@
             {
               "description": "The link's text color when active.",
               "name": "--sd-interactive--active-color-text"
+            },
+            {
+              "description": "The default link's text color.",
+              "name": "--sd-interactive--default-color-text"
             }
           ],
           "cssParts": [
@@ -11352,6 +11520,38 @@
             {
               "description": "The default icon fill color for map marker clusters.",
               "name": "--sd-map-marker-cluster-color-icon-fill"
+            },
+            {
+              "description": "The text color for map marker clusters in hovered state.",
+              "name": "--sd-map-marker-cluster--hovered-color-text"
+            },
+            {
+              "description": "The default background color for map marker clusters.",
+              "name": "--sd-map-marker--cluster--default-color-background"
+            },
+            {
+              "description": "The background color for map marker clusters in hover state.",
+              "name": "--sd-map-marker--cluster--hover-color-background"
+            },
+            {
+              "description": "The text color for map marker clusters.",
+              "name": "--sd-map-marker--cluster-color-text"
+            },
+            {
+              "description": "The background color for main map markers.",
+              "name": "--sd-map-marker--main-color-background"
+            },
+            {
+              "description": "The default background color for place map markers.",
+              "name": "--sd-map-marker--pin--default-color-background"
+            },
+            {
+              "description": "The background color for place map markers in hover state.",
+              "name": "--sd-map-marker--pin--hover-color-background"
+            },
+            {
+              "description": "The text color for place map markers.",
+              "name": "--sd-map-marker--pin-color-text"
             }
           ],
           "cssParts": [
@@ -11597,212 +11797,16 @@
               },
               "description": "Tells the browser where to open the link. Only used when `href` is present.",
               "fieldName": "target"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Only relevant when map-marker is interactive.\nWhen set, it will be used to announce the name of the map-marker to screenreaders,\notherwise, screenreaders will announce the content inside the default slot.",
-              "fieldName": "label"
-            },
-            {
-              "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": "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",
-          "cssProperties": [
-            {
-              "description": "The default icon color for menu items.",
-              "name": "--sd-menu-color-icon"
-            },
-            {
-              "description": "The default text color for menu items.",
-              "name": "--sd-menu-color-text"
-            },
-            {
-              "description": "The icon color for disabled menu items.",
-              "name": "--sd-menu--disabled-color-icon"
-            },
-            {
-              "description": "The text color for disabled menu items.",
-              "name": "--sd-menu--disabled-color-text"
-            }
-          ],
-          "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": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Only relevant when map-marker is interactive.\nWhen set, it will be used to announce the name of the map-marker to screenreaders,\notherwise, screenreaders will announce the content inside the default slot.",
+              "fieldName": "label"
+            },
             {
               "name": "dir",
               "type": {
@@ -11827,7 +11831,17 @@
                 "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
         }
       ],
       "exports": [
@@ -11835,16 +11849,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdMenu",
-            "module": "components/menu/menu.js"
+            "name": "SdMapMarker",
+            "module": "components/map-marker/map-marker.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-menu",
+          "name": "sd-map-marker",
           "declaration": {
-            "name": "SdMenu",
-            "module": "components/menu/menu.js"
+            "name": "SdMapMarker",
+            "module": "components/map-marker/map-marker.js"
           }
         }
       ]
@@ -11865,6 +11879,38 @@
             {
               "description": "The menu-item border radius on hover.",
               "name": "--sd-navigable-border-radius"
+            },
+            {
+              "description": "The default icon color for menu items.",
+              "name": "--sd-menu-item-color-icon-fill"
+            },
+            {
+              "description": "The default text color for menu items.",
+              "name": "--sd-menu-item-color-text"
+            },
+            {
+              "description": "The icon color for disabled menu items.",
+              "name": "--sd-menu-item--disabled-color-icon-fill"
+            },
+            {
+              "description": "The text color for disabled menu items.",
+              "name": "--sd-menu-item--disabled-color-text"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-menu-item-color-icon-fill` instead.",
+              "name": "--sd-menu-color-icon"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-menu-item-color-text` instead.",
+              "name": "--sd-menu-color-text"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-menu-item--disabled-color-icon-fill` instead.",
+              "name": "--sd-menu--disabled-color-icon"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-menu-item--disabled-color-text` instead.",
+              "name": "--sd-menu--disabled-color-text"
             }
           ],
           "cssParts": [
@@ -12135,38 +12181,206 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdMenuItem",
-            "module": "components/menu-item/menu-item.js"
+            "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": "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": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdMenu",
+            "module": "components/menu/menu.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",
+          "name": "sd-menu",
           "declaration": {
-            "name": "SubmenuController",
-            "module": "components/menu-item/submenu-controller.js"
+            "name": "SdMenu",
+            "module": "components/menu/menu.js"
           }
         }
       ]
@@ -12180,10 +12394,6 @@
           "description": "",
           "name": "SdNavigationItem",
           "cssProperties": [
-            {
-              "description": "The navigation-item text color when current state.",
-              "name": "--sd-navigation-item--current-color-text"
-            },
             {
               "description": "The navigation-item text color.",
               "name": "--sd-navigation-item-color-text"
@@ -12207,6 +12417,10 @@
             {
               "description": "The vertical navigation-item current indicator width.",
               "name": "--sd-navigable__current-indicator-width"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-navigation-item-color-text` instead.",
+              "name": "--sd-navigation-item--current-color-text"
             }
           ],
           "cssParts": [
@@ -12679,6 +12893,10 @@
             {
               "description": "the border color of notifications.",
               "name": "--sd-notification-color-border"
+            },
+            {
+              "description": "The background color for the duration indicator.",
+              "name": "--sd-notification__duration-indicator-color-background"
             }
           ],
           "cssParts": [
@@ -13261,7 +13479,15 @@
           "name": "SdOption",
           "cssProperties": [
             {
-              "description": "The border color of checkboxes for the disabled options.",
+              "description": "The border color of checkboxes for the non-disabled options.",
+              "name": "--sd-form-control-color-border"
+            },
+            {
+              "description": "The border width of the checkboxes.",
+              "name": "--sd-checkbox-border-width"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-color-border-neutral-500` instead.",
               "name": "--sd-option--disabled-color-border"
             }
           ],
@@ -14145,40 +14371,40 @@
               }
             },
             {
-              "description": "The accordion background color.",
-              "name": "--sd-accordion-color-background",
+              "description": "The accordion color text.",
+              "name": "--sd-accordion-color-text",
               "inheritedFrom": {
                 "name": "SdAccordion",
                 "module": "src/components/accordion/accordion.ts"
               }
             },
             {
-              "description": "The accordion color text.",
-              "name": "--sd-accordion-color-text",
+              "description": "The accordion vertical padding value.",
+              "name": "--sd-accordion-padding-block",
               "inheritedFrom": {
                 "name": "SdAccordion",
                 "module": "src/components/accordion/accordion.ts"
               }
             },
             {
-              "description": "The accordion vertical padding value.",
-              "name": "--sd-accordion-padding-block",
+              "description": "The accordion indicator color.",
+              "name": "--sd-accordion__indicator-color",
               "inheritedFrom": {
                 "name": "SdAccordion",
                 "module": "src/components/accordion/accordion.ts"
               }
             },
             {
-              "description": "The accordion chevron color.",
-              "name": "--sd-accordion__chevron-color-text",
+              "description": "The accordion icon color.",
+              "name": "--sd-accordion-color-icon-fill",
               "inheritedFrom": {
                 "name": "SdAccordion",
                 "module": "src/components/accordion/accordion.ts"
               }
             },
             {
-              "description": "The accordion indicator color.",
-              "name": "--sd-accordion__indicator-color",
+              "description": "This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead.",
+              "name": "--sd-accordion__chevron-color-text",
               "inheritedFrom": {
                 "name": "SdAccordion",
                 "module": "src/components/accordion/accordion.ts"
@@ -14893,64 +15119,64 @@
     },
     {
       "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 for radio button groups.",
+              "name": "--sd-radio-button-group-border-radius"
             },
             {
-              "description": "The border radius of the radio-button.",
-              "name": "--sd-radio-button-border-radius"
+              "description": "The border width for radio button groups.",
+              "name": "--sd-radio-button-group-border-width"
             },
             {
-              "description": "The text color of the radio-button.",
-              "name": "--sd-radio-button-color-text"
+              "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": [
@@ -14961,30 +15187,63 @@
                 "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": "false",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
+              "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
             },
             {
@@ -14993,27 +15252,73 @@
               "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.",
               "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",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
+              "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": "Sets focus on the radio button."
+              },
+              "description": "Gets the associated form, if one exists."
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the radio button."
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "default": "''"
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
               "kind": "field",
@@ -15096,12 +15401,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 radio group receives user input.",
+              "name": "sd-input"
             },
             {
-              "description": "Emitted when the button gains focus.",
-              "name": "sd-focus"
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "sd-invalid"
             }
           ],
           "attributes": [
@@ -15111,35 +15420,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": {
@@ -15169,11 +15515,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
         }
       ],
@@ -15182,80 +15531,88 @@
           "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"
           }
         }
       ]
     },
     {
       "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": [
@@ -15266,63 +15623,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
             },
             {
@@ -15331,73 +15655,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",
@@ -15480,16 +15758,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": [
@@ -15499,72 +15773,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": {
@@ -15594,14 +15831,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
         }
       ],
@@ -15610,16 +15844,16 @@
           "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"
           }
         }
       ]
@@ -16845,6 +17079,26 @@
             {
               "description": "The text color for form controls.",
               "name": "--sd-form-control-color-text"
+            },
+            {
+              "description": "The border radius for the select's input.",
+              "name": "--sd-form-control-border-radius"
+            },
+            {
+              "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"
             }
           ],
           "cssParts": [
@@ -17632,6 +17886,12 @@
           "kind": "class",
           "description": "",
           "name": "SdSkeleton",
+          "cssProperties": [
+            {
+              "description": "The color of the skeleton.",
+              "name": "--sd-skeleton-color"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -17988,6 +18248,10 @@
             {
               "description": "The border width of the step tail.",
               "name": "--sd-step__tail-border-width"
+            },
+            {
+              "description": "The color text for non-interactive steps.",
+              "name": "--sd-step-color-text"
             }
           ],
           "cssParts": [
@@ -19128,17 +19392,13 @@
     },
     {
       "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:"
@@ -19146,14 +19406,6 @@
             {
               "description": "The tab current indicator border radius value.",
               "name": "--sd-navigable__current-indicator-border-radius:"
-            },
-            {
-              "description": "The background color when on hover state.",
-              "name": "--sd-color-background"
-            },
-            {
-              "description": "The border color for the tab.",
-              "name": "--sd-tab-color-border"
             }
           ],
           "cssParts": [
@@ -19162,22 +19414,46 @@
               "name": "base"
             },
             {
-              "description": "The active tab indicator.",
-              "name": "active-tab-indicator"
+              "description": "The tab group's navigation container where tabs are slotted in.",
+              "name": "nav"
             },
             {
-              "description": "The bottom border that appears when the tab is hovered.",
-              "name": "hover-bottom-border"
+              "description": "The container that wraps the tabs and active-tab-indicator.",
+              "name": "scroll-container"
+            },
+            {
+              "description": "The container that wraps the tabs.",
+              "name": "tabs"
+            },
+            {
+              "description": "The line that separates tabs from panels.",
+              "name": "separation"
+            },
+            {
+              "description": "The tab group's body where tab panels are slotted in.",
+              "name": "body"
+            },
+            {
+              "description": "The starting scroll button.",
+              "name": "scroll-button--start"
+            },
+            {
+              "description": "The ending scroll button.",
+              "name": "scroll-button--end"
+            },
+            {
+              "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": [
@@ -19189,77 +19465,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",
@@ -19339,52 +19565,32 @@
                 "module": "internal/solid-element.js"
               }
             }
-          ],
-          "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",
@@ -19415,14 +19621,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
         }
       ],
@@ -19431,29 +19637,33 @@
           "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"
           }
         }
       ]
     },
     {
       "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:"
@@ -19461,54 +19671,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": [
@@ -19520,27 +19726,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",
@@ -19621,31 +19877,51 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "variant",
               "type": {
-                "text": "{ name: String }"
+                "text": "'default' | 'container'"
               },
-              "description": "Emitted when a tab is shown.",
-              "name": "sd-tab-show"
+              "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 hidden.",
-              "name": "sd-tab-hide"
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Draws the tab in an active state.",
+              "fieldName": "active"
+            },
             {
-              "name": "activation",
+              "name": "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": "Disables the tab and prevents selection.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "visually-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "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",
@@ -19676,14 +19952,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
         }
       ],
@@ -19692,16 +19968,16 @@
           "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"
           }
         }
       ]
@@ -19962,10 +20238,6 @@
               "description": "The border width for selected tags.",
               "name": "--sd-tag--selected-border-width"
             },
-            {
-              "description": "The border color for disabled tags.",
-              "name": "--sd-tag--disabled-color-border"
-            },
             {
               "description": "The border radius for tags.",
               "name": "--sd-tag-border-radius"
@@ -19980,6 +20252,18 @@
             },
             {
               "description": "The font weight for tags.",
+              "name": "--sd-choice-control-font-weight"
+            },
+            {
+              "description": "The text color for disabled tags.",
+              "name": "--sd-tag--disabled-color-text"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-color-border-neutral-500` instead.",
+              "name": "--sd-tag--disabled-color-border"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-choice-control-font-weight` instead.",
               "name": "--sd-tag-font-weight"
             }
           ],
@@ -20391,6 +20675,10 @@
             {
               "description": "The background color for primary‑100 teasers.",
               "name": "--sd-teaser--primary-100-color-background"
+            },
+            {
+              "description": "The border radius for teasers.",
+              "name": "--sd-teaser-border-radius"
             }
           ],
           "cssParts": [
@@ -20663,6 +20951,14 @@
           "description": "",
           "name": "SdTeaserMedia",
           "cssProperties": [
+            {
+              "description": "The background color for white teaser media in hover state.",
+              "name": "--sd-teaser-media--white--hover-color-background"
+            },
+            {
+              "description": "The default background color for white teaser media.",
+              "name": "--sd-teaser-media--white-color-background"
+            },
             {
               "description": "The background color for neutral‑100 teaser media in hover state.",
               "name": "--sd-teaser-media--neutral-100--hover-color-background"
@@ -20929,6 +21225,14 @@
             {
               "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 floating label text color.",
+              "name": "--sd-form-control--filled__floating-label-color-text"
             }
           ],
           "cssParts": [
@@ -22563,7 +22867,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.13.0",
+    "version": "6.14.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"