@solid-design-system/components 6.21.2 → 6.22.0

package/cdn/custom-elements.json

@@ -2512,6 +2512,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/button/button.js",
@@ -3422,28 +3607,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/carousel/autoplay-controller.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": ""
-            }
-          ],
+          "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
+          "name": "AutoplayController",
           "members": [
             {
               "kind": "field",
-              "name": "disableRole",
+              "name": "paused",
               "type": {
                 "text": "boolean"
               },
@@ -3451,188 +3624,15 @@
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "stopped",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "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
+              "default": "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
-          "name": "AutoplayController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "paused",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "stopped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "pause"
+              "name": "pause"
             },
             {
               "kind": "field",
@@ -12628,6 +12628,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+              "attribute": "stacked",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "chevron",
@@ -12843,6 +12854,15 @@
               "description": "Disables the navigation item.",
               "fieldName": "disabled"
             },
+            {
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+              "fieldName": "stacked"
+            },
             {
               "name": "chevron",
               "type": {
@@ -13339,47 +13359,85 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.js",
+      "path": "components/option/option.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdOptgroup",
+          "name": "SdOption",
           "cssProperties": [
             {
-              "description": "Display property of the divider. Defaults to \"block\"",
-              "name": "--display-divider"
+              "description": "The border color of checkboxes for the non-disabled options.",
+              "name": "--sd-form-control-color-border"
+            },
+            {
+              "description": "The border width of the checkboxes.",
+              "name": "--sd-checkbox-border-width"
+            },
+            {
+              "description": "This custom property is deprecated. Use `--sd-color-border-neutral-500` instead.",
+              "name": "--sd-option--disabled-color-border"
             }
           ],
           "cssParts": [
+            {
+              "description": "The checked icon, an `<sd-icon>` element.",
+              "name": "checked-icon"
+            },
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The container that wraps prefix, label and base",
-              "name": "label-container"
+              "description": "The option's label.",
+              "name": "label"
             },
             {
-              "description": "The divider that is displayed above the content",
-              "name": "divider"
+              "description": "The container that wraps the left.",
+              "name": "left"
             },
             {
-              "description": "The container that wraps the <sd-option> elements.",
-              "name": "options"
+              "description": "The container that wraps the right.",
+              "name": "right"
             }
           ],
           "slots": [
             {
-              "description": "The given options. Must be `<sd-option>` elements.",
+              "description": "The option's label.",
               "name": ""
             },
             {
-              "description": "The label for the optgroup",
-              "name": "label"
+              "description": "Used to prepend an icon or similar element to the menu item.",
+              "name": "left"
+            },
+            {
+              "description": "Used to append an icon or similar element to the menu item.",
+              "name": "right"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checkbox",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
+              "attribute": "checkbox",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -13387,21 +13445,26 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables all options in the optgroup.",
+              "description": "Draws the option in a disabled state, preventing selection.",
               "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "attribute": "value",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "getTextLabel",
+              "description": "Returns a plain text label based on the option's content."
+            },
             {
               "kind": "field",
               "name": "dir",
@@ -13482,23 +13545,41 @@
             }
           ],
           "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
+              "fieldName": "size"
+            },
+            {
+              "name": "checkbox",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
+              "fieldName": "checkbox"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables all options in the optgroup.",
+              "description": "Draws the option in a disabled state, preventing selection.",
               "fieldName": "disabled"
             },
             {
-              "name": "label",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "fieldName": "value"
             },
             {
               "name": "dir",
@@ -13529,14 +13610,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/components-sd-optgroup",
-          "status": "experimental",
-          "since": "3.23.0",
+          "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/option",
+          "status": "stable",
+          "since": "1.30.0",
           "dependencies": [
-            "sd-divider"
+            "sd-icon"
           ],
-          "tagName": "sd-optgroup",
+          "tagName": "sd-option",
           "customElement": true
         }
       ],
