@solid-design-system/components 6.22.0 → 6.22.2

package/cdn/custom-elements.json

@@ -2512,191 +2512,6 @@
         }
       ]
     },
-    {
-      "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",
@@ -3607,16 +3422,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/carousel/autoplay-controller.js",
+      "path": "components/button-group/button-group.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",
+          "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": "paused",
+              "name": "disableRole",
               "type": {
                 "text": "boolean"
               },
@@ -3624,49 +3451,222 @@
             },
             {
               "kind": "field",
-              "name": "stopped",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "true"
+              "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": "pause"
+              "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": "resume"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AutoplayController",
-          "declaration": {
-            "name": "AutoplayController",
-            "module": "components/carousel/autoplay-controller.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/carousel/carousel.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdCarousel",
-          "cssProperties": [
-            {
-              "description": "The space between each slide.",
-              "name": "--slide-gap"
-            },
-            {
-              "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "resume"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AutoplayController",
+          "declaration": {
+            "name": "AutoplayController",
+            "module": "components/carousel/autoplay-controller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/carousel/carousel.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdCarousel",
+          "cssProperties": [
+            {
+              "description": "The space between each slide.",
+              "name": "--slide-gap"
+            },
+            {
+              "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
               "name": "--scroll-hint"
             },
             {
@@ -6297,6 +6297,62 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/datepicker/datepicker-converters.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isoDateConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ fromAttribute(value: string | null): string | null { if (!value) return null; // normalize all separators to hyphens const cleaned = value.trim().replace(/[./]/g, '-'); // acccept YYYY-MM-DD only const match = cleaned.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/); if (!match) return null; const iso = `${match[1]}-${match[2]}-${match[3]}`; // validate date const d = new Date(+match[1], +match[2] - 1, +match[3]); if (d.getFullYear() !== +match[1] || d.getMonth() !== +match[2] - 1 || d.getDate() !== +match[3]) { return null; } return iso; }, toAttribute(value: string | null): string { return value ?? ''; } }"
+        },
+        {
+          "kind": "variable",
+          "name": "viewMonthConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ fromAttribute(value: string | null): Date | null { if (!value) return null; const cleaned = value.trim().replace(/[./]/g, '-'); let m: RegExpMatchArray | null = cleaned.match(/^(\\d{2})-(\\d{4})$/); let month: number; let year: number; if (m) { month = Number(m[1]); year = Number(m[2]); } else { m = cleaned.match(/^(\\d{4})-(\\d{2})$/); if (!m) return null; year = Number(m[1]); month = Number(m[2]); } if (!year || !month || month < 1 || month > 12) return null; return new Date(year, month - 1, 1); }, toAttribute(value: Date | null): string { if (!value) return ''; const year = value.getFullYear(); const month = String(value.getMonth() + 1).padStart(2, '0'); return `${year}-${month}`; } }"
+        },
+        {
+          "kind": "variable",
+          "name": "disabledDatesConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ fromAttribute(value: string | null): string[] { if (!value) return []; let rawList: string[] = []; const trimmed = value.trim(); // arrays if (trimmed.startsWith('[')) { try { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const parsed = JSON.parse(trimmed); if (Array.isArray(parsed)) { rawList = parsed.map(String); } } catch { return []; } } else { // space separated rawList = trimmed .split(/[\\s,]+/) .map(v => v.trim()) .filter(Boolean); } const result: string[] = []; for (const raw of rawList) { // replace all separators with dots const cleaned = raw.replace(/[-/]/g, '.'); const parts = cleaned.split('.'); if (parts.length !== 3) continue; const [yyyy, mm, dd] = parts.map(Number); if (!yyyy || !mm || !dd) continue; // validate date const date = new Date(yyyy, mm - 1, dd); if (date.getFullYear() !== yyyy || date.getMonth() !== mm - 1 || date.getDate() !== dd) continue; const iso = `${yyyy}-${String(mm).padStart(2, '0')}-${String(dd).padStart(2, '0')}`; result.push(iso); } return result; }, toAttribute(value: string[] | null): string { return value ? value.join(',') : ''; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isoDateConverter",
+          "declaration": {
+            "name": "isoDateConverter",
+            "module": "components/datepicker/datepicker-converters.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "viewMonthConverter",
+          "declaration": {
+            "name": "viewMonthConverter",
+            "module": "components/datepicker/datepicker-converters.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "disabledDatesConverter",
+          "declaration": {
+            "name": "disabledDatesConverter",
+            "module": "components/datepicker/datepicker-converters.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/datepicker/datepicker.js",
@@ -6305,32 +6361,218 @@
           "kind": "class",
           "description": "",
           "name": "SdDatepicker",
-          "members": [
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)",
-              "description": "Localize controller used to fetch localized terms/labels."
+              "description": "The text color for the datepicker.",
+              "name": "--sd-form-control-color-text"
             },
             {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en-US'",
-              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
-              "attribute": "locale",
-              "reflects": true
+              "description": "The border radius for the datepicker.",
+              "name": "--sd-form-control-border-radius"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
+              "description": "The default border color for the datepicker.",
+              "name": "--sd-form-control-color-border"
+            },
+            {
+              "description": "The text color for the floating label when the input is filled.",
+              "name": "--sd-form-control--filled__floating-label-color-text"
+            },
+            {
+              "description": "The background color for the input when it is invalid.",
+              "name": "--sd-form-control--invalid-color-background"
+            },
+            {
+              "description": "The border radius for the bottom left corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-bottom-left-radius"
+            },
+            {
+              "description": "The border radius for the bottom right corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-bottom-right-radius"
+            },
+            {
+              "description": "The border radius for the top left corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-top-left-radius"
+            },
+            {
+              "description": "The border radius for the top right corner of the datepicker.",
+              "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 background color for read-only form controls.",
+              "name": "--sd-form-control--read-only-color-background"
+            },
+            {
+              "description": "The default text color for date items.",
+              "name": "--sd-datepicker__date-item--default-color-text"
+            },
+            {
+              "description": "The background color for date items in hover state.",
+              "name": "--sd-datepicker__date-item--hover--default-color-background"
+            },
+            {
+              "description": "The text color for date items in hover state.",
+              "name": "--sd-datepicker__date-item--hover--default-color-text"
+            },
+            {
+              "description": "The default border color for date items.",
+              "name": "--sd-datepicker__date-item--default-color-border"
+            },
+            {
+              "description": "The text color for selected date items.",
+              "name": "--sd-datepicker__date-item--selected-color-text"
+            },
+            {
+              "description": "The background color for date items in hover state when they are previous/next month days.",
+              "name": "--sd-datepicker__date-item--hover--prev-next-color-background"
+            },
+            {
+              "description": "The text color for date items in hover state when they are previous/next month days.",
+              "name": "--sd-datepicker__date-item--hover--prev-next-color-text"
+            },
+            {
+              "description": "The font weight for the current date item.",
+              "name": "--sd-datepicker__date-item--current-font-weight"
+            },
+            {
+              "description": "The background color for selected date items.",
+              "name": "--sd-datepicker__date-item--selected-color-background"
+            },
+            {
+              "description": "The background color for selected date items in hover state.",
+              "name": "--sd-datepicker__date-item--selected--hover-color-background"
+            },
+            {
+              "description": "The background color for date items that are within the selected range.",
+              "name": "--sd-datepicker__date-item--range-color-background"
+            },
+            {
+              "description": "The text color for the current date item.",
+              "name": "--sd-datepicker__date-item--current-color-text"
+            },
+            {
+              "description": "The text color for selected date items in hover state.",
+              "name": "--sd-datepicker__date-item--selected--hover-color-text"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "datepicker"
+            },
+            {
+              "description": "The header containing the month/year and navigation buttons.",
+              "name": "header"
+            },
+            {
+              "description": "The button to go to the previous year.",
+              "name": "prev-year-button"
+            },
+            {
+              "description": "The button to go to the previous month.",
+              "name": "prev-month-button"
+            },
+            {
+              "description": "The month and year label.",
+              "name": "month-label"
+            },
+            {
+              "description": "The button to go to the next month.",
+              "name": "next-month-button"
+            },
+            {
+              "description": "The button to go to the next year.",
+              "name": "next-year-button"
+            },
+            {
+              "description": "The calendar grid container.",
+              "name": "grid"
+            },
+            {
+              "description": "Each weekday label in the calendar header.",
+              "name": "weekday"
+            },
+            {
+              "description": "Each day button in the calendar grid.",
+              "name": "day"
+            },
+            {
+              "description": "The form control wrapper around the input.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label for the input.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input element.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The border around the input.",
+              "name": "border"
+            },
+            {
+              "description": "The icon shown when the input is invalid.",
+              "name": "invalid-icon"
+            },
+            {
+              "description": "The icon shown when the input is valid.",
+              "name": "valid-icon"
+            },
+            {
+              "description": "The help text, displayed below the input.",
+              "name": "form-control-help-text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "The label for the date input.",
+              "name": "label"
+            },
+            {
+              "description": "The help text, displayed below the input.",
+              "name": "help-text"
+            },
+            {
+              "description": "The tooltip icon and content.",
+              "name": "tooltip"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)",
+              "description": "Localize controller used to fetch localized terms/labels."
+            },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en-US'",
+              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+              "attribute": "locale",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
               "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
               "attribute": "value",
               "reflects": true
@@ -6730,6 +6972,40 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "Emitted when the date selection changes.",
+              "name": "sd-change"
+            },
+            {
+              "description": "Emitted when the date range selection changes.",
+              "name": "sd-range-select"
+            },
+            {
+              "description": "Emitted when the date selection changes.",
+              "name": "sd-select"
+            },
+            {
+              "description": "Emitted when the datepicker is closed.",
+              "name": "sd-datepicker-close"
+            },
+            {
+              "description": "Emitted when the datepicker is focused.",
+              "name": "sd-focus"
+            },
+            {
+              "description": "Emitted when the datepicker is blurred.",
+              "name": "sd-blur"
+            },
+            {
+              "description": "Emitted when the month is changed.",
+              "name": "sd-month-change"
+            },
+            {
+              "description": "Emitted when the year is changed.",
+              "name": "sd-month-year"
+            }
+          ],
           "attributes": [
             {
               "name": "locale",
@@ -6994,6 +7270,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
+          "summary": "Used to enter or select a date or a range of dates using a calendar view.",
+          "status": "stable",
+          "since": "5.16.0",
+          "dependencies": [
+            "sd-icon",
+            "sd-divider",
+            "sd-popup"
+          ],
           "tagName": "sd-datepicker",
           "customElement": true
         }
@@ -13359,85 +13643,47 @@
     },
     {
       "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",
@@ -13445,26 +13691,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",
@@ -13546,40 +13787,22 @@
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "disabled",
               "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"
+                "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",
@@ -13610,14 +13833,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
         }
       ],
@@ -13626,63 +13849,101 @@
           "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"
           }
         }
       ]
     },
     {
       "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",
@@ -13690,21 +13951,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",
@@ -13785,23 +14051,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",
@@ -13832,14 +14116,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
         }
       ],
@@ -13848,16 +14132,16 @@
           "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"
           }
         }
       ]
@@ -16006,80 +16290,80 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/scrollable/scrollable.js",
+      "path": "components/range/range.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdScrollable",
+          "name": "SdRange",
           "cssProperties": [
             {
-              "description": "Defines a custom color for the gradient.",
-              "name": "--gradient-color"
+              "description": "The point of origin of the active track, starting at the left side of the range.",
+              "name": "--track-active-offset"
             }
           ],
           "cssParts": [
             {
-              "description": "The scrollable's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The scrollable's content.",
-              "name": "scroll-content"
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
             },
             {
-              "description": "The scrollable's start scroll button.",
-              "name": "button-start"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The scrollable's end scroll button.",
-              "name": "button-end"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The scrollable's left scroll button.",
-              "name": "button-left"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The scrollable's right scroll button.",
-              "name": "button-right"
+              "description": "The container that wraps the input track and ticks.",
+              "name": "input-wrapper"
             },
             {
-              "description": "The scrollable's top scroll button.",
-              "name": "button-top"
+              "description": "The wrapper for the track.",
+              "name": "track-wrapper"
             },
             {
-              "description": "The scrollable's bottom scroll button.",
-              "name": "button-bottom"
+              "description": "The inactive track.",
+              "name": "track"
             },
             {
-              "description": "The scrollable's left shadow.",
-              "name": "shadow-left"
+              "description": "The active track.",
+              "name": "active-track"
             },
             {
-              "description": "The scrollable's right shadow.",
-              "name": "shadow-right"
+              "description": "The element that increases the track clickable area.",
+              "name": "track-click-helper"
             },
             {
-              "description": "The scrollable's top shadow.",
-              "name": "shadow-top"
+              "description": "The thumb(s) that the user can drag to change the range.",
+              "name": "thumb"
             },
             {
-              "description": "The scrollable's bottom shadow.",
-              "name": "shadow-bottom"
+              "description": "The container that wraps the tick marks.",
+              "name": "scale-ticks"
             }
           ],
           "slots": [
             {
-              "description": "The scrollable's content.",
+              "description": "The default slot.",
               "name": ""
             },
             {
-              "description": "The scrollable's start icon.",
-              "name": "icon-start"
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             },
             {
-              "description": "The scrollable's end icon.",
-              "name": "icon-end"
+              "description": "The range's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Used to display tick marks at specific intervals along the range.",
+              "name": "scale-ticks"
             }
           ],
           "members": [
@@ -16091,70 +16375,183 @@
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "thumbs",
               "type": {
-                "text": "'horizontal' | 'vertical' | 'auto'"
-              },
-              "default": "'horizontal'",
-              "description": "Defines the scroll orientation",
-              "attribute": "orientation",
-              "reflects": true
+                "text": "NodeListOf<HTMLDivElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "scrollbars",
+              "name": "tooltipFormatter",
               "type": {
-                "text": "boolean"
+                "text": "(value: number) => string"
               },
-              "default": "false",
-              "description": "Activates browser scrollbars",
-              "attribute": "scrollbars",
-              "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": "buttons",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "attribute": "min",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "attribute": "step",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Activates scroll buttons",
-              "attribute": "buttons",
+              "description": "Disables the range.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "shadows",
+              "name": "visuallyDisabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Activates a shadow as optional visual scroll indicator",
-              "attribute": "shadows",
+              "description": "Disables the range visually.",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "inset",
+              "name": "noTrackBar",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds inset padding",
-              "attribute": "inset",
+              "description": "Disables the active track bar.",
+              "attribute": "no-track-bar",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "tooltip",
               "type": {
-                "text": "number"
+                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
               },
-              "default": "150",
-              "description": "The amount in px to be scrolled when clicking the buttons.",
-              "attribute": "step",
+              "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",
@@ -16236,113 +16633,138 @@
           ],
           "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 control loses focus.",
