@solid-design-system/components 6.14.1 → 6.15.0

package/dist/custom-elements.json

@@ -3370,6 +3370,191 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/button-group/button-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdButtonGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `<sd-button>` elements to display in the button group.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "disableRole",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label",
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "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": "Button groups can be used to group related buttons into sections.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/button-group",
+          "status": "stable",
+          "since": "1.0",
+          "tagName": "sd-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdButtonGroup",
+            "module": "components/button-group/button-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-button-group",
+          "declaration": {
+            "name": "SdButtonGroup",
+            "module": "components/button-group/button-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/carousel/autoplay-controller.js",
@@ -4139,280 +4324,95 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdButtonGroup",
+          "name": "SdCheckbox",
+          "cssProperties": [
+            {
+              "description": "The border width of the checkbox.",
+              "name": "--sd-checkbox-border-width"
+            },
+            {
+              "description": "The color border for form controls.",
+              "name": "--sd-form-control-color-border"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
+            },
+            {
+              "description": "The checked icon, an `<sd-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The indeterminate icon, an `<sd-icon>` element.",
+              "name": "indeterminate-icon"
+            },
+            {
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
             }
           ],
           "slots": [
             {
-              "description": "One or more `<sd-button>` elements to display in the button group.",
+              "description": "The checkbox's label.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "disableRole",
+              "name": "title",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "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": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "attribute": "label",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "dir",
+              "name": "value",
               "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
+                "text": "string"
               },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "lang",
+              "name": "size",
               "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"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "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": "Button groups can be used to group related buttons into sections.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/button-group",
-          "status": "stable",
-          "since": "1.0",
-          "tagName": "sd-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-button-group",
-          "declaration": {
-            "name": "SdButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdCheckbox",
-          "cssProperties": [
-            {
-              "description": "The border width of the checkbox.",
-              "name": "--sd-checkbox-border-width"
-            },
-            {
-              "description": "The color border for form controls.",
-              "name": "--sd-form-control-color-border"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
-            },
-            {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
-            },
-            {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
-            },
-            {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The indeterminate icon, an `<sd-icon>` element.",
-              "name": "indeterminate-icon"
-            },
-            {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
-              "attribute": "title",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "'sm' | 'md' | 'lg'"
               },
               "default": "'lg'",
               "description": "The checkbox's size.",
@@ -6941,231 +6941,34 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/divider/divider.js",
+      "path": "components/dialog/dialog.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdDivider",
+          "name": "SdDialog",
           "cssProperties": [
             {
-              "description": "The border color for dividers in inverted state.",
-              "name": "--sd-divider--inverted-color-border"
+              "description": "The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.",
+              "name": "--width"
+            },
+            {
+              "description": "The border color of the dialog panel.",
+              "name": "--sd-panel-color-border"
+            },
+            {
+              "description": "The background color of the dialog overlay.",
+              "name": "--sd-overlay-color-background"
             }
           ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            }
-          ],
-          "members": [
+            },
             {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "description": "Determines the orientation of the divider.",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This inverts the divider.",
-              "attribute": "inverted",
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "description": "Determines the orientation of the divider.",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This inverts the divider.",
-              "fieldName": "inverted"
-            },
-            {
-              "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": "Dividers are used to visually separate or group elements.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/divider",
-          "status": "stable",
-          "since": "1.0",
-          "tagName": "sd-divider",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdDivider",
-            "module": "components/divider/divider.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-divider",
-          "declaration": {
-            "name": "SdDivider",
-            "module": "components/divider/divider.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/dialog/dialog.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdDialog",
-          "cssProperties": [
-            {
-              "description": "The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.",
-              "name": "--width"
-            },
-            {
-              "description": "The border color of the dialog panel.",
-              "name": "--sd-panel-color-border"
-            },
-            {
-              "description": "The background color of the dialog overlay.",
-              "name": "--sd-overlay-color-background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The overlay that covers the screen behind the dialog.",
-              "name": "overlay"
+              "description": "The overlay that covers the screen behind the dialog.",
+              "name": "overlay"
             },
             {
               "description": "The dialog's panel (where the dialog and its content are rendered).",
@@ -7480,45 +7283,242 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/drawer/drawer.js",
+      "path": "components/divider/divider.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdDrawer",
+          "name": "SdDivider",
           "cssProperties": [
             {
-              "description": "The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.",
-              "name": "--width"
-            },
-            {
-              "description": "The border color of the drawer panel.",
-              "name": "--sd-panel-color-border"
-            },
-            {
-              "description": "The background color of the drawer overlay.",
-              "name": "--sd-overlay-color-background"
+              "description": "The border color for dividers in inverted state.",
+              "name": "--sd-divider--inverted-color-border"
             }
           ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Determines the orientation of the divider.",
+              "attribute": "orientation",
+              "reflects": true
             },
             {
-              "description": "The overlay that covers the screen behind the drawer.",
-              "name": "overlay"
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This inverts the divider.",
+              "attribute": "inverted",
+              "reflects": true
             },
             {
-              "description": "The drawer's panel (where the drawer and its content are rendered).",
-              "name": "panel"
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             },
             {
-              "description": "The drawer's header. This element wraps the title and the close-button.",
-              "name": "header"
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             },
             {
-              "description": "The drawer's title.",
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Determines the orientation of the divider.",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This inverts the divider.",
+              "fieldName": "inverted"
+            },
+            {
+              "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": "Dividers are used to visually separate or group elements.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/divider",
+          "status": "stable",
+          "since": "1.0",
+          "tagName": "sd-divider",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdDivider",
+            "module": "components/divider/divider.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-divider",
+          "declaration": {
+            "name": "SdDivider",
+            "module": "components/divider/divider.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/drawer/drawer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdDrawer",
+          "cssProperties": [
+            {
+              "description": "The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.",
+              "name": "--width"
+            },
+            {
+              "description": "The border color of the drawer panel.",
+              "name": "--sd-panel-color-border"
+            },
+            {
+              "description": "The background color of the drawer overlay.",
+              "name": "--sd-overlay-color-background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The overlay that covers the screen behind the drawer.",
+              "name": "overlay"
+            },
+            {
+              "description": "The drawer's panel (where the drawer and its content are rendered).",
+              "name": "panel"
+            },
+            {
+              "description": "The drawer's header. This element wraps the title and the close-button.",
+              "name": "header"
+            },
+            {
+              "description": "The drawer's title.",
               "name": "title"
             },
             {
@@ -15119,64 +15119,72 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-group/radio-group.js",
+      "path": "components/radio-button/radio-button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRadioGroup",
+          "name": "SdRadioButton",
           "cssProperties": [
             {
-              "description": "The border radius for radio button groups.",
-              "name": "--sd-radio-button-group-border-radius"
+              "description": "The background color of radio-button when checked.",
+              "name": "--sd-button--primary--default-color-background"
             },
             {
-              "description": "The border width for radio button groups.",
-              "name": "--sd-radio-button-group-border-width"
+              "description": "The text color of radio-button when checked.",
+              "name": "--sd-button--primary--default-color-text"
             },
             {
-              "description": "The padding for radio button groups.",
-              "name": "--sd-radio-button-group-padding"
+              "description": "The background color of radio-button on hover when checked.",
+              "name": "--sd-button--primary--hover-color-background"
+            },
+            {
+              "description": "The border radius of the radio-button.",
+              "name": "--sd-radio-button-border-radius"
+            },
+            {
+              "description": "The text color of the radio-button.",
+              "name": "--sd-radio-button-color-text"
+            },
+            {
+              "description": "The background color of the radio-button on hover.",
+              "name": "--sd-radio-button--hover-color-background"
+            },
+            {
+              "description": "The font weight for the radio button.",
+              "name": "--sd-choice-control-font-weight"
             }
           ],
           "cssParts": [
             {
-              "description": "The form control that wraps the label, input, and error text.",
-              "name": "form-control"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "description": "The internal `<button>` element.",
+              "name": "button"
             },
             {
-              "description": "The input's wrapper.",
-              "name": "form-control-input"
+              "description": "The internal button element when the radio button is checked.",
+              "name": "button--checked"
             },
             {
-              "description": "The button group that wraps radio buttons.",
-              "name": "button-group"
+              "description": "The container that wraps the icon.",
+              "name": "icon"
             },
             {
-              "description": "The button group's `base` part.",
-              "name": "button-group__base"
+              "description": "The container that wraps the radio button's label.",
+              "name": "label"
             }
           ],
           "slots": [
             {
-              "description": "The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.",
+              "description": "The radio button's label.",
               "name": ""
             },
             {
-              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
-            {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            },
-            {
-              "description": "An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
+              "description": "A presentational icon.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -15187,138 +15195,59 @@
                 "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",
+              "description": "Disables the radio button.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "visuallyDisabled",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "attribute": "orientation",
+              "default": "false",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "focus",
-              "description": "Move focus to the checked radio (or the first one if none are checked)"
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
-            },
-            {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
               "parameters": [
                 {
-                  "name": "message",
-                  "default": "''"
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
                 }
               ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              "description": "Sets focus on the radio button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the radio button."
             },
             {
               "kind": "field",
@@ -15401,16 +15330,12 @@
           ],
           "events": [
             {
-              "description": "Emitted when the radio group's selected value changes.",
-              "name": "sd-change"
-            },
-            {
-              "description": "Emitted when the radio group receives user input.",
-              "name": "sd-input"
+              "description": "Emitted when the button loses focus.",
+              "name": "sd-blur"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "sd-invalid"
+              "description": "Emitted when the button gains focus.",
+              "name": "sd-focus"
             }
           ],
           "attributes": [
@@ -15420,72 +15345,35 @@
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The radio group's size. This size will be applied to the label, all child radios and radio buttons.",
+              "description": "The radio button's size.",
               "fieldName": "size"
             },
             {
-              "name": "required",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "fieldName": "required"
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "Disables the radio button.",
+              "fieldName": "disabled"
             },
             {
-              "name": "name",
+              "name": "visually-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "false",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
             },
             {
               "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
               "fieldName": "value"
             },
-            {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
-            },
             {
               "name": "dir",
               "type": {
@@ -15515,14 +15403,11 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/radio-group",
+          "summary": "Radio buttons allow the user to select a single option from a group using a button-like control.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/radio-button",
           "status": "stable",
-          "since": "1.20.0",
-          "dependencies": [
-            "sd-button-group"
-          ],
-          "tagName": "sd-radio-group",
+          "since": "1.36.0",
+          "tagName": "sd-radio-button",
           "customElement": true
         }
       ],
@@ -15531,37 +15416,45 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRadioGroup",
-            "module": "components/radio-group/radio-group.js"
+            "name": "SdRadioButton",
+            "module": "components/radio-button/radio-button.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-radio-group",
+          "name": "sd-radio-button",
           "declaration": {
-            "name": "SdRadioGroup",
-            "module": "components/radio-group/radio-group.js"
+            "name": "SdRadioButton",
+            "module": "components/radio-button/radio-button.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/range/range.js",
+      "path": "components/radio-group/radio-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRange",
+          "name": "SdRadioGroup",
           "cssProperties": [
             {
-              "description": "The point of origin of the active track, starting at the left side of the range.",
-              "name": "--track-active-offset"
+              "description": "The border radius for radio button groups.",
+              "name": "--sd-radio-button-group-border-radius"
+            },
+            {
+              "description": "The border width for radio button groups.",
+              "name": "--sd-radio-button-group-border-width"
+            },
+            {
+              "description": "The padding for radio button groups.",
+              "name": "--sd-radio-button-group-padding"
             }
           ],
           "cssParts": [
             {
-              "description": "The form control that wraps the label, input, and help text.",
+              "description": "The form control that wraps the label, input, and error text.",
               "name": "form-control"
             },
             {
@@ -15569,91 +15462,68 @@
               "name": "form-control-label"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            },
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The container that wraps the input track and ticks.",
-              "name": "input-wrapper"
-            },
-            {
-              "description": "The wrapper for the track.",
-              "name": "track-wrapper"
-            },
-            {
-              "description": "The inactive track.",
-              "name": "track"
-            },
-            {
-              "description": "The active track.",
-              "name": "active-track"
-            },
-            {
-              "description": "The element that increases the track clickable area.",
-              "name": "track-click-helper"
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The thumb(s) that the user can drag to change the range.",
-              "name": "thumb"
+              "description": "The button group that wraps radio buttons.",
+              "name": "button-group"
             },
             {
-              "description": "The container that wraps the tick marks.",
-              "name": "scale-ticks"
+              "description": "The button group's `base` part.",
+              "name": "button-group__base"
             }
           ],
           "slots": [
             {
-              "description": "The default slot.",
+              "description": "The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.",
               "name": ""
             },
             {
-              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "The range's label. 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": "Used to display tick marks at specific intervals along the range.",
-              "name": "scale-ticks"
+              "description": "An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "thumbs",
+              "name": "size",
               "type": {
-                "text": "NodeListOf<HTMLDivElement>"
-              }
+                "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.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltipFormatter",
+              "name": "required",
               "type": {
-                "text": "(value: number) => string"
+                "text": "boolean"
               },
-              "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip."
+              "default": "false",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "orientation",
               "type": {
-                "text": "string"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "''",
-              "description": "The name of the range, 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
             },
             {
@@ -15663,7 +15533,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "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
             },
@@ -15674,126 +15544,82 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "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": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The minimum acceptable value of the range.",
-              "attribute": "min",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "The maximum acceptable value of the range.",
-              "attribute": "max",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "The interval at which the range will increase and decrease.",
-              "attribute": "step",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the range.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "visuallyDisabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the range visually.",
-              "attribute": "visually-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "noTrackBar",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the active track bar.",
-              "attribute": "no-track-bar",
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "value",
               "type": {
-                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "text": "string"
               },
-              "default": "'on-interaction'",
-              "description": "Defines the thumbs tooltip behaviour.",
-              "attribute": "tooltip",
-              "reflects": true
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "defaultValue",
+              "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "description": "The current values of the input (in ascending order) as a string of space separated values",
-              "attribute": "value"
+              "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": "valueAsArray",
-              "description": "Gets or sets the current values of the range as an array of numbers"
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "rtl",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
               "readonly": true
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "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 the browser's validation message."
+              "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."
             },
             {
@@ -15802,9 +15628,7 @@
               "parameters": [
                 {
                   "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
+                  "default": "''"
                 }
               ],
               "description": "Sets a custom validation message. Pass an empty string to restore validity."
@@ -15890,35 +15714,45 @@
           ],
           "events": [
             {
-              "description": "Emitted when the control loses focus.",
-              "name": "sd-blur"
-            },
-            {
-              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "description": "Emitted when the radio group's selected value changes.",
               "name": "sd-change"
             },
             {
-              "description": "Emitted when the control gains focus.",
-              "name": "sd-focus"
-            },
-            {
-              "description": "Emitted when the control receives input.",
+              "description": "Emitted when the radio group receives user input.",
               "name": "sd-input"
             },
             {
-              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
-              "name": "sd-move"
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "sd-invalid"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'lg' | 'md' | 'sm'"
               },
-              "default": "''",
-              "description": "The name of the range, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "'lg'",
+              "description": "The radio group's size. This size will be applied to the label, all child radios and radio buttons.",
+              "fieldName": "size"
+            },
+            {
+              "name": "required",
+              "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",
@@ -15926,7 +15760,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
               "fieldName": "label"
             },
             {
@@ -15935,81 +15769,40 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
               "fieldName": "helpText"
             },
             {
-              "name": "min",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The minimum acceptable value of the range.",
-              "fieldName": "min"
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "max",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "100",
-              "description": "The maximum acceptable value of the range.",
-              "fieldName": "max"
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "value"
             },
             {
-              "name": "step",
+              "name": "form",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "The interval at which the range will increase and decrease.",
-              "fieldName": "step"
+              "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": "disabled",
+              "name": "dir",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the range.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "visually-disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the range visually.",
-              "fieldName": "visuallyDisabled"
-            },
-            {
-              "name": "no-track-bar",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the active track bar.",
-              "fieldName": "noTrackBar"
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
-              },
-              "default": "'on-interaction'",
-              "description": "Defines the thumbs tooltip behaviour.",
-              "fieldName": "tooltip"
-            },
-            {
-              "name": "value",
-              "description": "The current values of the input (in ascending order) as a string of space separated values",
-              "fieldName": "value"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
+                "text": "'ltr' | 'rtl' | 'auto'"
               },
               "description": "The element's directionality.",
               "fieldName": "dir",
@@ -16035,13 +15828,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Used to allow users to select a single or multiple values within a defined range using a slider.",
-          "status": "experimental",
-          "since": "5.9",
+          "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.20.0",
           "dependencies": [
-            "sd-tooltip"
+            "sd-button-group"
           ],
-          "tagName": "sd-range",
+          "tagName": "sd-radio-group",
           "customElement": true
         }
       ],
@@ -16050,204 +15844,184 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRange",
-            "module": "components/range/range.js"
+            "name": "SdRadioGroup",
+            "module": "components/radio-group/radio-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-range",
+          "name": "sd-radio-group",
           "declaration": {
-            "name": "SdRange",
-            "module": "components/range/range.js"
+            "name": "SdRadioGroup",
+            "module": "components/radio-group/radio-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/range/utils.js",
+      "path": "components/range/range.js",
       "declarations": [
         {
-          "kind": "function",
-          "name": "numericSort",
-          "return": {
-            "type": {
-              "text": "number"
+          "kind": "class",
+          "description": "",
+          "name": "SdRange",
+          "cssProperties": [
+            {
+              "description": "The point of origin of the active track, starting at the left side of the range.",
+              "name": "--track-active-offset"
             }
-          },
-          "parameters": [
+          ],
+          "cssParts": [
             {
-              "name": "a",
-              "type": {
-                "text": "number"
-              }
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
             },
             {
-              "name": "b",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "arraysDiffer",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
             {
-              "name": "a",
-              "type": {
-                "text": "readonly number[]"
-              },
-              "description": "The first array"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "name": "b",
-              "type": {
-                "text": "readonly number[]"
-              },
-              "description": "The second array"
-            }
-          ],
-          "description": "Check if two numeric array differ"
-        },
-        {
-          "kind": "function",
-          "name": "getNormalizedValueFromClientX",
-          "return": {
-            "type": {
-              "text": "number"
-            }
-          },
-          "parameters": [
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
             {
-              "name": "baseDiv",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "description": "The container that wraps the input track and ticks.",
+              "name": "input-wrapper"
             },
             {
-              "name": "x",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "numericSort",
-          "declaration": {
-            "name": "numericSort",
-            "module": "components/range/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "arraysDiffer",
-          "declaration": {
-            "name": "arraysDiffer",
-            "module": "components/range/utils.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getNormalizedValueFromClientX",
-          "declaration": {
-            "name": "getNormalizedValueFromClientX",
-            "module": "components/range/utils.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/radio-button/radio-button.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdRadioButton",
-          "cssProperties": [
+              "description": "The wrapper for the track.",
+              "name": "track-wrapper"
+            },
             {
-              "description": "The background color of radio-button when checked.",
-              "name": "--sd-button--primary--default-color-background"
+              "description": "The inactive track.",
+              "name": "track"
             },
             {
-              "description": "The text color of radio-button when checked.",
-              "name": "--sd-button--primary--default-color-text"
+              "description": "The active track.",
+              "name": "active-track"
             },
             {
-              "description": "The background color of radio-button on hover when checked.",
-              "name": "--sd-button--primary--hover-color-background"
+              "description": "The element that increases the track clickable area.",
+              "name": "track-click-helper"
             },
             {
-              "description": "The border radius of the radio-button.",
-              "name": "--sd-radio-button-border-radius"
+              "description": "The thumb(s) that the user can drag to change the range.",
+              "name": "thumb"
             },
             {
-              "description": "The text color of the radio-button.",
-              "name": "--sd-radio-button-color-text"
+              "description": "The container that wraps the tick marks.",
+              "name": "scale-ticks"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
             },
             {
-              "description": "The background color of the radio-button on hover.",
-              "name": "--sd-radio-button--hover-color-background"
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             },
             {
-              "description": "The font weight for the radio button.",
-              "name": "--sd-choice-control-font-weight"
+              "description": "The range's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Used to display tick marks at specific intervals along the range.",
+              "name": "scale-ticks"
             }
           ],
-          "cssParts": [
+          "members": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
             },
             {
-              "description": "The internal `<button>` element.",
-              "name": "button"
+              "kind": "field",
+              "name": "thumbs",
+              "type": {
+                "text": "NodeListOf<HTMLDivElement>"
+              }
             },
             {
-              "description": "The internal button element when the radio button is checked.",
-              "name": "button--checked"
+              "kind": "field",
+              "name": "tooltipFormatter",
+              "type": {
+                "text": "(value: number) => string"
+              },
+              "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip."
             },
             {
-              "description": "The container that wraps the icon.",
-              "name": "icon"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
             },
             {
-              "description": "The container that wraps the radio button's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
+              "reflects": true
+            },
             {
-              "description": "The radio button's label.",
-              "name": ""
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "attribute": "help-text",
+              "reflects": true
             },
             {
-              "description": "A presentational icon.",
-              "name": "icon"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "attribute": "min",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "size",
+              "name": "max",
               "type": {
-                "text": "'lg' | 'md' | 'sm'"
+                "text": "number"
               },
-              "default": "'lg'",
-              "description": "The radio button's size.",
-              "attribute": "size",
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "attribute": "step",
               "reflects": true
             },
             {
@@ -16257,7 +16031,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio button.",
+              "description": "Disables the range.",
               "attribute": "disabled",
               "reflects": true
             },
@@ -16268,37 +16042,85 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "description": "Disables the range visually.",
               "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "attribute": "value"
+              "name": "noTrackBar",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the active track bar.",
+              "attribute": "no-track-bar",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+              },
+              "default": "'on-interaction'",
+              "description": "Defines the thumbs tooltip behaviour.",
+              "attribute": "tooltip",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "valueAsArray",
+              "description": "Gets or sets the current values of the range as an array of numbers"
+            },
+            {
+              "kind": "field",
+              "name": "rtl",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show the browser's validation message."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "message",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "string"
                   }
                 }
               ],
-              "description": "Sets focus on the radio button."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the radio button."
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
               "kind": "field",
@@ -16381,23 +16203,80 @@
           ],
           "events": [
             {
-              "description": "Emitted when the button loses focus.",
+              "description": "Emitted when the control loses focus.",
               "name": "sd-blur"
             },
             {
-              "description": "Emitted when the button gains focus.",
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "sd-change"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
               "name": "sd-focus"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "sd-input"
+            },
+            {
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
+              "name": "sd-move"
             }
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "name",
               "type": {
-                "text": "'lg' | 'md' | 'sm'"
+                "text": "string"
               },
-              "default": "'lg'",
-              "description": "The radio button's size.",
-              "fieldName": "size"
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "fieldName": "step"
             },
             {
               "name": "disabled",
@@ -16405,7 +16284,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio button.",
+              "description": "Disables the range.",
               "fieldName": "disabled"
             },
             {
@@ -16414,15 +16293,30 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "description": "Disables the range visually.",
               "fieldName": "visuallyDisabled"
             },
             {
-              "name": "value",
+              "name": "no-track-bar",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "default": "false",
+              "description": "Disables the active track bar.",
+              "fieldName": "noTrackBar"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+              },
+              "default": "'on-interaction'",
+              "description": "Defines the thumbs tooltip behaviour.",
+              "fieldName": "tooltip"
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
               "fieldName": "value"
             },
             {
@@ -16454,11 +16348,13 @@
             "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",
-          "status": "stable",
-          "since": "1.36.0",
-          "tagName": "sd-radio-button",
+          "summary": "Used to allow users to select a single or multiple values within a defined range using a slider.",
+          "status": "experimental",
+          "since": "5.9",
+          "dependencies": [
+            "sd-tooltip"
+          ],
+          "tagName": "sd-range",
           "customElement": true
         }
       ],
@@ -16467,16 +16363,120 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRadioButton",
-            "module": "components/radio-button/radio-button.js"
+            "name": "SdRange",
+            "module": "components/range/range.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-radio-button",
+          "name": "sd-range",
           "declaration": {
-            "name": "SdRadioButton",
-            "module": "components/radio-button/radio-button.js"
+            "name": "SdRange",
+            "module": "components/range/range.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/range/utils.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "numericSort",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "arraysDiffer",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "readonly number[]"
+              },
+              "description": "The first array"
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "readonly number[]"
+              },
+              "description": "The second array"
+            }
+          ],
+          "description": "Check if two numeric array differ"
+        },
+        {
+          "kind": "function",
+          "name": "getNormalizedValueFromClientX",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "baseDiv",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "x",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "numericSort",
+          "declaration": {
+            "name": "numericSort",
+            "module": "components/range/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "arraysDiffer",
+          "declaration": {
+            "name": "arraysDiffer",
+            "module": "components/range/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getNormalizedValueFromClientX",
+          "declaration": {
+            "name": "getNormalizedValueFromClientX",
+            "module": "components/range/utils.js"
           }
         }
       ]
@@ -22867,7 +22867,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.14.1",
+    "version": "6.15.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"