@@ -13545,101 +13626,63 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdOptgroup",
-            "module": "components/optgroup/optgroup.js"
+            "name": "SdOption",
+            "module": "components/option/option.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-optgroup",
+          "name": "sd-option",
           "declaration": {
-            "name": "SdOptgroup",
-            "module": "components/optgroup/optgroup.js"
+            "name": "SdOption",
+            "module": "components/option/option.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/option/option.js",
+      "path": "components/optgroup/optgroup.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdOption",
+          "name": "SdOptgroup",
           "cssProperties": [
             {
-              "description": "The border color of checkboxes for the non-disabled options.",
-              "name": "--sd-form-control-color-border"
-            },
-            {
-              "description": "The border width of the checkboxes.",
-              "name": "--sd-checkbox-border-width"
-            },
-            {
-              "description": "This custom property is deprecated. Use `--sd-color-border-neutral-500` instead.",
-              "name": "--sd-option--disabled-color-border"
+              "description": "Display property of the divider. Defaults to \"block\"",
+              "name": "--display-divider"
             }
           ],
           "cssParts": [
-            {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
-            },
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The option's label.",
-              "name": "label"
+              "description": "The container that wraps prefix, label and base",
+              "name": "label-container"
             },
             {
-              "description": "The container that wraps the left.",
-              "name": "left"
+              "description": "The divider that is displayed above the content",
+              "name": "divider"
             },
             {
-              "description": "The container that wraps the right.",
-              "name": "right"
+              "description": "The container that wraps the <sd-option> elements.",
+              "name": "options"
             }
           ],
           "slots": [
             {
-              "description": "The option's label.",
+              "description": "The given options. Must be `<sd-option>` elements.",
               "name": ""
             },
             {
-              "description": "Used to prepend an icon or similar element to the menu item.",
-              "name": "left"
-            },
-            {
-              "description": "Used to append an icon or similar element to the menu item.",
-              "name": "right"
+              "description": "The label for the optgroup",
+              "name": "label"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "checkbox",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
-              "attribute": "checkbox",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -13647,26 +13690,21 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the option in a disabled state, preventing selection.",
+              "description": "Disables all options in the optgroup.",
               "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-              "attribute": "value",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "getTextLabel",
-              "description": "Returns a plain text label based on the option's content."
-            },
             {
               "kind": "field",
               "name": "dir",
@@ -13747,41 +13785,23 @@
             }
           ],
           "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
-              "fieldName": "size"
-            },
-            {
-              "name": "checkbox",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
-              "fieldName": "checkbox"
-            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the option in a disabled state, preventing selection.",
+              "description": "Disables all options in the optgroup.",
               "fieldName": "disabled"
             },
             {
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-              "fieldName": "value"
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
               "name": "dir",
@@ -13812,14 +13832,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/option",
-          "status": "stable",
-          "since": "1.30.0",
+          "summary": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/components-sd-optgroup",
+          "status": "experimental",
+          "since": "3.23.0",
           "dependencies": [
-            "sd-icon"
+            "sd-divider"
           ],
-          "tagName": "sd-option",
+          "tagName": "sd-optgroup",
           "customElement": true
         }
       ],
@@ -13828,16 +13848,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdOption",
-            "module": "components/option/option.js"
+            "name": "SdOptgroup",
+            "module": "components/optgroup/optgroup.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-option",
+          "name": "sd-optgroup",
           "declaration": {
-            "name": "SdOption",
-            "module": "components/option/option.js"
+            "name": "SdOptgroup",
+            "module": "components/optgroup/optgroup.js"
           }
         }
       ]
