@solid-design-system/components 6.13.1 → 6.14.0

package/cdn/vscode.html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "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.",
       "attributes": [
         {
           "name": "open",
@@ -36,7 +36,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.",
       "attributes": [
         {
           "name": "close-others",
@@ -140,7 +140,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.",
       "attributes": [
         {
           "name": "reversed-layout",
@@ -187,7 +187,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.",
       "attributes": [
         {
           "name": "size",
@@ -272,7 +272,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.",
       "attributes": [
         {
           "name": "label",
@@ -341,7 +341,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.",
       "attributes": [
         {
           "name": "title",
@@ -586,59 +586,177 @@
       ]
     },
     {
-      "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.",
+      "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.",
       "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.",
+          "name": "size",
+          "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+        },
+        {
+          "name": "orientation",
+          "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "label",
+          "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
           "values": []
         },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-checkbox-group--docs"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [
         {
           "name": "name",
-          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+          "description": "The name of the combobox, submitted as a name/value pair with form data.",
           "values": []
         },
         {
           "name": "value",
-          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
+          "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+          "values": [{ "name": "string[]" }]
         },
         {
           "name": "size",
-          "description": "The checkbox's size.",
-          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
+          "description": "The combobox's size.",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to show as a hint when the combobox is empty.",
+          "values": []
+        },
+        {
+          "name": "max-options-tag-label",
+          "description": "Label text shown on tag if max-options-visible is reached.",
+          "values": []
         },
         {
           "name": "disabled",
-          "description": "Disables the checkbox.",
+          "description": "Disables the combobox control.",
           "values": []
         },
         {
           "name": "visually-disabled",
-          "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+          "description": "Styles the combobox as if it was disabled and enables aria-disabled",
           "values": []
         },
         {
-          "name": "checked",
-          "description": "Draws the checkbox in a checked state.",
+          "name": "clearable",
+          "description": "Adds a clear button when the combobox is not empty.",
           "values": []
         },
         {
-          "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.",
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "help-text",
+          "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
           "values": []
         },
         {
           "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.",
+          "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.",
           "values": []
         },
         {
           "name": "required",
-          "description": "Makes the checkbox a required field.",
+          "description": "The combobox's required attribute.",
+          "values": []
+        },
+        {
+          "name": "floating-label",
+          "description": "Enables the floating label behavior for the input.",
           "values": []
         },
+        {
+          "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`.",
+          "values": [{ "name": "search" }, { "name": "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.",
+          "values": [{ "name": "OptionRenderer" }]
+        },
+        {
+          "name": "multiple",
+          "description": "Allows more than one option to be selected.",
+          "values": []
+        },
+        {
+          "name": "useTags",
+          "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "style-on-valid",
+          "description": "Shows success styles if the validity of the input is valid.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": [
+            { "name": "(option: SdOption" },
+            { "name": "queryString: string) => boolean" }
+          ]
+        },
+        {
+          "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.",
+          "values": [
+            { "name": "(option: SdOption, index: number) => TemplateResult" },
+            { "name": "HTMLElement" }
+          ]
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -653,32 +771,62 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-checkbox--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-combobox--docs"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "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.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
+        },
         {
           "name": "size",
-          "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+          "description": "The checkbox's size.",
+          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
         },
         {
-          "name": "orientation",
-          "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+          "name": "disabled",
+          "description": "Disables the checkbox.",
+          "values": []
         },
         {
-          "name": "label",
-          "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+          "name": "visually-disabled",
+          "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
           "values": []
         },
         {
-          "name": "help-text",
-          "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+          "name": "checked",
+          "description": "Draws the checkbox in a checked state.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the checkbox a required field.",
           "values": []
         },
         {
@@ -695,7 +843,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-checkbox-group--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-checkbox--docs"
         }
       ]
     },
@@ -851,154 +999,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the combobox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-          "values": [{ "name": "string[]" }]
-        },
-        {
-          "name": "size",
-          "description": "The combobox's size.",
-          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
-        },
-        {
-          "name": "placeholder",
-          "description": "Placeholder text to show as a hint when the combobox is empty.",
-          "values": []
-        },
-        {
-          "name": "max-options-tag-label",
-          "description": "Label text shown on tag if max-options-visible is reached.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the combobox control.",
-          "values": []
-        },
-        {
-          "name": "visually-disabled",
-          "description": "Styles the combobox as if it was disabled and enables aria-disabled",
-          "values": []
-        },
-        {
-          "name": "clearable",
-          "description": "Adds a clear button when the combobox is not empty.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": [{ "name": "top" }, { "name": "bottom" }]
-        },
-        {
-          "name": "help-text",
-          "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "The combobox's required attribute.",
-          "values": []
-        },
-        {
-          "name": "floating-label",
-          "description": "Enables the floating label behavior for the input.",
-          "values": []
-        },
-        {
-          "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`.",
-          "values": [{ "name": "search" }, { "name": "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.",
-          "values": [{ "name": "OptionRenderer" }]
-        },
-        {
-          "name": "multiple",
-          "description": "Allows more than one option to be selected.",
-          "values": []
-        },
-        {
-          "name": "useTags",
-          "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "name": "style-on-valid",
-          "description": "Shows success styles if the validity of the input is valid.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": [
-            { "name": "(option: SdOption" },
-            { "name": "queryString: string) => boolean" }
-          ]
-        },
-        {
-          "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.",
-          "values": [
-            { "name": "(option: SdOption, index: number) => TemplateResult" },
-            { "name": "HTMLElement" }
-          ]
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-combobox--docs"
-        }
-      ]
-    },
     {
       "name": "sd-dialog",
       "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dialog opens.\n- **sd-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sd-hide** - Emitted when the dialog closes.\n- **sd-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\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 dialog's main content.\n- **headline** - The dialog's headline. Alternatively, you can use the `headline` attribute.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n- **close-button** - The dialog's close button. Works best with `<sd-button>` and `<sd-icon>`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the dialog panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the dialog overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
@@ -1117,7 +1117,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.",
       "attributes": [
         {
           "name": "open",
@@ -1240,7 +1240,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.",
       "attributes": [
         {
           "name": "flip-direction",
@@ -1292,7 +1292,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.",
       "attributes": [
         {
           "name": "fixed",
@@ -1318,28 +1318,38 @@
       ]
     },
     {
-      "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.",
       "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": []
+        },
         {
           "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.",
           "values": []
         },
         {
-          "name": "mode",
-          "description": "The fetch mode to use.",
-          "values": [
-            { "name": "cors" },
-            { "name": "no-cors" },
-            { "name": "same-origin" }
-          ]
+          "name": "label",
+          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+          "values": []
         },
         {
-          "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.",
+          "name": "library",
+          "description": "The name of a registered custom icon library.",
           "values": []
         },
+        {
+          "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.",
+          "values": [
+            { "name": "currentColor" },
+            { "name": "primary" },
+            { "name": "white" }
+          ]
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -1354,43 +1364,33 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-include--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-icon--docs"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-          "values": []
-        },
         {
           "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.",
+          "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.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-          "values": []
+          "name": "mode",
+          "description": "The fetch mode to use.",
+          "values": [
+            { "name": "cors" },
+            { "name": "no-cors" },
+            { "name": "same-origin" }
+          ]
         },
         {
-          "name": "library",
-          "description": "The name of a registered custom icon library.",
+          "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.",
           "values": []
         },
-        {
-          "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.",
-          "values": [
-            { "name": "currentColor" },
-            { "name": "primary" },
-            { "name": "white" }
-          ]
-        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -1405,13 +1405,13 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-icon--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-include--docs"
         }
       ]
     },
     {
       "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.",
       "attributes": [
         {
           "name": "type",
@@ -1629,40 +1629,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.",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "The color of the loader.",
-          "values": [
-            { "name": "primary" },
-            { "name": "white" },
-            { "name": "currentColor" }
-          ]
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-loader--docs"
-        }
-      ]
-    },
     {
       "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.",
       "attributes": [
         {
           "name": "standalone",
@@ -1693,17 +1662,48 @@
           "name": "target",
           "description": "Tells the browser where to open the link. Only used when `href` is present.",
           "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "download",
+          "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-link--docs"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color of the loader.",
+          "values": [
+            { "name": "primary" },
+            { "name": "white" },
+            { "name": "currentColor" }
           ]
         },
-        {
-          "name": "download",
-          "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
-          "values": []
-        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -1718,13 +1718,13 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-link--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-loader--docs"
         }
       ]
     },
     {
       "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.",
       "attributes": [
         {
           "name": "variant",
@@ -1792,31 +1792,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)_",
-      "attributes": [
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-menu--docs"
-        }
-      ]
-    },
     {
       "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.",
       "attributes": [
         {
           "name": "type",
@@ -1857,9 +1835,31 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-menu--docs"
+        }
+      ]
+    },
     {
       "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.",
       "attributes": [
         {
           "name": "vertical",
@@ -1947,7 +1947,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>`.",
       "attributes": [
         {
           "name": "variant",
@@ -2002,9 +2002,41 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables all options in the optgroup.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-optgroup--docs"
+        }
+      ]
+    },
     {
       "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.",
       "attributes": [
         {
           "name": "size",
@@ -2199,41 +2231,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.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Disables all options in the optgroup.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-optgroup--docs"
-        }
-      ]
-    },
     {
       "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.",
       "attributes": [
         {
           "name": "expandable",
@@ -2268,48 +2268,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "The radio button's size.",
-          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the radio button.",
-          "values": []
-        },
-        {
-          "name": "visually-disabled",
-          "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The radio's value. When selected, the radio group will receive this value.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-radio-button--docs"
-        }
-      ]
-    },
     {
       "name": "sd-radio",
       "description": "A radio allows to select only one value from a set of options. Clicking on an unchecked radio will deselect the other one(s).\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-focus** - Emitted when the control 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 radio's label.\n\n### **CSS Properties:**\n - **--sd-radio--checked--default-color-background** - The background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--hover-color-background** - The background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--hover__icon-color-background** - The icon background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default-color-background** - The background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default__icon-color-background** - The icon background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--hover__icon-color-background** - The icon background color for checked invalid radios in hover state. _(default: undefined)_\n- **--sd-radio--default--invalid-color-background** - The background color for invalid radios in default state. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control--unchecked** - The radio control when the radio is unchecked.\n- **control--checked** - The radio control when the radio is checked.\n- **checked** - The dot inside the radio component when the radio is checked.\n- **label** - The container that wraps the radio's label.",
@@ -2419,6 +2377,48 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The radio button's size.",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the radio button.",
+          "values": []
+        },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The radio's value. When selected, the radio group will receive this value.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-radio-button--docs"
+        }
+      ]
+    },
     {
       "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.",
@@ -2582,7 +2582,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.",
       "attributes": [
         {
           "name": "open",
@@ -2712,7 +2712,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.",
       "attributes": [
         {
           "name": "variant",
@@ -2770,7 +2770,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.",
       "attributes": [
         {
           "name": "size",
@@ -2954,9 +2954,36 @@
         }
       ]
     },
+    {
+      "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.",
+      "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.",
+          "values": [{ "name": "auto" }, { "name": "manual" }]
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tab-group--docs"
+        }
+      ]
+    },
     {
       "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.",
       "attributes": [
         {
           "name": "variant",
@@ -3001,33 +3028,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "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.",
-          "values": [{ "name": "auto" }, { "name": "manual" }]
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tab-group--docs"
-        }
-      ]
-    },
     {
       "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.",
@@ -3062,7 +3062,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.",
       "attributes": [
         {
           "name": "size",
@@ -3129,7 +3129,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.",
       "attributes": [
         {
           "name": "variant",
@@ -3178,7 +3178,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.",
       "attributes": [
         {
           "name": "variant",
@@ -3218,7 +3218,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.",
       "attributes": [
         {
           "name": "title",