@solid-design-system/components 6.22.0 → 6.22.2

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.22.0",
+  "version": "6.22.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -751,56 +751,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-button-group",
-          "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - One or more `<sd-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "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.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more `<sd-button>` elements to display in the button group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "disableRole", "type": "boolean" },
-              {
-                "name": "label",
-                "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.",
-                "type": "string"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sd-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Properties:**\n - **--sd-button--primary--active-color-text** - The text color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--active-color-background** - The background color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--default-color-background** - The background color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--hover-color-text** - The text color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-background** - The background color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-text** - The text color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-background** - The background color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-text** - The text color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-text** - The text color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-background** - The background color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--disabled-color-background** - The background color for disabled primary and CTA buttons. _(default: undefined)_\n- **--sd-button--secondary--default-color-text** - The text color for secondary buttons in default state. _(default: undefined)_\n- **--sd-button--secondary--default-color-border** - The border color for secondary buttons in default state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-border** - The border color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-text** - The text color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-text** - The text color for secondary buttons in disabled state. _(default: undefined)_\n- **--sd-button--secondary--active-color-text** - The text color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--active-color-background** - The background color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--active-color-border** - The border color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted-color-border** - The border color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--inverted-color-text** - The text color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-text** - The text color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-background** - The background color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-background** - The background color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-text** - The text color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--size-sm-padding-block** - The small secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--size-md-padding-block** - The medium secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--size-lg-padding-block** - The large secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--hover-color-background** - The background color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary-padding-inline** - The horizontal padding for secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-border** - The border color for secondary disabled buttons. _(default: undefined)_\n- **--sd-button--tertiary--default-color-text** - The text color for tertiary buttons in default state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-background** - The background color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-text** - The text color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--disabled-color-text** - The text color for tertiary buttons in disabled state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-text** - The text color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-background** - The background color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted-color-text** - The text color for inverted tertiary buttons. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-background** - The background color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-text** - The text color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-background** - The background color for inverted tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-text** - The text color for inverted tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--default-color-background** - The background color for inverted CTA buttons in default state. _(default: undefined)_\n- **--sd-button--cta--inverted--default-color-text** - The text color for inverted CTA buttons in default state. _(default: undefined)_\n- **--sd-button--cta--inverted--active-color-text** - The text color for inverted CTA buttons in active state. _(default: undefined)_\n- **--sd-button--cta--inverted--hover-color-text** - The text color for inverted CTA buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--hover-color-background** - The background color for inverted CTA buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--active-color-background** - The background color for inverted CTA buttons in active state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-background** - The background color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-border** - The border color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-text** - The text color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--size-lg-font-size** - The large button text font size. _(default: undefined)_\n- **--sd-button--size-lg-height** - The height for large icon-only and loading buttons. _(default: undefined)_\n- **--sd-button--size-lg-icon-height** - The height for icons in large buttons. _(default: undefined)_\n- **--sd-button--size-lg-padding-block** - The large button vertical padding value. _(default: undefined)_\n- **--sd-button--size-md--icon-only-padding-inline** - The medium button horizontal padding value for icon-only buttons. _(default: undefined)_\n- **--sd-button--size-md-font-size** - The medium button text font size. _(default: undefined)_\n- **--sd-button--size-md-height** - The height for medium icon-only and loading buttons. _(default: undefined)_\n- **--sd-button--size-md-padding-block** - The medium button vertical padding value. _(default: undefined)_\n- **--sd-button--size-sm-font-size** - The small button font size. _(default: undefined)_\n- **--sd-button--size-sm-padding-block** - The small button vertical padding value. _(default: undefined)_\n- **--sd-button-border-radius** - The border radius for buttons. _(default: undefined)_\n- **--sd-button-border-width** - The border width for secondary buttons with borders. _(default: undefined)_\n- **--sd-button-font-weight** - The text font weight for buttons. _(default: undefined)_\n- **--sd-button-padding-inline** - The horizontal padding for buttons. _(default: undefined)_\n- **--sd-button--size-sm-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n- **--sd-button--size-md-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n- **--sd-button--size-lg-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -1077,6 +1027,56 @@
             ]
           }
         },