@@ -15986,80 +16006,80 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/range/range.js",
+      "path": "components/scrollable/scrollable.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRange",
+          "name": "SdScrollable",
           "cssProperties": [
             {
-              "description": "The point of origin of the active track, starting at the left side of the range.",
-              "name": "--track-active-offset"
+              "description": "Defines a custom color for the gradient.",
+              "name": "--gradient-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The form control that wraps the label, input, and help text.",
-              "name": "form-control"
+              "description": "The scrollable's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "description": "The scrollable's content.",
+              "name": "scroll-content"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "description": "The scrollable's start scroll button.",
+              "name": "button-start"
             },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The scrollable's end scroll button.",
+              "name": "button-end"
             },
             {
-              "description": "The container that wraps the input track and ticks.",
-              "name": "input-wrapper"
+              "description": "The scrollable's left scroll button.",
+              "name": "button-left"
             },
             {
-              "description": "The wrapper for the track.",
-              "name": "track-wrapper"
+              "description": "The scrollable's right scroll button.",
+              "name": "button-right"
             },
             {
-              "description": "The inactive track.",
-              "name": "track"
+              "description": "The scrollable's top scroll button.",
+              "name": "button-top"
             },
             {
-              "description": "The active track.",
-              "name": "active-track"
+              "description": "The scrollable's bottom scroll button.",
+              "name": "button-bottom"
             },
             {
-              "description": "The element that increases the track clickable area.",
-              "name": "track-click-helper"
+              "description": "The scrollable's left shadow.",
+              "name": "shadow-left"
             },
             {
-              "description": "The thumb(s) that the user can drag to change the range.",
-              "name": "thumb"
+              "description": "The scrollable's right shadow.",
+              "name": "shadow-right"
             },
             {
-              "description": "The container that wraps the tick marks.",
-              "name": "scale-ticks"
+              "description": "The scrollable's top shadow.",
+              "name": "shadow-top"
+            },
+            {
+              "description": "The scrollable's bottom shadow.",
+              "name": "shadow-bottom"
             }
           ],
           "slots": [
             {
-              "description": "The default slot.",
+              "description": "The scrollable's content.",
               "name": ""
             },
             {
-              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            },
-            {
-              "description": "The range's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "The scrollable's start icon.",
+              "name": "icon-start"
             },
             {
-              "description": "Used to display tick marks at specific intervals along the range.",
-              "name": "scale-ticks"
+              "description": "The scrollable's end icon.",
+              "name": "icon-end"
             }
           ],
           "members": [
@@ -16071,72 +16091,57 @@
             },
             {
               "kind": "field",
-              "name": "thumbs",
-              "type": {
-                "text": "NodeListOf<HTMLDivElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipFormatter",
+              "name": "orientation",
               "type": {
-                "text": "(value: number) => string"
+                "text": "'horizontal' | 'vertical' | 'auto'"
               },
-              "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": "'horizontal'",
+              "description": "Defines the scroll orientation",
+              "attribute": "orientation",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "scrollbars",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The name of the range, submitted as a name/value pair with form data.",
-              "attribute": "name",
+              "default": "false",
+              "description": "Activates browser scrollbars",
+              "attribute": "scrollbars",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "buttons",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label",
+              "default": "false",
+              "description": "Activates scroll buttons",
+              "attribute": "buttons",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "shadows",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
-              "attribute": "help-text",
+              "default": "false",
+              "description": "Activates a shadow as optional visual scroll indicator",
+              "attribute": "shadows",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "inset",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The minimum acceptable value of the range.",
-              "attribute": "min",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "100",
-              "description": "The maximum acceptable value of the range.",
-              "attribute": "max",
+              "default": "false",
+              "description": "Adds inset padding",
+              "attribute": "inset",
               "reflects": true
             },
             {
@@ -16145,109 +16150,11 @@
               "type": {
                 "text": "number"
               },
-              "default": "1",
-              "description": "The interval at which the range will increase and decrease.",
+              "default": "150",
+              "description": "The amount in px to be scrolled when clicking the buttons.",
               "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",
-              "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": "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": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            },
             {
               "kind": "field",
               "name": "dir",
@@ -16329,121 +16236,96 @@
           ],
           "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.",
-              "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": "name",
+              "name": "start",
               "type": {
-                "text": "string"
+                "text": "CustomEvent"
               },
-              "default": "''",
-              "description": "The name of the range, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "description": "Emitted when the start of the scrollable is reached."
             },
             {
-              "name": "label",
+              "name": "end",
               "type": {
-                "text": "string"
+                "text": "CustomEvent"
               },
-              "default": "''",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "description": "Emitted when the end of the scrollable is reached."
             },
             {
-              "name": "help-text",
+              "name": "eventName",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
-              "fieldName": "helpText"
+                "text": "CustomEvent"
+              }
             },
             {
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The minimum acceptable value of the range.",
-              "fieldName": "min"
+              "description": "Emitted when the left button is clicked.",
+              "name": "button-left"
             },
             {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "The maximum acceptable value of the range.",
-              "fieldName": "max"
+              "description": "Emitted when the right button is clicked.",
+              "name": "button-right"
             },
             {
-              "name": "step",
+              "description": "Emitted when the top button is clicked.",
+              "name": "button-up"
+            },
+            {
+              "description": "Emitted when the bottom button is clicked.",
+              "name": "button-down"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
               "type": {
-                "text": "number"
+                "text": "'horizontal' | 'vertical' | 'auto'"
               },
-              "default": "1",
-              "description": "The interval at which the range will increase and decrease.",
-              "fieldName": "step"
+              "default": "'horizontal'",
+              "description": "Defines the scroll orientation",
+              "fieldName": "orientation"
             },
             {
-              "name": "disabled",
+              "name": "scrollbars",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the range.",
-              "fieldName": "disabled"
+              "description": "Activates browser scrollbars",
+              "fieldName": "scrollbars"
             },
             {
-              "name": "visually-disabled",
+              "name": "buttons",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the range visually.",
-              "fieldName": "visuallyDisabled"
+              "description": "Activates scroll buttons",
+              "fieldName": "buttons"
             },
             {
-              "name": "no-track-bar",
+              "name": "shadows",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the active track bar.",
-              "fieldName": "noTrackBar"
+              "description": "Activates a shadow as optional visual scroll indicator",
+              "fieldName": "shadows"
             },
             {
-              "name": "tooltip",
+              "name": "inset",
               "type": {
-                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "text": "boolean"
               },
-              "default": "'on-interaction'",
-              "description": "Defines the thumbs tooltip behaviour.",
-              "fieldName": "tooltip"
+              "default": "false",
+              "description": "Adds inset padding",
+              "fieldName": "inset"
             },
             {
-              "name": "value",
-              "description": "The current values of the input (in ascending order) as a string of space separated values",
-              "fieldName": "value"
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "150",
+              "description": "The amount in px to be scrolled when clicking the buttons.",
+              "fieldName": "step"
             },
             {
               "name": "dir",
@@ -16474,13 +16356,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": "Scrollable is used to indicate there is hidden content to be scrolled.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/scrollable",
+          "status": "stable",
+          "since": "1.0",
           "dependencies": [
-            "sd-tooltip"
+            "sd-icon"
           ],
-          "tagName": "sd-range",
+          "tagName": "sd-scrollable",
           "customElement": true
         }
       ],
