@solid-design-system/components 6.21.1 → 6.22.0

package/dist/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.21.1",
+  "version": "6.22.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -751,6 +751,56 @@
             "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.",
@@ -1027,56 +1077,6 @@
             ]
           }
         },
-        {
-          "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.",
@@ -4211,6 +4211,11 @@
               "description": "Disables the navigation item.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "stacked",
+              "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "chevron",
               "description": "Appends a chevron to the right side of a navigation item. Only used if `vertical` is true.",
@@ -4309,6 +4314,11 @@
                 "description": "Disables the navigation item.",
                 "type": "boolean"
               },
+              {
+                "name": "stacked",
+                "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+                "type": "boolean"
+              },
               {
                 "name": "chevron",
                 "description": "Appends a chevron to the right side of a navigation item. Only used if `vertical` is true.",
@@ -4502,18 +4512,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": "''" }
             },
             {
@@ -4528,23 +4548,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"
               },
               {
@@ -4562,28 +4596,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": "''" }
             },
             {
@@ -4598,37 +4622,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"
               },
               {
@@ -5409,192 +5419,123 @@
           }
         },
         {
-          "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.",
+          "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": "name",
-              "description": "The name of the range, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "name": "orientation",
+              "description": "Defines the scroll orientation",
+              "value": {
+                "type": "'horizontal' | 'vertical' | 'auto'",
+                "default": "'horizontal'"
+              }
             },
             {
-              "name": "label",
-              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "scrollbars",
+              "description": "Activates browser scrollbars",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "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": "buttons",
+              "description": "Activates scroll buttons",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "min",
-              "description": "The minimum acceptable value of the range.",
-              "value": { "type": "number", "default": "0" }
+              "name": "shadows",
+              "description": "Activates a shadow as optional visual scroll indicator",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "max",
-              "description": "The maximum acceptable value of the range.",
-              "value": { "type": "number", "default": "100" }
+              "name": "inset",
+              "description": "Adds inset padding",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "step",
-              "description": "The interval at which the range will increase and decrease.",
-              "value": { "type": "number", "default": "1" }
+              "description": "The amount in px to be scrolled when clicking the buttons.",
+              "value": { "type": "number", "default": "150" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the range.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
             },
             {
-              "name": "visually-disabled",
-              "description": "Disables the range visually.",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The scrollable's content." },
             {
-              "name": "no-track-bar",
-              "description": "Disables the active track bar.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+              "name": "icon-start",
+              "description": "The scrollable's start icon."
             },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
+            { "name": "icon-end", "description": "The scrollable's end icon." }
           ],
-          "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."
-            },
+          "events": [
             {
-              "name": "label",
-              "description": "The range's label. Alternatively, you can use the `label` attribute."
+              "name": "start",
+              "type": "CustomEvent",
+              "description": "Emitted when the start 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": "end",
+              "type": "CustomEvent",
+              "description": "Emitted when the end of the scrollable is reached."
             },
+            { "name": "eventName", "type": "CustomEvent" },
             {
-              "name": "sd-change",
-              "description": "Emitted when an alteration to the control's value is committed by the user."
+              "name": "button-left",
+              "description": "Emitted when the left button is clicked."
             },
             {
-              "name": "sd-focus",
-              "description": "Emitted when the control gains focus."
+              "name": "button-right",
+              "description": "Emitted when the right button is clicked."
             },
             {
-              "name": "sd-input",
-              "description": "Emitted when the control receives input."
+              "name": "button-up",
+              "description": "Emitted when the top 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": "button-down",
+              "description": "Emitted when the bottom button is clicked."
             }
           ],
           "js": {
             "properties": [
               { "name": "localize" },
-              { "name": "thumbs", "type": "NodeListOf<HTMLDivElement>" },
-              {
-                "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": "name",
-                "description": "The name of the range, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "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": "orientation",
+                "description": "Defines the scroll orientation",
+                "type": "'horizontal' | 'vertical' | 'auto'"
               },
               {
-                "name": "disabled",
-                "description": "Disables the range.",
+                "name": "scrollbars",
+                "description": "Activates browser scrollbars",
                 "type": "boolean"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Disables the range visually.",
+                "name": "buttons",
+                "description": "Activates scroll buttons",
                 "type": "boolean"
               },
               {
-                "name": "noTrackBar",
-                "description": "Disables the active track bar.",
+                "name": "shadows",
+                "description": "Activates a shadow as optional visual scroll indicator",
                 "type": "boolean"
               },
               {
-                "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": "inset",
+                "description": "Adds inset padding",
+                "type": "boolean"
               },
-              { "name": "rtl" },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
+                "name": "step",
+                "description": "The amount in px to be scrolled when clicking the buttons.",
+                "type": "number"
               },
               {
                 "name": "dir",
@@ -5609,110 +5550,146 @@
             ],
             "events": [
               {
-                "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-change",
-                "description": "Emitted when an alteration to the control's value is committed by the user."
+                "name": "end",
+                "type": "CustomEvent",
+                "description": "Emitted when the end of the scrollable is reached."
               },
+              { "name": "eventName", "type": "CustomEvent" },
               {
-                "name": "sd-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "button-left",
+                "description": "Emitted when the left button is clicked."
               },
               {
-                "name": "sd-input",
-                "description": "Emitted when the control receives input."
+                "name": "button-right",
+                "description": "Emitted when the right 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": "button-up",
+                "description": "Emitted when the top button is clicked."
+              },
+              {
+                "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-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": "orientation",
-              "description": "Defines the scroll orientation",
-              "value": {
-                "type": "'horizontal' | 'vertical' | 'auto'",
-                "default": "'horizontal'"
-              }
+              "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": "scrollbars",
-              "description": "Activates browser scrollbars",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "buttons",
-              "description": "Activates scroll buttons",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "shadows",
-              "description": "Activates a shadow as optional visual scroll indicator",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "max-options-tag-label",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "inset",
-              "description": "Adds inset padding",
+              "name": "disabled",
+              "description": "Disables the select control.",
               "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": "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": "required",
+              "description": "The select's required attribute.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "style-on-valid",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "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.",
+              "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": "dir",
@@ -5726,75 +5703,191 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "The scrollable's content." },
             {
-              "name": "icon-start",
-              "description": "The scrollable's start icon."
+              "name": "",
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually."
             },
-            { "name": "icon-end", "description": "The scrollable's end icon." }
+            {
+              "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": "tooltip",
+              "description": "An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component."
+            }
           ],
           "events": [
             {
-              "name": "start",
-              "type": "CustomEvent",
-              "description": "Emitted when the start of the scrollable is reached."
+              "name": "sd-change",
+              "description": "Emitted when the control's value changes."
             },
             {
-              "name": "end",
-              "type": "CustomEvent",
-              "description": "Emitted when the end of the scrollable is reached."
+              "name": "sd-clear",
+              "description": "Emitted when the control's value is cleared."
             },
-            { "name": "eventName", "type": "CustomEvent" },
             {
-              "name": "button-left",
-              "description": "Emitted when the left button is clicked."
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
             },
             {
-              "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-blur",
+              "description": "Emitted when the control loses focus."
             },
             {
-              "name": "button-down",
-              "description": "Emitted when the bottom button is clicked."
+              "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": "_optionsInDefaultSlot", "type": "SdOption[]" },
+              { "name": "popup", "type": "SdPopup" },
               {
-                "name": "orientation",
-                "description": "Defines the scroll orientation",
-                "type": "'horizontal' | 'vertical' | 'auto'"
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | string[]"
               },
               {
-                "name": "scrollbars",
-                "description": "Activates browser scrollbars",
+                "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": "buttons",
-                "description": "Activates scroll buttons",
+                "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": "shadows",
-                "description": "Activates a shadow as optional visual scroll indicator",
+                "name": "visuallyDisabled",
+                "description": "Styles the select as if it was disabled and enables aria-disabled",
                 "type": "boolean"
               },
               {
-                "name": "inset",
-                "description": "Adds inset padding",
+                "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": "step",
-                "description": "The amount in px to be scrolled when clicking the buttons.",
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
+                "type": "boolean"
+              },
+              {
+                "name": "useTags",
+                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+                "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.",
                 "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.",
@@ -5808,147 +5901,156 @@
             ],
             "events": [
               {
-                "name": "start",
-                "type": "CustomEvent",
-                "description": "Emitted when the start of the scrollable is reached."
+                "name": "sd-change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "end",
-                "type": "CustomEvent",
-                "description": "Emitted when the end of the scrollable is reached."
+                "name": "sd-clear",
+                "description": "Emitted when the control's value is cleared."
               },
-              { "name": "eventName", "type": "CustomEvent" },
               {
-                "name": "button-left",
-                "description": "Emitted when the left button is clicked."
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
               },
               {
-                "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-blur",
+                "description": "Emitted when the control loses focus."
               },
               {
-                "name": "button-down",
-                "description": "Emitted when the bottom button is clicked."
+                "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."
               }
             ]
           }
         },
         {
-          "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": "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": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
             },
             {
-              "name": "visually-disabled",
-              "description": "Styles the select as if it was disabled and enables aria-disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "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": "help-text",
-              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "name": "name",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
               "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": "label",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "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.",
+              "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": "name",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "name": "min",
+              "description": "The minimum acceptable value of the range.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "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": "max",
+              "description": "The maximum acceptable value of the range.",
+              "value": { "type": "number", "default": "100" }
             },
             {
-              "name": "required",
-              "description": "The select's required attribute.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "step",
+              "description": "The interval at which the range will increase and decrease.",
+              "value": { "type": "number", "default": "1" }
             },
             {
-              "name": "floating-label",
-              "description": "Enables the floating label behavior for the input.",
+              "name": "disabled",
+              "description": "Disables the range.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "style-on-valid",
-              "description": "Shows success styles if the validity of the input is valid.",
+              "name": "visually-disabled",
+              "description": "Disables the range visually.",
               "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": "no-track-bar",
+              "description": "Disables the active track bar.",
               "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.",
+              "name": "tooltip",
+              "description": "Defines the thumbs tooltip behaviour.",
               "value": {
-                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
+                "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",
               "description": "The element's directionality.",
@@ -5961,191 +6063,119 @@
             }
           ],
           "slots": [
-            {
-              "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": "", "description": "The default slot." },
             {
               "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."
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute."
             },
             {
-              "name": "expand-icon",
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+              "name": "label",
+              "description": "The range's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "tooltip",
-              "description": "An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component."
+              "name": "scale-ticks",
+              "description": "Used to display tick marks at specific intervals along the range."
             }
           ],
           "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": "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-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
             },
             {
-              "name": "sd-hide",
-              "description": "Emitted when the select's menu closes."
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
             },
             {
-              "name": "sd-after-hide",
-              "description": "Emitted after the select's menu closes and all animations are complete."
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
             },
             {
-              "name": "sd-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              "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": "_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": "thumbs", "type": "NodeListOf<HTMLDivElement>" },
               {
-                "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": "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": "label",
-                "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+                "name": "name",
+                "description": "The name of the range, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
-                "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the select is empty.",
+                "name": "label",
+                "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "maxOptionsTagLabel",
-                "description": "Label text shown on tag if max-options-visible is reached.",
+                "name": "helpText",
+                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
                 "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "Disables the select control.",
-                "type": "boolean"
+                "name": "min",
+                "description": "The minimum acceptable value of the range.",
+                "type": "number"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Styles the select as if it was disabled and enables aria-disabled",
-                "type": "boolean"
+                "name": "max",
+                "description": "The maximum acceptable value of the range.",
+                "type": "number"
               },
               {
-                "name": "helpText",
-                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
+                "name": "step",
+                "description": "The interval at which the range will increase and decrease.",
+                "type": "number"
               },
               {
-                "name": "clearable",
-                "description": "Adds a clear button when the select is not empty.",
+                "name": "disabled",
+                "description": "Disables the range.",
                 "type": "boolean"
               },
               {
-                "name": "multiple",
-                "description": "Allows more than one option to be selected.",
+                "name": "visuallyDisabled",
+                "description": "Disables the range visually.",
                 "type": "boolean"
               },
               {
-                "name": "useTags",
-                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`.",
+                "name": "noTrackBar",
+                "description": "Disables the active track bar.",
                 "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.",
-                "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": "tooltip",
+                "description": "Defines the thumbs tooltip behaviour.",
+                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
               },
               {
-                "name": "name",
-                "description": "The name of the select, submitted as a name/value pair with form data.",
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
                 "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"
+                "description": "The current values of the input (in ascending order) as a string of space separated values"
               },
               {
-                "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": "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": "validationMessage",
-                "description": "Gets the validation message"
-              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -6158,45 +6188,25 @@
               }
             ],
             "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": "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-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
               },
               {
-                "name": "sd-hide",
-                "description": "Emitted when the select's menu closes."
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
               },
               {
-                "name": "sd-after-hide",
-                "description": "Emitted after the select's menu closes and all animations are complete."
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
               },
               {
-                "name": "sd-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+                "name": "sd-move",
+                "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
               }
             ]
           }