+        {
+          "name": "sd-button-group",
+          "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - One or more `<sd-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<sd-button>` elements to display in the button group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "disableRole", "type": "boolean" },
+              {
+                "name": "label",
+                "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.",
+                "type": "string"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-carousel",
           "description": "Carousels display an arbitrary number of content slides along a horizontal axis.\n---\n\n\n### **Events:**\n - **sd-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **pause()** - Pause the autoplay.\n- **resume()** - Resume the autoplay\n- **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sd-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sd-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-start** - Optional start icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-pause** - Optional pause icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n- **--sd-carousel__pager-dot-border-width** - The border width of the pager dots in the carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-background** - The background for the pager dots in the inverted carousel when active. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted--hovered-background** - The background for the pager dots in the inverted carousel when hovered. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-border** - The border color for the pager dots in the inverted carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot-background** - The background for the pager dots when active. _(default: undefined)_\n- **--sd-carousel--active-color-border** - The border color for the active pagination item. _(default: undefined)_\n- **--sd-carousel--active--inverted-color-border** - The border color for the active pagination item in inverted carousel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **controls** - A wrapper for the navigation and autoplay controller buttons.\n- **pagination-dot** - The pagination indicator in dot format.\n- **pagination-number** - The pagination indicator in number format.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.\n- **autoplay-controls** - A wrapper for pause/start button.",
@@ -1963,7 +1963,7 @@
         },
         {
           "name": "sd-datepicker",
-          "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "description": "Used to enter or select a date or a range of dates using a calendar view.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the date selection changes.\n- **sd-range-select** - Emitted when the date range selection changes.\n- **sd-select** - Emitted when the date selection changes.\n- **sd-datepicker-close** - Emitted when the datepicker is closed.\n- **sd-focus** - Emitted when the datepicker is focused.\n- **sd-blur** - Emitted when the datepicker is blurred.\n- **sd-month-change** - Emitted when the month is changed.\n- **sd-month-year** - Emitted when the year is changed.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The label for the date input.\n- **help-text** - The help text, displayed below the input.\n- **tooltip** - The tooltip icon and content.\n\n### **CSS Properties:**\n - **--sd-form-control-color-text** - The text color for the datepicker. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the datepicker. _(default: undefined)_\n- **--sd-form-control-color-border** - The default border color for the datepicker. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for the input when it is invalid. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-text** - The default text color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-background** - The background color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-text** - The text color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-border** - The default border color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-text** - The text color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-background** - The background color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-text** - The text color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--current-font-weight** - The font weight for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-background** - The background color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-background** - The background color for selected date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--range-color-background** - The background color for date items that are within the selected range. _(default: undefined)_\n- **--sd-datepicker__date-item--current-color-text** - The text color for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-text** - The text color for selected date items in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **datepicker** - The component's base wrapper.\n- **header** - The header containing the month/year and navigation buttons.\n- **prev-year-button** - The button to go to the previous year.\n- **prev-month-button** - The button to go to the previous month.\n- **month-label** - The month and year label.\n- **next-month-button** - The button to go to the next month.\n- **next-year-button** - The button to go to the next year.\n- **grid** - The calendar grid container.\n- **weekday** - Each weekday label in the calendar header.\n- **day** - Each day button in the calendar grid.\n- **form-control** - The form control wrapper around the input.\n- **form-control-label** - The label for the input.\n- **form-control-input** - The input element.\n- **border** - The border around the input.\n- **invalid-icon** - The icon shown when the input is invalid.\n- **valid-icon** - The icon shown when the input is valid.\n- **form-control-help-text** - The help text, displayed below the input.",
           "doc-url": "",
           "attributes": [
             {
@@ -2113,7 +2113,52 @@
               "value": { "type": "string" }
             }
           ],
-          "events": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "label", "description": "The label for the date input." },
+            {
+              "name": "help-text",
+              "description": "The help text, displayed below the input."
+            },
+            {
+              "name": "tooltip",
+              "description": "The tooltip icon and content."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-change",
+              "description": "Emitted when the date selection changes."
+            },
+            {
+              "name": "sd-range-select",
+              "description": "Emitted when the date range selection changes."
+            },
+            {
+              "name": "sd-select",
+              "description": "Emitted when the date selection changes."
+            },
+            {
+              "name": "sd-datepicker-close",
+              "description": "Emitted when the datepicker is closed."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the datepicker is focused."
+            },
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the datepicker is blurred."
+            },
+            {
+              "name": "sd-month-change",
+              "description": "Emitted when the month is changed."
+            },
+            {
+              "name": "sd-month-year",
+              "description": "Emitted when the year is changed."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -2288,7 +2333,40 @@
                 "type": "string"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "sd-change",
+                "description": "Emitted when the date selection changes."
+              },
+              {
+                "name": "sd-range-select",
+                "description": "Emitted when the date range selection changes."
+              },
+              {
+                "name": "sd-select",
+                "description": "Emitted when the date selection changes."
+              },
+              {
+                "name": "sd-datepicker-close",
+                "description": "Emitted when the datepicker is closed."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the datepicker is focused."
+              },
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the datepicker is blurred."
+              },
+              {
+                "name": "sd-month-change",
+                "description": "Emitted when the month is changed."
+              },
+              {
+                "name": "sd-month-year",
+                "description": "Emitted when the year is changed."
+              }
+            ]
           }
         },
         {
@@ -4512,28 +4590,18 @@
           }
         },
         {
-          "name": "sd-option",
-          "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The option's label.\n- **left** - Used to prepend an icon or similar element to the menu item.\n- **right** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--sd-form-control-color-border** - The border color of checkboxes for the non-disabled options. _(default: undefined)_\n- **--sd-checkbox-border-width** - The border width of the checkboxes. _(default: undefined)_\n- **--sd-option--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **left** - The container that wraps the left.\n- **right** - The container that wraps the right.",
+          "name": "sd-optgroup",
+          "description": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "size",
-              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
-            },
-            {
-              "name": "checkbox",
-              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "disabled",
-              "description": "Draws the option in a disabled state, preventing selection.",
+              "description": "Disables all options in the optgroup.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "value",
-              "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.",
+              "name": "label",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -4548,37 +4616,23 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "The option's label." },
             {
-              "name": "left",
-              "description": "Used to prepend an icon or similar element to the menu item."
+              "name": "",
+              "description": "The given options. Must be `<sd-option>` elements."
             },