@@ -16489,175 +16372,472 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRange",
-            "module": "components/range/range.js"
+            "name": "SdScrollable",
+            "module": "components/scrollable/scrollable.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-range",
+          "name": "sd-scrollable",
           "declaration": {
-            "name": "SdRange",
-            "module": "components/range/range.js"
+            "name": "SdScrollable",
+            "module": "components/scrollable/scrollable.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/range/utils.js",
+      "path": "components/select/select.js",
       "declarations": [
         {
-          "kind": "function",
-          "name": "numericSort",
-          "return": {
-            "type": {
-              "text": "number"
+          "kind": "class",
+          "description": "",
+          "name": "SdSelect",
+          "cssProperties": [
+            {
+              "description": "Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\"",
+              "name": "--tag-max-width"
+            },
+            {
+              "description": "The background color for form controls in invalid state.",
+              "name": "--sd-form-control--invalid-color-background"
+            },
+            {
+              "description": "The text color for form controls.",
+              "name": "--sd-form-control-color-text"
+            },
+            {
+              "description": "The border radius for the select's input.",
+              "name": "--sd-form-control-border-radius"
+            },
+            {
+              "description": "The border radius for the bottom left corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-bottom-left-radius"
+            },
+            {
+              "description": "The border radius for the bottom right corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-bottom-right-radius"
+            },
+            {
+              "description": "The border radius for the top left corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-top-left-radius"
+            },
+            {
+              "description": "The border radius for the top right corner of the listbox.",
+              "name": "--sd-form-control__listbox-border-top-right-radius"
+            },
+            {
+              "description": "The background color for form controls on hover.",
+              "name": "--sd-form-control--hover-color-background"
             }
-          },
-          "parameters": [
+          ],
+          "cssParts": [
             {
-              "name": "a",
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The select's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The container the wraps the combobox, clear icon, and expand button.",
+              "name": "combobox"
+            },
+            {
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
+            },
+            {
+              "description": "The listbox container where options are slotted.",
+              "name": "listbox"
+            },
+            {
+              "description": "The container that houses option tags when `multiselect` is used.",
+              "name": "tags"
+            },
+            {
+              "description": "The individual tags that represent each multiselect option.",
+              "name": "tag"
+            },
+            {
+              "description": "The tag's base part.",
+              "name": "tag__base"
+            },
+            {
+              "description": "The tag's content part.",
+              "name": "tag__content"
+            },
+            {
+              "description": "The tag's remove button.",
+              "name": "tag__removable-indicator"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.",
+              "name": ""
+            },
+            {
+              "description": "The input'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": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
+            {
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_optionsInDefaultSlot",
               "type": {
-                "text": "number"
+                "text": "SdOption[]"
               }
             },
             {
-              "name": "b",
+              "kind": "field",
+              "name": "popup",
               "type": {
-                "text": "number"
+                "text": "SdPopup"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "arraysDiffer",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "a",
+              "kind": "field",
+              "name": "defaultValue",
               "type": {
-                "text": "readonly number[]"
+                "text": "string | string[]"
               },
-              "description": "The first array"
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
-              "name": "b",
+              "kind": "field",
+              "name": "open",
               "type": {
-                "text": "readonly number[]"
+                "text": "boolean"
               },
-              "description": "The second array"
-            }
-          ],
-          "description": "Check if two numeric array differ"
-        },
-        {
-          "kind": "function",
-          "name": "getNormalizedValueFromClientX",
-          "return": {
-            "type": {
-              "text": "number"
-            }
-          },
-          "parameters": [
+              "default": "false",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "attribute": "open",
+              "reflects": true
+            },
             {
-              "name": "baseDiv",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The select's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "x",
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "attribute": "placeholder",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxOptionsTagLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "attribute": "max-options-tag-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select control.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "visuallyDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the select as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "attribute": "clearable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "useTags",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+              "attribute": "useTags",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxOptionsVisible",
               "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/range-tick/range-tick.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdRangeTick",
-          "cssProperties": [
+              },
+              "default": "3",
+              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "attribute": "max-options-visible",
+              "reflects": true
+            },
             {
-              "description": "The text color for range scale ticks.",
-              "name": "--sd-range-scale-ticks-color-text"
-            }
-          ],
-          "cssParts": [
+              "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
+            },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
             },
             {
-              "description": "The component's label.",
-              "name": "label"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "''",
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+              "attribute": "value"
             },
             {
-              "description": "The component's tick line.",
-              "name": "line"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The select's required attribute.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "floatingLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables the floating label behavior for the input.",
+              "attribute": "floating-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "styleOnValid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "attribute": "style-on-valid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist",
+              "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": "show",
+              "description": "Shows the listbox."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
+            },
+            {
+              "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."
+            },
             {
-              "description": "The tick's label",
-              "name": ""
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
-              "kind": "field",
-              "name": "subtick",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tick should be shown as a subtick.",
-              "attribute": "subtick",
-              "reflects": true
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
             },
             {
               "kind": "field",
@@ -16738,15 +16918,236 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "Emitted when the control's value changes.",
+              "name": "sd-change"
+            },
+            {
+              "description": "Emitted when the control's value is cleared.",
+              "name": "sd-clear"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "sd-input"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "sd-focus"
+            },
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "sd-blur"
+            },
+            {
+              "description": "Emitted when the select's menu opens.",
+              "name": "sd-show"
+            },
+            {
+              "description": "Emitted after the select's menu opens and all animations are complete.",
+              "name": "sd-after-show"
+            },
+            {
+              "description": "Emitted when the select's menu closes.",
+              "name": "sd-hide"
+            },
+            {
+              "description": "Emitted after the select's menu closes and all animations are complete.",
+              "name": "sd-after-hide"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "sd-invalid"
+            }
+          ],
           "attributes": [
             {
-              "name": "subtick",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "fieldName": "open"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The select's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "max-options-tag-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "fieldName": "maxOptionsTagLabel"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select control.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "visually-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the select as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "fieldName": "clearable"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "useTags",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+              "fieldName": "useTags"
+            },
+            {
+              "name": "max-options-visible",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "fieldName": "maxOptionsVisible"
+            },
+            {
+              "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": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "''",
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+              "fieldName": "value"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The select's required attribute.",
+              "fieldName": "required"
+            },
+            {
+              "name": "floating-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables the floating label behavior for the input.",
+              "fieldName": "floatingLabel"
+            },
+            {
+              "name": "style-on-valid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "fieldName": "styleOnValid"
+            },
+            {
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the tick should be shown as a subtick.",
-              "fieldName": "subtick"
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "getTag",
+              "type": {
+                "text": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
+              },
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "fieldName": "getTag"
             },
             {
               "name": "dir",
@@ -16777,10 +17178,15 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Ticks visually improve positioning on range sliders.",
-          "status": "experimental",
-          "since": "5.9",
-          "tagName": "sd-range-tick",
+          "summary": "Selects allow you to choose items from a menu of predefined options.",
+          "status": "stable",
+          "since": "1.30.0",
+          "dependencies": [
+            "sd-icon",
+            "sd-popup",
+            "sd-tag"
+          ],
+          "tagName": "sd-select",
           "customElement": true
         }
       ],
@@ -16789,96 +17195,52 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRangeTick",
-            "module": "components/range-tick/range-tick.js"
+            "name": "SdSelect",
+            "module": "components/select/select.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-range-tick",
+          "name": "sd-select",
           "declaration": {
-            "name": "SdRangeTick",
-            "module": "components/range-tick/range-tick.js"
+            "name": "SdSelect",
+            "module": "components/select/select.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/scrollable/scrollable.js",
+      "path": "components/range-tick/range-tick.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdScrollable",
+          "name": "SdRangeTick",
           "cssProperties": [
             {
-              "description": "Defines a custom color for the gradient.",
-              "name": "--gradient-color"
+              "description": "The text color for range scale ticks.",
+              "name": "--sd-range-scale-ticks-color-text"
             }
           ],
           "cssParts": [
             {
-              "description": "The scrollable's base wrapper.",
+              "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The scrollable's content.",
-              "name": "scroll-content"
-            },
-            {
-              "description": "The scrollable's start scroll button.",
-              "name": "button-start"
-            },
-            {
-              "description": "The scrollable's end scroll button.",
-              "name": "button-end"
-            },
-            {
-              "description": "The scrollable's left scroll button.",
-              "name": "button-left"
-            },
-            {
-              "description": "The scrollable's right scroll button.",
-              "name": "button-right"
-            },
-            {
-              "description": "The scrollable's top scroll button.",
-              "name": "button-top"
-            },
-            {
-              "description": "The scrollable's bottom scroll button.",
-              "name": "button-bottom"
-            },
-            {
-              "description": "The scrollable's left shadow.",
-              "name": "shadow-left"
-            },
-            {
-              "description": "The scrollable's right shadow.",
-              "name": "shadow-right"
-            },
-            {
-              "description": "The scrollable's top shadow.",
-              "name": "shadow-top"
+              "description": "The component's label.",
+              "name": "label"
             },
             {
-              "description": "The scrollable's bottom shadow.",
-              "name": "shadow-bottom"
+              "description": "The component's tick line.",
+              "name": "line"
             }
           ],
           "slots": [
             {
-              "description": "The scrollable's content.",
+              "description": "The tick's label",
               "name": ""
-            },
-            {
-              "description": "The scrollable's start icon.",
-              "name": "icon-start"
-            },
-            {
-              "description": "The scrollable's end icon.",
-              "name": "icon-end"
             }
           ],
           "members": [
@@ -16890,68 +17252,13 @@
             },
             {
               "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical' | 'auto'"
-              },
-              "default": "'horizontal'",
-              "description": "Defines the scroll orientation",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scrollbars",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Activates browser scrollbars",
-              "attribute": "scrollbars",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "buttons",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Activates scroll buttons",
-              "attribute": "buttons",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "shadows",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Activates a shadow as optional visual scroll indicator",
-              "attribute": "shadows",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inset",
+              "name": "subtick",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds inset padding",
-              "attribute": "inset",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "150",
-              "description": "The amount in px to be scrolled when clicking the buttons.",
-              "attribute": "step",
+              "description": "Whether the tick should be shown as a subtick.",
+              "attribute": "subtick",
               "reflects": true
             },
             {
@@ -17033,98 +17340,15 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "start",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the start of the scrollable is reached."
-            },
-            {
-              "name": "end",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the end of the scrollable is reached."
-            },
-            {
-              "name": "eventName",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "description": "Emitted when the left button is clicked.",
-              "name": "button-left"
-            },
-            {
-              "description": "Emitted when the right button is clicked.",
-              "name": "button-right"
-            },
-            {
-              "description": "Emitted when the top button is clicked.",
-              "name": "button-up"
-            },
-            {
-              "description": "Emitted when the bottom button is clicked.",
-              "name": "button-down"
-            }
-          ],
           "attributes": [
             {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical' | 'auto'"
-              },
-              "default": "'horizontal'",
-              "description": "Defines the scroll orientation",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "scrollbars",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Activates browser scrollbars",
-              "fieldName": "scrollbars"
-            },
-            {
-              "name": "buttons",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Activates scroll buttons",
-              "fieldName": "buttons"
-            },
-            {
-              "name": "shadows",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Activates a shadow as optional visual scroll indicator",
-              "fieldName": "shadows"
-            },
-            {
-              "name": "inset",
+              "name": "subtick",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds inset padding",
-              "fieldName": "inset"
-            },
-            {
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "150",
-              "description": "The amount in px to be scrolled when clicking the buttons.",
-              "fieldName": "step"
+              "description": "Whether the tick should be shown as a subtick.",
+              "fieldName": "subtick"
             },
             {
               "name": "dir",
@@ -17155,14 +17379,10 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Scrollable is used to indicate there is hidden content to be scrolled.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/scrollable",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "sd-icon"
-          ],
-          "tagName": "sd-scrollable",
+          "summary": "Ticks visually improve positioning on range sliders.",
+          "status": "experimental",
+          "since": "5.9",
+          "tagName": "sd-range-tick",
           "customElement": true
         }
       ],
