@solid-design-system/components 6.13.1 → 6.14.0

package/dist/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.13.1",
+  "version": "6.14.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "sd-accordion",
-          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-background** - The accordion background color. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - The accordion chevron color. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
+          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n- **--sd-accordion-color-icon-fill** - The accordion icon color. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -112,7 +112,7 @@
         },
         {
           "name": "sd-accordion-group",
-          "description": "Short summary of the component's intended use.\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 default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\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 default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -346,7 +346,7 @@
         },
         {
           "name": "sd-audio",
-          "description": "Used to play audio files that are part of the page content.\n---\n\n\n### **Events:**\n - **sd-playback-start** - Emitted when the audio playback starts.\n- **sd-playback-end** - Emitted when the audio playback ends.\n- **sd-playback-pause** - Emitted when the audio playback pauses.\n- **sd-playback-mute** - Emitted when the audio is muted.\n- **sd-playback-unmute** - Emitted when the audio is unmuted.\n- **sd-playback-speed** - Emitted when the playback speed is changed.\n- **sd-transcript-click** - Emitted when the transcript 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 default slot.\n- **play-icon** - The play icon.\n- **pause-icon** - The pause icon.\n- **transcript** - The transcript.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **audio-controls** - The audio controls.\n- **playback-speed** - The playback speed.\n- **play-button** - The play button.\n- **volume** - The volume button.\n- **progress-slider** - The audio progress slider.\n- **timestamps** - The audio timestamps.",
+          "description": "Used to play audio files that are part of the page content.\n---\n\n\n### **Events:**\n - **sd-playback-start** - Emitted when the audio playback starts.\n- **sd-playback-end** - Emitted when the audio playback ends.\n- **sd-playback-pause** - Emitted when the audio playback pauses.\n- **sd-playback-mute** - Emitted when the audio is muted.\n- **sd-playback-unmute** - Emitted when the audio is unmuted.\n- **sd-playback-speed** - Emitted when the playback speed is changed.\n- **sd-transcript-click** - Emitted when the transcript 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 default slot.\n- **play-icon** - The play icon.\n- **pause-icon** - The pause icon.\n- **transcript** - The transcript.\n\n### **CSS Properties:**\n - **--sd-audio__slide-bar--inverted-color-background** - The background color for the progress slider when the component is inverted. _(default: undefined)_\n- **--sd-audio__track-bar--inverted-color-background** - The background color for the active part of the progress slider when the component is inverted. _(default: undefined)_\n- **--sd-audio__timestamp-color-text** - This custom property is deprecated. Use `--sd-color-text-neutral-700` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **audio-controls** - The audio controls.\n- **playback-speed** - The playback speed.\n- **play-button** - The play button.\n- **volume** - The volume button.\n- **progress-slider** - The audio progress slider.\n- **timestamps** - The audio timestamps.",
           "doc-url": "",
           "attributes": [
             {
@@ -503,7 +503,7 @@
         },
         {
           "name": "sd-badge",
-          "description": "Badges are used to draw attention and display statuses or counts.\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 badge's content.\n\n### **CSS Properties:**\n - **--sd-badge--blue--inverted-color-background** - The background color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--blue--inverted-color-text** - The text color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--green-color--inverted-background** - The background color for the green badge in its inverted state. _(default: undefined)_\n- **--sd-badge--green-color--inverted-text** - The text color for the green badge in its inverted state. _(default: undefined)_\n- **--sd-badge--inverted-color-border** - The border color used in inverted state. _(default: undefined)_\n- **--sd-badge--green-color-background** - The background color for the green badge. _(default: undefined)_\n- **--sd-badge--red--inverted-background** - The background color for the red badge in its inverted state. _(default: undefined)_\n- **--sd-badge--red--inverted-text** - The text color for the red badge in its inverted state. _(default: undefined)_\n- **--sd-badge--red-color-background** - The background color for the red badge in its standard state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The badge's base wrapper.\n- **content** - The badge's main content.",
+          "description": "Badges are used to draw attention and display statuses or counts.\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 badge's content.\n\n### **CSS Properties:**\n - **--sd-badge--blue--inverted-color-background** - The background color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--blue--inverted-color-text** - The text color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--blue-color-background** - The background color for the blue badge in its standard state. _(default: undefined)_\n- **--sd-badge--green-color--inverted-background** - The background color for the green badge in its inverted state. _(default: undefined)_\n- **--sd-badge--green-color--inverted-text** - The text color for the green badge in its inverted state. _(default: undefined)_\n- **--sd-badge--inverted-color-border** - The border color used in inverted state. _(default: undefined)_\n- **--sd-badge--green-color-background** - The background color for the green badge. _(default: undefined)_\n- **--sd-badge--red--inverted-background** - The background color for the red badge in its inverted state. _(default: undefined)_\n- **--sd-badge--red--inverted-text** - The text color for the red badge in its inverted state. _(default: undefined)_\n- **--sd-badge--red-color-background** - The background color for the red badge in its standard state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The badge's base wrapper.\n- **content** - The badge's main content.",
           "doc-url": "",
           "attributes": [
             {
@@ -636,7 +636,7 @@
         },
         {
           "name": "sd-breadcrumb",
-          "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous 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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Properties:**\n - **--sd-breadcrumb__separator-color** - The color of the breadcrumb separators. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
+          "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous 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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Properties:**\n - **--sd-breadcrumb__separator-color** - The color of the breadcrumb separators. _(default: undefined)_\n- **--sd-breadcrumb__separator--current-color** - The color of the current breadcrumb separators. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
           "doc-url": "",
           "attributes": [
             {
@@ -753,7 +753,7 @@
         },
         {
           "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--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--inverted--active-color-background** - The background color for inverted buttons in active state. _(default: undefined)_\n- **--sd-button--primary--active-color-text** - The text 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--inverted--active-color-text** - The text color for inverted primary buttons in active 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--secondary--active-color-background** - The background color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-background** - The background color for 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--hover-color-text** - The text color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--color-border** - The border color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-text** - The text color for secondary buttons in disabled 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-background** - The background color for tertiary buttons in active 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--inverted--hover-color-background** - The background color for inverted tertiary buttons in hover state. _(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--secondary--default-color-text** - The text color for secondary buttons in default 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--tertiary--default-color-text** - The text color for tertiary buttons in default 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--size-sm-font-size** - The small button border radius. _(default: undefined)_\n- **--sd-button--size-md-font-size** - The medium button text font size. _(default: undefined)_\n- **--sd-button--size-lg-font-size** - The large button text font size. _(default: undefined)_\n- **--sd-button--size-sm-border-radius** - The small button border radius. _(default: undefined)_\n- **--sd-button--size-md-border-radius** - The medium button border radius. _(default: undefined)_\n- **--sd-button--size-lg-border-radius** - The large button border radius. _(default: undefined)_\n- **--sd-button--size-sm-padding-block** - The small button vertical padding value. _(default: undefined)_\n- **--sd-button--size-md-padding-block** - The medium button vertical padding value. _(default: undefined)_\n- **--sd-button--size-lg-padding-block** - The large button vertical padding value. _(default: undefined)_\n- **--sd-button-font-weight** - The text font weight for buttons. _(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.",
+          "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--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--secondary--default-color-text** - The text color for secondary buttons in default 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--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--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--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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1251,183 +1251,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-checkbox",
-          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the checkbox loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the checkbox gains focus.\n- **sd-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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 a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\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 checkbox's label.\n\n### **CSS Properties:**\n - **--sd-checkbox-border-width** - The border width of the checkbox. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sd-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "title",
-              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "name",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "size",
-              "description": "The checkbox's size.",
-              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'lg'" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the checkbox.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "visually-disabled",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "checked",
-              "description": "Draws the checkbox in a checked state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "indeterminate",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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": "required",
-              "description": "Makes the checkbox a required field.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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": "The checkbox's label." }],
-          "events": [
-            {
-              "name": "sd-blur",
-              "description": "Emitted when the checkbox loses focus."
-            },
-            {
-              "name": "sd-change",
-              "description": "Emitted when the checked state changes."
-            },
-            {
-              "name": "sd-focus",
-              "description": "Emitted when the checkbox gains focus."
-            },
-            {
-              "name": "sd-input",
-              "description": "Emitted when the checkbox receives input."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "title",
-                "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
-                "type": "string"
-              },
-              {
-                "name": "name",
-                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The checkbox's size.",
-                "type": "'sm' | 'md' | 'lg'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the checkbox.",
-                "type": "boolean"
-              },
-              {
-                "name": "visuallyDisabled",
-                "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-                "type": "boolean"
-              },
-              {
-                "name": "checked",
-                "description": "Draws the checkbox in a checked state.",
-                "type": "boolean"
-              },
-              {
-                "name": "indeterminate",
-                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-                "type": "boolean"
-              },
-              {
-                "name": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "boolean"
-              },
-              {
-                "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": "required",
-                "description": "Makes the checkbox a required field.",
-                "type": "boolean"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-blur",
-                "description": "Emitted when the checkbox loses focus."
-              },
-              {
-                "name": "sd-change",
-                "description": "Emitted when the checked state changes."
-              },
-              {
-                "name": "sd-focus",
-                "description": "Emitted when the checkbox gains focus."
-              },
-              {
-                "name": "sd-input",
-                "description": "Emitted when the checkbox receives input."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-checkbox-group",
           "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\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 default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
@@ -1523,145 +1346,136 @@
           }
         },
         {
-          "name": "sd-datepicker",
-          "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "name": "sd-combobox",
+          "description": "Comboboxes 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 combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox'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- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\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\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 form controls. _(default: undefined)_\n- **--sd-form-control-color-border** - The border color for default and readonly form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control__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-combobox__tag-border-width** - The border width for the tags for multiple options combobox. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "locale",
-              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
-              "value": { "type": "string", "default": "'en-US'" }
+              "name": "name",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "value",
-              "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
-              "value": { "type": "string | null", "default": "null" }
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+              "value": { "type": "string | string[]", "default": "''" }
             },
             {
-              "name": "range",
-              "description": "Enables date range selection when true.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "size",
+              "description": "The combobox's size.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
             },
             {
-              "name": "range-start",
-              "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
-              "value": { "type": "string | null", "default": "null" }
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "range-end",
-              "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
-              "value": { "type": "string | null", "default": "null" }
+              "name": "max-options-tag-label",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "allowSameDayRange",
-              "description": "Allows selecting the same start and end date when true.",
+              "name": "disabled",
+              "description": "Disables the combobox control.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "min",
-              "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
-              "value": {
-                "type": "string | number | Date | undefined",
-                "default": "undefined"
-              }
+              "name": "visually-disabled",
+              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "max",
-              "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
-              "value": {
-                "type": "string | number | Date | undefined",
-                "default": "undefined"
-              }
+              "name": "clearable",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "view-month",
-              "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
-              "value": { "type": "Date | null", "default": "null" }
+              "name": "open",
+              "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "firstDayOfWeek",
-              "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
-              "value": { "type": "number | null", "default": "null" }
+              "name": "hoist",
+              "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled-weekends",
-              "description": "When true, weekends (Saturday/Sunday) are disabled.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "disabled-dates",
-              "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
-              "value": { "type": "string[] | string", "default": "[]" }
+              "name": "placement",
+              "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
             },
             {
-              "name": "size",
-              "description": "Size of the input and calendar visuals.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
-            },
-            {
-              "name": "alignment",
-              "description": "Horizontal alignment of the flyout relative to the input.",
-              "value": { "type": "'left' | 'right'", "default": "'left'" }
-            },
-            {
-              "name": "label",
-              "description": "Text label for the input. Can be overridden with slot=\"label\".",
+              "name": "help-text",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "help-text",
-              "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "floating-label",
-              "description": "Enables the floating label behavior for the input.",
+              "name": "required",
+              "description": "The combobox's required attribute.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the control entirely when true.",
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "required",
-              "description": "Makes the input a required field.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "type",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+              "value": { "type": "'search' | 'text'", "default": "'text'" }
             },
             {
-              "name": "visually-disabled",
-              "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "getOption",
+              "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+              "value": {
+                "type": "OptionRenderer",
+                "default": "defaultOptionRenderer"
+              }
             },
             {
-              "name": "style-on-valid",
-              "description": "When true, applies success styling for valid selections.",
+              "name": "multiple",
+              "description": "Allows more than one option to be selected.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "readonly",
-              "description": "Makes the input read-only (non-editable) when true.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "useTags",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+              "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "placement",
-              "description": "Preferred placement of the flyout relative to the input (top|bottom).",
-              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+              "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": "placeholder",
-              "description": "Placeholder text for the input when no date is selected.",
-              "value": { "type": "string", "default": "''" }
+              "name": "style-on-valid",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "name",
-              "description": "The name of the datepicker, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "name": "filter",
+              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+              "value": {
+                "type": "(option: SdOption, queryString: string) => boolean"
+              }
             },
             {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
-              "value": { "type": "string", "default": "''" }
+              "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",
@@ -1674,97 +1488,176 @@
               "value": { "type": "string" }
             }
           ],
-          "events": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually."
+            },
+            {
+              "name": "label",
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute."
+            },
+            {
+              "name": "left",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "right",
+              "description": "Used to append a presentational icon or similar element to the combobox."
+            },
+            {
+              "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."
+            }
+          ],
+          "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 combobox's menu opens."
+            },
+            {
+              "name": "sd-after-show",
+              "description": "Emitted after the combobox's menu opens and all animations are complete."
+            },
+            {
+              "name": "sd-hide",
+              "description": "Emitted when the combobox's menu closes."
+            },
+            {
+              "name": "sd-after-hide",
+              "description": "Emitted after the combobox'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-error",
+              "description": "Emitted when the combobox menu fails to open."
+            }
+          ],
           "js": {
             "properties": [
+              { "name": "popup", "type": "SdPopup" },
+              { "name": "displayInputValue", "type": "string" },
+              { "name": "selectedTextLabel", "type": "string" },
+              { "name": "selectedOptions", "type": "(SdOption | undefined)[]" },
               {
-                "name": "localize",
-                "description": "Localize controller used to fetch localized terms/labels."
+                "name": "filteredOptions",
+                "type": "(SdOption | SdOptgroup | undefined)[]"
               },
               {
-                "name": "locale",
-                "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
-                "type": "string"
+                "name": "allOptions",
+                "type": "(SdOption | SdOptgroup | undefined)[]"
               },
+              { "name": "lastOption", "type": "SdOption | undefined" },
               {
-                "name": "value",
-                "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
-                "type": "string | null"
+                "name": "name",
+                "description": "The name of the combobox, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "range",
-                "description": "Enables date range selection when true.",
-                "type": "boolean"
+                "name": "value",
+                "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+                "type": "string | string[]"
               },
               {
-                "name": "rangeStart",
-                "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
-                "type": "string | null"
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
               },
               {
-                "name": "rangeEnd",
-                "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
-                "type": "string | null"
+                "name": "size",
+                "description": "The combobox's size.",
+                "type": "'lg' | 'md' | 'sm'"
               },
               {
-                "name": "allowSameDayRange",
-                "description": "Allows selecting the same start and end date when true.",
-                "type": "boolean"
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the combobox is empty.",
+                "type": "string"
               },
               {
-                "name": "min",
-                "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
-                "type": "string | number | Date | undefined"
+                "name": "maxOptionsTagLabel",
+                "description": "Label text shown on tag if max-options-visible is reached.",
+                "type": "string"
               },
               {
-                "name": "max",
-                "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
-                "type": "string | number | Date | undefined"
+                "name": "disabled",
+                "description": "Disables the combobox control.",
+                "type": "boolean"
               },
               {
-                "name": "viewMonth",
-                "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
-                "type": "Date | null"
+                "name": "visuallyDisabled",
+                "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+                "type": "boolean"
               },
               {
-                "name": "firstDayOfWeek",
-                "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
-                "type": "number | null"
+                "name": "clearable",
+                "description": "Adds a clear button when the combobox is not empty.",
+                "type": "boolean"
               },
               {
-                "name": "disabledWeekends",
-                "description": "When true, weekends (Saturday/Sunday) are disabled.",
+                "name": "open",
+                "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
                 "type": "boolean"
               },
               {
-                "name": "disabledDates",
-                "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
-                "type": "string[] | string"
+                "name": "hoist",
+                "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "type": "boolean"
               },
               {
-                "name": "isDateDisabled",
-                "description": "Custom predicate that can disable specific dates at runtime.",
-                "type": "((d: Date) => boolean) | null"
+                "name": "label",
+                "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
               },
               {
-                "name": "size",
-                "description": "Size of the input and calendar visuals.",
-                "type": "'lg' | 'md' | 'sm'"
+                "name": "placement",
+                "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "alignment",
-                "description": "Horizontal alignment of the flyout relative to the input.",
-                "type": "'left' | 'right'"
+                "name": "helpText",
+                "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "Text label for the input. Can be overridden with slot=\"label\".",
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
                 "type": "string"
               },
               {
-                "name": "helpText",
-                "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
-                "type": "string"
+                "name": "required",
+                "description": "The combobox's required attribute.",
+                "type": "boolean"
               },
               {
                 "name": "floatingLabel",
@@ -1772,448 +1665,600 @@
                 "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Disables the control entirely when true.",
-                "type": "boolean"
+                "name": "type",
+                "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+                "type": "'search' | 'text'"
               },
               {
-                "name": "required",
-                "description": "Makes the input a required field.",
+                "name": "getOption",
+                "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+                "type": "OptionRenderer"
+              },
+              {
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
                 "type": "boolean"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+                "name": "useTags",
+                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
                 "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": "styleOnValid",
-                "description": "When true, applies success styling for valid selections.",
+                "description": "Shows success styles if the validity of the input is valid.",
                 "type": "boolean"
               },
               {
-                "name": "readonly",
-                "description": "Makes the input read-only (non-editable) when true.",
-                "type": "boolean"
+                "name": "filter",
+                "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+                "type": "(option: SdOption, queryString: string) => boolean"
               },
               {
-                "name": "placement",
-                "description": "Preferred placement of the flyout relative to the input (top|bottom).",
-                "type": "'top' | 'bottom'"
+                "name": "validity",
+                "description": "Gets the validity state object"
               },
               {
-                "name": "placeholder",
-                "description": "Placeholder text for the input when no date is selected.",
-                "type": "string"
+                "name": "validationMessage",
+                "description": "Gets the validation message"
               },
               {
-                "name": "name",
-                "description": "The name of the datepicker, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
               },
               {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
+                "name": "lang",
+                "description": "The element's language.",
                 "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "hasFocus",
-                "description": "True when the input or calendar has focus.",
-                "type": "boolean"
+                "name": "sd-clear",
+                "description": "Emitted when the control's value is cleared."
               },
               {
-                "name": "showValidStyle",
-                "description": "Whether to show the valid styling state.",
-                "type": "boolean"
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
               },
               {
-                "name": "showInvalidStyle",
-                "description": "Whether to show the invalid styling state.",
-                "type": "boolean"
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
               },
               {
-                "name": "currentPlacement",
-                "description": "Actual placement currently used by the flyout."
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
               },
-              { "name": "popup", "type": "SdPopup" },
-              { "name": "validity" },
-              { "name": "validationMessage" },
               {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
+                "name": "sd-show",
+                "description": "Emitted when the combobox's menu opens."
               },
               {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
+                "name": "sd-after-show",
+                "description": "Emitted after the combobox's menu opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the combobox's menu closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the combobox'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-error",
+                "description": "Emitted when the combobox menu fails to open."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
-          "name": "sd-combobox",
-          "description": "Comboboxes 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 combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox'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- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\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\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\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "name": "sd-checkbox",
+          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the checkbox loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the checkbox gains focus.\n- **sd-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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 a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\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 checkbox's label.\n\n### **CSS Properties:**\n - **--sd-checkbox-border-width** - The border width of the checkbox. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sd-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "title",
+              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "name",
-              "description": "The name of the combobox, submitted as a name/value pair with form data.",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "value",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "value": { "type": "string | string[]", "default": "''" }
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
             },
             {
               "name": "size",
-              "description": "The combobox's size.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
-            },
-            {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the combobox 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": "''" }
+              "description": "The checkbox's size.",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'lg'" }
             },
             {
               "name": "disabled",
-              "description": "Disables the combobox control.",
+              "description": "Disables the checkbox.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "visually-disabled",
-              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "clearable",
-              "description": "Adds a clear button when the combobox is not empty.",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "open",
-              "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "hoist",
-              "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "name": "indeterminate",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "placement",
-              "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
-              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "help-text",
-              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
             },
             {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
-              "value": { "type": "string", "default": "''" }
-            },
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The checkbox's label." }],
+          "events": [
             {
-              "name": "required",
-              "description": "The combobox's required attribute.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-blur",
+              "description": "Emitted when the checkbox loses focus."
             },
             {
-              "name": "floating-label",
-              "description": "Enables the floating label behavior for the input.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-change",
+              "description": "Emitted when the checked state changes."
             },
             {
-              "name": "type",
-              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-              "value": { "type": "'search' | 'text'", "default": "'text'" }
+              "name": "sd-focus",
+              "description": "Emitted when the checkbox gains focus."
             },
             {
-              "name": "getOption",
-              "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
-              "value": {
-                "type": "OptionRenderer",
-                "default": "defaultOptionRenderer"
+              "name": "sd-input",
+              "description": "Emitted when the checkbox receives input."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "title",
+                "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
+              },
+              {
+                "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": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the checkbox loses focus."
+              },
+              {
+                "name": "sd-change",
+                "description": "Emitted when the checked state changes."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the checkbox gains focus."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the checkbox receives input."
               }
+            ]
+          }
+        },
+        {
+          "name": "sd-datepicker",
+          "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "locale",
+              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+              "value": { "type": "string", "default": "'en-US'" }
             },
             {
-              "name": "multiple",
-              "description": "Allows more than one option to be selected.",
+              "name": "value",
+              "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "range",
+              "description": "Enables date range selection when true.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "useTags",
-              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
-              "value": { "type": "boolean", "default": "true" }
+              "name": "range-start",
+              "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
-              "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": "range-end",
+              "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
-              "name": "style-on-valid",
-              "description": "Shows success styles if the validity of the input is valid.",
+              "name": "allowSameDayRange",
+              "description": "Allows selecting the same start and end date when true.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "filter",
-              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+              "name": "min",
+              "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
               "value": {
-                "type": "(option: SdOption, queryString: string) => boolean"
+                "type": "string | number | Date | undefined",
+                "default": "undefined"
               }
             },
             {
-              "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": "max",
+              "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
               "value": {
-                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
+                "type": "string | number | Date | undefined",
+                "default": "undefined"
               }
             },
             {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+              "name": "view-month",
+              "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
+              "value": { "type": "Date | null", "default": "null" }
             },
             {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
+              "name": "firstDayOfWeek",
+              "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+              "value": { "type": "number | null", "default": "null" }
+            },
             {
-              "name": "",
-              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually."
+              "name": "disabled-weekends",
+              "description": "When true, weekends (Saturday/Sunday) are disabled.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "The combobox's label. Alternatively, you can use the `label` attribute."
+              "name": "disabled-dates",
+              "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
+              "value": { "type": "string[] | string", "default": "[]" }
             },
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute."
+              "name": "size",
+              "description": "Size of the input and calendar visuals.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
             },
             {
-              "name": "left",
-              "description": "Used to prepend a presentational icon or similar element to the combobox."
+              "name": "alignment",
+              "description": "Horizontal alignment of the flyout relative to the input.",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
             },
             {
-              "name": "right",
-              "description": "Used to append a presentational icon or similar element to the combobox."
+              "name": "label",
+              "description": "Text label for the input. Can be overridden with slot=\"label\".",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "clear-icon",
-              "description": "An icon to use in lieu of the default clear icon."
+              "name": "help-text",
+              "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "expand-icon",
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
-            }
-          ],
-          "events": [
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
-              "name": "sd-change",
-              "description": "Emitted when the control's value changes."
+              "name": "disabled",
+              "description": "Disables the control entirely when true.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sd-clear",
-              "description": "Emitted when the control's value is cleared."
+              "name": "required",
+              "description": "Makes the input a required field.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sd-input",
-              "description": "Emitted when the control receives input."
+              "name": "visually-disabled",
+              "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sd-focus",
-              "description": "Emitted when the control gains focus."
+              "name": "style-on-valid",
+              "description": "When true, applies success styling for valid selections.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sd-blur",
-              "description": "Emitted when the control loses focus."
+              "name": "readonly",
+              "description": "Makes the input read-only (non-editable) when true.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sd-show",
-              "description": "Emitted when the combobox's menu opens."
+              "name": "placement",
+              "description": "Preferred placement of the flyout relative to the input (top|bottom).",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
             },
             {
-              "name": "sd-after-show",
-              "description": "Emitted after the combobox's menu opens and all animations are complete."
+              "name": "placeholder",
+              "description": "Placeholder text for the input when no date is selected.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "sd-hide",
-              "description": "Emitted when the combobox's menu closes."
+              "name": "name",
+              "description": "The name of the datepicker, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "sd-after-hide",
-              "description": "Emitted after the combobox's menu closes and all animations are complete."
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "sd-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
             },
             {
-              "name": "sd-error",
-              "description": "Emitted when the combobox menu fails to open."
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "popup", "type": "SdPopup" },
-              { "name": "displayInputValue", "type": "string" },
-              { "name": "selectedTextLabel", "type": "string" },
-              { "name": "selectedOptions", "type": "(SdOption | undefined)[]" },
               {
-                "name": "filteredOptions",
-                "type": "(SdOption | SdOptgroup | undefined)[]"
+                "name": "localize",
+                "description": "Localize controller used to fetch localized terms/labels."
+              },
+              {
+                "name": "locale",
+                "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
+                "type": "string | null"
+              },
+              {
+                "name": "range",
+                "description": "Enables date range selection when true.",
+                "type": "boolean"
+              },
+              {
+                "name": "rangeStart",
+                "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
+                "type": "string | null"
+              },
+              {
+                "name": "rangeEnd",
+                "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
+                "type": "string | null"
+              },
+              {
+                "name": "allowSameDayRange",
+                "description": "Allows selecting the same start and end date when true.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
+                "type": "string | number | Date | undefined"
+              },
+              {
+                "name": "max",
+                "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
+                "type": "string | number | Date | undefined"
+              },
+              {
+                "name": "viewMonth",
+                "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
+                "type": "Date | null"
               },
               {
-                "name": "allOptions",
-                "type": "(SdOption | SdOptgroup | undefined)[]"
+                "name": "firstDayOfWeek",
+                "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+                "type": "number | null"
               },
