@solid-design-system/components 6.26.0 → 6.27.1

package/cdn/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.26.0",
+  "version": "6.27.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "sd-accordion",
-          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-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--hover-color-background** - The accordion hover background color. _(default: undefined)_\n- **--sd-accordion--open-color-text** - The accordion color text when open. _(default: undefined)_\n- **--sd-accordion-color-border** - The accordion color border. _(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.",
+          "description": "Used to show a brief summary and expands to display 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--hover-color-background** - The accordion hover background color. _(default: undefined)_\n- **--sd-accordion--open-color-text** - The accordion color text when open. _(default: undefined)_\n- **--sd-accordion-color-border** - The accordion color border. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -112,7 +112,7 @@
         },
         {
           "name": "sd-accordion-group",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Used to group multiple accordions together.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -503,7 +503,7 @@
         },
         {
           "name": "sd-badge",
-          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Properties:**\n - **--sd-badge--blue--inverted-color-background** - The background color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--blue--inverted-color-text** - The text color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--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.",
+          "description": "Used to draw attention to a particular element and display statuses or counts.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Properties:**\n - **--sd-badge--blue--inverted-color-background** - The background color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--blue--inverted-color-text** - The text color for the blue badge in its inverted state. _(default: undefined)_\n- **--sd-badge--blue-color-background** - The background color for the blue badge in its standard state. _(default: undefined)_\n- **--sd-badge--green-color--inverted-background** - The background color for the green badge in its inverted state. _(default: undefined)_\n- **--sd-badge--green-color--inverted-text** - The text color for the green badge in its inverted state. _(default: undefined)_\n- **--sd-badge--inverted-color-border** - The border color used in inverted state. _(default: undefined)_\n- **--sd-badge--green-color-background** - The background color for the green badge. _(default: undefined)_\n- **--sd-badge--red--inverted-background** - The background color for the red badge in its inverted state. _(default: undefined)_\n- **--sd-badge--red--inverted-text** - The text color for the red badge in its inverted state. _(default: undefined)_\n- **--sd-badge--red-color-background** - The background color for the red badge in its standard state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The badge's base wrapper.\n- **content** - The badge's main content.",
           "doc-url": "",
           "attributes": [
             {
@@ -570,7 +570,7 @@
         },
         {
           "name": "sd-brandshape",
-          "description": "The Brandshape highlights a piece of 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 content inside the brandshape.\n- **image** - The image slot for the 'image' variant.\n\n### **CSS Properties:**\n - **--sd-brandshape--neutral-100-color-background** - The background color using the neutral‑100 variant. _(default: undefined)_\n- **--sd-brandshape--white-color-background** - The background color using the white variant. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.\n- **stylized-container** - Container for border and image variant.",
+          "description": "Used as a container with brand character that visually emphasizes the 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 content inside the brandshape.\n- **image** - The image slot for the 'image' variant.\n\n### **CSS Properties:**\n - **--sd-brandshape--neutral-100-color-background** - The background color using the neutral‑100 variant. _(default: undefined)_\n- **--sd-brandshape--white-color-background** - The background color using the white variant. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.\n- **stylized-container** - Container for border and image variant.",
           "doc-url": "",
           "attributes": [
             {
@@ -636,7 +636,7 @@
         },
         {
           "name": "sd-breadcrumb",
-          "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Properties:**\n - **--sd-breadcrumb__separator-color** - The color of the breadcrumb separators. _(default: undefined)_\n- **--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.",
+          "description": "Used to visualize a page's location within the site's hierarchy (breadcrumb) and provide easy navigation to previous sections.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Properties:**\n - **--sd-breadcrumb__separator-color** - The color of the breadcrumb separators. _(default: undefined)_\n- **--sd-breadcrumb__separator--current-color** - The color of the current breadcrumb separators. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
           "doc-url": "",
           "attributes": [
             {
@@ -688,7 +688,7 @@
         },
         {
           "name": "sd-breadcrumb-item",
-          "description": "An individual breadcrumb item for use exclusively within the `sd-breadcrumb`.\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 breadcrumb label.\n\n### **CSS Properties:**\n - **--sd-breadcrumb--current-color-text** - The text color for the current breadcrumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Used within `sd-breadcrumb` as individual item.\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 breadcrumb label.\n\n### **CSS Properties:**\n - **--sd-breadcrumb--current-color-text** - The text color for the current breadcrumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -753,7 +753,7 @@
         },
         {
           "name": "sd-button",
-          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Properties:**\n - **--sd-button--primary--active-color-text** - The text color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--active-color-background** - The background color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--default-color-background** - The background color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--hover-color-text** - The text color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-background** - The background color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-text** - The text color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-background** - The background color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-text** - The text color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-text** - The text color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-background** - The background color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--disabled-color-background** - The background color for disabled primary and CTA buttons. _(default: undefined)_\n- **--sd-button--secondary--default-color-text** - The text color for secondary buttons in default state. _(default: undefined)_\n- **--sd-button--secondary--default-color-border** - The border color for secondary buttons in default state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-border** - The border color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-text** - The text color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-text** - The text color for secondary buttons in disabled state. _(default: undefined)_\n- **--sd-button--secondary--active-color-text** - The text color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--active-color-background** - The background color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--active-color-border** - The border color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted-color-border** - The border color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--inverted-color-text** - The text color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-text** - The text color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-background** - The background color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-background** - The background color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-text** - The text color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--size-sm-padding-block** - The small secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--size-md-padding-block** - The medium secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--size-lg-padding-block** - The large secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--hover-color-background** - The background color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary-padding-inline** - The horizontal padding for secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-border** - The border color for secondary disabled buttons. _(default: undefined)_\n- **--sd-button--tertiary--default-color-text** - The text color for tertiary buttons in default state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-background** - The background color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-text** - The text color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--disabled-color-text** - The text color for tertiary buttons in disabled state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-text** - The text color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-background** - The background color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted-color-text** - The text color for inverted tertiary buttons. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-background** - The background color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-text** - The text color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-background** - The background color for inverted tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-text** - The text color for inverted tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--default-color-background** - The background color for inverted CTA buttons in default state. _(default: undefined)_\n- **--sd-button--cta--inverted--default-color-text** - The text color for inverted CTA buttons in default state. _(default: undefined)_\n- **--sd-button--cta--inverted--active-color-text** - The text color for inverted CTA buttons in active state. _(default: undefined)_\n- **--sd-button--cta--inverted--hover-color-text** - The text color for inverted CTA buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--hover-color-background** - The background color for inverted CTA buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--active-color-background** - The background color for inverted CTA buttons in active state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-background** - The background color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-border** - The border color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-text** - The text color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--size-lg-font-size** - The large button text font size. _(default: undefined)_\n- **--sd-button--size-lg-height** - The height for large icon-only and loading buttons. _(default: undefined)_\n- **--sd-button--size-lg-icon-height** - The height for icons in large buttons. _(default: undefined)_\n- **--sd-button--size-lg-padding-block** - The large button vertical padding value. _(default: undefined)_\n- **--sd-button--size-md--icon-only-padding-inline** - The medium button horizontal padding value for icon-only buttons. _(default: undefined)_\n- **--sd-button--size-md-font-size** - The medium button text font size. _(default: undefined)_\n- **--sd-button--size-md-height** - The height for medium icon-only and loading buttons. _(default: undefined)_\n- **--sd-button--size-md-padding-block** - The medium button vertical padding value. _(default: undefined)_\n- **--sd-button--size-sm-font-size** - The small button font size. _(default: undefined)_\n- **--sd-button--size-sm-padding-block** - The small button vertical padding value. _(default: undefined)_\n- **--sd-button-border-radius** - The border radius for buttons. _(default: undefined)_\n- **--sd-button-border-width** - The border width for secondary buttons with borders. _(default: undefined)_\n- **--sd-button-font-weight** - The text font weight for buttons. _(default: undefined)_\n- **--sd-button-padding-inline** - The horizontal padding for buttons. _(default: undefined)_\n- **--sd-button--size-sm-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n- **--sd-button--size-md-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n- **--sd-button--size-lg-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
+          "description": "Used to allow users to perform actions with a single click.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Properties:**\n - **--sd-button--primary--active-color-text** - The text color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--active-color-background** - The background color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--default-color-background** - The background color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--hover-color-text** - The text color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-background** - The background color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-text** - The text color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-background** - The background color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-text** - The text color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-text** - The text color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-background** - The background color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--disabled-color-background** - The background color for disabled primary and CTA buttons. _(default: undefined)_\n- **--sd-button--secondary--default-color-text** - The text color for secondary buttons in default state. _(default: undefined)_\n- **--sd-button--secondary--default-color-border** - The border color for secondary buttons in default state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-border** - The border color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-text** - The text color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-text** - The text color for secondary buttons in disabled state. _(default: undefined)_\n- **--sd-button--secondary--active-color-text** - The text color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--active-color-background** - The background color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--active-color-border** - The border color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted-color-border** - The border color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--inverted-color-text** - The text color for inverted secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-text** - The text color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-background** - The background color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-background** - The background color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-text** - The text color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--size-sm-padding-block** - The small secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--size-md-padding-block** - The medium secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--size-lg-padding-block** - The large secondary button vertical padding value. _(default: undefined)_\n- **--sd-button--secondary--hover-color-background** - The background color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary-padding-inline** - The horizontal padding for secondary buttons. _(default: undefined)_\n- **--sd-button--secondary--disabled-color-border** - The border color for secondary disabled buttons. _(default: undefined)_\n- **--sd-button--tertiary--default-color-text** - The text color for tertiary buttons in default state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-background** - The background color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-text** - The text color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--disabled-color-text** - The text color for tertiary buttons in disabled state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-text** - The text color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-background** - The background color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted-color-text** - The text color for inverted tertiary buttons. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-background** - The background color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-text** - The text color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-background** - The background color for inverted tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-text** - The text color for inverted tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--default-color-background** - The background color for inverted CTA buttons in default state. _(default: undefined)_\n- **--sd-button--cta--inverted--default-color-text** - The text color for inverted CTA buttons in default state. _(default: undefined)_\n- **--sd-button--cta--inverted--active-color-text** - The text color for inverted CTA buttons in active state. _(default: undefined)_\n- **--sd-button--cta--inverted--hover-color-text** - The text color for inverted CTA buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--hover-color-background** - The background color for inverted CTA buttons in hover state. _(default: undefined)_\n- **--sd-button--cta--inverted--active-color-background** - The background color for inverted CTA buttons in active state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-background** - The background color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-border** - The border color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--inverted--disabled-color-text** - The text color for inverted buttons in disabled state. _(default: undefined)_\n- **--sd-button--size-lg-font-size** - The large button text font size. _(default: undefined)_\n- **--sd-button--size-lg-height** - The height for large icon-only and loading buttons. _(default: undefined)_\n- **--sd-button--size-lg-icon-height** - The height for icons in large buttons. _(default: undefined)_\n- **--sd-button--size-lg-padding-block** - The large button vertical padding value. _(default: undefined)_\n- **--sd-button--size-md--icon-only-padding-inline** - The medium button horizontal padding value for icon-only buttons. _(default: undefined)_\n- **--sd-button--size-md-font-size** - The medium button text font size. _(default: undefined)_\n- **--sd-button--size-md-height** - The height for medium icon-only and loading buttons. _(default: undefined)_\n- **--sd-button--size-md-padding-block** - The medium button vertical padding value. _(default: undefined)_\n- **--sd-button--size-sm-font-size** - The small button font size. _(default: undefined)_\n- **--sd-button--size-sm-padding-block** - The small button vertical padding value. _(default: undefined)_\n- **--sd-button-border-radius** - The border radius for buttons. _(default: undefined)_\n- **--sd-button-border-width** - The border width for secondary buttons with borders. _(default: undefined)_\n- **--sd-button-font-weight** - The text font weight for buttons. _(default: undefined)_\n- **--sd-button-padding-inline** - The horizontal padding for buttons. _(default: undefined)_\n- **--sd-button--size-sm-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n- **--sd-button--size-md-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n- **--sd-button--size-lg-border-radius** - This custom property is deprecated. Use `--sd-button-border-radius` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
           "doc-url": "",
           "attributes": [
             {
@@ -1079,7 +1079,7 @@
         },
         {
           "name": "sd-carousel",
-          "description": "Carousels display an arbitrary number of content slides along a horizontal axis.\n---\n\n\n### **Events:**\n - **sd-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **pause()** - Pause the autoplay.\n- **resume()** - Resume the autoplay\n- **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sd-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sd-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-start** - Optional start icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-pause** - Optional pause icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n- **--sd-carousel__pager-dot-border-width** - The border width of the pager dots in the carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-background** - The background for the pager dots in the inverted carousel when active. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted--hovered-background** - The background for the pager dots in the inverted carousel when hovered. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-border** - The border color for the pager dots in the inverted carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot-background** - The background for the pager dots when active. _(default: undefined)_\n- **--sd-carousel--active-color-border** - The border color for the active pagination item. _(default: undefined)_\n- **--sd-carousel--active--inverted-color-border** - The border color for the active pagination item in inverted carousel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **controls** - A wrapper for the navigation and autoplay controller buttons.\n- **pagination-dot** - The pagination indicator in dot format.\n- **pagination-number** - The pagination indicator in number format.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.\n- **autoplay-controls** - A wrapper for pause/start button.",
+          "description": "Used to display an arbitrary number of content slides along a horizontal axis.\n---\n\n\n### **Events:**\n - **sd-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **pause()** - Pause the autoplay.\n- **resume()** - Resume the autoplay\n- **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sd-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sd-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-start** - Optional start icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-pause** - Optional pause icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n- **--sd-carousel__pager-dot-border-width** - The border width of the pager dots in the carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-background** - The background for the pager dots in the inverted carousel when active. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted--hovered-background** - The background for the pager dots in the inverted carousel when hovered. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-border** - The border color for the pager dots in the inverted carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot-background** - The background for the pager dots when active. _(default: undefined)_\n- **--sd-carousel--active-color-border** - The border color for the active pagination item. _(default: undefined)_\n- **--sd-carousel--active--inverted-color-border** - The border color for the active pagination item in inverted carousel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **controls** - A wrapper for the navigation and autoplay controller buttons.\n- **pagination-dot** - The pagination indicator in dot format.\n- **pagination-number** - The pagination indicator in number format.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.\n- **autoplay-controls** - A wrapper for pause/start button.",
           "doc-url": "",
           "attributes": [
             {
@@ -1227,7 +1227,7 @@
         },
         {
           "name": "sd-carousel-item",
-          "description": "A carousel item represent a slide within a [carousel](/components/carousel).\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 carousel item's content.",
+          "description": "Used within `sd-carousel` to represent a slide.\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 carousel item's content.",
           "doc-url": "",
           "attributes": [
             {
@@ -1263,7 +1263,7 @@
         },
         {
           "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-checkbox--invalid-color-background** - The background color of the checkbox when invalid. _(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.",
+          "description": "Used 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-checkbox--invalid-color-background** - The background color of the checkbox when invalid. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sd-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -1440,7 +1440,7 @@
         },
         {
           "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.",
+          "description": "Used to group multiple options from a list of options. Presentational only.\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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1534,7 +1534,7 @@
         },
         {
           "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-search** - Emitted when the search button is activated.\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-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-combobox__tag-border-width** - The border width for the tags for multiple options combobox. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The icons color for slots, chevron and search icons. _(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.",
+          "description": "Used to select one or multiple options from a list of options or to enter a search string and choose from a list of suggestions.\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-search** - Emitted when the search button is activated.\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-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-combobox__tag-border-width** - The border width for the tags for multiple options combobox. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The icons color for slots, chevron and search icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -2371,7 +2371,7 @@
         },
         {
           "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.",
+          "description": "Used over other content. It requires an interaction from the user before they can return to what is underneath.\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.",
           "doc-url": "",
           "attributes": [
             {
@@ -2502,7 +2502,7 @@
         },
         {
           "name": "sd-divider",
-          "description": "Dividers are used to visually separate or group elements.\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### **CSS Properties:**\n - **--sd-divider--inverted-color-border** - The border color for dividers in inverted state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Used to separate content or sections from each other.\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### **CSS Properties:**\n - **--sd-divider--inverted-color-border** - The border color for dividers in inverted state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -2558,7 +2558,7 @@
         },
         {
           "name": "sd-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the drawer panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the drawer overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+          "description": "Used as a panel that slides out from the side of the screen which contains a set of information or actions.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the drawer panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the drawer overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -2705,7 +2705,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- **--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.",
+          "description": "Used to display a list of actions or options in a panel when activated.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of the dropdown panel. _(default: undefined)_\n- **--sd-dropdown-color-background** - The background color of the dropdown panel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
@@ -2889,7 +2889,7 @@
         },
         {
           "name": "sd-expandable",
-          "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\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_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n- **expand-icon** - The icon of the toggle button when the expandable is closed\n- **collapse-icon** - The icon of the toggle button when the expandable is open\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **toggle-icon** - The wrapper of the toggle icons.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
+          "description": "Used to display a brief summary that expands to reveal additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\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_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n- **expand-icon** - The icon of the toggle button when the expandable is closed\n- **collapse-icon** - The icon of the toggle button when the expandable is open\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **toggle-icon** - The wrapper of the toggle icons.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
           "doc-url": "",
           "attributes": [
             {
@@ -2996,7 +2996,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- **--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.",
+          "description": "Used to display content on both sides of a card by presenting information on one side and revealing additional information when flipped.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n- **--sd-informational-gradient--primary-800-color-background** - The color used in the gradient of the flipcard when the `gradient-dark` variant is used. By default, it uses the `--sd-color-primary-800` color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
           "doc-url": "",
           "attributes": [
             {
@@ -3112,7 +3112,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- **--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.",
+          "description": "Used as a container for the main navigation of a website.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n- **--sd-header-padding-bottom** - padding bottom of the header content _(default: undefined)_\n- **--sd-header__underline-color-background** - the background color of the underlined background _(default: undefined)_\n- **--sd-header__underline-height** - height of the underlined header _(default: undefined)_\n- **--sd-header__shadow-height** - height of the shadow when the header is fixed _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
           "doc-url": "",
           "attributes": [
             {
@@ -3158,7 +3158,7 @@
         },
         {
           "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.",
+          "description": "Used to display icons.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
           "doc-url": "",
           "attributes": [
             {
@@ -3348,7 +3348,7 @@
         },
         {
           "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-fill** - The icon color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color read-only for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(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": "Used to allow users to enter an input. It can be displayed in several ways, depending on the type.\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- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color read-only for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **form-control-floating-label** - The floating label text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
           "doc-url": "",
           "attributes": [
             {
@@ -3804,7 +3804,7 @@
         },
         {
           "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- **--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.",
+          "description": "Used to allow users to navigate to another location or perform actions like downloading files.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Properties:**\n - **--sd-interactive--active-color-text** - The link's text color when active. _(default: undefined)_\n- **--sd-interactive--default-color-text** - The default link's text color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
           "doc-url": "",
           "attributes": [
             {
@@ -3939,7 +3939,7 @@
         },
         {
           "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.",
+          "description": "Used as a visual indicator with an animation that shows loading is in process.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
           "doc-url": "",
           "attributes": [
             {
@@ -3986,7 +3986,7 @@
         },
         {
           "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- **--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.",
+          "description": "Used to show a location or a cluster of locations on a map.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-icon-fill** - The icon fill color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker-cluster-color-icon-fill** - The default icon fill color for map marker clusters. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-text** - The text color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker--cluster--default-color-background** - The default background color for map marker clusters. _(default: undefined)_\n- **--sd-map-marker--cluster--hover-color-background** - The background color for map marker clusters in hover state. _(default: undefined)_\n- **--sd-map-marker--cluster-color-text** - The text color for map marker clusters. _(default: undefined)_\n- **--sd-map-marker--main-color-background** - The background color for main map markers. _(default: undefined)_\n- **--sd-map-marker--pin--default-color-background** - The default background color for place map markers. _(default: undefined)_\n- **--sd-map-marker--pin--hover-color-background** - The background color for place map markers in hover state. _(default: undefined)_\n- **--sd-map-marker--pin-color-text** - The text color for place map markers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
           "doc-url": "",
           "attributes": [
             {
@@ -4112,54 +4112,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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The menu's content." }],
-          "events": [
-            {
-              "name": "sd-select",
-              "description": "Emitted when a menu item is selected."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "localize" },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-select",
-                "description": "Emitted when a menu item is selected."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-menu-item",
-          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n- **--sd-navigable-border-radius** - The menu-item border radius on hover. _(default: undefined)_\n- **--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.",
+          "description": "Used to provide options for the user to pick from a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n- **--sd-navigable-border-radius** - The menu-item border radius on hover. _(default: undefined)_\n- **--sd-menu-item-color-icon-fill** - The default icon color for menu items. _(default: undefined)_\n- **--sd-menu-item-color-text** - The default text color for menu items. _(default: undefined)_\n- **--sd-menu-item--disabled-color-icon-fill** - The icon color for disabled menu items. _(default: undefined)_\n- **--sd-menu-item--disabled-color-text** - The text color for disabled menu items. _(default: undefined)_\n- **--sd-menu-color-icon** - This custom property is deprecated. Use `--sd-menu-item-color-icon-fill` instead. _(default: undefined)_\n- **--sd-menu-color-text** - This custom property is deprecated. Use `--sd-menu-item-color-text` instead. _(default: undefined)_\n- **--sd-menu--disabled-color-icon** - This custom property is deprecated. Use `--sd-menu-item--disabled-color-icon-fill` instead. _(default: undefined)_\n- **--sd-menu--disabled-color-text** - This custom property is deprecated. Use `--sd-menu-item--disabled-color-text` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
           "doc-url": "",
           "attributes": [
             {
@@ -4249,9 +4204,54 @@
             "events": []
           }
         },
+        {
+          "name": "sd-menu",
+          "description": "Used as a list of choices to the user, such as a set of actions or functions.\n---\n\n\n### **Events:**\n - **sd-select** - Emitted when a menu item is selected.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu's content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The menu's content." }],
+          "events": [
+            {
+              "name": "sd-select",
+              "description": "Emitted when a menu item is selected."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-select",
+                "description": "Emitted when a menu item is selected."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-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-color-text** - The navigation-item text color. _(default: undefined)_\n- **--sd-navigation-item--default-color-text** - The default navigation-items 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-choice-control-font-weight** - The navigation-item default font weight. _(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.",
+          "description": "Used to facilitate seamless page transitions and help users orient themselves within the application.\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-navigation-item--default-color-text** - The default navigation-items 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-choice-control-font-weight** - The navigation-item default font weight. _(default: undefined)_\n- **--sd-navigation-item--current-color-text** - This custom property is deprecated. Use `--sd-navigation-item-color-text` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
           "doc-url": "",
           "attributes": [
             {
@@ -4448,7 +4448,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- **--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>`.",
+          "description": "Used to communicate information or status to users, notifications can be displayed inline or as toast messages, either individually or in stacks.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-notification--error-color-background** - The background color for error notifications. _(default: undefined)_\n- **--sd-notification--info-color-background** - The background color for info notifications. _(default: undefined)_\n- **--sd-notification--success-color-background** - The background color for success notifications. _(default: undefined)_\n- **--sd-notification--warning-color-background** - The background color for warning notifications. _(default: undefined)_\n- **--sd-notification-color-border** - the border color of notifications. _(default: undefined)_\n- **--sd-notification__duration-indicator-color-background** - The background color for the duration indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
           "doc-url": "",
           "attributes": [
             {
@@ -4591,7 +4591,7 @@
         },
         {
           "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.",
+          "description": "Used to group `sd-option`components within an `sd-combobox`.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
           "doc-url": "",
           "attributes": [
             {
@@ -4651,7 +4651,7 @@
         },
         {
           "name": "sd-option",
-          "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The option's label.\n- **left** - Used to prepend an icon or similar element to the menu item.\n- **right** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--sd-form-control-color-border** - The border color of checkboxes for the non-disabled options. _(default: undefined)_\n- **--sd-checkbox-border-width** - The border width of the checkboxes. _(default: undefined)_\n- **--sd-option--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **left** - The container that wraps the left.\n- **right** - The container that wraps the right.",
+          "description": "Used to define selectable items within various form controls such as select.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The option's label.\n- **left** - Used to prepend an icon or similar element to the menu item.\n- **right** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--sd-form-control-color-border** - The border color of checkboxes for the non-disabled options. _(default: undefined)_\n- **--sd-checkbox-border-width** - The border width of the checkboxes. _(default: undefined)_\n- **--sd-option--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **left** - The container that wraps the left.\n- **right** - The container that wraps the right.",
           "doc-url": "",
           "attributes": [
             {
@@ -5015,7 +5015,7 @@
         },
         {
           "name": "sd-progress-bar",
-          "description": "Progress bars are used to visualize the completion state of a process.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--height** - Use this property to set the height of the progress-bar. _(default: undefined)_\n- **--sd-progress-bar__slide-bar--inverted-color-background** - The background color of the progress bar when the `inverted` attribute is set. _(default: undefined)_\n- **--sd-progress-bar__slide-bar-color-background** - The background color of the progress bar. _(default: undefined)_\n- **--sd-progress-bar--active--inverted-color-background** - The color of the progress indicator when the `inverted` attribute is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **value-right** - Value's on the right side of the indicator.\n- **value-bottom** - Value's on the bottom of the indicator.\n- **label** - The label element.\n- **bar** - The progress bar's container.",
+          "description": "Used to visually represent the progression of an activity.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--height** - Use this property to set the height of the progress-bar. _(default: undefined)_\n- **--sd-progress-bar__slide-bar--inverted-color-background** - The background color of the progress bar when the `inverted` attribute is set. _(default: undefined)_\n- **--sd-progress-bar__slide-bar-color-background** - The background color of the progress bar. _(default: undefined)_\n- **--sd-progress-bar--active--inverted-color-background** - The color of the progress indicator when the `inverted` attribute is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **value-right** - Value's on the right side of the indicator.\n- **value-bottom** - Value's on the bottom of the indicator.\n- **label** - The label element.\n- **bar** - The progress bar's container.",
           "doc-url": "",
           "attributes": [
             {
@@ -5123,7 +5123,7 @@
         },
         {
           "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-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--hover-color-background** - The accordion hover background color. _(default: undefined)_\n- **--sd-accordion--open-color-text** - The accordion color text when open. _(default: undefined)_\n- **--sd-accordion-color-border** - The accordion color border. _(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.",
+          "description": "Used to present brief information and expand 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--hover-color-background** - The accordion hover background color. _(default: undefined)_\n- **--sd-accordion--open-color-text** - The accordion color text when open. _(default: undefined)_\n- **--sd-accordion-color-border** - The accordion color border. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -5241,7 +5241,7 @@
         },
         {
           "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__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default-color-background** - The background color for checked radios in default 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--hover-color-background** - The background color for checked radios in hover 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--default-color-background** - The 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--checked--disabled__icon-color-background** - The icon background color for checked disabled radios. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n- **--sd-radio__checked-height** - The height of the checked state icon. _(default: undefined)_\n- **--sd-radio__checked-width** - The width of the checked state icon. _(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.",
+          "description": "Used to allow the user to select a single option from a group.\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__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default-color-background** - The background color for checked radios in default 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--hover-color-background** - The background color for checked radios in hover 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--default-color-background** - The 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--checked--disabled__icon-color-background** - The icon background color for checked disabled radios. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n- **--sd-radio__checked-height** - The height of the checked state icon. _(default: undefined)_\n- **--sd-radio__checked-width** - The width of the checked state icon. _(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.",
           "doc-url": "",
           "attributes": [
             {
@@ -5343,7 +5343,7 @@
         },
         {
           "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.",
+          "description": "Used to switch between different options by selecting a single option from a group.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\n- **--sd-radio-button--hover-color-background** - The background color of the radio-button on hover. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The font weight for the radio button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -5438,7 +5438,7 @@
         },
         {
           "name": "sd-radio-group",
-          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the radio group's selected value changes.\n- **sd-input** - Emitted when the radio group receives user 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()** - Move focus to the checked radio (or the first one if none are checked)\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - 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 where `<sd-radio>` or `<sd-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. 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 radio-group. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--sd-radio-button-group-border-radius** - The border radius for radio button groups. _(default: undefined)_\n- **--sd-radio-button-group-border-width** - The border width for radio button groups. _(default: undefined)_\n- **--sd-radio-button-group-padding** - The padding for radio button groups. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and error text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+          "description": "Used to group multiple `sd-radio` or `sd-radio-button` components so they function as a single form control.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the radio group's selected value changes.\n- **sd-input** - Emitted when the radio group receives user 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()** - Move focus to the checked radio (or the first one if none are checked)\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - 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 where `<sd-radio>` or `<sd-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. 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 radio-group. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--sd-radio-button-group-border-radius** - The border radius for radio button groups. _(default: undefined)_\n- **--sd-radio-button-group-border-width** - The border width for radio button groups. _(default: undefined)_\n- **--sd-radio-button-group-padding** - The padding for radio button groups. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and error text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -5829,7 +5829,7 @@
         },
         {
           "name": "sd-range-tick",
-          "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--sd-range-scale-ticks-color-text** - The text color for range scale ticks. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+          "description": "Used to represent a tick within `sd-range`.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--sd-range-scale-ticks-color-text** - The text color for range scale ticks. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
           "doc-url": "",
           "attributes": [
             {
@@ -5874,7 +5874,7 @@
         },
         {
           "name": "sd-scrollable",
-          "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",
+          "description": "Used as a container to create scrollable sections within the user interface.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",
           "doc-url": "",
           "attributes": [
             {
@@ -6035,7 +6035,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- **--sd-form-control-border-radius** - The border radius for the select's input. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(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": "Used to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the select's input. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -6399,7 +6399,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 Properties:**\n - **--sd-skeleton-color** - The color of the skeleton. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Used as a placeholder preview of the content before the data gets loaded to reduce load-time frustration.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The skeleton's content. When provided, adapts to the content's dimensions. When empty, displays according to the variant property.\n\n### **CSS Properties:**\n - **--sd-skeleton-color** - The color of the skeleton. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -6451,7 +6451,7 @@
         },
         {
           "name": "sd-spinner",
-          "description": "Spinners 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.",
+          "description": "Used as a visual indicator with a looping animation that shows loading is in process.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
           "doc-url": "",
           "attributes": [
             {
@@ -6498,7 +6498,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- **--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.",
+          "description": "Used to determine a step in a process or task inside `sd-step-group`.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The step's description.\n- **label** - The step's label.\n- **circle-content** - The content inside a step circle. This could be an icon or a number.\n\n### **CSS Properties:**\n - **--sd-step__circle-border-width** - The border width of the step circle. _(default: undefined)_\n- **--sd-step__tail-border-width** - The border width of the step tail. _(default: undefined)_\n- **--sd-step-color-text** - The color text for non-interactive steps. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **circle-and-tail-container** - The container that wraps the step's circle and tail.\n- **circle** - The circle that marks the step's state.\n- **tail** - The step's tail.\n- **text-container** - The container that wraps the step's label and description.\n- **label** - The step's label.\n- **description** - The step's description.",
           "doc-url": "",
           "attributes": [
             {
@@ -6772,7 +6772,7 @@
         },
         {
           "name": "sd-switch",
-          "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the switch loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the switch gains focus.\n- **sd-input** - Emitted when the switch receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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 switch's label.\n- **tooltip** - An optional tooltip that helps describe the switch. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--sd-switch--checked--hover-color-background** - The background color for the switch in checked hover state. _(default: undefined)_\n- **--sd-switch--unchecked-color-border** - The border color for the switch in unchecked state. _(default: undefined)_\n- **--sd-switch--unchecked__icon-color-background** - The icon background color for the switch in unchecked state. _(default: undefined)_\n- **--sd-switch--unchecked--hover-color-background** - The background color for the switch in unchecked hover state. _(default: undefined)_\n- **--sd-switch-color-text** - The text color for the switch label. _(default: undefined)_\n- **--sd-switch-border-width** - The border width for the switch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the switch's state.\n- **control--checked** - Matches the control part when the switch is on.\n- **control--unchecked** - Matches the control part when the switch is off.\n- **thumb** - The circle that marks the switch's state.\n- **label** - The container that wraps the switch's label.",
+          "description": "Used to give control over an option that can be toggled on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the switch loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the switch gains focus.\n- **sd-input** - Emitted when the switch receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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 switch's label.\n- **tooltip** - An optional tooltip that helps describe the switch. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--sd-switch--checked--hover-color-background** - The background color for the switch in checked hover state. _(default: undefined)_\n- **--sd-switch--unchecked-color-border** - The border color for the switch in unchecked state. _(default: undefined)_\n- **--sd-switch--unchecked__icon-color-background** - The icon background color for the switch in unchecked state. _(default: undefined)_\n- **--sd-switch--unchecked--hover-color-background** - The background color for the switch in unchecked hover state. _(default: undefined)_\n- **--sd-switch-color-text** - The text color for the switch label. _(default: undefined)_\n- **--sd-switch-border-width** - The border width for the switch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the switch's state.\n- **control--checked** - Matches the control part when the switch is on.\n- **control--unchecked** - Matches the control part when the switch is off.\n- **thumb** - The circle that marks the switch's state.\n- **label** - The container that wraps the switch's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -6925,7 +6925,7 @@
         },
         {
           "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-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- **--sd-tab--disabled-color-text** - The text color for disabled 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.",
+          "description": "Used inside `sd-tab-group` to represent and activate `sd-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- **--sd-tab--disabled-color-text** - The text color for disabled tabs. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
           "doc-url": "",
           "attributes": [
             {
@@ -7019,7 +7019,7 @@
         },
         {
           "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.",
+          "description": "Used to organise content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Properties:**\n - **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -7095,7 +7095,7 @@
         },
         {
           "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.",
+          "description": "Used inside `sd-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.",
           "doc-url": "",
           "attributes": [
             {
@@ -7149,7 +7149,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-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--size-lg-padding-inline** - The padding inline for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-padding-inline** - The padding inline for small tags. _(default: undefined)_\n- **--sd-tag--removable--size-lg-padding-right** - The padding right for large removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-lg-padding-left** - The padding left for large removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-sm-padding-right** - The padding right for small removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-sm-padding-left** - The padding left for small removable 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.",
+          "description": "Used to categorise or label content. Can also be used to filter or search for content.\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--size-lg-padding-inline** - The padding inline for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-padding-inline** - The padding inline for small tags. _(default: undefined)_\n- **--sd-tag--removable--size-lg-padding-right** - The padding right for large removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-lg-padding-left** - The padding left for large removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-sm-padding-right** - The padding right for small removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-sm-padding-left** - The padding left for small removable tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n- **--sd-tag-font-weight** - This custom property is deprecated. Use `--sd-choice-control-font-weight` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
           "doc-url": "",
           "attributes": [
             {
@@ -7315,7 +7315,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- **--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.",
+          "description": "Used to group related subjects in a container with an image, providing a preview of information and linking to further 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_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--distribution-media** - The distribution ratio of the media. _(default: undefined)_\n- **--distribution-content** - The distribution ratio of the content. _(default: undefined)_\n- **--sd-teaser--neutral-100-color-background** - The background color for neutral‑100 teasers. _(default: undefined)_\n- **--sd-teaser--neutral-400-color-border** - The border color for neutral‑400 teasers. _(default: undefined)_\n- **--sd-teaser--primary-100-color-background** - The background color for primary‑100 teasers. _(default: undefined)_\n- **--sd-teaser-border-radius** - The border radius for teasers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **main** - The container that wraps the main content.",
           "doc-url": "",
           "attributes": [
             {
@@ -7397,7 +7397,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--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- **--sd-teaser-media-color-icon-fill** - The default color for the icon in the toggle button. _(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": "Used as a flexible container with image that groups related items and links them to further 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_ - 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- **--sd-teaser-media-color-icon-fill** - The default color for the icon in the toggle button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
           "doc-url": "",
           "attributes": [
             {
@@ -7463,7 +7463,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- **--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- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n\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": "Used to allow users to input and edit 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- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **textarea** - The internal `<textarea>` control.",
           "doc-url": "",
           "attributes": [
             {
@@ -7852,7 +7852,7 @@
         },
         {
           "name": "sd-tooltip",
-          "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\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 tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n- **--sd-tooltip-color-background** - The background color for the tooltip. _(default: undefined)_\n- **--sd-tooltip-color-text** - The text color for the tooltip. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
+          "description": "Used as a floating and non-actionable text label that explains an element or function of the user interface.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\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 tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n- **--sd-tooltip-color-background** - The background color for the tooltip. _(default: undefined)_\n- **--sd-tooltip-color-text** - The text color for the tooltip. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
           "doc-url": "",
           "attributes": [
             {
@@ -8018,7 +8018,7 @@
         },
         {
           "name": "sd-video",
-          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\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 used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Properties:**\n - **--sd-video--play-button-color-background** - The background color for the video play button. _(default: undefined)_\n- **--sd-video--play-button-color-icon-fill** - The icon fill color for the video play button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.\n- **poster-wrapper** - The `<div>` element wrapper around the poster slot.",
+          "description": "Used to wrap videos to provide basic styling.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\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 used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Properties:**\n - **--sd-video--play-button-color-background** - The background color for the video play button. _(default: undefined)_\n- **--sd-video--play-button-color-icon-fill** - The icon fill color for the video play button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.\n- **poster-wrapper** - The `<div>` element wrapper around the poster slot.",
           "doc-url": "",
           "attributes": [
             {