@@ -17171,64 +17391,32 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdScrollable",
-            "module": "components/scrollable/scrollable.js"
+            "name": "SdRangeTick",
+            "module": "components/range-tick/range-tick.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-scrollable",
+          "name": "sd-range-tick",
           "declaration": {
-            "name": "SdScrollable",
-            "module": "components/scrollable/scrollable.js"
+            "name": "SdRangeTick",
+            "module": "components/range-tick/range-tick.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.js",
+      "path": "components/range/range.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdSelect",
+          "name": "SdRange",
           "cssProperties": [
             {
-              "description": "Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\"",
-              "name": "--tag-max-width"
-            },
-            {
-              "description": "The background color for form controls in invalid state.",
-              "name": "--sd-form-control--invalid-color-background"
-            },
-            {
-              "description": "The text color for form controls.",
-              "name": "--sd-form-control-color-text"
-            },
-            {
-              "description": "The border radius for the select's input.",
-              "name": "--sd-form-control-border-radius"
-            },
-            {
-              "description": "The border radius for the bottom left corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-bottom-left-radius"
-            },
-            {
-              "description": "The border radius for the bottom right corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-bottom-right-radius"
-            },
-            {
-              "description": "The border radius for the top left corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-top-left-radius"
-            },
-            {
-              "description": "The border radius for the top right corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-top-right-radius"
-            },
-            {
-              "description": "The background color for form controls on hover.",
-              "name": "--sd-form-control--hover-color-background"
+              "description": "The point of origin of the active track, starting at the left side of the range.",
+              "name": "--track-active-offset"
             }
           ],
           "cssParts": [
@@ -17240,79 +17428,59 @@
               "description": "The label's wrapper.",
               "name": "form-control-label"
             },
-            {
-              "description": "The select's wrapper.",
-              "name": "form-control-input"
-            },
             {
               "description": "The help text's wrapper.",
               "name": "form-control-help-text"
             },
             {
-              "description": "The container the wraps the combobox, clear icon, and expand button.",
-              "name": "combobox"
-            },
-            {
-              "description": "The element that displays the selected option's label, an `<input>` element.",
-              "name": "display-input"
-            },
-            {
-              "description": "The listbox container where options are slotted.",
-              "name": "listbox"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The container that houses option tags when `multiselect` is used.",
-              "name": "tags"
+              "description": "The container that wraps the input track and ticks.",
+              "name": "input-wrapper"
             },
             {
-              "description": "The individual tags that represent each multiselect option.",
-              "name": "tag"
+              "description": "The wrapper for the track.",
+              "name": "track-wrapper"
             },
             {
-              "description": "The tag's base part.",
-              "name": "tag__base"
+              "description": "The inactive track.",
+              "name": "track"
             },
             {
-              "description": "The tag's content part.",
-              "name": "tag__content"
+              "description": "The active track.",
+              "name": "active-track"
             },
             {
-              "description": "The tag's remove button.",
-              "name": "tag__removable-indicator"
+              "description": "The element that increases the track clickable area.",
+              "name": "track-click-helper"
             },
             {
-              "description": "The clear button.",
-              "name": "clear-button"
+              "description": "The thumb(s) that the user can drag to change the range.",
+              "name": "thumb"
             },
             {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
+              "description": "The container that wraps the tick marks.",
+              "name": "scale-ticks"
             }
           ],
           "slots": [
             {
-              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.",
+              "description": "The default slot.",
               "name": ""
             },
             {
-              "description": "The input'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.",
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
               "name": "help-text"
             },
             {
-              "description": "An icon to use in lieu of the default clear icon.",
-              "name": "clear-icon"
-            },
-            {
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
-              "name": "expand-icon"
+              "description": "The range's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
+              "description": "Used to display tick marks at specific intervals along the range.",
+              "name": "scale-ticks"
             }
           ],
           "members": [
@@ -17324,282 +17492,164 @@
             },
             {
               "kind": "field",
-              "name": "_optionsInDefaultSlot",
-              "type": {
-                "text": "SdOption[]"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "popup",
+              "name": "thumbs",
               "type": {
-                "text": "SdPopup"
+                "text": "NodeListOf<HTMLDivElement>"
               }
             },
             {
               "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string | string[]"
-              },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The select's size.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "'top' | 'bottom'"
-              },
-              "default": "'bottom'",
-              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "attribute": "placeholder",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "maxOptionsTagLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Label text shown on tag if max-options-visible is reached.",
-              "attribute": "max-options-tag-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the select control.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "visuallyDisabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Styles the select as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "clearable",
+              "name": "tooltipFormatter",
               "type": {
-                "text": "boolean"
+                "text": "(value: number) => string"
               },