+              "name": "sd-blur"
             },
             {
-              "description": "Emitted when the left button is clicked.",
-              "name": "button-left"
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "sd-change"
             },
             {
-              "description": "Emitted when the right button is clicked.",
-              "name": "button-right"
+              "description": "Emitted when the control gains focus.",
+              "name": "sd-focus"
             },
             {
-              "description": "Emitted when the top button is clicked.",
-              "name": "button-up"
+              "description": "Emitted when the control receives input.",
+              "name": "sd-input"
             },
             {
-              "description": "Emitted when the bottom button is clicked.",
-              "name": "button-down"
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
+              "name": "sd-move"
             }
           ],
           "attributes": [
             {
-              "name": "orientation",
+              "name": "name",
               "type": {
-                "text": "'horizontal' | 'vertical' | 'auto'"
+                "text": "string"
               },
-              "default": "'horizontal'",
-              "description": "Defines the scroll orientation",
-              "fieldName": "orientation"
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "scrollbars",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Activates browser scrollbars",
-              "fieldName": "scrollbars"
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "buttons",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Activates scroll buttons",
-              "fieldName": "buttons"
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "fieldName": "helpText"
             },
             {
-              "name": "shadows",
+              "name": "min",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Activates a shadow as optional visual scroll indicator",
-              "fieldName": "shadows"
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "fieldName": "min"
             },
             {
-              "name": "inset",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Adds inset padding",
-              "fieldName": "inset"
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "fieldName": "max"
             },
             {
               "name": "step",
               "type": {
                 "text": "number"
               },
-              "default": "150",
-              "description": "The amount in px to be scrolled when clicking the buttons.",
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
               "fieldName": "step"
             },
             {
-              "name": "dir",
+              "name": "disabled",
               "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
+                "text": "boolean"
               },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
+              "default": "false",
+              "description": "Disables the range.",
+              "fieldName": "disabled"
             },
             {
-              "name": "lang",
+              "name": "visually-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the range visually.",
+              "fieldName": "visuallyDisabled"
+            },
+            {
+              "name": "no-track-bar",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the active track bar.",
+              "fieldName": "noTrackBar"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+              },
+              "default": "'on-interaction'",
+              "description": "Defines the thumbs tooltip behaviour.",
+              "fieldName": "tooltip"
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "fieldName": "value"
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "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",
@@ -16356,14 +16778,13 @@
             "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",
+          "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-tooltip"
           ],
-          "tagName": "sd-scrollable",
+          "tagName": "sd-range",
           "customElement": true
         }
       ],
@@ -16372,472 +16793,175 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdScrollable",
-            "module": "components/scrollable/scrollable.js"
+            "name": "SdRange",
+            "module": "components/range/range.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-scrollable",
+          "name": "sd-range",
           "declaration": {
-            "name": "SdScrollable",
-            "module": "components/scrollable/scrollable.js"
+            "name": "SdRange",
+            "module": "components/range/range.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.js",
+      "path": "components/range/utils.js",
       "declarations": [
         {
-          "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"
-            },
+          "kind": "function",
+          "name": "numericSort",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
             {
-              "description": "The text color for form controls.",
-              "name": "--sd-form-control-color-text"
+              "name": "a",
+              "type": {
+                "text": "number"
+              }
             },
             {
-              "description": "The border radius for the select's input.",
-              "name": "--sd-form-control-border-radius"
-            },
+              "name": "b",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "arraysDiffer",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "description": "The border radius for the bottom left corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-bottom-left-radius"
+              "name": "a",
+              "type": {
+                "text": "readonly number[]"
+              },
+              "description": "The first array"
             },
             {
-              "description": "The border radius for the bottom right corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-bottom-right-radius"
-            },
+              "name": "b",
+              "type": {
+                "text": "readonly number[]"
+              },
+              "description": "The second array"
+            }
+          ],
+          "description": "Check if two numeric array differ"
+        },
+        {
+          "kind": "function",
+          "name": "getNormalizedValueFromClientX",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
             {
-              "description": "The border radius for the top left corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-top-left-radius"
+              "name": "baseDiv",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
-              "description": "The border radius for the top right corner of the listbox.",
-              "name": "--sd-form-control__listbox-border-top-right-radius"
-            },
+              "name": "x",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "numericSort",
+          "declaration": {
+            "name": "numericSort",
+            "module": "components/range/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "arraysDiffer",
+          "declaration": {
+            "name": "arraysDiffer",
+            "module": "components/range/utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getNormalizedValueFromClientX",
+          "declaration": {
+            "name": "getNormalizedValueFromClientX",
+            "module": "components/range/utils.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/range-tick/range-tick.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdRangeTick",
+          "cssProperties": [
             {
-              "description": "The background color for form controls on hover.",
-              "name": "--sd-form-control--hover-color-background"
+              "description": "The text color for range scale ticks.",
+              "name": "--sd-range-scale-ticks-color-text"
             }
           ],
           "cssParts": [
             {
-              "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 component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The clear button.",
-              "name": "clear-button"
+              "description": "The component's label.",
+              "name": "label"
             },
             {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
+              "description": "The component's tick line.",
+              "name": "line"
             }
           ],
-          "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": "SdOption[]"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SdPopup"
-              }
-            },
-            {
-              "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",
-              "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"
-              },
-              "default": "3",
-              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "attribute": "max-options-visible",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "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"
-            },
-            {
-              "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."
-            },
-            {
-              "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": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
+          "slots": [
+            {
+              "description": "The tick's label",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the control."
+              "kind": "field",
+              "name": "subtick",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tick should be shown as a subtick.",
+              "attribute": "subtick",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -16900,254 +17024,33 @@
               "parameters": [
                 {
                   "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "fallback",
-                  "type": {
-                    "text": "T"
-                  }
-                }
-              ],
-              "description": "Retrieves the value of a css variable token.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the 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"
-            },
-            {
-              "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"
-            },
+                  "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": "hoist",
+              "name": "subtick",
               "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"
-            },
-            {
-              "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"
+              "description": "Whether the tick should be shown as a subtick.",
+              "fieldName": "subtick"
             },
             {
               "name": "dir",
@@ -17178,15 +17081,10 @@
             "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",
-          "dependencies": [
-            "sd-icon",
-            "sd-popup",
-            "sd-tag"
-          ],
-          "tagName": "sd-select",
+          "summary": "Ticks visually improve positioning on range sliders.",
+          "status": "experimental",
+          "since": "5.9",
+          "tagName": "sd-range-tick",
           "customElement": true
         }
       ],
@@ -17195,52 +17093,96 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdSelect",
-            "module": "components/select/select.js"
+            "name": "SdRangeTick",
+            "module": "components/range-tick/range-tick.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-select",
+          "name": "sd-range-tick",
           "declaration": {
-            "name": "SdSelect",
-            "module": "components/select/select.js"
+            "name": "SdRangeTick",
+            "module": "components/range-tick/range-tick.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/range-tick/range-tick.js",
+      "path": "components/scrollable/scrollable.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRangeTick",
+          "name": "SdScrollable",
           "cssProperties": [
             {
-              "description": "The text color for range scale ticks.",
-              "name": "--sd-range-scale-ticks-color-text"
+              "description": "Defines a custom color for the gradient.",
+              "name": "--gradient-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
+              "description": "The scrollable's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The component's label.",
-              "name": "label"
+              "description": "The scrollable's content.",
+              "name": "scroll-content"
             },
             {
-              "description": "The component's tick line.",
-              "name": "line"
+              "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 scrollable's bottom shadow.",
+              "name": "shadow-bottom"
             }
           ],
           "slots": [
             {
-              "description": "The tick's label",
+              "description": "The scrollable's content.",
               "name": ""
+            },
+            {
+              "description": "The scrollable's start icon.",
+              "name": "icon-start"
+            },
+            {
+              "description": "The scrollable's end icon.",
+              "name": "icon-end"
             }
           ],
           "members": [
@@ -17252,13 +17194,68 @@
             },
             {
               "kind": "field",
-              "name": "subtick",
+              "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": "Whether the tick should be shown as a subtick.",
-              "attribute": "subtick",
+              "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",
+              "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",
               "reflects": true
             },
             {
@@ -17340,15 +17337,98 @@
               }
             }
           ],
+          "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": "subtick",
+              "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",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the tick should be shown as a subtick.",
-              "fieldName": "subtick"
+              "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"
             },
             {
               "name": "dir",
@@ -17379,10 +17459,14 @@
             "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": "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",
           "customElement": true
         }
       ],
@@ -17391,32 +17475,64 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRangeTick",
-            "module": "components/range-tick/range-tick.js"
+            "name": "SdScrollable",
+            "module": "components/scrollable/scrollable.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-range-tick",
+          "name": "sd-scrollable",
           "declaration": {
-            "name": "SdRangeTick",
-            "module": "components/range-tick/range-tick.js"
+            "name": "SdScrollable",
+            "module": "components/scrollable/scrollable.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/range/range.js",
+      "path": "components/select/select.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdRange",
+          "name": "SdSelect",
           "cssProperties": [
             {
-              "description": "The point of origin of the active track, starting at the left side of the range.",
-              "name": "--track-active-offset"
+              "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"
             }
           ],
           "cssParts": [
@@ -17428,59 +17544,79 @@
               "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 component's base wrapper.",
-              "name": "base"
+              "description": "The container the wraps the combobox, clear icon, and expand button.",
+              "name": "combobox"
             },
             {
-              "description": "The container that wraps the input track and ticks.",
-              "name": "input-wrapper"
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
             },
             {
-              "description": "The wrapper for the track.",
-              "name": "track-wrapper"
+              "description": "The listbox container where options are slotted.",
+              "name": "listbox"
             },
             {
-              "description": "The inactive track.",
-              "name": "track"
+              "description": "The container that houses option tags when `multiselect` is used.",
+              "name": "tags"
             },
             {
-              "description": "The active track.",
-              "name": "active-track"
+              "description": "The individual tags that represent each multiselect option.",
+              "name": "tag"
             },
             {
-              "description": "The element that increases the track clickable area.",
-              "name": "track-click-helper"
+              "description": "The tag's base part.",
+              "name": "tag__base"
             },
             {
-              "description": "The thumb(s) that the user can drag to change the range.",
-              "name": "thumb"
+              "description": "The tag's content part.",
+              "name": "tag__content"
             },
             {
-              "description": "The container that wraps the tick marks.",
-              "name": "scale-ticks"
+              "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 default slot.",
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.",
               "name": ""
             },
             {
-              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
+              "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": "The range's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
             },
             {
-              "description": "Used to display tick marks at specific intervals along the range.",
-              "name": "scale-ticks"
+              "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": [
@@ -17492,164 +17628,282 @@
             },
             {
               "kind": "field",
-              "name": "thumbs",
+              "name": "_optionsInDefaultSlot",
               "type": {
-                "text": "NodeListOf<HTMLDivElement>"
+                "text": "SdOption[]"
               }
             },
             {
               "kind": "field",
-              "name": "tooltipFormatter",
+              "name": "popup",
               "type": {
-                "text": "(value: number) => string"
+                "text": "SdPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string | string[]"
               },
-              "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip."
+              "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": "name",
+              "name": "clearable",
               "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": "Adds a clear button when the select is not empty.",
+              "attribute": "clearable",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "multiple",
               "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": "Allows more than one option to be selected.",
+              "attribute": "multiple",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "useTags",
               "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": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+              "attribute": "useTags",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "maxOptionsVisible",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The minimum acceptable value of the range.",
-              "attribute": "min",
+              "default": "3",
+              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "attribute": "max-options-visible",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "form",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "100",
-              "description": "The maximum acceptable value of the range.",
-              "attribute": "max",
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "The interval at which the range will increase and decrease.",
-              "attribute": "step",
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string | string[]"
               },
-              "default": "false",
-              "description": "Disables the range.",
-              "attribute": "disabled",
-              "reflects": true
+              "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"
             },
             {
               "kind": "field",
-              "name": "visuallyDisabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the range visually.",
-              "attribute": "visually-disabled",
+              "description": "The select's required attribute.",
+              "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "noTrackBar",
+              "name": "floatingLabel",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the active track bar.",
-              "attribute": "no-track-bar",
+              "description": "Enables the floating label behavior for the input.",
+              "attribute": "floating-label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "styleOnValid",
               "type": {
-                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "text": "boolean"
               },
-              "default": "'on-interaction'",
-              "description": "Defines the thumbs tooltip behaviour.",
-              "attribute": "tooltip",
+              "default": "false",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "attribute": "style-on-valid",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultValue",
+              "name": "hoist",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "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": "value",
-              "description": "The current values of the input (in ascending order) as a string of space separated values",
-              "attribute": "value"
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "valueAsArray",
-              "description": "Gets or sets the current values of the range as an array of numbers"
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "rtl",
-              "readonly": true
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the listbox."
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
             },
             {
               "kind": "method",
               "name": "checkValidity",
-              "description": "Checks for validity but does not show the browser's validation message."
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
             },
             {
               "kind": "method",
@@ -17669,6 +17923,25 @@
               ],
               "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",
@@ -17749,122 +18022,235 @@
             }
           ],
           "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 an alteration to the control's value is committed by the user.",