-              { "name": "lastOption", "type": "SdOption | undefined" },
               {
-                "name": "name",
-                "description": "The name of the combobox, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "disabledWeekends",
+                "description": "When true, weekends (Saturday/Sunday) are disabled.",
+                "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-                "type": "string | string[]"
+                "name": "disabledDates",
+                "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
+                "type": "string[] | string"
               },
               {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string"
+                "name": "isDateDisabled",
+                "description": "Custom predicate that can disable specific dates at runtime.",
+                "type": "((d: Date) => boolean) | null"
               },
               {
                 "name": "size",
-                "description": "The combobox's size.",
+                "description": "Size of the input and calendar visuals.",
                 "type": "'lg' | 'md' | 'sm'"
               },
               {
-                "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the combobox is empty.",
+                "name": "alignment",
+                "description": "Horizontal alignment of the flyout relative to the input.",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "label",
+                "description": "Text label for the input. Can be overridden with slot=\"label\".",
                 "type": "string"
               },
               {
-                "name": "maxOptionsTagLabel",
-                "description": "Label text shown on tag if max-options-visible is reached.",
+                "name": "helpText",
+                "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
                 "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "Disables the combobox control.",
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
                 "type": "boolean"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+                "name": "disabled",
+                "description": "Disables the control entirely when true.",
                 "type": "boolean"
               },
               {
-                "name": "clearable",
-                "description": "Adds a clear button when the combobox is not empty.",
+                "name": "required",
+                "description": "Makes the input a required field.",
                 "type": "boolean"
               },
               {
-                "name": "open",
-                "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+                "name": "visuallyDisabled",
+                "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
                 "type": "boolean"
               },
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "name": "styleOnValid",
+                "description": "When true, applies success styling for valid selections.",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
+                "name": "readonly",
+                "description": "Makes the input read-only (non-editable) when true.",
+                "type": "boolean"
               },
               {
                 "name": "placement",
-                "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+                "description": "Preferred placement of the flyout relative to the input (top|bottom).",
                 "type": "'top' | 'bottom'"
               },
               {
-                "name": "helpText",
-                "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "name": "placeholder",
+                "description": "Placeholder text for the input when no date is selected.",
                 "type": "string"
               },
               {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+                "name": "name",
+                "description": "The name of the datepicker, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
-                "name": "required",
-                "description": "The combobox's required attribute.",
-                "type": "boolean"
-              },
-              {
-                "name": "floatingLabel",
-                "description": "Enables the floating label behavior for the input.",
-                "type": "boolean"
-              },
-              {
-                "name": "type",
-                "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-                "type": "'search' | 'text'"
-              },
-              {
-                "name": "getOption",
-                "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
-                "type": "OptionRenderer"
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
+                "type": "string"
               },
               {
-                "name": "multiple",
-                "description": "Allows more than one option to be selected.",
+                "name": "hasFocus",
+                "description": "True when the input or calendar has focus.",
                 "type": "boolean"
               },
               {
-                "name": "useTags",
-                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+                "name": "showValidStyle",
+                "description": "Whether to show the valid styling state.",
                 "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": "styleOnValid",
-                "description": "Shows success styles if the validity of the input is valid.",
+                "name": "showInvalidStyle",
+                "description": "Whether to show the invalid styling state.",
                 "type": "boolean"
               },
               {
-                "name": "filter",
-                "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
-                "type": "(option: SdOption, queryString: string) => boolean"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
+                "name": "currentPlacement",
+                "description": "Actual placement currently used by the flyout."
               },