-              "default": "false",
-              "description": "Adds a clear button when the select is not empty.",
-              "attribute": "clearable",
-              "reflects": true
+              "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."
             },
             {
               "kind": "field",
-              "name": "multiple",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Allows more than one option to be selected.",
-              "attribute": "multiple",
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "useTags",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
-              "attribute": "useTags",
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxOptionsVisible",
+              "name": "helpText",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "3",
-              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "attribute": "max-options-visible",
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "attribute": "help-text",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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",
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "attribute": "min",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "attribute": "name",
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "attribute": "max",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "step",
               "type": {
-                "text": "string | string[]"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
-              "attribute": "value"
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "attribute": "step",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The select's required attribute.",
-              "attribute": "required",
+              "description": "Disables the range.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "floatingLabel",
+              "name": "visuallyDisabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables the floating label behavior for the input.",
-              "attribute": "floating-label",
+              "description": "Disables the range visually.",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "styleOnValid",
+              "name": "noTrackBar",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Shows success styles if the validity of the input is valid.",
-              "attribute": "style-on-valid",
+              "description": "Disables the active track bar.",
+              "attribute": "no-track-bar",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "hoist",
+              "name": "tooltip",
               "type": {
-                "text": "boolean"
+                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
               },
-              "default": "false",
-              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist",
+              "default": "'on-interaction'",
+              "description": "Defines the thumbs tooltip behaviour.",
+              "attribute": "tooltip",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "attribute": "value"
             },
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the listbox."
+              "kind": "field",
+              "name": "valueAsArray",
+              "description": "Gets or sets the current values of the range as an array of numbers"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the listbox."
+              "kind": "field",
+              "name": "rtl",
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show the browser's validation message."
             },
             {
               "kind": "method",
@@ -17619,25 +17669,6 @@
               ],
               "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the control."