-              "name": "sd-change"
+              "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 gains focus.",
-              "name": "sd-focus"
+              "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 the control receives input.",
-              "name": "sd-input"
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "fieldName": "clearable"
             },
             {
-              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
-              "name": "sd-move"
-            }
-          ],
-          "attributes": [
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "fieldName": "multiple"
+            },
             {
-              "name": "name",
+              "name": "useTags",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The name of the range, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "false",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+              "fieldName": "useTags"
             },
             {
-              "name": "label",
+              "name": "max-options-visible",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "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": "help-text",
+              "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
-              "fieldName": "helpText"
+              "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": "min",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The minimum acceptable value of the range.",
-              "fieldName": "min"
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "max",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string | string[]"
               },
-              "default": "100",
-              "description": "The maximum acceptable value of the range.",
-              "fieldName": "max"
+              "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": "step",
+              "name": "required",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "The interval at which the range will increase and decrease.",
-              "fieldName": "step"
+              "default": "false",
+              "description": "The select's required attribute.",
+              "fieldName": "required"
             },
             {
-              "name": "disabled",
+              "name": "floating-label",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the range.",
-              "fieldName": "disabled"
+              "description": "Enables the floating label behavior for the input.",
+              "fieldName": "floatingLabel"
             },
             {
-              "name": "visually-disabled",
+              "name": "style-on-valid",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the range visually.",
-              "fieldName": "visuallyDisabled"
+              "description": "Shows success styles if the validity of the input is valid.",
+              "fieldName": "styleOnValid"
             },
             {
-              "name": "no-track-bar",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the active track bar.",
-              "fieldName": "noTrackBar"
+              "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": "tooltip",
+              "name": "getTag",
               "type": {
-                "text": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "text": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
               },
-              "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"
+              "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",
@@ -17895,13 +18281,15 @@
             "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": "Selects allow you to choose items from a menu of predefined options.",
+          "status": "stable",
+          "since": "1.30.0",
           "dependencies": [
-            "sd-tooltip"
+            "sd-icon",
+            "sd-popup",
+            "sd-tag"
           ],
-          "tagName": "sd-range",
+          "tagName": "sd-select",
           "customElement": true
         }
       ],
@@ -17910,120 +18298,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdRange",
-            "module": "components/range/range.js"
+            "name": "SdSelect",
+            "module": "components/select/select.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-range",
-          "declaration": {
-            "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",
+          "name": "sd-select",
           "declaration": {
-            "name": "getNormalizedValueFromClientX",
-            "module": "components/range/utils.js"
+            "name": "SdSelect",
+            "module": "components/select/select.js"
           }
         }
       ]
@@ -23037,7 +23321,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.22.0",
+    "version": "6.22.2",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"