+              { "name": "popup", "type": "SdPopup" },
+              { "name": "validity" },
+              { "name": "validationMessage" },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -2225,52 +2270,7 @@
                 "type": "string"
               }
             ],
-            "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 combobox's menu opens."
-              },
-              {
-                "name": "sd-after-show",
-                "description": "Emitted after the combobox's menu opens and all animations are complete."
-              },
-              {
-                "name": "sd-hide",
-                "description": "Emitted when the combobox's menu closes."
-              },
-              {
-                "name": "sd-after-hide",
-                "description": "Emitted after the combobox'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-error",
-                "description": "Emitted when the combobox menu fails to open."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -2609,7 +2609,7 @@
         },
         {
           "name": "sd-dropdown",
-          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\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 dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of the dropdown panel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\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 dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of the dropdown panel. _(default: undefined)_\n- **--sd-dropdown-color-background** - The background color of the dropdown panel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
@@ -2900,7 +2900,7 @@
         },
         {
           "name": "sd-flipcard",
-          "description": "Flipcard allows for the addition of content/information on both \"sides\" of the card, through means of a flip animation. Used  to add dynamism and interactivity to a page.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard 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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
+          "description": "Flipcard allows for the addition of content/information on both \"sides\" of the card, through means of a flip animation. Used  to add dynamism and interactivity to a page.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard 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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n- **--sd-informational-gradient--primary-800-color-background** - The color used in the gradient of the flipcard when the `gradient-dark` variant is used. By default, it uses the `--sd-color-primary-800` color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
           "doc-url": "",
           "attributes": [
             {
@@ -3016,7 +3016,7 @@
         },
         {
           "name": "sd-header",
-          "description": "Header\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 header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
+          "description": "Header\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 header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n- **--sd-header-padding-bottom** - padding bottom of the header content _(default: undefined)_\n- **--sd-header__underline-color-background** - the background color of the underlined background _(default: undefined)_\n- **--sd-header__underline-height** - height of the underlined header _(default: undefined)_\n- **--sd-header__shadow-height** - height of the shadow when the header is fixed _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
           "doc-url": "",
           "attributes": [
             {
@@ -3061,27 +3061,37 @@
           }
         },
         {
-          "name": "sd-include",
-          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.\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.",
+          "name": "sd-icon",
+          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\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.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "src",
-              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "string" }
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "mode",
-              "description": "The fetch mode to use.",
-              "value": {
-                "type": "'cors' | 'no-cors' | 'same-origin'",
-                "default": "'cors'"
-              }
+              "name": "label",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "allow-scripts",
-              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": { "type": "string", "default": "'default'" }
+            },
+            {
+              "name": "color",
+              "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+              "value": {
+                "type": "'currentColor' | 'primary' | 'white'",
+                "default": "'currentColor'"
+              }
             },
             {
               "name": "dir",
@@ -3097,30 +3107,39 @@
           "events": [
             {
               "name": "sd-load",
-              "description": "Emitted when the included file is loaded."
+              "description": "Emitted when the icon has loaded."
             },
             {
               "name": "sd-error",
-              "type": "{ status: number }",
-              "description": "Emitted when the included file fails to load due to an error."
+              "description": "Emitted when the icon fails to load due to an error."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
+              },
               {
                 "name": "src",
-                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
                 "type": "string"
               },
               {
-                "name": "mode",
-                "description": "The fetch mode to use.",
-                "type": "'cors' | 'no-cors' | 'same-origin'"
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "string"
               },
               {
-                "name": "allowScripts",
-                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-                "type": "boolean"
+                "name": "color",
+                "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+                "type": "'currentColor' | 'primary' | 'white'"
               },
               {
                 "name": "dir",
@@ -3136,49 +3155,38 @@
             "events": [
               {
                 "name": "sd-load",
-                "description": "Emitted when the included file is loaded."
+                "description": "Emitted when the icon has loaded."
               },
               {
                 "name": "sd-error",
-                "type": "{ status: number }",
-                "description": "Emitted when the included file fails to load due to an error."
+                "description": "Emitted when the icon fails to load due to an error."
               }
             ]
           }
         },
         {
-          "name": "sd-icon",
-          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
-            },
+          "name": "sd-include",
+          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.\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.",
+          "doc-url": "",
+          "attributes": [
             {
               "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "label",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": { "type": "string", "default": "'default'" }
+              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "string" }
             },
             {
-              "name": "color",
-              "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+              "name": "mode",
+              "description": "The fetch mode to use.",
               "value": {
-                "type": "'currentColor' | 'primary' | 'white'",
-                "default": "'currentColor'"
+                "type": "'cors' | 'no-cors' | 'same-origin'",
+                "default": "'cors'"
               }
             },
+            {
+              "name": "allow-scripts",
+              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -3193,39 +3201,30 @@
           "events": [
             {
               "name": "sd-load",
-              "description": "Emitted when the icon has loaded."
+              "description": "Emitted when the included file is loaded."
             },
             {
               "name": "sd-error",
-              "description": "Emitted when the icon fails to load due to an error."
+              "type": "{ status: number }",
+              "description": "Emitted when the included file fails to load due to an error."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
-              },
               {
                 "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "label",
-                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
                 "type": "string"
               },
               {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "string"
+                "name": "mode",
+                "description": "The fetch mode to use.",
+                "type": "'cors' | 'no-cors' | 'same-origin'"
               },
               {
-                "name": "color",
-                "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
-                "type": "'currentColor' | 'primary' | 'white'"
+                "name": "allowScripts",
+                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "type": "boolean"
               },
               {
                 "name": "dir",
@@ -3241,18 +3240,19 @@
             "events": [
               {
                 "name": "sd-load",
-                "description": "Emitted when the icon has loaded."
+                "description": "Emitted when the included file is loaded."
               },
               {
                 "name": "sd-error",
-                "description": "Emitted when the icon fails to load due to an error."
+                "type": "{ status: number }",
+                "description": "Emitted when the included file fails to load due to an error."
               }
             ]
           }
         },
         {
           "name": "sd-input",
-          "description": "Inputs collect data from the user.\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-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\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--filled__floating-label-color-text** - The floating label text color when active. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon** - The icon color for form controls. _(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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **form-control-floating-label** - The floating label text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
+          "description": "Inputs collect data from the user.\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-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\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--filled__floating-label-color-text** - The floating label text color when active. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The icon color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **form-control-floating-label** - The floating label text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
           "doc-url": "",
           "attributes": [
             {
@@ -3706,56 +3706,9 @@
             ]
           }
         },
-        {
-          "name": "sd-loader",
-          "description": "Loaders are used to show the progress of an indeterminate operation.\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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "The color of the loader.",
-              "value": {
-                "type": "'primary' | 'white' | 'currentColor'",
-                "default": "'currentColor'"
-              }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "The color of the loader.",
-                "type": "'primary' | 'white' | 'currentColor'"
-              },
-              { "name": "localize" },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sd-link",
-          "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Properties:**\n - **--sd-interactive--active-color-text** - The link's text color when active. _(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 link's label.\n- **icon-right** - The container that wraps the right icon area.",
+          "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Properties:**\n - **--sd-interactive--active-color-text** - The link's text color when active. _(default: undefined)_\n- **--sd-interactive--default-color-text** - The default link's text color. _(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 link's label.\n- **icon-right** - The container that wraps the right icon area.",
           "doc-url": "",
           "attributes": [
             {
@@ -3888,9 +3841,56 @@
             ]
           }
         },
+        {
+          "name": "sd-loader",
+          "description": "Loaders are used to show the progress of an indeterminate operation.\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The color of the loader.",
+              "value": {
+                "type": "'primary' | 'white' | 'currentColor'",
+                "default": "'currentColor'"
+              }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "The color of the loader.",
+                "type": "'primary' | 'white' | 'currentColor'"
+              },
+              { "name": "localize" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-map-marker",
-          "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\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 marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-icon-fill** - The icon fill color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker-cluster-color-icon-fill** - The default icon fill color for map marker clusters. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
+          "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\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 marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-icon-fill** - The icon fill color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker-cluster-color-icon-fill** - The default icon fill color for map marker clusters. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-text** - The text color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker--cluster--default-color-background** - The default background color for map marker clusters. _(default: undefined)_\n- **--sd-map-marker--cluster--hover-color-background** - The background color for map marker clusters in hover state. _(default: undefined)_\n- **--sd-map-marker--cluster-color-text** - The text color for map marker clusters. _(default: undefined)_\n- **--sd-map-marker--main-color-background** - The background color for main map markers. _(default: undefined)_\n- **--sd-map-marker--pin--default-color-background** - The default background color for place map markers. _(default: undefined)_\n- **--sd-map-marker--pin--hover-color-background** - The background color for place map markers in hover state. _(default: undefined)_\n- **--sd-map-marker--pin-color-text** - The text color for place map markers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
           "doc-url": "",
           "attributes": [
             {
@@ -4016,54 +4016,9 @@
             ]
           }
         },
-        {
-          "name": "sd-menu",
-          "description": "Used as a list of choices to the user, such as a set of actions or functions.\n---\n\n\n### **Events:**\n - **sd-select** - Emitted when a menu item is selected.\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 menu's content.\n\n### **CSS Properties:**\n - **--sd-menu-color-icon** - The default icon color for menu items. _(default: undefined)_\n- **--sd-menu-color-text** - The default text color for menu items. _(default: undefined)_\n- **--sd-menu--disabled-color-icon** - The icon color for disabled menu items. _(default: undefined)_\n- **--sd-menu--disabled-color-text** - The text color for disabled menu items. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "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": "The menu's content." }],
-          "events": [
-            {
-              "name": "sd-select",
-              "description": "Emitted when a menu item is selected."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "localize" },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-select",
-                "description": "Emitted when a menu item is selected."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-menu-item",
-          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\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 menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n- **--sd-navigable-border-radius** - The menu-item border radius on hover. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
+          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\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 menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n- **--sd-navigable-border-radius** - The menu-item border radius on hover. _(default: undefined)_\n- **--sd-menu-item-color-icon-fill** - The default icon color for menu items. _(default: undefined)_\n- **--sd-menu-item-color-text** - The default text color for menu items. _(default: undefined)_\n- **--sd-menu-item--disabled-color-icon-fill** - The icon color for disabled menu items. _(default: undefined)_\n- **--sd-menu-item--disabled-color-text** - The text color for disabled menu items. _(default: undefined)_\n- **--sd-menu-color-icon** - This custom property is deprecated. Use `--sd-menu-item-color-icon-fill` instead. _(default: undefined)_\n- **--sd-menu-color-text** - This custom property is deprecated. Use `--sd-menu-item-color-text` instead. _(default: undefined)_\n- **--sd-menu--disabled-color-icon** - This custom property is deprecated. Use `--sd-menu-item--disabled-color-icon-fill` instead. _(default: undefined)_\n- **--sd-menu--disabled-color-text** - This custom property is deprecated. Use `--sd-menu-item--disabled-color-text` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
           "doc-url": "",
           "attributes": [
             {
@@ -4111,34 +4066,74 @@
               "description": "Used to prepend an icon or similar element to the menu item."
             },
             {
-              "name": "submenu",
-              "description": "Used to denote a nested menu."
+              "name": "submenu",
+              "description": "Used to denote a nested menu."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
+                "type": "'normal' | 'checkbox'"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the item in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the menu item in a disabled state, preventing selection.",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
+                "type": "string"
+              },
+              { "name": "chevron", "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-menu",
+          "description": "Used as a list of choices to the user, such as a set of actions or functions.\n---\n\n\n### **Events:**\n - **sd-select** - Emitted when a menu item is selected.\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 menu's content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "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": "The menu's content." }],
+          "events": [
+            {
+              "name": "sd-select",
+              "description": "Emitted when a menu item is selected."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
-              {
-                "name": "type",
-                "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
-                "type": "'normal' | 'checkbox'"
-              },
-              {
-                "name": "checked",
-                "description": "Draws the item in a checked state.",
-                "type": "boolean"
-              },
-              {
-                "name": "disabled",
-                "description": "Draws the menu item in a disabled state, preventing selection.",
-                "type": "boolean"
-              },
-              {
-                "name": "value",
-                "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
-                "type": "string"
-              },
-              { "name": "chevron", "type": "boolean" },
+              { "name": "localize" },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -4150,12 +4145,17 @@
                 "type": "string"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "sd-select",
+                "description": "Emitted when a menu item is selected."
+              }
+            ]
           }
         },
         {
           "name": "sd-navigation-item",
-          "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\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 navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--sd-navigation-item--current-color-text** - The navigation-item text color when current state. _(default: undefined)_\n- **--sd-navigation-item-color-text** - The navigation-item text color. _(default: undefined)_\n- **--sd-navigable-border-radius** - The navigation-item border radius on hover and active state. _(default: undefined)_\n- **--sd-navigable-font-size** - The navigation-item font size. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius** - The navigation-item current indicator border radius value. _(default: undefined)_\n- **--sd-navigable__current-indicator-height** - The horizontal navigation-item current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-width** - The vertical navigation-item current indicator width. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
+          "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\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 navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--sd-navigation-item-color-text** - The navigation-item text color. _(default: undefined)_\n- **--sd-navigable-border-radius** - The navigation-item border radius on hover and active state. _(default: undefined)_\n- **--sd-navigable-font-size** - The navigation-item font size. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius** - The navigation-item current indicator border radius value. _(default: undefined)_\n- **--sd-navigable__current-indicator-height** - The horizontal navigation-item current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-width** - The vertical navigation-item current indicator width. _(default: undefined)_\n- **--sd-navigation-item--current-color-text** - This custom property is deprecated. Use `--sd-navigation-item-color-text` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
           "doc-url": "",
           "attributes": [
             {
@@ -4342,7 +4342,7 @@
         },
         {
           "name": "sd-notification",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-notification--error-color-background** - The background color for error notifications. _(default: undefined)_\n- **--sd-notification--info-color-background** - The background color for info notifications. _(default: undefined)_\n- **--sd-notification--success-color-background** - The background color for success notifications. _(default: undefined)_\n- **--sd-notification--warning-color-background** - The background color for warning notifications. _(default: undefined)_\n- **--sd-notification-color-border** - the border color of notifications. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-notification--error-color-background** - The background color for error notifications. _(default: undefined)_\n- **--sd-notification--info-color-background** - The background color for info notifications. _(default: undefined)_\n- **--sd-notification--success-color-background** - The background color for success notifications. _(default: undefined)_\n- **--sd-notification--warning-color-background** - The background color for warning notifications. _(default: undefined)_\n- **--sd-notification-color-border** - the border color of notifications. _(default: undefined)_\n- **--sd-notification__duration-indicator-color-background** - The background color for the duration indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
           "doc-url": "",
           "attributes": [
             {
@@ -4483,9 +4483,69 @@
             ]
           }
         },
+        {
+          "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": "disabled",
+              "description": "Disables all options in the optgroup.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "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": "The given options. Must be `<sd-option>` elements."
+            },
+            { "name": "label", "description": "The label for the optgroup" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "Disables all options in the optgroup.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+                "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-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-option--disabled-color-border** - The border color of checkboxes for the disabled options. _(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.",
+          "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": [
             {
@@ -4847,69 +4907,9 @@
             ]
           }
         },
-        {
-          "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": "disabled",
-              "description": "Disables all options in the optgroup.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-              "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": "The given options. Must be `<sd-option>` elements."
-            },
-            { "name": "label", "description": "The label for the optgroup" }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "disabled",
-                "description": "Disables all options in the optgroup.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-                "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-quickfact",
-          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-quickfact--expandable-color-text** - The text color for expandable quickfact. _(default: undefined)_\n- **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-background** - The accordion background color. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - The accordion chevron color. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
+          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-quickfact--expandable-color-text** - The text color for expandable quickfact. _(default: undefined)_\n- **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n- **--sd-accordion-color-icon-fill** - The accordion icon color. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -5012,110 +5012,15 @@
               },
               {
                 "name": "sd-after-show",
-                "description": "Emitted after the accordion opens and all animations are complete."
-              },
-              {
-                "name": "sd-hide",
-                "description": "Emitted when the accordion closes."
-              },
-              {
-                "name": "sd-after-hide",
-                "description": "Emitted after the accordion closes and all animations are complete."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sd-radio-button",
-          "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\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 radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "The radio button's size.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the radio button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "visually-disabled",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "value",
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "value": { "type": "string" }
-            },
-            {
-              "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": "The radio button's label." },
-            { "name": "icon", "description": "A presentational icon." }
-          ],
-          "events": [
-            {
-              "name": "sd-blur",
-              "description": "Emitted when the button loses focus."
-            },
-            {
-              "name": "sd-focus",
-              "description": "Emitted when the button gains focus."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "The radio button's size.",
-                "type": "'lg' | 'md' | 'sm'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the radio button.",
-                "type": "boolean"
-              },
-              {
-                "name": "visuallyDisabled",
-                "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
-                "type": "boolean"
-              },
-              {
-                "name": "value",
-                "description": "The radio's value. When selected, the radio group will receive this value.",
-                "type": "string"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
+                "description": "Emitted after the accordion opens and all animations are complete."
+              },
               {
-                "name": "sd-blur",
-                "description": "Emitted when the button loses focus."
+                "name": "sd-hide",
+                "description": "Emitted when the accordion closes."
               },
               {
-                "name": "sd-focus",
-                "description": "Emitted when the button gains focus."
+                "name": "sd-after-hide",
+                "description": "Emitted after the accordion closes and all animations are complete."
               }
             ]
           }
@@ -5390,6 +5295,101 @@
             ]
           }
         },
+        {
+          "name": "sd-radio-button",
+          "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\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 radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\n- **--sd-radio-button--hover-color-background** - The background color of the radio-button on hover. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The font weight for the radio button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "The radio button's size.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
+            },
+            {
+              "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": "The radio button's label." },
+            { "name": "icon", "description": "A presentational icon." }
+          ],
+          "events": [
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the button loses focus."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the button gains focus."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "The radio button's size.",
+                "type": "'lg' | 'md' | 'sm'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio button.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "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-blur",
+                "description": "Emitted when the button loses focus."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the button gains focus."
+              }
+            ]
+          }
+        },
         {
           "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.",
@@ -5821,7 +5821,7 @@
         },
         {
           "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\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.",
+          "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\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": [
             {
@@ -6185,7 +6185,7 @@
         },
         {
           "name": "sd-skeleton",
-          "description": "Skeleton loaders are used as placeholder previews of content before data gets loaded.\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 skeleton's content. When provided, adapts to the content's dimensions. When empty, displays according to the variant property.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Skeleton loaders are used as placeholder previews of content before data gets loaded.\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 skeleton's content. When provided, adapts to the content's dimensions. When empty, displays according to the variant property.\n\n### **CSS Properties:**\n - **--sd-skeleton-color** - The color of the skeleton. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -6284,7 +6284,7 @@
         },
         {
           "name": "sd-step",
-          "description": "Steps are used inside [step groups](/components/step-group) to guide users through the steps of a process or task..\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\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 step's description.\n- **label** - The step's label.\n- **circle-content** - The content inside a step circle. This could be an icon or a number.\n\n### **CSS Properties:**\n - **--sd-step__circle-border-width** - The border width of the step circle. _(default: undefined)_\n- **--sd-step__tail-border-width** - The border width of the step tail. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **circle-and-tail-container** - The container that wraps the step's circle and tail.\n- **circle** - The circle that marks the step's state.\n- **tail** - The step's tail.\n- **text-container** - The container that wraps the step's label and description.\n- **label** - The step's label.\n- **description** - The step's description.",
+          "description": "Steps are used inside [step groups](/components/step-group) to guide users through the steps of a process or task..\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\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 step's description.\n- **label** - The step's label.\n- **circle-content** - The content inside a step circle. This could be an icon or a number.\n\n### **CSS Properties:**\n - **--sd-step__circle-border-width** - The border width of the step circle. _(default: undefined)_\n- **--sd-step__tail-border-width** - The border width of the step tail. _(default: undefined)_\n- **--sd-step-color-text** - The color text for non-interactive steps. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **circle-and-tail-container** - The container that wraps the step's circle and tail.\n- **circle** - The circle that marks the step's state.\n- **tail** - The step's tail.\n- **text-container** - The container that wraps the step's label and description.\n- **label** - The step's label.\n- **description** - The step's description.",
           "doc-url": "",
           "attributes": [
             {
@@ -6709,9 +6709,85 @@
             ]
           }
         },
+        {
+          "name": "sd-tab-group",
+          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\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_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Properties:**\n - **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "activation",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "value": { "type": "'auto' | 'manual'", "default": "'auto'" }
+            },
+            {
+              "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": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements."
+            },
+            {
+              "name": "nav",
+              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-tab-show",
+              "type": "{ name: String }",
+              "description": "Emitted when a tab is shown."
+            },
+            {
+              "name": "sd-tab-hide",
+              "type": "{ name: String }",
+              "description": "Emitted when a tab is hidden."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "activation",
+                "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+                "type": "'auto' | 'manual'"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-tab-show",
+                "type": "{ name: String }",
+                "description": "Emitted when a tab is shown."
+              },
+              {
+                "name": "sd-tab-hide",
+                "type": "{ name: String }",
+                "description": "Emitted when a tab is hidden."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-tab",
-          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\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 tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Properties:**\n - **--sd-navigable-border-radius:** - The tab border radius on hover. _(default: undefined)_\n- **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n- **--sd-color-background** - The background color when on hover state. _(default: undefined)_\n- **--sd-tab-color-border** - The border color for the tab. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
+          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\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 tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Properties:**\n - **--sd-navigable-border-radius:** - The tab border radius on hover. _(default: undefined)_\n- **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n- **--sd-tab--hover-color-background** - The background color when on hover state. _(default: undefined)_\n- **--sd-tab-color-border** - The border color for the tab. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The font weight for the active tab. _(default: undefined)_\n- **--sd-tab--active-color-text** - The text color for the active tab. _(default: undefined)_\n- **--sd-tab-color-text** - The text color for the tabs. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
           "doc-url": "",
           "attributes": [
             {
@@ -6803,82 +6879,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-tab-group",
-          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\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_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Properties:**\n - **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "activation",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "value": { "type": "'auto' | 'manual'", "default": "'auto'" }
-            },
-            {
-              "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": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements."
-            },
-            {
-              "name": "nav",
-              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements."
-            }
-          ],
-          "events": [
-            {
-              "name": "sd-tab-show",
-              "type": "{ name: String }",
-              "description": "Emitted when a tab is shown."
-            },
-            {
-              "name": "sd-tab-hide",
-              "type": "{ name: String }",
-              "description": "Emitted when a tab is hidden."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "localize" },
-              {
-                "name": "activation",
-                "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-                "type": "'auto' | 'manual'"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-tab-show",
-                "type": "{ name: String }",
-                "description": "Emitted when a tab is shown."
-              },
-              {
-                "name": "sd-tab-hide",
-                "type": "{ name: String }",
-                "description": "Emitted when a tab is hidden."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-tab-panel",
           "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\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 tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -6935,7 +6935,7 @@
         },
         {
           "name": "sd-tag",
-          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **icon-left** - A prefix icon or similar element.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - The border color for disabled tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-tag-font-weight** - The font weight for tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **icon-left** - A prefix icon or similar element.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The font weight for tags. _(default: undefined)_\n- **--sd-tag--disabled-color-text** - The text color for disabled tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n- **--sd-tag-font-weight** - This custom property is deprecated. Use `--sd-choice-control-font-weight` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
           "doc-url": "",
           "attributes": [
             {
@@ -7101,7 +7101,7 @@
         },
         {
           "name": "sd-teaser",
-          "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\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_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--distribution-media** - The distribution ratio of the media. _(default: undefined)_\n- **--distribution-content** - The distribution ratio of the content. _(default: undefined)_\n- **--sd-teaser--neutral-100-color-background** - The background color for neutral‑100 teasers. _(default: undefined)_\n- **--sd-teaser--neutral-400-color-border** - The border color for neutral‑400 teasers. _(default: undefined)_\n- **--sd-teaser--primary-100-color-background** - The background color for primary‑100 teasers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **main** - The container that wraps the main content.",
+          "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\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_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--distribution-media** - The distribution ratio of the media. _(default: undefined)_\n- **--distribution-content** - The distribution ratio of the content. _(default: undefined)_\n- **--sd-teaser--neutral-100-color-background** - The background color for neutral‑100 teasers. _(default: undefined)_\n- **--sd-teaser--neutral-400-color-border** - The border color for neutral‑400 teasers. _(default: undefined)_\n- **--sd-teaser--primary-100-color-background** - The background color for primary‑100 teasers. _(default: undefined)_\n- **--sd-teaser-border-radius** - The border radius for teasers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **main** - The container that wraps the main content.",
           "doc-url": "",
           "attributes": [
             {
@@ -7183,7 +7183,7 @@
         },
         {
           "name": "sd-teaser-media",
-          "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\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_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--sd-teaser-media--neutral-100--hover-color-background** - The background color for neutral‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--neutral-100-color-background** - The default background color for neutral‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media--primary-100--hover-color-background** - The background color for primary‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--primary-100-color-background** - The default background color for primary‑100 teaser media. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
+          "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\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_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--sd-teaser-media--white--hover-color-background** - The background color for white teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--white-color-background** - The default background color for white teaser media. _(default: undefined)_\n- **--sd-teaser-media--neutral-100--hover-color-background** - The background color for neutral‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--neutral-100-color-background** - The default background color for neutral‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media--primary-100--hover-color-background** - The background color for primary‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--primary-100-color-background** - The default background color for primary‑100 teaser media. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
           "doc-url": "",
           "attributes": [
             {
@@ -7249,7 +7249,7 @@
         },
         {
           "name": "sd-textarea",
-          "description": "Textareas collect data from the user and allow multiple lines of text.\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-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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- **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 - **label** - The textarea'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- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\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\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **textarea** - The internal `<textarea>` control.",
+          "description": "Textareas collect data from the user and allow multiple lines of text.\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-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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- **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 - **label** - The textarea'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- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\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 form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The floating label text color. _(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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **textarea** - The internal `<textarea>` control.",
           "doc-url": "",
           "attributes": [
             {