-            },
             {
               "kind": "field",
               "name": "dir",
@@ -17719,234 +17750,121 @@
           ],
           "events": [
             {
-              "description": "Emitted when the control's value changes.",
-              "name": "sd-change"
-            },
-            {
-              "description": "Emitted when the control's value is cleared.",
-              "name": "sd-clear"
-            },
-            {
-              "description": "Emitted when the control receives input.",
-              "name": "sd-input"
-            },
-            {
-              "description": "Emitted when the control gains focus.",
-              "name": "sd-focus"
-            },
-            {
-              "description": "Emitted when the control loses focus.",
-              "name": "sd-blur"
-            },
-            {
-              "description": "Emitted when the select's menu opens.",
-              "name": "sd-show"
-            },
-            {
-              "description": "Emitted after the select's menu opens and all animations are complete.",
-              "name": "sd-after-show"
-            },
-            {
-              "description": "Emitted when the select's menu closes.",
-              "name": "sd-hide"
-            },
-            {
-              "description": "Emitted after the select's menu closes and all animations are complete.",
-              "name": "sd-after-hide"
-            },
-            {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "sd-invalid"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
-              "fieldName": "open"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The select's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "'top' | 'bottom'"
-              },
-              "default": "'bottom'",
-              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
-              "fieldName": "placement"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "max-options-tag-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Label text shown on tag if max-options-visible is reached.",
-              "fieldName": "maxOptionsTagLabel"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the select control.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "visually-disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Styles the select as if it was disabled and enables aria-disabled",
-              "fieldName": "visuallyDisabled"
+              "description": "Emitted when the control loses focus.",
+              "name": "sd-blur"
             },
             {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "sd-change"
             },
             {
-              "name": "clearable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds a clear button when the select is not empty.",
-              "fieldName": "clearable"
+              "description": "Emitted when the control gains focus.",
+              "name": "sd-focus"
             },
             {
-              "name": "multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Allows more than one option to be selected.",
-              "fieldName": "multiple"
+              "description": "Emitted when the control receives input.",
+              "name": "sd-input"
             },
             {
-              "name": "useTags",
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
+              "name": "sd-move"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
-              "fieldName": "useTags"
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "max-options-visible",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "3",
-              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "fieldName": "maxOptionsVisible"
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "form",
+              "name": "help-text",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "fieldName": "helpText"
             },
             {
-              "name": "name",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "fieldName": "min"
             },
             {
-              "name": "value",
+              "name": "max",
               "type": {
-                "text": "string | string[]"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
-              "fieldName": "value"
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "fieldName": "max"
             },
             {
-              "name": "required",
+              "name": "step",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "The select's required attribute.",
-              "fieldName": "required"
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "fieldName": "step"
             },
             {
-              "name": "floating-label",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables the floating label behavior for the input.",
-              "fieldName": "floatingLabel"
+              "description": "Disables the range.",
+              "fieldName": "disabled"
             },
             {
-              "name": "style-on-valid",
+              "name": "visually-disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Shows success styles if the validity of the input is valid.",
-              "fieldName": "styleOnValid"
+              "description": "Disables the range visually.",
+              "fieldName": "visuallyDisabled"
             },
             {
-              "name": "hoist",
+              "name": "no-track-bar",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
+              "description": "Disables the active track bar.",
+              "fieldName": "noTrackBar"
             },
             {
-              "name": "getTag",
+              "name": "tooltip",
               "type": {
-                "text": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
+                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
               },
-              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
-              "fieldName": "getTag"
+              "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",
@@ -17977,15 +17895,13 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Selects allow you to choose items from a menu of predefined options.",
-          "status": "stable",
-          "since": "1.30.0",
+          "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-icon",
-            "sd-popup",
-            "sd-tag"
+            "sd-tooltip"
           ],
-          "tagName": "sd-select",
+          "tagName": "sd-range",
           "customElement": true
         }
       ],
@@ -17994,16 +17910,120 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdSelect",
-            "module": "components/select/select.js"
+            "name": "SdRange",
+            "module": "components/range/range.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-select",
+          "name": "sd-range",
           "declaration": {
-            "name": "SdSelect",
-            "module": "components/select/select.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"
           }
         }
       ]
@@ -23017,7 +23037,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.21.2",
+    "version": "6.22.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"