-            {
-              "name": "right",
-              "description": "Used to append an icon or similar element to the menu item."
-            }
+            { "name": "label", "description": "The label for the optgroup" }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "size",
-                "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
-                "type": "'lg' | 'md' | 'sm'"
-              },
-              {
-                "name": "checkbox",
-                "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
-                "type": "boolean"
-              },
               {
                 "name": "disabled",
-                "description": "Draws the option in a disabled state, preventing selection.",
+                "description": "Disables all options in the optgroup.",
                 "type": "boolean"
               },
               {
-                "name": "value",
-                "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.",
+                "name": "label",
+                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
@@ -4596,18 +4650,28 @@
           }
         },
         {
-          "name": "sd-optgroup",
-          "description": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
+          "name": "sd-option",
+          "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The option's label.\n- **left** - Used to prepend an icon or similar element to the menu item.\n- **right** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--sd-form-control-color-border** - The border color of checkboxes for the non-disabled options. _(default: undefined)_\n- **--sd-checkbox-border-width** - The border width of the checkboxes. _(default: undefined)_\n- **--sd-option--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **left** - The container that wraps the left.\n- **right** - The container that wraps the right.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "size",
+              "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
+            },
+            {
+              "name": "checkbox",
+              "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
-              "description": "Disables all options in the optgroup.",
+              "description": "Draws the option in a disabled state, preventing selection.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "name": "value",
+              "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.",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -4622,23 +4686,37 @@
             }
           ],
           "slots": [
+            { "name": "", "description": "The option's label." },
             {
-              "name": "",
-              "description": "The given options. Must be `<sd-option>` elements."
+              "name": "left",
+              "description": "Used to prepend an icon or similar element to the menu item."
             },
-            { "name": "label", "description": "The label for the optgroup" }
+            {
+              "name": "right",
+              "description": "Used to append an icon or similar element to the menu item."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "size",
+                "description": "The option's size is inherited automatically from the `size` attribute of the parent `sd-select`.",
+                "type": "'lg' | 'md' | 'sm'"
+              },
+              {
+                "name": "checkbox",
+                "description": "Prefixes a styled checkbox to the option. Enabled automatically in `sd-select` when attribute `checklist` is set to `true`.",
+                "type": "boolean"
+              },
               {
                 "name": "disabled",
-                "description": "Disables all options in the optgroup.",
+                "description": "Draws the option in a disabled state, preventing selection.",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+                "name": "value",
+                "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.",
                 "type": "string"
               },
               {
@@ -5419,42 +5497,67 @@
           }
         },
         {
-          "name": "sd-scrollable",
-          "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",
+          "name": "sd-range",
+          "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "orientation",
-              "description": "Defines the scroll orientation",
-              "value": {
-                "type": "'horizontal' | 'vertical' | 'auto'",
-                "default": "'horizontal'"
-              }
+              "name": "name",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "scrollbars",
-              "description": "Activates browser scrollbars",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "buttons",
-              "description": "Activates scroll buttons",
+              "name": "help-text",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "min",
+              "description": "The minimum acceptable value of the range.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum acceptable value of the range.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "step",
+              "description": "The interval at which the range will increase and decrease.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the range.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "shadows",
-              "description": "Activates a shadow as optional visual scroll indicator",
+              "name": "visually-disabled",
+              "description": "Disables the range visually.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "inset",
-              "description": "Adds inset padding",
+              "name": "no-track-bar",
+              "description": "Disables the active track bar.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "step",
-              "description": "The amount in px to be scrolled when clicking the buttons.",
-              "value": { "type": "number", "default": "150" }
+              "name": "tooltip",
+              "description": "Defines the thumbs tooltip behaviour.",
+              "value": {
+                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'",
+                "default": "'on-interaction'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "value": { "type": "string" }
             },
             {
               "name": "dir",
@@ -5468,74 +5571,118 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "The scrollable's content." },
+            { "name": "", "description": "The default slot." },
             {
-              "name": "icon-start",
-              "description": "The scrollable's start icon."
+              "name": "help-text",
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute."
             },
-            { "name": "icon-end", "description": "The scrollable's end icon." }
-          ],
-          "events": [
             {
-              "name": "start",
-              "type": "CustomEvent",
-              "description": "Emitted when the start of the scrollable is reached."
+              "name": "label",
+              "description": "The range's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "end",
-              "type": "CustomEvent",
-              "description": "Emitted when the end of the scrollable is reached."
+              "name": "scale-ticks",
+              "description": "Used to display tick marks at specific intervals along the range."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the control loses focus."
             },
-            { "name": "eventName", "type": "CustomEvent" },
             {
-              "name": "button-left",
-              "description": "Emitted when the left button is clicked."
+              "name": "sd-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
             },
             {
-              "name": "button-right",
-              "description": "Emitted when the right button is clicked."
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
             },
             {
-              "name": "button-up",
-              "description": "Emitted when the top button is clicked."
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
             },
             {
-              "name": "button-down",
-              "description": "Emitted when the bottom button is clicked."
+              "name": "sd-move",
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
             }
           ],
           "js": {
             "properties": [
               { "name": "localize" },
+              { "name": "thumbs", "type": "NodeListOf<HTMLDivElement>" },
               {
-                "name": "orientation",
-                "description": "Defines the scroll orientation",
-                "type": "'horizontal' | 'vertical' | 'auto'"
+                "name": "tooltipFormatter",
+                "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.",
+                "type": "(value: number) => string"
               },
               {
-                "name": "scrollbars",
-                "description": "Activates browser scrollbars",
-                "type": "boolean"
+                "name": "name",
+                "description": "The name of the range, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "buttons",
-                "description": "Activates scroll buttons",
+                "name": "label",
+                "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "min",
+                "description": "The minimum acceptable value of the range.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "The maximum acceptable value of the range.",
+                "type": "number"
+              },
+              {
+                "name": "step",
+                "description": "The interval at which the range will increase and decrease.",
+                "type": "number"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the range.",
                 "type": "boolean"
               },
               {
-                "name": "shadows",
-                "description": "Activates a shadow as optional visual scroll indicator",
+                "name": "visuallyDisabled",
+                "description": "Disables the range visually.",
                 "type": "boolean"
               },
               {
-                "name": "inset",
-                "description": "Adds inset padding",
+                "name": "noTrackBar",
+                "description": "Disables the active track bar.",
                 "type": "boolean"
               },
               {
-                "name": "step",
-                "description": "The amount in px to be scrolled when clicking the buttons.",
-                "type": "number"
+                "name": "tooltip",
+                "description": "Defines the thumbs tooltip behaviour.",
+                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current values of the input (in ascending order) as a string of space separated values"
+              },
+              {
+                "name": "valueAsArray",
+                "description": "Gets or sets the current values of the range as an array of numbers"
+              },
+              { "name": "rtl" },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
               },
               {
                 "name": "dir",
@@ -5550,146 +5697,110 @@
             ],
             "events": [
               {
-                "name": "start",
-                "type": "CustomEvent",
-                "description": "Emitted when the start of the scrollable is reached."
-              },
-              {
-                "name": "end",
-                "type": "CustomEvent",
-                "description": "Emitted when the end of the scrollable is reached."
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
               },
-              { "name": "eventName", "type": "CustomEvent" },
               {
-                "name": "button-left",
-                "description": "Emitted when the left button is clicked."
+                "name": "sd-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
               },
               {
-                "name": "button-right",
-                "description": "Emitted when the right button is clicked."
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
               },
               {
-                "name": "button-up",
-                "description": "Emitted when the top button is clicked."
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
               },
               {
-                "name": "button-down",
-                "description": "Emitted when the bottom button is clicked."
+                "name": "sd-move",
+                "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
               }
             ]
           }
         },
         {
-          "name": "sd-select",
-          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the select's input. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "name": "sd-range-tick",
+          "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--sd-range-scale-ticks-color-text** - The text color for range scale ticks. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "open",
-              "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.",
+              "name": "subtick",
+              "description": "Whether the tick should be shown as a subtick.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "size",
-              "description": "The select's size.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
-            },
-            {
-              "name": "placement",
-              "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.",
-              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
             },
             {
-              "name": "label",
-              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tick's label" }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "subtick",
+                "description": "Whether the tick should be shown as a subtick.",
+                "type": "boolean"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sd-scrollable",
+          "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "max-options-tag-label",
-              "description": "Label text shown on tag if max-options-visible is reached.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the select control.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "visually-disabled",
-              "description": "Styles the select as if it was disabled and enables aria-disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "help-text",
-              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "clearable",
-              "description": "Adds a clear button when the select is not empty.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "multiple",
-              "description": "Allows more than one option to be selected.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "useTags",
-              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "max-options-visible",
-              "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.",
-              "value": { "type": "number", "default": "3" }
-            },
-            {
-              "name": "form",
-              "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.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "name",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "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.**",
-              "value": { "type": "string | string[]", "default": "''" }
+              "name": "orientation",
+              "description": "Defines the scroll orientation",
+              "value": {
+                "type": "'horizontal' | 'vertical' | 'auto'",
+                "default": "'horizontal'"
+              }
             },
             {
-              "name": "required",
-              "description": "The select's required attribute.",
+              "name": "scrollbars",
+              "description": "Activates browser scrollbars",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "floating-label",
-              "description": "Enables the floating label behavior for the input.",
+              "name": "buttons",
+              "description": "Activates scroll buttons",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "style-on-valid",
-              "description": "Shows success styles if the validity of the input is valid.",
+              "name": "shadows",
+              "description": "Activates a shadow as optional visual scroll indicator",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "hoist",
-              "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.",
+              "name": "inset",
+              "description": "Adds inset padding",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "getTag",
-              "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.",
-              "value": {
-                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
-              }
+              "name": "step",
+              "description": "The amount in px to be scrolled when clicking the buttons.",
+              "value": { "type": "number", "default": "150" }
             },
             {
               "name": "dir",
@@ -5703,191 +5814,75 @@
             }
           ],
           "slots": [
+            { "name": "", "description": "The scrollable's content." },
             {
-              "name": "",
-              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually."
-            },
-            {
-              "name": "label",
-              "description": "The input's label. Alternatively, you can use the `label` attribute."
-            },
-            {
-              "name": "help-text",
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
-            },
-            {
-              "name": "clear-icon",
-              "description": "An icon to use in lieu of the default clear icon."
-            },
-            {
-              "name": "expand-icon",
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+              "name": "icon-start",
+              "description": "The scrollable's start icon."
             },
-            {
-              "name": "tooltip",
-              "description": "An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component."
-            }
+            { "name": "icon-end", "description": "The scrollable's end icon." }
           ],
           "events": [
             {
-              "name": "sd-change",
-              "description": "Emitted when the control's value changes."
-            },
-            {
-              "name": "sd-clear",
-              "description": "Emitted when the control's value is cleared."
-            },
-            {
-              "name": "sd-input",
-              "description": "Emitted when the control receives input."
-            },
-            {
-              "name": "sd-focus",
-              "description": "Emitted when the control gains focus."
-            },
-            {
-              "name": "sd-blur",
-              "description": "Emitted when the control loses focus."
+              "name": "start",
+              "type": "CustomEvent",
+              "description": "Emitted when the start of the scrollable is reached."
             },
             {
-              "name": "sd-show",
-              "description": "Emitted when the select's menu opens."
+              "name": "end",
+              "type": "CustomEvent",
+              "description": "Emitted when the end of the scrollable is reached."
             },
+            { "name": "eventName", "type": "CustomEvent" },
             {
-              "name": "sd-after-show",
-              "description": "Emitted after the select's menu opens and all animations are complete."
+              "name": "button-left",
+              "description": "Emitted when the left button is clicked."
             },
             {
-              "name": "sd-hide",
-              "description": "Emitted when the select's menu closes."
+              "name": "button-right",
+              "description": "Emitted when the right button is clicked."
             },
             {
-              "name": "sd-after-hide",
-              "description": "Emitted after the select's menu closes and all animations are complete."
+              "name": "button-up",
+              "description": "Emitted when the top button is clicked."
             },
             {
-              "name": "sd-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              "name": "button-down",
+              "description": "Emitted when the bottom button is clicked."
             }
           ],
           "js": {
             "properties": [
               { "name": "localize" },
-              { "name": "_optionsInDefaultSlot", "type": "SdOption[]" },
-              { "name": "popup", "type": "SdPopup" },
-              {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string | string[]"
-              },
-              {
-                "name": "open",
-                "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.",
-                "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "The select's size.",
-                "type": "'lg' | 'md' | 'sm'"
-              },
-              {
-                "name": "placement",
-                "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.",
-                "type": "'top' | 'bottom'"
-              },
               {
-                "name": "label",
-                "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the select is empty.",
-                "type": "string"
-              },
-              {
-                "name": "maxOptionsTagLabel",
-                "description": "Label text shown on tag if max-options-visible is reached.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the select control.",
-                "type": "boolean"
+                "name": "orientation",
+                "description": "Defines the scroll orientation",
+                "type": "'horizontal' | 'vertical' | 'auto'"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Styles the select as if it was disabled and enables aria-disabled",
+                "name": "scrollbars",
+                "description": "Activates browser scrollbars",
                 "type": "boolean"
               },
               {
-                "name": "helpText",
-                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "clearable",
-                "description": "Adds a clear button when the select is not empty.",
+                "name": "buttons",
+                "description": "Activates scroll buttons",
                 "type": "boolean"
               },
               {
-                "name": "multiple",
-                "description": "Allows more than one option to be selected.",
+                "name": "shadows",
+                "description": "Activates a shadow as optional visual scroll indicator",
                 "type": "boolean"
               },
               {
-                "name": "useTags",
-                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+                "name": "inset",
+                "description": "Adds inset padding",
                 "type": "boolean"
               },
               {
-                "name": "maxOptionsVisible",
-                "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.",
+                "name": "step",
+                "description": "The amount in px to be scrolled when clicking the buttons.",
                 "type": "number"
               },
-              {
-                "name": "form",
-                "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.",
-                "type": "string"
-              },
-              {
-                "name": "name",
-                "description": "The name of the select, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "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.**",
-                "type": "string | string[]"
-              },
-              {
-                "name": "required",
-                "description": "The select's required attribute.",
-                "type": "boolean"
-              },
-              {
-                "name": "floatingLabel",
-                "description": "Enables the floating label behavior for the input.",
-                "type": "boolean"
-              },
-              {
-                "name": "styleOnValid",
-                "description": "Shows success styles if the validity of the input is valid.",
-                "type": "boolean"
-              },
-              {
-                "name": "hoist",
-                "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.",
-                "type": "boolean"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -5901,156 +5896,147 @@
             ],
             "events": [
               {
-                "name": "sd-change",
-                "description": "Emitted when the control's value changes."
-              },
-              {
-                "name": "sd-clear",
-                "description": "Emitted when the control's value is cleared."
-              },
-              {
-                "name": "sd-input",
-                "description": "Emitted when the control receives input."
-              },
-              {
-                "name": "sd-focus",
-                "description": "Emitted when the control gains focus."
-              },
-              {
-                "name": "sd-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "start",
+                "type": "CustomEvent",
+                "description": "Emitted when the start of the scrollable is reached."
               },
               {
-                "name": "sd-show",
-                "description": "Emitted when the select's menu opens."
+                "name": "end",
+                "type": "CustomEvent",
+                "description": "Emitted when the end of the scrollable is reached."
               },
+              { "name": "eventName", "type": "CustomEvent" },
               {
-                "name": "sd-after-show",
-                "description": "Emitted after the select's menu opens and all animations are complete."
+                "name": "button-left",
+                "description": "Emitted when the left button is clicked."
               },
               {
-                "name": "sd-hide",
-                "description": "Emitted when the select's menu closes."
+                "name": "button-right",
+                "description": "Emitted when the right button is clicked."
               },
               {
-                "name": "sd-after-hide",
-                "description": "Emitted after the select's menu closes and all animations are complete."
+                "name": "button-up",
+                "description": "Emitted when the top button is clicked."
               },
               {
-                "name": "sd-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+                "name": "button-down",
+                "description": "Emitted when the bottom button is clicked."
               }
             ]
           }
         },
         {
-          "name": "sd-range-tick",
-          "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--sd-range-scale-ticks-color-text** - The text color for range scale ticks. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+          "name": "sd-select",
+          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the select's input. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "subtick",
-              "description": "Whether the tick should be shown as a subtick.",
+              "name": "open",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+              "name": "size",
+              "description": "The select's size.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
             },
             {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The tick's label" }],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "localize" },
-              {
-                "name": "subtick",
-                "description": "Whether the tick should be shown as a subtick.",
-                "type": "boolean"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "sd-range",
-          "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",
-          "doc-url": "",
-          "attributes": [
+              "name": "placement",
+              "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.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            },
             {
-              "name": "name",
-              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "name": "label",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max-options-tag-label",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the select control.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the select as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "label",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "clearable",
+              "description": "Adds a clear button when the select is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "multiple",
+              "description": "Allows more than one option to be selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "useTags",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "max-options-visible",
+              "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.",
+              "value": { "type": "number", "default": "3" }
             },
             {
-              "name": "help-text",
-              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "name": "form",
+              "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.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "min",
-              "description": "The minimum acceptable value of the range.",
-              "value": { "type": "number", "default": "0" }
+              "name": "name",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "max",
-              "description": "The maximum acceptable value of the range.",
-              "value": { "type": "number", "default": "100" }
+              "name": "value",
+              "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.**",
+              "value": { "type": "string | string[]", "default": "''" }
             },
             {
-              "name": "step",
-              "description": "The interval at which the range will increase and decrease.",
-              "value": { "type": "number", "default": "1" }
+              "name": "required",
+              "description": "The select's required attribute.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the range.",
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "visually-disabled",
-              "description": "Disables the range visually.",
+              "name": "style-on-valid",
+              "description": "Shows success styles if the validity of the input is valid.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "no-track-bar",
-              "description": "Disables the active track bar.",
+              "name": "hoist",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "tooltip",
-              "description": "Defines the thumbs tooltip behaviour.",
+              "name": "getTag",
+              "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.",
               "value": {
-                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'",
-                "default": "'on-interaction'"
+                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
               }
             },
-            {
-              "name": "value",
-              "description": "The current values of the input (in ascending order) as a string of space separated values",
-              "value": { "type": "string" }
-            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -6063,119 +6049,191 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute."
+              "name": "",
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually."
             },
             {
               "name": "label",
-              "description": "The range's label. Alternatively, you can use the `label` attribute."
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "scale-ticks",
-              "description": "Used to display tick marks at specific intervals along the range."
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+            },
+            {
+              "name": "tooltip",
+              "description": "An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component."
             }
           ],
           "events": [
             {
-              "name": "sd-blur",
-              "description": "Emitted when the control loses focus."
+              "name": "sd-change",
+              "description": "Emitted when the control's value changes."
             },
             {
-              "name": "sd-change",
-              "description": "Emitted when an alteration to the control's value is committed by the user."
+              "name": "sd-clear",
+              "description": "Emitted when the control's value is cleared."
+            },
+            {
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
             },
             {
               "name": "sd-focus",
               "description": "Emitted when the control gains focus."
             },
             {
-              "name": "sd-input",
-              "description": "Emitted when the control receives input."
+              "name": "sd-blur",
+              "description": "Emitted when the control loses focus."
             },
             {
-              "name": "sd-move",
-              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
+              "name": "sd-show",
+              "description": "Emitted when the select's menu opens."
+            },
+            {
+              "name": "sd-after-show",
+              "description": "Emitted after the select's menu opens and all animations are complete."
+            },
+            {
+              "name": "sd-hide",
+              "description": "Emitted when the select's menu closes."
+            },
+            {
+              "name": "sd-after-hide",
+              "description": "Emitted after the select's menu closes and all animations are complete."
+            },
+            {
+              "name": "sd-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
           "js": {
             "properties": [
               { "name": "localize" },
-              { "name": "thumbs", "type": "NodeListOf<HTMLDivElement>" },
+              { "name": "_optionsInDefaultSlot", "type": "SdOption[]" },
+              { "name": "popup", "type": "SdPopup" },
               {
-                "name": "tooltipFormatter",
-                "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.",
-                "type": "(value: number) => string"
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | string[]"
               },
               {
-                "name": "name",
-                "description": "The name of the range, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "open",
+                "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.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The select's size.",
+                "type": "'lg' | 'md' | 'sm'"
+              },
+              {
+                "name": "placement",
+                "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.",
+                "type": "'top' | 'bottom'"
               },
               {
                 "name": "label",
-                "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+                "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "helpText",
-                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the select is empty.",
                 "type": "string"
               },
               {
-                "name": "min",
-                "description": "The minimum acceptable value of the range.",
-                "type": "number"
+                "name": "maxOptionsTagLabel",
+                "description": "Label text shown on tag if max-options-visible is reached.",
+                "type": "string"
               },
               {
-                "name": "max",
-                "description": "The maximum acceptable value of the range.",
-                "type": "number"
+                "name": "disabled",
+                "description": "Disables the select control.",
+                "type": "boolean"
               },
               {
-                "name": "step",
-                "description": "The interval at which the range will increase and decrease.",
-                "type": "number"
+                "name": "visuallyDisabled",
+                "description": "Styles the select as if it was disabled and enables aria-disabled",
+                "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Disables the range.",
+                "name": "helpText",
+                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the select is not empty.",
                 "type": "boolean"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Disables the range visually.",
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
                 "type": "boolean"
               },
               {
-                "name": "noTrackBar",
-                "description": "Disables the active track bar.",
+                "name": "useTags",
+                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
                 "type": "boolean"
               },
               {
-                "name": "tooltip",
-                "description": "Defines the thumbs tooltip behaviour.",
-                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "name": "maxOptionsVisible",
+                "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.",
+                "type": "number"
               },
               {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "name": "form",
+                "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.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the select, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
                 "name": "value",
-                "description": "The current values of the input (in ascending order) as a string of space separated values"
+                "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.**",
+                "type": "string | string[]"
               },
               {
-                "name": "valueAsArray",
-                "description": "Gets or sets the current values of the range as an array of numbers"
+                "name": "required",
+                "description": "The select's required attribute.",
+                "type": "boolean"
+              },
+              {
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
+                "type": "boolean"
+              },
+              {
+                "name": "styleOnValid",
+                "description": "Shows success styles if the validity of the input is valid.",
+                "type": "boolean"
+              },
+              {
+                "name": "hoist",
+                "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.",
+                "type": "boolean"
               },
-              { "name": "rtl" },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
               },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -6189,24 +6247,44 @@
             ],
             "events": [
               {
-                "name": "sd-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "sd-change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "sd-change",
-                "description": "Emitted when an alteration to the control's value is committed by the user."
+                "name": "sd-clear",
+                "description": "Emitted when the control's value is cleared."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
               },
               {
                 "name": "sd-focus",
                 "description": "Emitted when the control gains focus."
               },
               {
-                "name": "sd-input",
-                "description": "Emitted when the control receives input."
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
               },
               {
-                "name": "sd-move",
-                "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
+                "name": "sd-show",
+                "description": "Emitted when the select's menu opens."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the select's menu opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the select's menu closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the select's menu closes and all animations are complete."
+              },
+              {
+                "name": "sd-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }